In last tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:
[alert style=”red”]Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.[/alert]
Hiding Contact Form From Your Sidebar
First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above ]]></b:skin>:
|
|
#ContactForm1{
display: none !important;
}
|
Save your template.
Adding Contact Form To A Page
Now, we will add the contact form to a static page of your Blogger blog. Navigate to your Dashboard > Posts, and click on New Page and select Blank Page.
Now, in your blank page, click on HTML option to switch to HTML editor mode. Add following code and publish your page:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
|
That’s it! You can also customize the contact form with custom CSS styling or jQuery.
About Creator/Author
Hax One Developers brings together the world's largest community of developers to discover, share, and build better software Webmasters From open source.
SOCIALIZE IT →