Connect with us

How to Show Contact Form on a Separate Blogger Page

How to show contact form on blogger page

Blogger

How to Show Contact Form on a Separate Blogger Page

(Last Updated On: January 2, 2023)

Do you want to show a responsive Contact Form on a separate page on your Blogger blog? You’re in the right place. In this tutorial, I will guide you step-by-step on How to add Contact Form code in a separate Blogger page and show it to visitors on your blog.

Contact Form is one of the important modules of a website that allows visitors of your blog to send messages. A message that is submitted via the Contact Form is sent to your Blogger email.

Following topics will be covered in this tutorial:

  1. How to Add Contact Form Code on Blogger Page
  2. How to Add Contact Form Gadget
  3. Hide the Contact Form Gadget
  4. View the Contact Form on a Separate Page

RELATED

01. How to Add Contact Form Code on Blogger Page

In this section, I will create a separate page on Blogger with the name “Contact Us” and add Contact Form code in it.

  • Click the Pages from the sidebar.
  • Click + NEW PAGE button located on top.
Click the Pages from the sidebar. Click + NEW PAGE button located on top.
  • In the page Title enter Contact Us.
  • Click the Edit Icon (Pencil) on HTML Editor to change its view from Compose to HTML.
Click the Edit Icon (Pencil) on HTML Editor to change its view from Compose to HTML.
  • Click the <>HTML view.
Click the <>HTML view.
  • Remove the existing code in HTML view before you paste the Contact Form code.
Remove the existing code in HTML view before you paste the Contact Form code.
  • Paste the Contact Form code in the HTML view that I have shared below.
  • After you paste the code click the Compose view.
Paste the Contact Form code in the HTML view that I have shared below. After you paste the code click the Compose view.

This is the code of Contact Form that you have to add in the HTML view of the page.

<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
}
#post-body-9121950614495324366
{
height:440px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
height: 39px;
font-size: 16px;
width: 90px !important;
}

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}

</style>
<br />
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="50" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
  • The code of the Contact Form is successfully added in the page. Now go to Options from the sidebar and turn off the readers comments on Contact Us page.
  • Click Do not allow, hide existing.
  • Click Publish or Update button, whichever appears.
Now go to Options from the sidebar and turn off the readers comments on Contact Us page. Click Do not allow, hide existing. Click Publish or Update button
Blogger Templates

02. How to Add Contact Form Gadget

The Contact Form code has been added in a separate page, now you have to add the Contact Form gadget on your Blogger Layout. The Contact Form gadget provides the functionality to the Contact Form that you have added in the separate page.

  • Click the Layout from the sidebar.
  • Click Add a Gadget link on the Sidebar section. If your theme doesn’t have sidebar you can add the gadget on some other section.
Click the Layout from the sidebar. Click Add a Gadget link on the Sidebar section.
  • Click the Contact Form gadget.
Click the Contact Form gadget.
  • Enable Show this widget.
  • Click SAVE.
Enable Show this widget. Click Save.

03. Hide the Contact Form Gadget

In this section, I will guide you on how to hide the Contact Form gadget because you don’t need to display it on your blog, you need its functionality in background. You can use a CSS code to hide the Contact Form gadget, as I have shared below.

  • Click Theme from the Sidebar.
  • Click the CUSTOMIZE button.
Click Theme from the Sidebar. Click the CUSTOMIZE button.
  • Expand the Advanced tab.
  • Select Add CSS option.
  • Copy & Paste below CSS code in white space. Click Save after you paste the code.
div#ContactForm1
{
display: none !important;
}
Expand the Advanced tab. Select Add CSS option. Copy & Paste below CSS code in white space.

04. View the Contact Form on a Separate Page

In this section, I will guide on how to get the Contact Us page link and view Contact Form.

  • Go to Pages and hover mouse over the Contact Us page.
  • Click the View (Eye) icon to see how your Contact Us page looks like, as shown in the next step.
  • In order to copy the link of your Contact Us page right-click over View icon and click Copy Link. It would be like, “https://www.”Your Blog URL”/p/contact-us.html“.
  • Provide a link to Contact Us page on your blog’s Menu (Navigation) from where visitors can easily access.
Go to Pages and hover mouse over the Contact Us page. Click the View (Eye) icon to see how your Contact Us page looks like, as shown in the next step.
  • This is how the Contact Us Form looks like on desktop devices. Submit a message to test whether it works or not.
This is how the Contact Us Form looks like on desktop devices. Submit a message to test whether it works or not.
  • The Contact Us form on mobile devices.
The Contact Us form on Mobile Devices.
  • If you like this post then don’t forget to share with people. Share your feedback in the comments section below.

Also Read

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

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

More in Blogger

To Top