How to Create a Custom Contact Form

A contact form on your blog makes it easy for visitors to contact you, provide feedback, or ask questions. While Blogger provides a default contact form widget, it is often quite basic and lacking in flexibility. In this article, you will learn how to create a custom contact form using HTML and CSS to better match the look and feel of your blog and provide a better user experience.

Create Contact Form Using HTML

First, we will create a basic contact form in HTML. This form includes basic fields like name, email, and message, along with a submit button. Here is an example of the HTML code for the contact form:

<form action="//formspree.io/f/{your-id}" method="POST" style="max-width: 600px; margin: 0 auto;">
    <label for="name">Tên của bạn:</label><br>
    <input type="text" id="name" name="name" style="width: 100%; padding: 8px; margin-bottom: 10px;" required><br>
    
    <label for="email">Email của bạn:</label><br>
    <input type="email" id="email" name="email" style="width: 100%; padding: 8px; margin-bottom: 10px;" required><br>
    
    <label for="message">Tin nhắn:</label><br>
    <textarea id="message" name="message" rows="5" style="width: 100%; padding: 8px; margin-bottom: 10px;" required></textarea><br>
    
    <button type="submit" style="padding: 10px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Gửi</button>
</form>
            

The HTML code above creates a simple contact form with three fields: name, email, and message. Attributes action of the card <form> Use the Formspree service to send form data to your email. Make sure to replace {your-id} with your Formspree ID after registering on the site Formspree.

Insert Contact Form Into Blogger

To insert a contact form into a Blogger post, you need to follow these steps:

1. Go to Blogger and open the post where you want to insert the form or create a new post.
2. Switch to “HTML” mode by clicking the “HTML” button in the editor.
3. Insert the form’s HTML code into the desired location in the article.
4. Switch back to “Edit” mode to check that the form displays correctly and continue editing if necessary.
5. Click “Save” or “Publish” to finish.

Customize Form Interface With CSS

You can customize the contact form to match the look and feel of your blog using CSS. Here is an example of how to customize the form with CSS to make it look more professional:

<style>
    form {
        max-width: 600px;
        margin: 0 auto;
        background-color: #f9f9f9;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input(type="text"), input(type="email"), textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    button {
        padding: 10px 15px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 3px;
    }
    button:hover {
        background-color: #45a049;
    }
</style>
            

Add this CSS code to the head of your post or in the tag. <style> in Blogger’s HTML editor. This will make your contact form look more attractive and professional.

Using External Services to Process Forms

If you don’t want to handle form data yourself, you can use external services like Formspree, Google Forms, or Getform to collect contact data. These services provide a simple and secure way to store contact information without writing complex processing code.

To use Formspree as in the example above, you simply sign up for an account, create a new form, and replace {your-id} in properties action of the form with your Formspree ID. When a visitor submits the form, you’ll receive a notification email with details.

Create contact form

Creating a custom contact form on Blogger helps you provide your visitors with an easy way to contact you. Using HTML and CSS, you can create a beautiful form that matches the look and feel of your blog. Remember to use external services like Formspree to handle form data securely and efficiently. Hopefully, with the above instructions, you will be able to create a useful contact form for your blog. Good luck with your blog development on Blogger!