Contact Form

📘 Contact Form Kya Hai?

Hindi: Contact Form website ka ek important section hota hai jahan visitor apni information aur message bhej sakta hai.

English: A Contact Form allows website visitors to send their information and messages to the website owner.

💡 Contact Form Kyu Use Karte Hain?

Contact Form ka use:

• Customer se contact information lene ke liye
• Business enquiries ke liye
• Website visitors ke messages ke liye
• Service requests ke liye
• Feedback lene ke liye

1️⃣ Basic Contact Form

Sabse pehle ek simple contact form banate hain.

<form>

    <label>Name</label>

    <input type="text"
    placeholder="Enter your name">


    <label>Email</label>

    <input type="email"
    placeholder="Enter your email">


    <label>Message</label>

    <textarea
    placeholder="Enter your message">
    </textarea>


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

</form>

2️⃣ Label Ka Use

<label> user ko batata hai ki input field mein kya information enter karni hai.

<label for="name">
    Your Name
</label>

<input
    type="text"
    id="name"
    placeholder="Enter your name">

Label ko input ke id ke saath connect karna useful hota hai.

3️⃣ Contact Form Input Types

Different information ke liye different input types use kar sakte hain.

<input type="text"
placeholder="Your Name">

<input type="email"
placeholder="Your Email">

<input type="tel"
placeholder="Your Mobile">

<input type="text"
placeholder="Subject">

4️⃣ Message Textarea

Long message lene ke liye <textarea> ka use kiya jata hai.

<textarea
rows="6"
placeholder="Write your message">
</textarea>

5️⃣ Submit Button

Form submit karne ke liye button use kar sakte hain.

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

CSS ki help se button ko professional design diya ja sakta hai.

6️⃣ Contact Form Styling

CSS se form inputs ko clean aur professional look diya ja sakta hai.

.contact-form{
    max-width:600px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:13px;
    margin-bottom:15px;
    border:1px solid #d5dce5;
    border-radius:8px;
}

.contact-form button{
    padding:13px 22px;
    background:#00d9ff;
    border:none;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
}

💻 Complete Professional Contact Form

Ab HTML aur CSS ko combine karke complete Contact Form banate hain.

<!DOCTYPE html>

<html>

<head>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial;
    background:#f5f7fa;
}

.contact-form{
    max-width:600px;
    margin:50px auto;
    padding:30px;
    background:white;
    border-radius:15px;
}

.contact-form h2{
    margin-bottom:20px;
}

.contact-form label{
    display:block;
    margin-bottom:6px;
    font-weight:bold;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:13px;
    margin-bottom:16px;
    border:1px solid #d5dce5;
    border-radius:8px;
}

.contact-form textarea{
    min-height:140px;
    resize:vertical;
}

.contact-form button{
    padding:13px 22px;
    background:#00d9ff;
    border:none;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
}

</style>

</head>

<body>

<form class="contact-form">

    <h2>
        Contact Us
    </h2>

    <label>
        Name
    </label>

    <input
        type="text"
        placeholder="Enter your name"
        required>


    <label>
        Email
    </label>

    <input
        type="email"
        placeholder="Enter your email"
        required>


    <label>
        Mobile
    </label>

    <input
        type="tel"
        placeholder="Enter your mobile">


    <label>
        Message
    </label>

    <textarea
        placeholder="Write your message"
        required></textarea>


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

</form>

</body>

</html>

7️⃣ required Attribute

Kisi field ko compulsory banane ke liye required attribute use kar sakte hain.

<input
    type="email"
    placeholder="Your Email"
    required>

User field empty chhodkar form submit nahi kar payega.

8️⃣ JavaScript Se Form Handle Karna

JavaScript ki help se form submit hone par custom action perform kar sakte hain.

<form id="contactForm">

    <input
        type="text"
        id="name"
        placeholder="Your Name"
        required>

    <button type="submit">
        Send
    </button>

</form>

<script>

const form =
document.getElementById("contactForm");

form.addEventListener("submit", function(event){

    event.preventDefault();

    alert("Message received!");

});

</script>

🔗 Form Data Kahan Jayega?

HTML form sirf form ka structure banata hai. Real website mein form data ko save ya send karne ke liye JavaScript ke saath backend, database ya kisi form service ki zarurat ho sakti hai.

⚠️ Important Note