10 Best Custom Blogger Contact Form Widgets

Looking for the best contact form for your Blogger blog? The default gadget works, but it is plain and limited. Below are 10 free ways to add a stylish contact form to Blogger, including 8 copy-paste responsive HTML designs and the best Google Forms and form-service options.

Quick comparison table

Free plans and limits change. Check each provider before you rely on it.

How to choose a Blogger contact form

• Want it simple and free? Use the built-in gadget with a custom HTML design (options 1 and 2).
• Need more fields or a spreadsheet? Use Google Forms, Tally or Jotform.
• Want email delivery without the gadget? Use Formspree, Web3Forms, FormSubmit or Getform.
• Worried about spam? Pick a service with a honeypot or CAPTCHA option.

1. Blogger built-in Contact Form gadget

The official gadget is free and sends messages to your Blogger account email. It only supports name, email and message, and it looks basic. Add it in Layout > Add a Gadget > Contact Form. Best for: a quick sidebar or footer form.

2. Custom HTML contact form (powered by the gadget)

This is the favorite choice for Blogger because it is free, fast and fully stylable. Add the gadget, hide it, then paste a styled form on your Contact page. Use one form markup and swap the CSS to change the design. Setup steps are in our Blogger contact page tutorial.

Paste this form markup into the HTML view of your page:

<form class="bz-cf" name="contact-form">
  <label for="ContactForm1_contact-form-name">Your name</label>
  <input id="ContactForm1_contact-form-name" name="name" type="text" placeholder="Your full name">
  <label for="ContactForm1_contact-form-email">Email address</label>
  <input id="ContactForm1_contact-form-email" name="email" type="text" placeholder="you@example.com">
  <label for="ContactForm1_contact-form-email-message">Message</label>
  <textarea id="ContactForm1_contact-form-email-message" name="email-message" rows="6" placeholder="How can we help?"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Send message">
  <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
  <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</form>

Design 1: Clean Light

Paste this CSS in a <style> block above the form. First add the shared base CSS (it makes every design responsive):

