How to Create a WordPress Contact Form Without a Form Plugin

How to Create a WordPress Contact Form Without a Form Plugin

Every service business needs a way for visitors to ask for a quote. The standard advice is to install a dedicated contact form plugin, and that works, but it also means one more plugin to update, one more settings screen to learn, and one more upgrade prompt to ignore. ๐Ÿ™„

If your site already runs on the block editor, thereโ€™s a leaner path. Otter Blocks is a free plugin (300,000+ active installs, 4.7 out of 5 on WordPress.org) that adds a library of extra blocks to Gutenberg, and one of those blocks is a proper Form block: custom fields, email routing, spam protection, and an autoresponder

Quick honesty check: yes, Otter is still a plugin, so โ€œno plugin at allโ€ would be a fib. The win here is skipping a single-purpose form plugin when a general blocks plugin you may already want can cover the job too. One less thing to maintain. ๐Ÿ‘

This guide walks through building a quote-request form for a service business, step by step: picking the right fields, routing submissions to the right inbox, stopping spam, and sending an automatic reply. It also covers the cases where a dedicated form plugin genuinely is the better tool, because sometimes it is

โš–๏ธ DISCLAIMER: Otter Blocks is made by ThemeIsle, the same company behind this blog. The tutorial below sticks to what the free and Pro versions actually do, and the honest-limits section tells you when a different plugin wins

  • A WordPress site using the block editor. Any modern theme works. If youโ€™re new to Gutenberg, this WordPress block editor tutorial covers the basics.
  • The free Otter Blocks plugin. Everything in steps 1 through 4 and step 6 works in the free version. Pro-only extras are marked clearly as they come up.
  • An email address where quote requests should land.
  • About 15 minutes. Less if you skip the styling step. โฑ๏ธ

From your WordPress dashboard, go to Plugins โ†’ Add New, search for โ€œOtter Blocks,โ€ then click Install and Activate. Thatโ€™s the whole setup; thereโ€™s no wizard to fight through

Next, open the page where the form should live (Pages โ†’ Add New, or edit your existing contact page). Click the + button to open the block inserter, search for โ€œForm,โ€ and insert the Form block. Otter immediately asks which variation you want to start with: Contact Form or Subscribe Form. Pick Contact Form. (Clicking Skip also gives you the contact form, since itโ€™s the default.)

The Otter Form block variation picker offering a Contact Form or Subscribe Form starting point inside the WordPress block editor

You now have a working form with Name, Email, and Message fields. Technically, you could publish right now. But a quote request deserves better fields, so keep going

Click any field in the form and the sidebar shows its settings. You can add new fields, reorder them, and edit each one: change the label, hide the label, set a percentage width (handy for putting Name and Email side by side at 50%), add placeholder and help text, and toggle whether the field is required

For a service-business quote form, a solid field lineup looks like this:

  • Name (Text, required) and Email (Email, required): the defaults, keep them.
  • Phone (Text, optional): some clients prefer a call back.
  • Service needed (Select or Checkbox): your main services as options, so requests arrive pre-sorted.
  • Budget range (Select): awkward question, useful answer. ๐Ÿ’ฐ
  • Preferred start date (Date): separates the โ€œnext weekโ€ leads from the โ€œsomedayโ€ ones.
  • Project details (Textarea, required): rename the default Message field and youโ€™re done.

Free field types cover text, email, textarea, checkbox, radio, select, number, date, and URL. Hidden fields, file uploads, and Stripe payment fields are Pro-only. Webhooks, which push submissions into other apps in real time, are also part of Otter Proโ€™s advanced form features

๐Ÿ’ก PRO TIP: If staring at a blank form feels like work, Otterโ€™s AI Form option can generate a starting set of fields from a plain-language prompt (โ€œa quote request form for a landscaping companyโ€). Thereโ€™s one catch: Otterโ€™s AI features need an AI provider connected, meaning your own OpenAI API key or the WordPress AI connector. No bundled AI credits. Also note that Regenerate replaces the current form rather than saving versions, so keep a result you like before rolling the dice again.

Select the whole form and open Form Options in the sidebar. This is where submissions go and what the notification email looks like:

  • Email To: defaults to the site admin. Point it at the inbox that actually answers quotes.
  • Email Subject: something scannable like โ€œNew quote request: landscaping.โ€
  • CC and BCC: loop in a colleague or a shared sales address.
  • From Name: the sender name on the notification.
  • Reply-To Email: leave this empty and replies to the notification go straight to the address the visitor typed in. For a quote workflow, that little default saves real time. โœ‰๏ธ

Two reassuring details. First, every valid submission is saved to the database before the email goes out, so a grumpy mail server canโ€™t silently eat a lead. Second, you can review all submissions (including any delivery errors) under Otter Blocks โ†’ Submissions in the dashboard, and viewing them is free. Exporting submissions is an Otter Pro feature

The Otter Form Options sidebar with Email To, Email Subject, Submissions, CC, BCC, From Name, Redirect on Submit, and Autoresponder settings next to the form fields

๐Ÿ’ก PRO TIP: Building a subscribe-style form instead? Otter has marketing integrations for Mailchimp and Brevo, so new signups can flow straight into your mailing list

