Blog

March 11, 2021

How to Create Blogger Contact Us Form

Contact form helps user to connect webmasters and admin. Creating a contact us form is no more difficult to blogger or blogspot for beginners. There are no plugin available for blogger you do it manually. Here is the step by step process to create blogger contact us form on blogspot.

Create Blogger Contact Us Form Page

Step 1: Go to 123formbuilder.com

Step 2: Click to create a blogger contact form

Step 3: Create an account in 123formbuilder

Step 4: Select a Blank Form

Step 5: Just drag and drop in to the field. It easily create your form.

Step 6: Publish the page and copy the java script

Step 7: Open contact us page on blogger and past the code. Save it.

Refresh the page and open contact us page in a new window. Done you have successfully create your contact us page.

You can also follow the video tutorials:

Create Contact Us form in to a gadget

Go to blogger Layout option and add a contact us gadget. Now the contact us form will be sown in your blogger sidebar.

Blogger Gadgets section has an official contact us gadget, but you can not use it on any of your pages. Follow this steps below to customize it for using it on pages.

Step 1: Add a new page in to your blog. Name this page “Contact Us”.

Step 2: Open the page and Copy below html code and past in to your page

<div id=”custom_ContactUsFromForBlogSpotBlogger” class=”widget ContactForm”>

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

<p>Get in touch with us by filling out the form below.</p>

<div class=”form”>

<form name=”contact-form”>

<p></p>

Your Name

<br>

<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>

<p></p>

Your Email

<span style=”font-weight: bolder;”>*</span>

<br>

<input type=”text” value=”” size=”30″ name=”email” id=”ContactForm1_contact-form-email” class=”contact-form-email”>

<p></p>

Your Message

<span style=”font-weight: bolder;”>*</span>

<br>

<textarea rows=”5″ name=”email-message” id=”ContactForm1_contact-form-email-message” cols=”25″ class=”contact-form-email-message”></textarea>

<p></p>

<input type=”button” value=”Send” id=”ContactForm1_contact-form-submit” class=”contact-form-button contact-form-button-submit”>

<p></p>

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

<p id=”ContactForm1_contact-form-error-message” class=”contact-form-error-message”></p>

<p id=”ContactForm1_contact-form-success-message” class=”contact-form-success-message”></p>

</div>

</form>

</div>

</div>

<div class=”clear”></div>

<span class=”widget-item-control”>

<span class=”item-control blog-admin”>

<a title=”Edit” target=”configContactForm1″ onclick=”return _WidgetManager._PopupConfig(document.getElementById(“ContactForm1″));” href=”//www.blogger.com/rearrange?blogID=5376175031305852907&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1″ class=”quickedit”>

<img width=”18″ height=”18″ src=”//img1.blogblog.com/img/icon18_wrench_allbkg.png” alt=””>

</a>

</span>

</span>

<div class=”clear”></div>

</div>

Step 3: Change the blogger id with your blogger id and save. To find your blogger id go to blogger admin panel and look the url.

Now you are done!

Related: How to Edit Blogger Profile

Information Blog
Cart