How to Create a Contact Page in Your Blogger Website

In the world of blogging, establishing seamless communication with your audience is paramount. A contact form serves as an indispensable tool, enabling visitors to connect with you, provide valuable feedback, ask questions, or explore potential collaborations. This article aims to walk you through the process of integrating a contact form into your Blogger website using FormSubmit.co—an intuitive and reliable platform designed to simplify form submissions. By leveraging FormSubmit.co, you can effortlessly incorporate a contact form into your Blogger website and ensure a smooth flow of messages from your readers.

Add the form to your Blogger website

1. Log in to your Blogger account and go to your website's dashboard.
2. Navigate to the page where you want to add the contact form or create a new page.
3. In the Blogger editor, switch to the HTML mode.
4. Copy the below HTML code and paste it into the HTML editor.

 <form class='form' action="https://formspree.io/f/your id" method="POST">
        <label for="name">Your Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your full name" required>

        <label for="email">Your Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>

        <label for="topic">Select Topic:</label>
        <select id="topic" name="topic" required>
            <option value="Help">Help</option>
            <option value="Buy Design">Buy Design</option>
            <option value="Design Customization">Design Customization</option>
            <option value="Feedback">Feedback</option>
            <option value="Others">Others</option>
        </select>

        <label for="message">Your Message:</label>
        <textarea id="message" name="message" rows="5" placeholder="Enter the Message Here" required></textarea>

        <input type="submit" value="Send Message">
    </form>

Please repalce this email youremail@email.com with your email. And https://www.blogbrackets.com/p/thank-you.html change this url with your page url. Below I have told you how to create this page.

Copy this CSS and Paste it below the HTML

After that just publish this page.

 style="max-height: none; white-space: pre-wrap;"><style>.headH::after{content:'Contact'}.form{display:flex;flex-direction:column;gap:15px}input[type="text"],input[type="email"],select,textarea{width:100%;padding:10px;border:1px solid var(--contentL);border-radius:5px}textarea{resize:vertical}input[type="submit"]{background-color:var(--linkC);color:white;padding:10px;border:0;border-radius:5px;cursor:pointer}input[type="submit"]:hover{opacity:0.7}.drK input[type="text"],.drK input[type="email"],.drK select,.drK textarea{background-color:#333;color:#e0e0e0}</style> 

Page Testing!

Open your contact form. Fill up that form and submit. You will get an activation email on your formspree which you have given inside your contact form. Just activate it. Hurray! Now your contact from is ready to grab data.

Watch this video if you get any trouble.

Join Telegram