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

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. Neeraj Mishra says

    Hi, very good Article
    Thanks for sharing keep up the good work

  2. Lokesh kumar says

    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.

    1. Harpreet Kumar says

      Lokesh ji mere paas blogger ke liye Ribbon template hai, aap apna email dijiye, aapko template send kar dunga. Domain aap godaddy ya Bigrock site se kharid sakte hai, agar aapko domain kharidna nahi aata toh aap http://harpreetkumar.com/tag/domain/ posts padhe. Aapko help milegi. Apne blog ka URL change kare. Koi unique name rakhe. Blogger related information ke liye aap humari http://harpreetkumar.com/blogger/ par sabhi articles padhkar jankari parapat kar sakte hai.

  3. vinod sain says

    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…

    1. Harpreet Kumar says

      Aap mujhe apna email dijiye, aapko template bej deta hu

      1. vinod sain says

        Vin………[email protected]
        Please aap mujhe btaye Ki yh template add kese hoga or comment box bhi kese add hoga

        1. Harpreet Kumar says

          Comment publish karne se pehle mene aapki email ko edit kar fiye security ke liye, and template me comment box already hota hai.

          Blogger me template add karne ke liye aap Template section me jaye, fir backup par click kare, waha upload ka option hoga. Wahi se aap new template upload karke save karde.

  4. vinod sain says

    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.

    1. Harpreet Kumar says

      Vinod ji aap blogger par default Template use kar rahe ho. Aap pehle apne liye koi acha sa Template upload kare.

Leave A Reply

Your email address will not be published.