अपनी ब्लॉगर वेबसाइट में संपर्क पृष्ठ कैसे बनाएँ (How to Create a Contact Page in Your Blogger Website)

ब्लॉगिंग की दुनिया में, अपने पाठकों के साथ आसान संबंध (संपर्क) स्थापित करना सर्वोपरि है। एक संपर्क फ़ॉर्म एक अनिवार्य उपकरण के रूप में कार्य करता है, जिससे आगंतुक आपसे जुड़ सकते हैं, मूल्यवान प्रतिक्रिया प्रदान कर सकते हैं, प्रश्न पूछ सकते हैं या संभावित सहयोग का पता लगा सकते हैं। इस लेख का उद्देश्य फॉर्म सबमिशन को आसान बनाने के लिए डिज़ाइन किए गए एक सहज और विश्वसनीय प्लेटफ़ॉर्म FormSubmit.co का उपयोग करके आपकी ब्लॉगर वेबसाइट में एक संपर्क फ़ॉर्म को एकीकृत करने की प्रक्रिया के माध्यम से आपका मार्गदर्शन करना है। FormSubmit.co का लाभ उठाकर, आप सहजता से अपनी ब्लॉगर वेबसाइट में एक संपर्क फ़ॉर्म शामिल कर सकते हैं और अपने पाठकों से संदेशों का सहज प्रवाह सुनिश्चित कर सकते हैं।

अपने ब्लॉगर वेबसाइट पर फॉर्म जोड़ने के लिए

1. अपने ब्लॉगर खाते में लॉग इन करें और अपनी वेबसाइट के डैशबोर्ड पर जाएं।

2. एक नया पेज बनाने के लिए डैशबोर्ड के Page Section में जाये।

3. Contacts Us Title का पेज बनायें ,HTML मोड पर स्विच करें । नीचे दिए गए HTML कोड को कॉपी करें और HTML एडिटर में पेस्ट करें।

<div class="my-contact-form">

  <form

    action="https://formsubmit.co/c56b12aa92f6a2732f0ed726d53645d2"

    method="POST"

    id="contact-form"

  >

    <div>

      <label class="my-contact-form-label" for="name">Name:</label>

      <input class="my-contact-form-input" type="text" id="name" name="name" required />

    </div>

    <div>

      <label class="my-contact-form-label" for="email">Email:</label>

      <input class="my-contact-form-input" type="email" id="email" name="email" required />

    </div>

    <div>

      <label class="my-contact-form-label" for="message">Message:</label>

      <textarea class="my-contact-form-input" id="message" name="message" required></textarea>

    </div>

    <input type="hidden" name="_captcha" value="false" />

    <input type="hidden" name="_template" value="table" />

    <input

      type="hidden"

      name="_next"

      value="https://drgp82.blogspot.com/p/thank-you.html"

    />

    <button class="my-contact-form-btn" type="submit">Send</button>

  </form>

</div>

<style>

  .my-contact-form{

display: flex;

align-items: center;

justify-content: center;

width: 100%;

}

.my-contact-form form{

  width: 100%

}

.my-contact-form-label{

    display: block;

    font-weight: 600;

    font-size: 16px;

    color: #07074d;

    margin: 12px 0;

}

.my-contact-form-input{

    width: 100%;

    padding: 12px 0px !important;

    text-indent: 10px !important;

    border-radius: 6px !important;

    border: 1px solid #e0e0e0 !important;

    background: white !important;

    font-weight: 500 !important;

    font-size: 16px !important;

    color: #6b7280 !important;

    outline: none !important;

    resize: none !important;

}

.my-contact-form-input:focus{

  border-color: #6a64f1 !important;

  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important;

}

.my-contact-form-btn {

    text-align: center;

    font-size: 16px;

    border-radius: 6px;

    padding: 14px 32px;

    border: none;

    font-weight: 600;

    background-color: #6a64f1;

    color: white;

    width: 100%;

    cursor: pointer;

  margin-top: 12px;

}

.my-contact-form-btn:hover {

    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);

}

</style>

4. action="https://formsubmit.co/c56b12aa92f6a2732f0ed726d53645d2" को action="https://formsubmit.co/youremail@email.com" से बदले और (youremail@email.com) जहां लिखा है वहां अपने email@email.com को डालें। 

5. आपको एक दूसरा पेज बनाना होगा । एक नया पेज बनाने के लिए डैशबोर्ड के Page Section में जाये।

6. Thank You Title का पेज बनायें ,HTML मोड पर स्विच करें । नीचे दिए गए HTML कोड को कॉपी करें और HTML एडिटर में पेस्ट करें।

<div class="content">

  <div class="wrapper-1">

    <div class="wrapper-2">

      <h2 class="thank-you">Thank you !</h2>

      <p>Thanks for email us.<br /> We will reply you very soon.</p>

      <a class="button" href="YOUR BLOG URL HERE">Go To Home</a>

    </div>

  </div>

</div>

<style>

 @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

  .pTtl{

  display:none;

  }

    .wrapper-1{

    width:100%;

    height:100vh;

    display: flex;

  flex-direction: column;

      border-radius: 15px;

  }

  .wrapper-2{

    padding :30px;

    text-align:center;

  }

  .thank-you{

      font-family: 'Kaushan Script', cursive !important;

    font-size:4em;

    letter-spacing:3px;

    color:#5892FF ;

    margin:0 !important;

    margin-bottom:20px;

  }

  @media (min-width:600px){

    .content{

    max-width:1000px;

    margin:0 auto;

  }

    .wrapper-1{

    height: initial;

    max-width:620px;

    margin:0 auto;

    margin-top:50px;

    box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);

  }

}

</style>

7. <a class="button" href="YOUR BLOG URL HERE">Go To Home</a> लाईन के HTML कोड के अंदर अपना होमपेज URL बदलना न भूलें।

8. अब आपको Contacts Us के पेज में HTML मोड पर स्विच करना है और वहां आपको value="https://drgp82.blogspot.com/p/thank-you.html"/> में अपने पृष्ठ के url से बदलना है।

पृष्ठ परीक्षण!

अपना संपर्क फ़ॉर्म खोलें। उस फॉर्म को भरें और सबमिट करें। आपको अपने ईमेल पर एक एक्टिवेशन ईमेल मिलेगा जो आपने अपने कॉन्टैक्ट फॉर्म के अंदर दिया है। इसे अभी सक्रिय करें। सक्रिय करने के बाद आप अपने blogger  में  Contacts Us पेज को  HTML मोड पर स्विच करें , जहां आप अपने action="https://formsubmit.co/youremail@email.com" में जो आपका youremail@email.com के जगह में अपना email id डालें थे उसे आपके मेल बाक्स में आये कोड से रिप्लेस कर दे कोड कुछ इस तरह (c56b12aa92f6a2732f0ed726d53645d2) का होगा

हुर्रे! अब आपका संपर्क डेटा तैयार है।