WordPress Blog Aur Blogger Blog Me Contact Form Ko Kaise Add Kare

WordPress Blog Aur Blogger Blog Me Contact Form Ko Kaise Add Kare : contact form ek aisa form hota hai, jis me koei bhi visitors apna name, email, subject aur message ko enter karke direct blog admin se sampark kar sakta hai. lagbhab har blogger apne blog / website me ContactForm ko add karta hai. Es ko add karne ke liye hame sabse pehle ek ContactUs name se page banana padta hai. phir ham es page me ContactForm ko add kar sakte hai.

Agar aap bhi ek blogger hai. aur aapne bhi abhi tak apne blog / website me ContectForm ko add nahi kiya hai, to es post ko carefully padhe. Kyuki es post me ham janege ki wordpress blog aur blogger blog me contact form ko kaise add karte hai.

WordPress blog me contact form ko kaise add kare

WordPress blog me ContactForm ko add karna bahut hi easy hai. ham ek plugin ki help se apne blog ke ContactUs page me ContactForm ko add kar sakte hai.

Step 1 : click on add new option

Sabse pehle hame wordpress dashboard par show ho rahe plugins ke options par mouse ke curser ko le jakar add new button par click karna hoga. new plugins add karne ke liye ek page open hoga.

Step 2 : search plugins

Es page me hame ‘contact form 7’ naam ke plugin ko search karna hoga. eske liye search box me contact form 7 likhe.

Step 3 : click on install button

ContactForm7 plugin show hote hi ‘install now’ button par click kare. Kuchh hi second me ye plugin hamare wordpress blog me install ho jayega.

Step 4 : click on activate button

Es plugin ke install hote hi hame install now button ki jagah activate button show hoga. Ab es activate button par click kare. Turant hi plugin activate ho jayega.

Step 5 : contact option

ContactForm 7 plugin ko apne wordpress blog me activate karte hi hame apne dashboard par ek ‘contact’ option show hoga.

1. Contact option par click kare
2. Contact option par click karte hi hame ‘contact form 1’ show hoga
3. Hame contact form 7 ke theek samne show ho rahe shortcode ko select karke copy karna hai.

Step 6 : edit contact us page

Ab hame apne wordpress dashboard par pages option par click karke ContactUs page ko edit karna hoga.

1. Pages option par click kare
2. ContactUs page ke neeche edit button par click kare

Step 7 : paste shortcode

ContactUs page ke neeche edit button par click karte hi, hamare blog ka ContactUs page open hoga.

1. Aap apne ContactUs page me jis jagah ContactForm ko show karna chahte hai, ous jagah copy kiye huwe ContacForm1 ke shortcode ko paste kare.
2. Ab update button par click kare.
3. Update button par click karte hi hamare ContactUs page me ContactForm show hone lagega. Jise ham apne ContactUs page ke permalink par click karke dekh sakte hai.

Step 8 : contact form

Permalink par click karte hi hamare blog ka ContactUs page open ho jayega. Jisme ham ContactForm ko dekh sakte hai. ab jab bhi koei visitors ContactForm ke through hamse sampark karna chahega, to ouse kuchh detail fill karni hogi.

1. Name enter karna hoga
2. Email enter karn hoga
3. Subject enter karna hoga
4. Message enter karna hoga
5. Ye charo cheese enter karne ke baad send button par click karte hi hamare email address par message aa jayega.

Blogger blog me contact form ko kaise add kare

Blogger blog me ContactForm ko add karna bhi bahut easy hai. lekin wordpress blog ki tulna me blogger blog me ContactForm ko add karna  thoda mushkil kaam lagta hai. kyuki esme hame kuchh coding karni hoti hai. waise, agar dhiyan se kare to ye bhi easy hai.

Step 1 : click on layout and add a gadget

Blogger blog me ContactForm ko add karne  ke liye hame sabse pehle blog dashboard par…

1. layout option par click karna hoga.
2. sidebar ya footer me add a gadget option par click karna hoga.

Step 2 : add contact form gadget

