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:
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.
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>:
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:
That’s it! You can also customize the contact form with custom CSS styling or jQuery.
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:
<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.
Post a Comment Blogger Facebook
By visiting our website and accessing the information, resources, services, products, and tools we provide for you, either directly or indirectly, you agree to use these Resources only for the purposes intended as permitted by (a) the terms of this User Agreement, and (b) applicable laws, regulations and generally accepted online practices or guidelines.