Blogging Tips

How To Add Blogger Contact Form

Sharing is caring!

If you want to add a blogger contact form on your own blogger, I would show you the step that would help you in creating your contact form.

This involves writing and adding code to your template, though it is very simple to do. Unlike WordPress which you can use a plugin like Contact Form, Elementor Page Builder to create your contact form, blogger involve you adding codes to yourtheme. This is why most of the time, you see blogger showing their email address because of the inability to add blogger contact form to their blog.

If you are thinking of creating your own personal blog, you can use blogger to create your own blog ranging from personal dairy, food blog, photography blog and soon. You can use blogger to create your blog.  

  1. Log in to your blogger dashboard, navigate to layout and add contact page widget to your blog theme. Go to dashboard>post and click on new page.
  2. Hide the contact form widget from your blog sidebar by adding this code to your blog theme above the ]]></b:skin>:

#ContactForm1{

display: none ;

}

  • In your blank page, click on html text to write your code, this turn your code to simple text.
  • Add the following code to your blank 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

/>

Related Post

<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>

Francis Ogunyinka

Leave a Comment

View Comments

  • Thanks for the info. I did have a hard time putting a subscription form. I signed up in Mailchimp and till now I couldn't have my landing page posted on my wordpress. Then finally found the subscription form widget, which was very easy. Thanks for sharing this, very helpful to all bloggers.

Share
Published by
Francis Ogunyinka

Recent Posts

Win M&S e-Gift Card worth £120

Stand a chance to win M&S e-Gift Card worth £120 when you participate in UK… Read More

1 week ago

Hiring Help Around The House: Why I Did It?

We all need help sometimes. When you have a busy life with work, kids, and… Read More

1 week ago

What Are the 7 Signs That You Need a New Website?

Here are 7 signs that you need a new website. The success of moving a… Read More

1 week ago

Aura Print Business Card Review

Business card is an effective form of marketing as it conveys important information about your… Read More

1 month ago

8 Benefits of having a Smartwatch

Smartwatch combines smart features with regular watch and comes in different shapes and colours. The… Read More

3 months ago

When to consider upgrading your house size

At what point do you decide to upgrade your house size? Is it because of… Read More

3 months ago