As a blogger, fostering communication with your audience is crucial for building relationships and growing your platform. Adding a contact form to your Blogger website provides visitors with an easy way to reach out to you, whether it's for inquiries, feedback, or collaborations.
Formspree is a service that offers HTML forms that can be embedded on websites without the need for JavaScript, PHP, or servers. Formspree forms can match a website's CSS and inherit its design. Formspree is a form backend, API and email service for HTML forms.
It is the simplest way to embed custom contact us forms, order forms, or email capture forms.
In this comprehensive guide, we'll walk you through the process of adding a contact form to your Blogger site using Formspree.io. We'll cover each step in detail, from setting up a Formspree account to integrating the form into your Blogger website. Additionally, we'll explore the benefits and limitations of using Formspree for contact forms.
How to add Formspree.io
Step 1: Sign Up for a Formspree Account
Visit the Formspree website (https://formspree.io/) and sign up for an account.
Fill in the required information, including your email address where you want to receive form submissions.
Verify your email address to activate your Formspree account.
Step 2: Create a New Form
Once logged in to your Formspree account, click on the "New Form" button.
Give your form a name and select the email address where you want to receive submissions.
Customize your form fields according to your preferences, such as name, email, subject, and message.
Save your form settings.
Step 3: Get the Formspree Integration Code
After creating your form, Formspree will provide you with an integration code snippet.
Copy the provided code snippet to add to your Blogger website.
Step 4: Integrate the Contact Form into Blogger
Sign in to your Blogger account and navigate to the "Layout" section of your blog.
Choose where you want to place the contact form, such as in a sidebar widget or on a separate page.
Click on "Add a Gadget" and select "HTML/JavaScript."
Paste the Formspree integration code into the content box.
Customize the form's appearance and styling using HTML and CSS if desired.
Save your changes.
Form Code
Simple Format
<!-- Add this to an HTML/JavaScript gadget -->
<div class="contact-form">
<h3>Contact Us</h3>
<form action="https://formspree.io/YOUREMAIL" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
</form>
</div>
<style>
.contact-form {
max-width: 500px;
margin: auto;
padding: 1em;
background: #f9f9f9;
border-radius: 5px;
}
.contact-form h3 {
text-align: center;
}
.contact-form label {
margin-top: 1em;
display: block;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.5em;
margin-top: 0.5em;
}
.contact-form button {
width: 100%;
padding: 0.7em;
margin-top: 1em;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
Implemented version 1
<div class="contact-form">
<h3>Contact Us</h3>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
<div id="formResponse" style="display:none; margin-top:10px;"></div>
</form>
</div>
<style>
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.contact-form h3 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.contact-form label {
display: block;
margin-top: 10px;
font-weight: bold;
color: #555;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
width: 100%;
padding: 15px;
margin-top: 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.contact-form button:hover {
background: #0056b3;
}
#formResponse {
text-align: center;
color: #28a745;
}
</style>
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
var form = event.target;
var data = new FormData(form);
fetch('https://formspree.io/f/YOUR_FORM_LINK_KEYWORDS', {
method: 'POST',
body: data,
headers: {
'Accept': 'application/json'
}
})
.then(function(response) {
if (response.ok) {
document.getElementById('formResponse').innerText = 'Thank you for your message!';
document.getElementById('formResponse').style.display = 'block';
form.reset();
} else {
response.json().then(function(data) {
if (Object.hasOwn(data, 'errors')) {
document.getElementById('formResponse').innerText = data["errors"].map(function(error) { return error["message"]; }).join(", ");
document.getElementById('formResponse').style.display = 'block';
} else {
document.getElementById('formResponse').innerText = 'Oops! There was a problem submitting your form';
document.getElementById('formResponse').style.display = 'block';
}
});
}
})
.catch(function(error) {
document.getElementById('formResponse').innerText = 'Oops! There was a problem submitting your form';
document.getElementById('formResponse').style.display = 'block';
});
});
</script>
Implemented version 2
<div class="contact-form">
<h3>Contact Us</h3>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
<div id="formResponse" style="display:none; margin-top:10px;"></div>
</form>
</div>
<style>
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.contact-form h3 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.contact-form label {
display: block;
margin-top: 10px;
font-weight: bold;
color: #555;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
width: 100%;
padding: 15px;
margin-top: 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.contact-form button:hover {
background: #0056b3;
}
#formResponse {
text-align: center;
color: #28a745;
}
</style>
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
var form = event.target;
var data = new FormData(form);
fetch('https://formspree.io/f/YOUR_FORM_LINK_KEYWORDS', {
method: 'POST',
body: data,
headers: {
'Accept': 'application/json'
}
})
.then(response => {
if (response.ok) {
document.getElementById('formResponse').innerText = 'Thank you for your message!';
document.getElementById('formResponse').style.display = 'block';
form.reset();
} else {
response.json().then(data => {
if (Object.hasOwn(data, 'errors')) {
document.getElementById('formResponse').innerText = data["errors"].map(error => error["message"]).join(", ");
document.getElementById('formResponse').style.display = 'block';
} else {
document.getElementById('formResponse').innerText = 'Oops! There was a problem submitting your form';
document.getElementById('formResponse').style.display = 'block';
}
});
}
})
.catch(error => {
document.getElementById('formResponse').innerText = 'Oops! There was a problem submitting your form';
document.getElementById('formResponse').style.display
</script>
Benefits of Using Formspree.io:
Simple Setup: Formspree.io offers a straightforward and user-friendly interface for creating and managing contact forms, making it easy for bloggers to set up communication channels with their audience.
Email Integration: Form submissions are automatically sent to your designated email address, allowing you to stay organized and respond promptly to inquiries and feedback.
Customizable Forms: With Formspree, you can customize the fields and design of your contact form to suit your branding and communication needs, ensuring a seamless user experience for your visitors.
Spam Protection: Formspree includes built-in spam protection measures to filter out unwanted submissions, helping to maintain the integrity of your contact form and inbox.
Limitations of Using Formspree.io:
Submission Limitations: The free plan of Formspree has limitations on the number of submissions you can receive per month. If you anticipate high traffic or frequent submissions, you may need to upgrade to a paid plan.
Branding and Customization: While Formspree allows for some customization of form fields and design, the level of branding customization may be limited compared to self-hosted solutions.
Dependency on Third-Party Service: Integrating Formspree means relying on a third-party service for contact form functionality. This introduces dependencies and potential risks related to service outages or changes in terms of service.
What did you get?
Blogger contact form
Formspree.io integration
Adding contact form to Blogger
Blogger communication tools
Formspree.io tutorial
Blogger website contact
Fornm link https://formspree.io/f/xzbnwkra
Blogger feedback form
Formspree.io benefits
Blogger contact page
Formspree.io limitations
Blogger engagement tools
Formspree.io setup guide
Blogger audience interaction
Formspree.io features
Blogger user communication