Blogger Me Contact Form Page Kaise Banate Hai Full Guide In Hindi

9

Blog me other pages jaise about us, privacy policy, sitemap etc. ki tarah contact form page hona bahut kitna jaruri hai. Iske bare me un sabhi bloggers ko pta hai jinhe blogging me kaafi time ho chuka hai.

Agar aap ek newbie hai toh mai aapko btana chahuga ke contact form page se aap apne visitors ke sath direct connection bna sakte hai.

Apne blog me contact form page add karne ke liye aapko bas thodi si HTML CSS coding settings add karni hai. Jiska easy tarika mai aapko is article me bataunga.

blogger me contact form page kaise banaye

Blogger Me Contact Form Page Kaise Add Kare Ya Banaye

Step:-1

1) Apne Blogspot blog ke dashboard me jaye.

2) Layout par click kare.

3) Sidebaar me Add a Widget par click kare.

4) New window open hogi usme More Gadgets option par click kare.

contact form

5) Contact Form par click kare.

6) Finally save button par click kare.

Step:-2

Ab next step me apne blog ke dashboard >> template >> Edit HTML par jaye.

Template code box me kahi bhi click karke keyboard se Ctrl+F ek sath press kare. Jisse ek search box open hoga. Usme <b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’> code search kare.

find contact form attribute

Note:- Agar aapko upar diya code nahi milta toh direct Jump to Widget par click karke
ContactForm1 par click kare. Toh coding automatically highlight ho jayega.

Step:-3

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

2) Ab <b:includable id=’main’> se </b:includable> ke beech (between) me code ko delete kare.

editing blogger coding

3) Ab ]]></b:skin> code search kare aur neeche wala html css code copy karke ]]></b:skin> tag ke upar paste kar de.

/* Contact Missingideas*/
.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;
}

4) Finally save template par click kare.

Step:-4

Next step me ab aapko ek new page banana hai.

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

2) HTML par click kare.

select html view page

3) Ab neeche diya code copy kare aur paste kare.

<script>
var blogId = ‘7840898720197270281‘;//replace it the text with your blogID
//The below message 5 Settings 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>

Note:- Agar aapko blogger blog id nahi pat toh aap apne browser se le sakte ho. Example ke liye niche image me dekhiye.

finding blogger id

4) Html nox me code paste karne ke baad 78408987201972702812 ID ki jagah apne blog ki ID add karde.

5) Finally page publish kar de.

Ab aapka contact form page create ho chuka hai.

Agar is post se related aapko koi problem aaye to comment kar ke puch lijiye. Blogging related har tarah ki hindi me jankari apne email me pane ke liye aaj hi Missingideas blog ko subscribe kare.

Useful Articles You Must Read:-

9 COMMENTS

  1. Namaskar sir mai abhi ek naya blog banaya hai uske liye mujhe template shi nhi mil pa raha hai kripya mujhe ek achha template de dijiye please sir aur domen name kaise kharido mujhe nhi aaraha hai please sir bataye mai kafi din se paresan hu please sir help me mai apka bahut abhari rahunga .aur mere blog ko dekh lijiye ki kya usme kami hai mere blog ka address http://www.pgtpgblogspot.com hai.

  2. G sir main who template use krna chahta Hu Jo aap Kr the h Please aap bta de wo konsa template hai kyo Ki tha bhut se template show ho the h.
    Or isme main comment box kese add kru.
    1 or Ki main 1new blogger Hu to main apse kucch time tak Isi trh (by comments)help Lena chahuga please reply me…

  3. Hello sir
    Sir mujhe apki help.ki bilkul jarurt h I m a new bloger sir mera blog dusre blog jaisa bilkul nhi dikh rha mene three pages ABOUT US ,PRIVACY, CONTACT US add kiye lekin wo kuchh alg trh show Ho the h .
    Mene blog ko copyright © krne k liye (MYFREECOPYRIGHT)par search kiya lekin wo (ERROR 502 YA OFFLINE WEB) bol rha h .
    Mere blog me bhut weakness h aap use open Kr k jrur dhekhe please (thestudentmotive.blogspot.com) plz aap mujhe btaye Ki mujhe filhal kya krna jruri apne blog k liye or kya bina copyright © k posts add kru ya Ni please sir aap time nikal kar meri help kre. ha sir Mai apne smartphone se hi blog chala rha Hu Jo mene aapse puchh Kr hi bnaya h.

LEAVE A REPLY

Please enter your comment!
Please enter your name here