Blogger में Contact Form Page कैसे बनाये ?

How to Create Contact Form Page

नमस्कार दोस्तों अगर आप ने अपना खुद का ब्लॉग बनाया है और आप ने अभी तक उस पर contact form page add नहीं किया है तो यह post आप लोगो के लिए है. आज की इस पोस्ट में हम जानेगे की कैसे हम अपने blog पर contact us या contact form page add कर सकते है. लेकिन उससे पहले हमे यह जान लेना चाहिए की आखिर हमे हमारे ब्लॉग पर contact us page या contact form page क्यों add करना चाहिए.

दोस्तों क्या आपको पता है की आपके blog पर contact form होना बहुत जरुरी है. जिससे आपके blog पर आने वाले visitors, company owners आपसे direct contact कर सके. अगर आप visitors को बार बार अपना email address नहीं बताना चाहते हो तो आप को अपने blog में contact form add करना होगा. ये बहुत ही अच्छा तरीका है अपने blog पर visitors बढाने का blog में contact form add करने के लिए आपको बस थोड़ी सी coding setting करनी है. इस article में हम आपको बताएँगे की किस तरह से आप अपने blog में contact form add कर सकते है.

Blogger में Contact Form Page कैसे Add करें?

Step : 1

सबसे पहले दोस्तों आपको अपने blog के dashboard > layout पर जाना है. उसके बाद आप किसी भी जगह पर Add a Widget पर click करें. उसके बाद आपको More Gadgets option पर click करना है. उसके बाद Contact Form पर click कीजिये फिर save button पर click कर देना है.

yourpassion.in

Step : 2

फिर इसके बाद आपको अपने blog के dashboard > Theme > Edit HTML पर जाना है. इसके बाद आप code box में कहीं पर भी click कर के Ctrl+F दबाये और ये code search करें. <b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’> या फिर आप Jump to Widget पर click कर के ContactForm1 पर click भी कर सकते है.

yourpassion.in

Step : 3

इसके बाद आपको code के left side में एक छोटा सा arrow show हो रहा होगा. उस arrow पर click कर के full code को open कर लीजिये. उसके बाद आप अब आपको code <b:includable id=’main’> और </b:includable> इन दोनों के बीच में जो code है उसे delete कर देना है. basicaly ये तीन dot होते है.

yourpassion.in

<b:if cond='data:title != ""'>
<h2 class='title'>

<div class='contact-form-widget'>
<data:title/></h2>
</b:if>

<form name='contact-form'>
<div class='form'>
        <p/>

        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<data:contactFormNameMsg/>        
        <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/>

<b:include name='quickedit'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
</div>
</form>
</div>

</div>

3. अगर आपको ये coding समझ न आये तो आप इस image को follow कीजिये।

Step : 4

फिर उसके बाद अब आप ]]></b:skin> ये code search कीजिये. उसके बाद निचे box में जो code दिया गया है उस code को copy कर के ]]></b:skin> के ऊपर paste कर दीजिये. फिर उसके बाद Save Template पर click करके settings को save कर दीजिये.

/* Contact smi*/

.contact-form-widget {
margin-left:auto;

width: 400px;
margin-right:auto;
max-width: 50%;

.fm_name, .fm_email {
padding: 0px;
color: #000;
}
float:left;

padding:5px;
padding:5px;
width:48%
}
.fm_message {
}

max-width: 50%;
.contact-form-name, .contact-form-email {
width: 50%;
margin-bottom: 10px;

width:100%;
height:30px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {

.contact-form-button-submit {
max-width: 80%;
height:200px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}

margin-bottom: 10px;
border-color: #f9f9f9;
background: #1aeb00;
color: #222;
width: 100%;
max-width: 20%;
height:30px;

border: 2px solid #222;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #f56c7e;
color: #444;

}

Step : 5

इसके बाद दोस्तों आपको अपने blog पर एक new page बनाना है. हम आपको यहाँ पर दो तरह के contact form बता रहे है. आपको जो अच्छा लगे आप उस तरीके को follow कर सकते है. सबसे पहले आपको Blog के dashboard > Pages > New Page पर click करना है. उसके बाद निचे दिया गया code को copy कर लीजिये.

yourpassion.in

<script>

var blogId = 'http://yourpassion.in/';//replace it the text with your blogID
//The below message 5 Strings can also be edited

var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageSendingMsg ='Sending...';

var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';

if(widgetLoaded== false) {
var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;
function sendEmailMsg() {

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

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

उसके बाद blog के menu में HTML option होगा उस पर click कर के copy किये code को paste कर दीजिये. code paste करने के बाद आपको हमारे website की link की जगह अपने blog का url add कर दीजिये. उसके बाद आपको page publish कर देना है. अगर आपको इस post को समझने में किसी भी तरह की कोई problem आती है तो आप हमे comment में बता सकते है. हमे आप लोगो की मदद करके बहुत ख़ुशी होगी.

yourpassion.in

उम्मीद है दोस्तों आपको यह पोस्ट अच्छे से समझ आ गया होगा और यह आपके लिए काफी मददगार भी होगी. हमारे इस पोस्ट को अपने दोस्तों के साथ सोशल मीडिया पर जरुर शेयर करे ताकि वो लोग भी इसी तरह की नई नई जानकारी से अवगत रहे.

इसी तरह की और भी लेटेस्ट informational आर्टिकल पढने के लिए आप हमारे ब्लॉग को सब्सक्राइब कर सकते है. जब भी कोई नई पोस्ट हम publish करेंगे तो उसका notification आपको मिल जायेगा. यह सुविधा पूरी तरह से फ्री है.