How to add a Contact Form in Blogger?
![How to add a Contact Form in Blogger?](https://key2blogging.com/wp-content/uploads/2024/07/How-to-add-a-Contact-Form-in-Blogger.png)
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.”
![Create A Page in Blogger](https://key2blogging.com/wp-content/uploads/2024/07/create-a-page-in-blogger-1024x452-1.webp)
Now, name your page “Contact Us.”
![name your page blogger](https://key2blogging.com/wp-content/uploads/2024/07/add-page-name-in-your-blogger-website-1024x166-1.webp)
Add HTML for Contact Form
First, Access to HTML Editor (switch to the HTML editor).
![html view in blogger switching](https://key2blogging.com/wp-content/uploads/2024/07/html-view-in-blogger-switching-1024x147-1.webp)
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.
![inserting contact form html code in bloggger website](https://key2blogging.com/wp-content/uploads/2024/07/insterting-contact-form-html-code-1024x294-1.webp)
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](https://key2blogging.com/wp-content/uploads/2024/07/Edit-HTML-in-Blogger-1024x514-1.webp)
Before Head tag paste above copied CSS code.
![CSS code adding to improve blogger website contact page](https://key2blogging.com/wp-content/uploads/2024/07/CSS-code-adding-to-improve-blogger-website-contact-page-1024x132-1.webp)
After Adding CSS code, Result is here.
![contact form in blogger website by adding CSS](https://key2blogging.com/wp-content/uploads/2024/07/contact-form-in-blogger-website-by-adding-CSS.webp)
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.
- Create Google Form: Go to Google Forms and create a form with the fields you need.
- Get Embed Code: Click on the “Send” button, select the embed code option (
<>
), and copy the code. - 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
- Easy Communication: Visitors can easily reach out to you with questions or feedback.
- Business Opportunities: Facilitates potential partnerships and collaborations by providing an easy way for others to contact you.
- Professionalism: Adds credibility to your website by showing you are open to communication.
- Increased Engagement: Encourages interaction, helping to build a community around your blog.
- 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).