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 1: Create a New Page
• Step 2: Add HTML for Contact Form
• Step 3: Customize the Form
• Step 4: Embed Google Forms (Optional)
• Step 5: Test and Publish

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

Now, name your page “Contact Us.”

Add HTML for Contact Form

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

Now, Copy the HTML contact form code.

<form name="contact-form" method="post" action="https://formspree.io/[email protected]">
  <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 “[email protected]” in the code with the email address where you want to receive messages.

Now, Insert the HTML contact form code.

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.

Before Head tag paste above copied CSS code.

After Adding CSS code, Result is here.

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, Key2Blogging and follow us on twitter(X).