Contact Us Form Page Kaise Banate Hai Blog Me

Dosto contact form aapke blog ya website ke liye bahut jaruri hai taaki aapke visitors aapse contct kar sake. Kai blog par padi contact form banane ki trick kaam nahi karti hai jab ki mai ye trick test karke he aapko bata raha hu taaki aapko apne blog ke liye contact form banane me koi dikkat na ho.

aaj hum aapko babate hai ki apne blog ke liye Contact Form Kaise Banaye ya apne blog me contact form kaise add kare.

Blogger (Blog) Me Contact Form Kaise Banate Hai

Step 1:-

• 1. Sabse Pehle Blogger.com par Sign In Kare.
• 2. Ab apne blog ke Dashboard mein jaaye.
• 3. Uske baad Layout par click kare.
• 4. Add a Widgt par click kare.

Ab Aage

• 1. More Gadgets par click kare.
• 2. Plus Sign par click karke add kar de uske baad Save kar de.

Step 2:-

Ab Apne blog ke Dashboard mein jakar Template par clcik kare.

Uske Baad Edit HTML par click kare.

Dashboard >> Template >> Edit Html Code

Ab Code Box mein kahi bhi click karke Ctrl+ F dabaye aur ye code search kare jo niche likha hai-

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

ya phir

• 1. Jump To Widgt par click karke.
• 2.  ContactForm1 par Click Kare

1. Dosto Ab Code ke Left Side mein ek aero hoga uss par click kare. Agar na samajh mein aaye toh niche wali image ko follow kare.

Ab Dosto <b:includable id='main'> or </b:includable> ke bich mein 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/>
     
        <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>
     
        <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>
     
        <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%'>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>

3. Agar Ab Bhi aaapko samajh na aaya ho toh niche wali image ko follow karen.

Step 4:-

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

2. Niche diya hua CSS code Copy Karke ]]></b:skin> Iske ke Upar Paste kar de

/* Contact form code by MyHelpLive*/

.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 Templete par click kar de.

Step 5:-

Ab aapko ek naya page banana hoga.

Jiske liye aapko apne Dashboard mein jakar

1. Pages par click karna hoga.

2. New page par click kare.

Dashboard >> Pages >> New Page 

Ab ye Code Copy karke apne page ke HTML mode mein jakar Paste kare.

Note:- Dosto yahan mujhse bhi yahi Galti hui thi maine code Compose mode mein Paste kar diya tha. Lekin baad mein phir HTML mode mein daala tab jakar Contact Form Show Hua.

<script>
var blogId = '4130279652599861113';//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>

<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>
</div>

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" />

<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" />

<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" />

<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>

Note:- Dosto Upar Diye Hue Code Mein Mere Blog Ki ID 4130279652599861113 iski jagah aap apne blog ki Id daalna na bhulen.

Blog ki Id pata karne ke liye aap apne blog mein jakar Browser Ke Address Baar mein check kare.

All Code Credit To : Supportmeindia.com 

Ab aap apne contact form ka link apne template mein add kar de.

Agar aap link ko add nahi kar paa rahe hai toh meri next post jarur pade ki kaise page link ko footer ya template mein add karte hai.

Dekha kitna aasan hai contact form banana lekin dosto process thodi badi hai.

Mai aapko ek short trick bhi bataunga contact form banane ki woh bhi online tool ki help se.

Agar phir bhi koi dikkat hai toh comment jarur kare.

Dhanyawaad Dosto Humari Post Ko Padne Ke Liye !

• Tweet
• Share
• Share
• Share
• Share

Article By MyHelpLive Team

Dosto MyHelpLive Website Par Aapka Swagat Hai. MyHelpLive Ki Puri Team "Kya Hai, Kaise Kare, Hindi Me Help, Hindi Me Jankari, Health Ki Jankari, Film Industry Ki Jankari Hindi Me, Technology, Online Paise Kaise Kamaye and Day Special HD Wallpapers Aur Best Status" Se Related Article Likhati Hai. Agar Aapko Koi Special Jankari Chahiye Toh Aap Comment Kare.

Related Post