अपने दर्शकों के साथ प्रभावी संचार सुनिश्चित करने के लिए आसान चरणों के साथ अपनी वेबसाइट के लिए एक सरल संपर्क फ़ॉर्म बनाना सीखें।

संपर्क फ़ॉर्म वेबसाइटों का एक महत्वपूर्ण घटक हैं, जो उपयोगकर्ताओं को पूछताछ, प्रतिक्रिया या अनुरोध के साथ आप तक पहुंचने की अनुमति देते हैं।

यहां आप अपनी वेबसाइट के लिए एक बुनियादी संपर्क फ़ॉर्म बनाने की प्रक्रिया सीखेंगे। प्रोजेक्ट स्थापित करने से लेकर फ़ॉर्म सत्यापन और स्टाइलिंग जोड़ने तक, यह सुनिश्चित करना कि अंत तक आपके पास एक कार्यात्मक और सुखदायक संपर्क फ़ॉर्म हो।

परियोजना की स्थापना

कोडिंग शुरू करने से पहले, सुनिश्चित करें कि आपका विकास वातावरण तैयार है। अपना पसंदीदा टेक्स्ट एडिटर खोलें या अनुशंसित एकीकृत विकास वातावरण (आईडीई) में से एक पसंद विजुअल स्टूडियो कोड या उदात्त पाठ.

अपनी HTML और CSS फ़ाइलों को व्यवस्थित रखने के लिए एक प्रोजेक्ट फ़ोल्डर बनाएँ।

इस फ़ोल्डर में, HTML के लिए अलग फ़ाइलें बनाएं (Index.html) और सीएसएस (स्टाइल.सीएसएस). अंत में, अपनी CSS फ़ाइल को अपने HTML दस्तावेज़ में लिंक करें का उपयोग कर अनुभाग टैग।

HTML संरचना बनाना

किसी भी संपर्क फ़ॉर्म का आधार उसकी HTML संरचना होती है. यहां बताया गया है कि आप अपने संपर्क फ़ॉर्म के लिए आवश्यक HTML तत्व कैसे बना सकते हैं।

instagram viewer 

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

उपरोक्त HTML कोड एक फॉर्म तत्व बनाता है और संपर्क फॉर्म के लिए उपयोगकर्ता इनपुट प्राप्त करने के लिए कई इनपुट फ़ील्ड को नेस्ट करता है।

फिलहाल, आपका संपर्क फ़ॉर्म इस तरह दिखता है:

एक आकर्षक और उपयोगकर्ता-अनुकूल संपर्क फ़ॉर्म समग्र उपयोगकर्ता अनुभव को बढ़ाता है। नीचे दिया गया सीएसएस कोड बेहतर उपस्थिति के लिए संपर्क फ़ॉर्म को स्टाइल करने के लिए फ्लेक्सबॉक्स और सीएसएस बॉक्स मॉडल गुणों जैसे पैडिंग और मार्जिन का उपयोग करता है।

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}


body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}


main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}


h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}


form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}


.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}


.input__containerlabel { font-size: 1.6rem; }


.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

आपका संपर्क फ़ॉर्म अब इस तरह दिखता है:

फॉर्म सत्यापन लागू करना

उपयोगकर्ता द्वारा प्रदान की गई जानकारी की सटीकता और पूर्णता सुनिश्चित करना सर्वोपरि है। एक प्रभावी दृष्टिकोण शामिल है क्लाइंट-साइड फॉर्म सत्यापन के लिए जावास्क्रिप्ट का उपयोग करना. आरंभ करने के लिए, अपनी HTML फ़ाइल के अंत में एक स्क्रिप्ट टैग बनाएं और फ़ॉर्म तत्व को लक्षित करें।