Search Our Blog

How do I make a workable contact form in Blogger using a Blogger contact form?

0

If you are a blogger then you need to add a Contact Form to the Blogger website. It is important while users contact you.

There is such a website you can use to add a contact form to your blogger website. 123formbuilder and jotform make a form for free on your website. But it is not good for a blogger website. Basically, this website control hosting and server of a form. 

But we can easily use the contact form of the blogger they already provided. We can also use this form on a contact form page. 

Blogger contact form directly sent a message in your Gmail account. We don't need 123formbuilder and other websites for the form builder.

Much more people use Wordpress for Blogging. So there are already provide a contact form plugins that help for contact with users.

Contact Form In Blogger



Now it's time to add a contact form widget in Blogger. Just click on add widget and add the contact form widget.

If you ever right-click on your mouse you can find the option Inspect. You need to inspect the contact form. And copy all HTML. You don't need to copy CSS because the same classes and id will be already in the template. When you copy HTML you need to copy the whole Contact Form HTML. It is called like widget ContactForm.

Here I provided the HTML code of the Contact Form. You can paste this code on the Contact Us page on the HTML view. You can add your title and change any content.

<div class="widget ContactForm" data-version="2" id="ContactForm2">

<div class="widget-title">

<h3 class="title"></h3>

</div>

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<p></p>

Name

<br>

<input class="contact-form-name" id="ContactForm2_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="ContactForm2_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="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea>

<p></p>

<input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send">

<p></p>

<div style="text-align: center; max-width: 222px; width: 100%">

<p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>

<p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>

</div>

</form>

</div>

</div>

</div>

Now it's time to add the Contact Form to your Contact Us page. It is so easy did you think. Just click on the HTML view in the page post. Now paste the HTML code you can copy from inspect. All the CSS, JavaScript, and PHP are handle by Blogger. Just we need only HTML.  After publishing your page,  you can find the Contact us page. 

The message has been sent to your Gmail account which you can use in Blogger. If you want to more style this Contact form then copy the class and start styling.


Like This Article

Name

Email *

Message *

Tags

Post a comment

0 Comments

Top Post Ad

Below Post Ad