How To Add Blogger Contact Form

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.

how to add blogger 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 !important;

}

  • 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

/>

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

Please follow and like us:
error

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *