Blogger Me Contact Form Page Kaise Banate Hai

Blogger Me Contact Form Page Kaise Banate Hai 

 Aapke blog me contact form hona bahut jaruri hai. jisse aapke visitors, company owners aapse direct contact kar sake. agar aap visitors ko bar bar apna email address nahi btana chahata hai to aap apne blog me contact form add karo ye bahut hi acha tarika hai. visitors badhane ka. blog me contact form add karne ke liye aapko bas thodi si coding setting karni hai. is article me mai aapko isi ka tarika bta raha hu. aap mujhe follow kar sakte hai.

 

Blogger Me Contact Form Page Kaise Add Karte Hai?

Step 1

1. apne blog ke dashboard me jaye or layout par click kare.

2. ab kahi bhi Add a Widget par click kare.

1. More Gadgets option par click kare.

2. Contact Form ke samne + par click kare.

3. save button par click kare.

Step 2

Ab apne blog ke dashboard >> Template >> Edit HTML par jaye.

1. code box me kahi bhi click karke Ctrl+F dabaye or ye code search kare.

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

ya fir aap Jump to Widget par click karke ContactForm1 par click kare.

http://adf.ly/1P2Zu7

1. code ke left side me arrow par click kar ke full code open kare.

2. ab  <b:includable id='main'> or </b:includable> ke beech me jo code hai use delete karo.

 <b:if cond='data:title != ""'>
    <h2 class='title'>
<data:title/></h2>
</b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>

3. agar samajh na aaye to is photo ko follow kare.

http://adf.ly/1P2Zu7

Step 4 

1. Ab ]]></b:skin> ye code search kare.

2. ye code copy karke ]]></b:skin> ke upar paste kare.

/* Contact LOVE4ME-LOVE2ME.BLOGSPOT.COM*/

.contact-form-widget {

margin-left:auto;

margin-right:auto;

width: 400px;

max-width: 50%;

padding: 0px;

color: #000;

}

.fm_name, .fm_email {

float:left;

padding:5px;

width:48%

}

.fm_message {

padding:5px;

}

.contact-form-name, .contact-form-email {

width: 50%;

max-width: 50%;

margin-bottom: 10px;

height:30px;

padding:10px;

font-size:16px;

}

.contact-form-email-message {

width:100%;

max-width: 80%;

height:200px;

margin-bottom:10px;

padding:10px;

font-size:16px;

}

.contact-form-button-submit {

border-color: #f9f9f9;

background: #1aeb00;

color: #222;

width: 100%;

max-width: 20%;

margin-bottom: 10px;

height:30px;

font-size:16px;

}

.contact-form-button-submit:hover{

background: #f56c7e;

color: #444;

border: 2px solid #222;

}

 

3. Save Template par click kare.

Step 5

Ab aapko new page banana hai. mai aapko yaha par do tarah ke contact form bta raha hu aapko jo acha lage  follow kare. 

1. Blog ke dashboard >> Pages >> New Page par click kare.

 

2. Ab ye code copy kare.

<script>var blogId = '2813306721734971596';//this number should be mandatorily edited. //The below message 5 Strings can also be edited var contactFormMessageSendingMsg ='Sending...'; var contactFormMessageSentMsg = 'Your message has been sent.'; var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.'; var contactFormEmptyMessageMsg ='Message field cannot be empty.'; var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false; function sendEmailMsg() { if(widgetLoaded== false) { _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); widgetLoaded=true; document.getElementById('ContactForm1_contact-form-submit').click(); } return true; } </script>
<br /> <form name="contact-form"> <div> <h2 style="text-align: left;"> <span style="color: #444444;">CONTACT US:-</span></h2> <h4 style="text-align: left;"> </h4> <div> <br /></div> <br /> <br /> Your Name : </div> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onfocus="this.value=''" size="30" type="text" value="Enter Your Name" />
<br /> <div> Your Email: <em></em></div> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onfocus="this.value=''" size="30" type="text" value="Enter Your Email" />
<br /> <div> Your Message: <em></em></div> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">Enter Your Message Here...</textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<br /> <div style="max-width: 300px; text-align: center; width: 50%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div>

 

3. HTML par click kar ke code paste kar de. 

4. code paste karne ke bad 2813306721734971596 ID ki jagah apne blog ki id set kare or page publish kar de