Public forms attract bots the way picnics attract wasps. Otter handles this with a dedicated Captcha block that sits inside the form: click the + button within the form, search for โ€œCaptcha,โ€ and add it. Then pick a provider, either Google reCAPTCHA or Cloudflare Turnstile, and paste in the matching site key and secret key. You can enter the keys directly in the Captcha block or centrally under Otter โ†’ Settings โ†’ Integrations. hCaptcha works too, through its own integration.

One gotcha worth knowing: the captcha only appears on the published form once the providerโ€™s keys are saved. If the live form looks exactly the same before and after you add the block, missing keys are the usual suspect. ๐Ÿ†˜

An autoresponder is the โ€œgot it, talk soonโ€ email the visitor receives after submitting. In the free version, you can customize the subject and body of that message in Form Options, so write something warm, set expectations (โ€œreplies within one business dayโ€), and youโ€™re set

Otter Pro adds Reply with AI to the autoresponder: instead of one static message, it generates a personalized reply for each submission. You write a prompt describing the reply you want, insert the visitorโ€™s actual answers with magic tags, and set a static fallback message on a separate tab for the moments an AI reply canโ€™t be generated. Itโ€™s a nice touch for quote requests, since the confirmation can reference the service the person asked about.

Otter Pro starts at $69 per year for a single site at introductory pricing ($139 list, renewals at full price), with a 30-day money-back guarantee. The Otter pricing page has the full plan breakdown

The Style tab handles the looks: colors for labels, input text, and backgrounds, submit button styles for normal and hover states, label sizing and spacing, field padding, and border radius. If youโ€™ve configured Otterโ€™s global defaults, the form can inherit those colors so it matches the rest of the site without extra fiddling

Before hitting publish, two finishing touches:

  • Submit messages: enable them from the Form Options three-dots menu and write a friendly success message (โ€œThanks! Your quote request is in.โ€) plus an error message for server hiccups.
  • Redirect on Submit: optionally send visitors to a thank-you page after submission. Useful if you track conversions.

Publish the page, then send yourself a real test submission. Check that the notification email arrived, the autoresponder landed, and the entry shows up under Otter Blocks โ†’ Submissions. Hereโ€™s the kind of finished form visitors will see (this example from the Otter docs includes the Pro-only file upload field at the bottom):

A finished Otter form on a live page showing email, text, checkbox, textarea, number, radio, select, URL, and file upload (Otter Pro) fields with a submit button

Done and done. ๐ŸŽ‰

Otterโ€™s Form block covers contact forms, quote requests, and subscribe forms well. Itโ€™s not trying to replace the heavyweights, and pretending otherwise would be a disservice. A dedicated form plugin earns its install when you need:

  • Conditional logic: showing or hiding fields based on earlier answers (โ€œif they pick Wedding, ask for the venueโ€). Otterโ€™s form fields donโ€™t do this.
  • Multi-step forms that split long applications across pages.
  • Calculations: instant price estimates that update as the visitor fills the form in.
  • Serious entry management: Otter stores every submission and lets you view them free, which covers most small businesses, but exporting entries requires Pro. If your workflow lives in exported spreadsheets, a form plugin with free export (or built-in reporting) fits better.
  • Polls, surveys, and quizzes with results analysis.

If that list describes your needs, look at WPForms or Fluent Forms, both built specifically for complex forms. For everything simpler, one less plugin is one less thing to break on a Tuesday. ๐Ÿ˜…

The whole build, in recap form:

  • Install the free Otter Blocks plugin and insert the Form block (Contact Form variation).
  • Shape the fields around what a quote request actually needs: service, budget, timing, details.
  • Point submissions at the right inbox and leave Reply-To empty for easy follow-ups.
  • Drop in the Captcha block so bots bounce off.
  • Write an autoresponder (Pro can personalize it with AI).
  • Style it to match the site, test a real submission, publish.

The bottom line: for a service business that needs a clean quote-request or contact form, Otterโ€™s Form block does the job without adding a dedicated form plugin to the maintenance pile. For conditional logic, multi-step flows, or calculations, a purpose-built form plugin is worth the extra install

Once the form is live, Otter can keep earning its keep elsewhere on the site: thereโ€™s a slider block for showcasing work and even a live search feature if the site grows into one. What kind of form are you building first? Drop it in the comments section below! ๐Ÿ‘‡

speed guide

FREE GUIDE

4 Essential Steps to Speed Up Yourย WordPress Website

Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.ย ๐Ÿš€

Yay! ๐ŸŽ‰ You made it to the end of the article!

Related:

Digital Automation Training Benin: 5 Winning Skills Employers Demand in 2026

<a href="https://yoursite.com/automation-africa/" title="WhatsApp Marketing Automation Africa: 6 Dangerous Mistakes Brands Make in Nigeria”>
WhatsApp Marketing Automation Africa: 6 Dangerous Mistakes Brands Make in Nigeria

Want to learn this practically?

Join Justfine Infotech and build real digital skills in AI, automation, web development, digital marketing, office productivity, e-commerce, freelancing and cybersecurity.

Available Programmes:
6 Weeks Certificate โ€ข 3 Months Professional Certificate โ€ข 6 Months Diploma โ€ข Full Professional Diploma

WhatsApp:
+229 01 57 57 99 15
+229 01 66 68 11 60

Enroll Now

Source: themeisle.com

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top