How to Add a Contact Form in Blogger ( Updated)
In this article, I will show you how you can add a contact form to your Blogger website. Contact form helps visitors send messages directly from your Website. So, users don’t have to manually copy the Email address and send messages to you. So, You can improve the User experience significantly just by adding a simple contact form to your Blogger website.
You can integrate the contact form in pages like Contact Us, write for Us, or Services pages. So, users can contact you directly without going to the Email App or website.
But, Recently the default contact form widget got broken and it is not sending emails to the inbox. So, we need to change that form with a third-party form service.
so, let’s check how you add the contact form to your Blogger website.
Steps to Add a Contact Form in Blogger
Go to your Blogger dashboard and create a new page or open your existing page.
Now switch the post editor from “Compose View” to “HTML View“.
Now you need to copy and paste the below code and change it with your email address.
<div class="form-wrapper">
<form action="https://formsubmit.co/example@gmail.com" method="POST" target="_blank">
<div class="form-section">
<div class="form-row">
<div class="input-column">
<label for="name">Name<span class="required-mark">*</span></label>
<input type="text" name="name" required="" class="input-control">
</div>
<div class="input-column">
<label for="email">Email<span class="required-mark">*</span></label>
<input type="email" name="email" required="" class="input-control">
</div>
</div>
</div>
<div class="form-section">
<label for="message">Message<span class="required-mark">*</span></label>
<textarea name="message" required="" rows="10" class="textarea-control"></textarea>
</div>
<button type="submit" class="submit-button">Submit Form</button>
</form>
</div>
<style>
.input-control, .textarea-control {
border: 1px solid;
display: block;
width: 100%;
outline: 0;
padding: 15px 15px;
margin-bottom: 0px;
}
label {
display: inline-block;
font-size: medium;
margin-bottom: .5rem;
}
.submit-button {
background: #343a40;
color: white;
border: none;
padding: 15px 20px;
margin-top: 10px;
text-align: center;
vertical-align: middle;
cursor: pointer;
width: 100%;
}
.submit-button:hover {
color: #fff;
background-color: #23272b;
border-color: #1d2124;
}
.required-mark {
color: red;
margin-left: 4px;
}
</style>Now save and publish the page.
To ensure that everything is running smoothly and that the email is being delivered, send a test message in the new contact form and it will ask you to verify your email address.
Now Open your email inbox and verify your email address with the given link.
Now, whenever someone enters their Name, Email Address, and Message, it will open a new page with ReCaptcha, so you can minimize the number of spam entries in your contact form.
Now you can use the form on the Contact Us page, services, Guest post pages, or even on the Homepage, etc.
There are various other alternatives like Google Form, and JotForm that you can use on your Blogger website.
I hope you have successfully added the new contact form to your Blogger website. If you have any doubts you can ask me on social media channels.
