Title : How To Add a Contact Form on a Blogger Blog
link : How To Add a Contact Form on a Blogger Blog
How To Add a Contact Form on a Blogger Blog
How To Add a Contact Form on a Blogger Blog
by Zaheer Khan..
Having a contact page on your blog is highly important. It is how visitors, brands, and companies can reach you and it’s something that every blogger should have. If sharing your email address on your blog is not your cup of tea, a contact form can serve as an easy way for others to get in touch.
If you do go the route of using a contact form, I do suggest that you also include an email address on the Contact page as well. You can set one up specifically for your blog if you don’t want your personal email address to be seen. The reason I believe this is so important to offer both options is because most brands and companies will not fill out a contact form to contact you. They usually want to email you through their own email client and add you to their contacts.
Adding a contact form to Blogger can be done with a few coding tweaks. Blogger actually offers a free contact form for your blog, unfortunately they’ve made it as a Gadget and placed it on the Layout page so that it is added to your sidebar. Not the ideal place for a contact form, if you ask me! It should be situated on its own page, so here’s how to set it up that way:
2. Now, visit your Customize > Edit HTML page.
Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type ContactForm then hit enter.
It should find the code below. Click the black down arrow to the left of:
3. You will see this code:
4. Do a new search, this time looking for ]]></b:skin> and pasting this code directly before it:
5. Save the template then go to Pages to create a new Contact page if you haven’t got one already. In the page editor, switch to HTML mode and paste the following:
Since this uses the Blogger Gadget interface, the emails sent using this form will be sent to the email associated with your account. You can change this email address in the Admin settings of your blog.
Adding a contact form to Blogger can be done with a few coding tweaks. Blogger actually offers a free contact form for your blog, unfortunately they’ve made it as a Gadget and placed it on the Layout page so that it is added to your sidebar. Not the ideal place for a contact form, if you ask me! It should be situated on its own page, so here’s how to set it up that way:
Adding a Contact Form to Blogger
Step 1 – First, go to the Layout page in Blogger and click an Add a Gadget link. From the popup, choose More Gadgets in the sidebar and then select Contact Form and add it. It doesn’t matter where it ends up in your sidebar right now, since we are going to modify that and make it look nice!2. Now, visit your Customize > Edit HTML page.
Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type ContactForm then hit enter.
It should find the code below. Click the black down arrow to the left of:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>then click the down arrow again beside:
<b:includable id='main'>if they are not already open.
3. You will see this code:
<b:includable id='main'>Delete everything shown in red so you should just be left with:
<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/>
<br/>
<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>
<br/>
<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>
<br/>
<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%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
<b:includable id='main'></b:includable>
4. Do a new search, this time looking for ]]></b:skin> and pasting this code directly before it:
/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
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: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}
5. Save the template then go to Pages to create a new Contact page if you haven’t got one already. In the page editor, switch to HTML mode and paste the following:
<div class="widget ContactForm" id="ContactForm1">6. Save your page and view your new contact form! It should look like this:
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<textarea class="contact-form-email-message" cols="25" 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" type="button" value="Submit" />
<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>
</div>
Since this uses the Blogger Gadget interface, the emails sent using this form will be sent to the email associated with your account. You can change this email address in the Admin settings of your blog.
How To Add a Contact Form on a Blogger Blog
That is all article How To Add a Contact Form on a Blogger Blog for this time, hopefully can provide benefits to you all. wait for the next article, And Thanks to the various sources that we Copas article without permission, I hope you can tolerate and understand each other.
You are now read the article How To Add a Contact Form on a Blogger Blog with the link url http://freshgamesreview.blogspot.com/2016/07/how-to-add-contact-form-on-blogger-blog.html
0 Response to " How To Add a Contact Form on a Blogger Blog "
Post a Comment