Add a gadget ke option par click karte hi hame basics, more gadgets, aur add your own ke option show honge.

1. Enme se hame more gadget ke option par click karna hai.
2. More gadget ke option me hame bahut sare gadgets show honge. Hame enme se contact form ko add karne ke liye, es gadget ke samne plus ke mark par click karke save button par click karna hai.

Step 3 : edit theme

ContactForm ko save karne ke baad hame apne blog dashboard par…

1. Theme option par click karna hoga
2. Edit html par click karna hoga

Step 4 : click on contact form 1

Edit html par click karne ke baad hamre samne theme ke sare code show hoge. Es page par hame…

1. Jump to widget par click karna hai
2. ContactForm1 par click karna hai

Step 5 : open contact form code

ContactForm1 par click karte hi ham direct CotactForm ke codes par pahunch jayege. Yahan hame arrow ke mark par click karke poore code ko open karna hoga.

Step 6 : delete code

ContactForm ke full code me se hame <b:includable id=’main’>  aur </b:includable> ke  beech ke code ko delete karna hoga. Ye code kafi long hota hai. oupar image me 2 red colour ki line ke beech me wo code hai, jise hame delete karna hai. neeche code box me bhi aap es code ko dekh  sakte hai, jise hame delete karna hai.

<b:if cond='data:title != &quot;&quot;'>
 <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
 <p/>
 <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
 <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
 </div>
 </form>
 </div>
 </div>
 <b:include name='quickedit'/>

Step 7 : search ]]></b:skin> code

Code ko delete karne ke baad hame theme ke code box me click karke…

1. keyboard se ctrl+f button ko press karke ]]></b:skin> code ko find karna hai.
2. Aur neeche diye gaye code box ke code ko copy karke ]]></b:skin> ke oupar paste karna hai.
3. Ab save theme ke button par click karna hai.

/* Contact AbcBig*/
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 450px;
max-width: 60%;
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: 70%;
max-width: 70%;
margin-bottom: 10px;
height:35px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 90%;
height:150px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #f9f9f9;
background: #00ff0c;
color: #161616;
width: 50%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #f40020;
color: #000000;
border: 1px solid #222222;
}

Step 8 : edit contact us page

Theme ko save karne ke baad hame blog dashboard par…

1. Pages ke option par click karna hai
2. ContactUs page ke neeche edit option par click karna hai

Step 9 : paste code

Edit option par click karte hi ContactUs page open hoga. Es page me hame…

1. Html par click karna hai.
2. Ab Neeche diye gaye code ko copy karke html section me sabse neeche paste karna hai. lekin es code ko paste karne ke baad ya pehle hi, es code me se meri blogger blog id 1227976565787663770 ko remove karke apne blogger blog ki id ko enter zaroor kare.
3. Ab Update button par click karke page ko update kare.

<script>
var blogId = '1227976565787663770';//replace it the text with your blogID
//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>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></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: 450px; text-align: center; width: 100%;">
<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>

Es code ko html section me enter karke page update karne ke baad blogger blog me hamara ContactForm add ho jayega.

Step 10 : click on view option

ContactForm ko dekehne ke liye hame apne blog dashboard par pages option me jakar ContectUs page ke neeche view option par click karna hoga.

Step 11 : Contact Form

view option par click karte hi ham apne ContactUs page me ContactForm ko dekh sakte hai. es ContactForm ke throug kise bhi readers ko hamse sampark karne ke liye…

1. name enter karna hoga
2. email address enter karna hoga
3. message enter karna hoga

en teeno ko add karne ke baad send button par click karna hoga. send button par click karte hi blog admin ke email address par message sent ho jayega.

mai oummeed karta hun ki aap es post ko padh kar blogger aur wordpress blog me ContactForm ko add karna jaan gaye hoge. agar aap eske alwa kuchh aur contact form ke baare knowledge rakhte hai, to comment ke through share kare.

Finally es post me hamne jana ki wordpress blog me contact form ko kaise add karte hai. aur blogger blog me contact form ko kaise add karte hai.