How to Create a Custom HTML Contact Form in Blogger (Without Gadgets) — WordsByEkta🌿

Blogger Contact Form Tutorial: Custom CSS, Formspree, and Auto-Redirect

If you’ve been using Blogger for a while, you probably think you only have two choices for a Contact page:

1. Use the pre-made, "clunky" Contact Gadget that rarely matches your blog’s design.
2. Simply type your email address on a page—practically inviting spam bots to dinner.

But there is a third, professional way. You can actually "code" your own custom contact form using HTML. This allows you to choose exactly how it looks—the colors, the fonts, and the specific questions you want to ask your readers. It turns a boring page into a "Painterly" part of your brand.

The "Bottomless Mailbox" Problem

However, here is the "investigative" truth: simply writing the HTML code for a form is only half the battle.

Blogger is a fantastic platform for content, but it is a "static" host. This means it doesn't have a built-in "brain" (a server) to catch and store the messages people type into a form. If you build a beautiful form but don't connect it to a brain, your messages have nowhere to go. It’s like building a stunning mailbox that has no bottom—the letters just fall into the dirt and vanish.

The Solution: Formspree (Your Digital Postman)

To make your custom HTML form actually work, you need a bridge to your inbox. We use a service called Formspree.

Think of Formspree as your Digital Postman. It picks up the "letter" from your custom HTML form and drops it directly into your personal Gmail or Outlook email. It gives your static Blogger page the "brain" it needs to function like a professional website.

---

Step 1: The "Lab-Ready" HTML Code

Copy and paste this code into a new Page (using HTML View) on your Blogger dashboard. This code is designed to be clean and responsive.

Custom "Magic" Contact Form Code HTML, CSS & JS

<div id="contact-custom-container">
  <!-- THE FORM -->
  <form id="custom-contact-form" action="https://formspree.io/f/YOUR_ID_HERE" method="POST" class="contact-card">
    <h3>Send a Message</h3>
    <p>Have a question? Reach out below!</p>

    <div class="input-row">
      <label>Your Name</label>
      <input type="text" name="name" required placeholder="Enter your name">
    </div>

    <div class="input-row">
      <label>Email Address</label>
      <input type="email" name="_replyto" required placeholder="email@example.com">
    </div>

    <div class="input-row">
      <label>Your Message</label>
      <textarea name="message" rows="5" required placeholder="How can I help you?"></textarea>
    </div>

    <button type="submit" id="submit-btn" class="lab-btn">Submit Message</button>
  </form>

  <!-- THE SUCCESS MESSAGE (Hidden until submission) -->
  <div id="thank-you-message" style="display:none; text-align:center; padding: 40px; background: #ffffff; border-radius: 12px; border-top: 5px solid #2c3e50; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 500px; margin: 20px auto;">
    <h2 style="color: #2c3e50;">✔ Success!</h2>
    <p style="color: #34495e;">Your message has been sent. Returning to the homepage in 4 seconds...</p>
  </div>
</div>

<style>
  /* --- Professional Contact Form Styling --- */
  .contact-card {
    max-width: 500px;
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-top: 5px solid #2c3e50; /* Indigo accent */
    font-family: sans-serif;
  }
  .contact-card h3 { color: #2c3e50; margin-top: 0; }
  .input-row { margin-bottom: 15px; text-align: left; }
  .input-row label { display: block; font-weight: bold; margin-bottom: 5px; color: #34495e; }
  .input-row input, .input-row textarea { width: 100%; padding: 12px; border: 2px solid #ecf0f1; border-radius: 6px; box-sizing: border-box; }
  .lab-btn { width: 100%; padding: 15px; background: #2c3e50; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.3s; }
  .lab-btn:hover { background: #34495e; transform: translateY(-2px); }
</style>

<script>
  const form = document.getElementById("custom-contact-form");
  const successMsg = document.getElementById("thank-you-message");

  form.onsubmit = async (e) => {
    e.preventDefault();
    const data = new FormData(form);
    const response = await fetch(form.action, {
      method: 'POST',
      body: data,
      headers: { 'Accept': 'application/json' }
    });

    if (response.ok) {
      form.style.display = "none"; 
      successMsg.style.display = "block";
      
      // THE AUTO-REDIRECT: Sends user home after 4 seconds
      setTimeout(function(){
         window.location.href = "/"; 
      }, 4000);

    } else {
      alert("Submission failed! Please try again.");
    }
  };
</script>
  

Step 2: Setting up the Postman (Formspree) and Finding Your Formspree ID

To make this form work, you need to tell the code exactly where to send your mail. Think of your Formspree ID as your digital mailbox number. Here is how to track it down:

1. Register: Head over to Formspree.io and create a free account.
2. Create a New Form: Click the "+ New Form" button. Name it something clear, like "Contact Form - My Blog."
3. The "Endpoint" Secret: Once the form is created, look at the "Endpoint" URL they give you. It will look like this: https://formspree.io/f/xbjwnklo
4. Extract the ID: That last string of random letters (in this case, xbjwnklo) is your Formspree ID.
5. Plug it In: Simply copy that ID and paste it into the code where it says YOUR_ID_HERE.

Pro Tip: You don't need to verify each blog individually. If you use the same ID for multiple sites, just make sure you use a different _subject line (as mentioned in Step 3) so you can tell them apart in your inbox!

Step 3: The "Deep Dive" Pro-Tips

This is what separates the beginners from the pros:

• The "Inbox Label" (Hidden Subject):In the code, you’ll see a line for _subject. This is crucial if you are a writer managing multiple blogs or projects under one Formspree ID , although you can also separate Formspree ID for each blog too. By giving each form a unique subject (like "New Message from Phonics Lab"), your inbox stays organized. You'll know exactly which "investigation" a reader is reaching out about before you even open the email!
• Auto-Redirection to your Homepage: Forget the headache of creating separate "Thank You" pages that often lead to 404 errors. Our "Magic Script" uses a universal shortcut (/) to automatically whisk your reader back to your Homepage after the message is sent. It’s a seamless loop that keeps your readers on your site without you having to lift a finger.

Final Thoughts: Cracking the code of a custom contact page isn't just about design—it's about organization. By using the "Postman" method, you take control of your blog's technical "nooks and crannies" while keeping your personal email safe from spam.

← Setup Make.com Explore All Articles URL from Blogger Sitemap →