Header Ads Widget

How To Convert Blogger Contact Form in A Contact Page

In the last tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also add a Blogger contact form to a Contact us 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.

Sometimes, we don't want to show a contact form widget at the blogger sidebar or elsewhere, So this post will help you to how to hide the contact form widget and create a contact us page with official blogger contact us widget. This style works good and all messages send to your blogger email box.Also you can add multifunction contact us widget like the upload option.  

Hiding Contact Form From Your Sidebar

First, you need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search ]]></b:skin> and paste below 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, on your blank page, click on the HTML option to switch to HTML editor mode. Add the 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.
You can change Name, Email, and Email Message in your own words like your good name to name.
If you are facing any difficulty in adding this widget or its not work properly please feel free to contact us or use another method to create contact us page with official blogger contact us form.

Post a Comment

0 Comments