How to add a Contact Form in Blogger?

Creating a “Contact Us” Form in Blogger blog is important to improve communication and engage with your audience effectively.

In this article, we will show you the simplest steps to add a contact form to your Blogger website.

Here’s a step-by-step guide to set it up:

Step-by-Step Guide to Adding a Contact Us Form in Blogger

Create a New Page

First, Log in to Blogger, then go to the “Pages” section and click on “New Page.”

Create A Page in Blogger

Now, name your page “Contact Us.”

name your page blogger

Add HTML for Contact Form

First, Access to HTML Editor (switch to the HTML editor).

html view in blogger switching

Now, Copy the HTML contact form code.

<form name="contact-form" method="post" action="https://formspree.io/your-email@example.com">
  <label>Name</label>
  <input type="text" name="name" required>
  <label>Email</label>
  <input type="email" name="_replyto" required>
  <label>Message</label>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Note: Replace “your-email@example.com” in the code with the email address where you want to receive messages.

Now, Insert the HTML contact form code.

inserting contact form html code in bloggger website

After inserting the HTML code, make sure to publish the page.

Customize the Form

To customize the form design, we need add CSS to blogger template.

Copy this CSS Code.

<style>
  form { max-width: 600px; margin: auto; }
  label { display: block; margin-top: 10px; }
  input, textarea { width: 100%; padding: 10px; margin-top: 5px; }
  button { display: block; width: 100%; padding: 10px; margin-top: 20px; background: #333; color: white; border: none; }
</style>

First Access to theme, then click on edit HTML.

Edit HTML in Blogger

Before Head tag paste above copied CSS code.

CSS code adding to improve blogger website contact page

After Adding CSS code, Result is here.

contact form in blogger website by adding CSS

Congratulations! You have successfully added a “Contact Us” form to your Blogger website. Now, your readers can contact you anytime they want.

Embed Google Forms (Optional)

Follow this 3 steps to embeb google forms in your blogger website.

  1. Create Google Form: Go to Google Forms and create a form with the fields you need.
  2. Get Embed Code: Click on the “Send” button, select the embed code option (<>), and copy the code.
  3. Embed in Blogger: Paste the embed code into the HTML editor of your “Contact Us” page.

Test and Publish

Please check the form to ensure it works correctly. If it doesn’t, comment below, and we will help you at any time. Every time you make changes to your “Contact Us” page, check to ensure it is working properly.

5 Important Benefits of a Contact Us Form in Blogger

  1. Easy Communication: Visitors can easily reach out to you with questions or feedback.
  2. Business Opportunities: Facilitates potential partnerships and collaborations by providing an easy way for others to contact you.
  3. Professionalism: Adds credibility to your website by showing you are open to communication.
  4. Increased Engagement: Encourages interaction, helping to build a community around your blog.
  5. Feedback Collection: Allows you to gather valuable insights and suggestions from your audience.

Conclusion

So, by following above mention steps will help you create a “Contact Us” page in blogger website. Which is functional and attractive design.

If you have any questions, feel free to comment. To say thanks, please subscribe to our YouTube channel, Bloguplift and follow us on twitter(X).

Was this helpful?

Thanks for your feedback!

Our editorial team is responsible for managing and publishing all the content on here at Bloguplift, led by Subarna Basnet.

Leave a Comment