How to add default blogger contact form to a page.


Adding a contact form on the blogger website is a bit difficult task. Currently, the blogger doesn't have a straightforward approach for integrating the widget to the page directly. While integrating the contact form to my blog I have experienced several difficulties. I have found a workaround solution to integrate contact form in the blog in an elegant way.

Most of the bloggers are using third party contact forms like 123contactform to use in their blog. In my aspect, the blogger default contact form is the best option available to integrate into your blog. 

blogger contact form, default blogger contact form.
Default Blogger Contact Form

There are several advantages of using the blogger contact form, one is the validations to the inputs. This contact form has validation to check the user has entered the email address and message. This is an add on feature to prevent spam by restricting the user to input the proper email address and message to send. Once the message is successfully sent the user will be notified with the success message. Another advantage is it's lightweight and easy to use.

Below are the validations displayed in the blogger contact form - 
Email Validation message displayed in the blogger contact form - logicbraceMessage Validation for the blogger contact form - logicbrace
Successful message in the blogger contact form - logicbrace


If you want to demo the default blogger contact form click on our contact us page. We are using the same blogger contact form but spiced up with some user interface customization to look better. If you like our contact us page comment below, I will be sharing the contact form design with you. 

Below are the steps involved to integrate the contact form in your blog. If you are experiencing any trouble in the below steps feel free to contact me in the comment section.


Adding Default Contact Form in Blogger


  • Go to www.blogger.com. Log in with your credentials and choose the blog you want to create a contact form.
  • Click on the Layout option in the left menu in blogger.
How to add default blogger contact form to a page.


  • In the below image, you can see a sidebar-right-1 title. Click on the Add a Gadget option below the sidebar-right-1.
How to add default blogger contact form to a page - logicbrace


  • Then this will be redirected to the page with a list of gadgets. From the list, choose the contact form widget and click save.
contact form widget blogger - logicbrace

  • The contact form gadget will be added to the sidebar then click save. Open your blog in the browser and you will be able to see the contact form in the sidebar.
contact form widget selecting in the blogger dashboard - logicbrace


Copy the below code and make some CSS change in the blogger template


  • Click on the Theme option.
  • Click on the arrow near the customize option.
  • Select the Edit Html option from the pop-up menu.
Editing the Contact form html code for blogger



  • Search for <head>, remove the double quotes from the below line and copy under the head tag, and save it.
"<style>.ContactForm{display:none}</style>"

Editing style for contact form in blogger dashoard - logicbrace



  • After this code change, the contact form added in the sidebar will be hidden.

Create a page to display the Contact Form


  • Click the New Page option.
Creating a new page for integrating contact form - logicbrace

  • Copy the below contact form code.

<div class="widget ContactForm" data-version="1" id="ContactForm1" style="display: block;">
<h2 class="title">Contact Form</h2>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p>
Name
<br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text"
value=""/>
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30"
type="text" value=""/>
<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"
type="button" value="Send"/>
<p></p>
<div style="max-width: 222px; text-align: center; 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>
</div>
</div>
<div class="clear"></div>
</div>

  • Add the title of the page > select Html View > paste the above code > save it. Saving the contact form code for blogger- logicbrace
  • After saving the page, you will be able to see the contact form on the page.
default blogger contact form - logicbrace

  • After submitting the contact form the mail will be triggered to the blog admins. Find the attached sample mail below.
blogger contact form mail - logicbrace

Hope everyone is able to create a contact form in blogger. If you are experiencing any troubles in the above steps please mention in the comment section, I could help you out. We are planning to create some customize user interface changes[beautify] to the current created contact form. Visit us again.




No comments:

Powered by Blogger.