- In the previous 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.
- 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.
- 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;
}Code language: CSS (css)
- Save your template.
- 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
<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='submit' />
<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>Code language: HTML, XML (xml)
- That’s it! You can also customize the contact form with custom CSS styling or jQuery.
0 Comments