Connect with Us for More Information Code

தொடர்பு என்பது இணையதளங்களுக்கான ஒரு முக்கிய கருவியாகும், இது பயனர்களுக்கு கேள்விகள், கருத்துகள் அல்லது ஆதரவுக்காக அணுகுவதற்கான வாய்ப்பினை வழங்குகிறது. இது இணையதள உரிமையாளர்கள் மற்றும் அவர்களின் பார்வையாளர்களு கிடையேயான நேரடி தொடர்பு சேனலாக செயல்படுகிறது.

Code Contact form

CSS Code

.contact-form {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: auto;
        }
        .contact-form h2 {
            margin-bottom: 20px;
            color: #333;
        }
        .contact-form label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .contact-form button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        .contact-form button:hover {
            background-color: #45a049;
        }
 

HTML

<div class="contact-form">
    <h2>Contact Us</h2>
    <form id="form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>

        <button type="submit">Send Message</button>
    </form>
</div>
 

script

document.getElementById("form").addEventListener("submit", function(event) {
        event.preventDefault(); // Prevent form submission
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const message = document.getElementById("message").value;

        // Basic validation
        if (name && email && message) {
            alert("Thank you for your message, " + name + "!");
            // Here you can add code to actually send the form data to your server
        } else {
            alert("Please fill out all fields.");
        }
    });
 

Preview code 👇

Contact Us

Name: Email: Message:

முடிவு

பயணிகள் எளிதாக தொடர்பு கொள்ளும் முறையைக் கொடுத்து, நிறுவனங்கள் வாடிக்கையாளர் திருப்தியை மேம்படுத்தவும், அவர்களின் பார்வையாளர்களுடன் வலுவான உறவுகளை உருவாக்கவும் முடியும்.