.bz-cf{max-width:560px;margin:24px auto;padding:26px;box-sizing:border-box;font-family:inherit}
.bz-cf *{box-sizing:border-box}
.bz-cf label{display:block;margin:14px 0 6px;font-weight:700;font-size:14px}
.bz-cf input[type=text],.bz-cf textarea{width:100%;padding:12px 14px;font:inherit;font-size:15px;border-radius:10px}
.bz-cf textarea{resize:vertical}
.bz-cf input[type=button]{margin-top:18px;padding:13px 28px;font:inherit;font-weight:800;border:0;border-radius:999px;cursor:pointer}
.bz-cf p{margin:12px 0 0;font-weight:600}
.bz-cf p:empty{display:none}
.bz-cf .contact-form-error-message,.bz-cf .contact-form-error-message-with-border{color:#c0392b}
.bz-cf .contact-form-success-message,.bz-cf .contact-form-success-message-with-border{color:#0a7a3b}
@media(max-width:520px){
.bz-cf{padding:18px;margin:16px 0}
.bz-cf input[type=text],.bz-cf textarea{font-size:16px}
.bz-cf input[type=button]{width:100%}
}

/* Design 1: Clean Light */
.bz-cf{background:#fff;border:1px solid #dfe3ea;box-shadow:0 8px 30px rgba(15,23,42,.08);border-radius:16px;color:#0f172a}
.bz-cf input[type=text],.bz-cf textarea{background:#f8fafc;border:1px solid #cbd5e1;color:#0f172a}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:3px solid #bfdbfe;border-color:#2563eb}
.bz-cf input[type=button]{background:#2563eb;color:#fff}
.bz-cf input[type=button]:hover{background:#1d4ed8}

Design 2: Dark Neon

Use the same base CSS above, then this theme instead of Design 1:

/* Design 2: Dark Neon */
.bz-cf{background:#0f172a;border:2px solid #22d3ee;border-radius:16px;color:#e2e8f0;box-shadow:0 0 28px rgba(34,211,238,.25)}
.bz-cf input[type=text],.bz-cf textarea{background:#1e293b;border:1px solid #334155;color:#fff}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.3)}
.bz-cf input[type=button]{background:#22d3ee;color:#0f172a}
.bz-cf input[type=button]:hover{background:#67e8f9}

Design 3: Lime Bold

Again, base CSS plus this theme:

/* Design 3: Lime Bold */
.bz-cf{background:#fff;border:3px solid #0b0f1a;border-radius:18px;color:#0b0f1a;box-shadow:8px 8px 0 #d2ff0a}
.bz-cf input[type=text],.bz-cf textarea{background:#f3f5f9;border:2px solid #0b0f1a;color:#0b0f1a}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:3px solid #d2ff0a;background:#fff}
.bz-cf input[type=button]{background:#d2ff0a;color:#0b0f1a;border:2px solid #0b0f1a;box-shadow:3px 3px 0 #0b0f1a}
.bz-cf input[type=button]:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0b0f1a}

Design 4: Glass Gradient

/* Design 4: Glass Gradient */
.bz-cf{background:linear-gradient(135deg,#6366f1,#ec4899);border-radius:22px;color:#fff;box-shadow:0 18px 40px rgba(99,102,241,.35)}
.bz-cf input[type=text],.bz-cf textarea{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff}
.bz-cf ::placeholder{color:rgba(255,255,255,.75)}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:none;background:rgba(255,255,255,.28);border-color:#fff}
.bz-cf input[type=button]{background:#fff;color:#6366f1}
.bz-cf input[type=button]:hover{background:#f5f3ff}
.bz-cf .contact-form-error-message,.bz-cf .contact-form-success-message{color:#fff}

Design 5: Minimal Underline

/* Design 5: Minimal Underline */
.bz-cf{background:#fff;border-top:4px solid #111;border-radius:0;color:#111;box-shadow:0 2px 0 #eee}
.bz-cf input[type=text],.bz-cf textarea{background:transparent;border:0;border-bottom:2px solid #111;border-radius:0;padding-left:0;padding-right:0;color:#111}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:none;border-bottom-color:#e11d48}
.bz-cf input[type=button]{background:#111;color:#fff;border-radius:0;letter-spacing:.08em;text-transform:uppercase}
.bz-cf input[type=button]:hover{background:#e11d48}

Design 6: Soft Pastel

/* Design 6: Soft Pastel */
.bz-cf{background:#fff7ed;border:2px solid #fed7aa;border-radius:28px;color:#7c2d12}
.bz-cf input[type=text],.bz-cf textarea{background:#fff;border:2px solid #fdba74;border-radius:16px;color:#7c2d12}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:3px solid #ffedd5;border-color:#f97316}
.bz-cf input[type=button]{background:#f97316;color:#fff}
.bz-cf input[type=button]:hover{background:#ea580c}

Design 7: Retro Terminal

/* Design 7: Retro Terminal */
.bz-cf{background:#050a05;border:2px solid #22c55e;border-radius:6px;color:#4ade80;font-family:"Courier New",monospace;box-shadow:0 0 22px rgba(34,197,94,.3)}
.bz-cf label{text-transform:uppercase;letter-spacing:.08em}
.bz-cf input[type=text],.bz-cf textarea{background:#0a140a;border:1px solid #166534;border-radius:4px;color:#86efac;font-family:"Courier New",monospace}
.bz-cf ::placeholder{color:#15803d}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:none;border-color:#4ade80;box-shadow:0 0 0 2px rgba(74,222,128,.35)}
.bz-cf input[type=button]{background:#22c55e;color:#031003;border-radius:4px;font-family:"Courier New",monospace;text-transform:uppercase}
.bz-cf input[type=button]:hover{background:#4ade80}
.bz-cf .contact-form-error-message{color:#f87171}
.bz-cf .contact-form-success-message{color:#4ade80}

Design 8: Sunset Gradient Border

/* Design 8: Sunset Gradient Border */
.bz-cf{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#f97316,#ec4899) border-box;border:3px solid transparent;border-radius:18px;color:#1f2937;box-shadow:0 14px 34px rgba(244,63,94,.18)}
.bz-cf input[type=text],.bz-cf textarea{background:#fff7fb;border:1px solid #fbcfe8;color:#1f2937}
.bz-cf input[type=text]:focus,.bz-cf textarea:focus{outline:3px solid #fce7f3;border-color:#ec4899}
.bz-cf input[type=button]{background:linear-gradient(135deg,#f97316,#ec4899);color:#fff}
.bz-cf input[type=button]:hover{opacity:.9}

How to switch designs: keep the same form markup, keep the shared base CSS, and swap only the theme block. Mix colors by editing the hex codes. All 8 designs are responsive: on phones the padding shrinks, the text grows to 16px so iPhones do not zoom, and the button fills the width.

3. Google Forms embed

Google Forms is free, has unlimited custom fields and saves every response in Google Sheets. Create a form, click Send > <> Embed HTML, and paste the iframe into your page's HTML view. Best for: forms with dropdowns, checkboxes or file questions. It is also a solid backup when the Blogger gadget fails.

4. Formspree

Formspree sends form submissions to your email and keeps an inbox of them. You get a form address and point your HTML form to it. It offers a free plan, but check current limits. Best for: bloggers who want reliable email delivery and spam filtering.

5. Web3Forms

Web3Forms is a no-backend form service. You add a hidden access key to a normal HTML form and submissions arrive by email. Best for: simple forms with built-in bot protection options.

6. FormSubmit

FormSubmit may be the quickest to set up: put your email address in the form's action and confirm it once. Best for: a test or small blog. Because the address is visible in the code, consider the service's masked-address option.

7. EmailJS

EmailJS sends email directly from browser JavaScript through your own email account. It gives full control over the message template. Best for: bloggers comfortable with JavaScript. Remember that public keys are visible in the page, so restrict them in the dashboard.

8. Tally

Tally is a clean form builder with a free plan and tidy embeds. Copy the embed code and paste it into HTML view. Best for: good-looking forms with logic and multiple pages.

9. Jotform

Jotform offers hundreds of templates and a Blogger embed guide in its help center. Its free plan is limited, so check current caps. Best for: professional forms with uploads or payments.

10. Getform

Getform collects submissions from any HTML form and forwards them to your email, with a dashboard for entries. Best for: bloggers who want a form inbox without writing server code.

HTML for form services (options 4 to 10)

<form action="FORM_SERVICE_URL" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>
<!-- Replace FORM_SERVICE_URL with the address your service gives you, for example:
  Formspree:   https://formspree.io/f/YOUR_FORM_ID
  Web3Forms:   https://api.web3forms.com/submit   (also add a hidden access_key field)
  FormSubmit:  https://formsubmit.co/you@example.com -->

Spam and security tips

• Add a honeypot field (a hidden field bots fill in). Use the exact field name your service documents.
• Never show your personal email address in the page when you use a form.
• Mention your form provider in your Privacy Policy.
• Test the form after every theme change.

Contact form not working?

For the built-in gadget, the fix list is in our guide: Blogger contact form not working: fixes. If Blogger's own gadget keeps failing, move to Google Forms or one of the services above.

Frequently asked questions

What is the best free contact form for Blogger?

For most blogs, the built-in Contact Form gadget with a custom HTML design is the best free choice. It needs no signup. If you want extra fields or spam protection, Google Forms or a form service is better.

Can I add a contact form to a Blogger page without the gadget?

Yes. Form services such as Formspree, Web3Forms or FormSubmit send messages by email without the Blogger gadget. Google Forms and Tally embed with an iframe.

Why is my Blogger contact form widget not sending email?

Check that the Contact Form gadget still exists, that field IDs were not edited, and that the page is in HTML view. Our step-by-step guide lists every fix.

Does a contact form help SEO?

Not directly. It improves trust and usability, which supports your site overall, and it gives visitors a clear way to reach you.

Is it safe to use third-party form services?

Use well-known services, read their privacy terms, and tell visitors in your Privacy Policy that form data is processed by that provider.

Are these contact form designs mobile friendly?

Yes. Every design uses a fluid width, smaller padding on phones, 16px input text and a full-width button, so it fits any screen without sideways scrolling.

How do I change the colors of a design?

Edit the hex codes (such as #2563eb) in the theme CSS block. The base CSS handles layout, so you only change colors, borders and radius.

Can I get contact form messages in Google Sheets?

Yes. Google Forms stores every response in a Google Sheet automatically.

Conclusion

For most Blogger blogs, a styled HTML form powered by the built-in gadget is the best free option. Use Google Forms or a form service when you need extra fields or stronger spam control. Ready to set it up? Follow our complete guide to creating a Contact Us page in Blogger.

Last updated: October 2026