How to Create a WordPress Contact Form Without a Form Plugin

For any service-oriented business, having a mechanism for potential clients to request a quote is crucial. While typical recommendations suggest using a specific contact form plugin, which indeed works, it also adds another plugin to keep updated, a new settings interface to master, and more upgrade reminders to ignore.

If your website is already utilising the block editor, there’s a more streamlined solution. The Otter Blocks plugin is free (with over 300,000 active installations and a 4.7-star rating on WordPress.org) and enhances Gutenberg by adding a range of additional blocks, including a comprehensive Form block that features custom fields, email routing, spam protection, and automatic replies.

To be completely candid, yes, Otter is still a plugin, so claiming there isn’t a plugin at all would be misleading. However, the advantage lies in avoiding a separate specialised form plugin when you can use a general-purpose blocks plugin that serves that purpose as well. This means one less component to manage.

This tutorial details the process of creating a quote request form for a service-based business, guiding you through each step: selecting fields, directing submissions to the correct inbox, preventing spam, and configuring an automated response. It also discusses scenarios where a dedicated form plugin might be more effective, as occasionally that is indeed the case.

DISCLAIMER: Otter Blocks is developed by ThemeIsle, the same company that operates this blog. This guide focuses on the functionalities provided by both the free and Pro versions, while being transparent about the limitations where a different plugin might be more suitable.

Requirements Before You Begin

• A WordPress site powered by the block editor. Any contemporary theme is compatible. If you’re unfamiliar with Gutenberg, our Gutenberg tutorial explains the essentials.
• The free Otter Blocks plugin. Everything outlined from steps 1 to 4, as well as step 6, is accessible in the free version. Pro features are clearly marked when needed.
• An email address to which the quote submissions should be sent.
• Approximately 15 minutes. Less time will be needed if you skip the styling step.

Step 1: Install Otter Blocks and Add the Form Block

From your WordPress dashboard, navigate to Plugins → Add New, search for “Otter Blocks,” then click Install and Activate. That’s all the setup you need; there’s no complex wizard to navigate.

Next, go to the page where you want the form to appear (either create a new page under Pages → Add New or edit an existing contact page). Click the + button to access the block inserter, search for “Form,” and add the Form block. Otter will prompt you to choose between a Contact Form or a Subscribe Form. Opt for the Contact Form. (By clicking ‘Skip’, you’ll also receive the contact form, as it is the default option.)

You will have a basic form with fields for Name, Email, and Message. While technically you could publish it now, a quote request form merits more tailored fields, so continue.

Step 2: Create the Quote Request Fields

Click on any field to adjust its settings from the sidebar. You have the ability to add new fields, reorder existing ones, and modify each field: changing its label, hiding it, setting a percentage width (great for placing Name and Email side by side at 50%), adding placeholder text and help notes, and toggling the required status of the field.

For a quote request form suitable for a service business, a solid selection of fields may include:

• Name (Text, required) and Email (Email, required): keep these defaults.
• Phone (Text, optional): some clients may prefer a call back.
• Service required (Select or Checkbox): list your main services so incoming requests are pre-sorted.
• Budget range (Select): a potentially awkward but insightful question.
• Preferred start date (Date): differentiates between leads ready to proceed “next week” and those who are “just browsing.”
• Project details (Textarea, required): simply rename the default Message field to fit your context.

The variety of free field types available includes text, email, textarea, checkbox, radio, select, number, date, and URL. Advanced fields like hidden fields, file uploads, and Stripe payments are reserved for the Pro version. Additionally, webhooks for immediate submission transfers to other applications are also features of Otter Pro.

PRO TIP: If staring at an empty form feels overwhelming, Otter’s AI Form option can create an initial set of fields from a plain-language prompt (like “a quote request form for a landscaping company”). Just a note: to use Otter’s AI features, you’ll need to connect with an AI provider, which may include your own OpenAI API key or the WordPress AI connector if you have bundled AI credits. Keep in mind that regenerating replaces the current form rather than saving versions, so make sure to save a satisfactory result before trying again.

Step 3: Direct Submissions to the Correct Inbox

Select the entire form and open Form Options in the sidebar. This is where you will choose where submissions should be sent and how notification emails should be formatted:

• Email To: this defaults to the site administrator. Direct it towards the inbox that actually handles quotes.
• Email Subject: something easily scannable like “New quote request: landscaping.”
• CC and BCC: include a colleague or a shared sales email address.
• From Name: enter the sender’s name on the notification email.
• Reply-To Email: leave this empty; replies to the notification will go directly to the visitor’s provided email. This small default can save you time in a quote process.

Here are two reassuring points: First, every valid submission is stored in the database before the email dispatch, so an unresponsive mail server won’t silently lose a potential lead. Second, you can verify all submissions (including any issues with delivery) under Otter Blocks → Submissions in the dashboard, and viewing them is free. Exporting submissions, however, is a feature available with Otter Pro.

PRO TIP: If you’re developing a subscribe-style form instead, Otter provides marketing integrations for Mailchimp and Brevo, allowing new signups to be automatically added to your mailing list.

Step 4: Activate Spam Protection

Public forms attract bots similar to how picnics draw wasps. Otter addresses this issue with a built-in Captcha block: simply click the + button within the form, search for “Captcha,” and incorporate it. Following that, select a provider, be it Google reCAPTCHA or Cloudflare Turnstile, and insert the corresponding site key and secret key. You may input the keys directly into the Captcha block or centrally under Otter → Settings → Integrations. hCaptcha is also an option available via its own integration.

One thing to be aware of is that the captcha will only show up on the live form once the provider’s keys have been saved. If the published form appears unchanged before and after adding the block, missing keys are usually the culprit.

Step 5: Configure the Autoresponder

An autoresponder is the quick “confirmation received, will be in touch soon” email that the visitor gets following their submission. In the free version, you can tailor the subject and body of this message within Form Options, so craft a friendly note, set the expected response time (“we’ll reply within one business day”), and you’re all set.

Otter Pro includes the Reply with AI feature for the autoresponder: rather than sending a generic message, it creates a customised response for each submission. You can provide a prompt describing the reply you want, include the visitor’s actual answers with magic tags, and set a static fallback message on another tab for those times when an AI response cannot be generated. This personal touch is particularly effective for quote requests since it allows the confirmation to reference the specific service inquired about.

Otter Pro starts at $69 per year for a single site under introductory pricing ($139 full price), with renewals at the standard price. The complete breakdown of Otter’s pricing can be found on their pricing page.

Step 6: Style the Form and Publish

The Style tab lets you customise the appearance: colours for labels, input text, and backgrounds, submit button styles for normal and hover states, label sizes and spacing, field padding, and border radius. If you’ve set Otter’s global defaults, the form can match the overall site colours without any extra adjustments.

Before you publish, ensure you complete two final steps:

• Submit messages: enable them via the three-dots menu in Form Options and create a friendly success message (“Thanks for your quote request!”) along with an error message for any server issues.
• Redirect on Submit: you can optionally direct visitors to a thank-you page after they complete the submission. This is valuable if you want to track conversions.

Publish the page, and then perform a test submission to verify that the notification email arrived, the autoresponder was sent, and the entry appears under Otter Blocks → Submissions. Below is an example of what the finished form will look like for visitors (this demonstration from the Otter documentation includes the Pro-exclusive file upload feature at the bottom):

Congratulations, you have successfully accomplished this!

When a Dedicated Form Plugin is More Suitable

Otter’s Form block efficiently manages contact forms, quote requests, and subscription forms. However, this isn’t trying to compete with the heavyweights, and pretending it could would be misleading. A dedicated form plugin becomes essential when your needs include:

• Conditional logic: revealing or hiding fields based on prior responses (“if they select Wedding, request the venue”). Otter’s form fields lack this functionality.
• Multi-step forms that divide extensive applications across various pages.
• Calculations: immediate price calculations that update as the user fills out the form.
• Advanced entry management: Otter can save every submission for free, which is sufficient for many small businesses, but exporting entries is limited to Pro users. If your workflow relies on exported spreadsheet data, a form plugin with free exports or integrated reporting capabilities would be advantageous.
• Polls, surveys, and quizzes that include results analysis.

If these requirements resonate with you, consider checking out WPForms or Fluent Forms, both designed specifically for handling complex forms. For more straightforward forms, utilising less plugins reduces potential points of failure during updates.

Conclusion

To summarise the entire process:

• Install the free Otter Blocks plugin and insert the Form block (choosing Contact Form variation).
• Customize the fields to meet the specific requirements of a quote request: service type, budget, timing, and relevant details.
• Ensure submissions go to the correct inbox while leaving the Reply-To section empty for straightforward follow-ups.
• Add the Captcha block to deter bots.
• Create an autoresponder (Pro users can provide personalisation via AI).
• Style the form to match the website aesthetics, conduct a real submission test, and publish the page.

In conclusion, for service-based businesses seeking a functional quote request or contact form, Otter’s Form block effectively serves the purpose without necessitating a dedicated forms plugin. However, for more intricate needs such as conditional logic or multi-step flows, a specialised form plugin may be a better choice.

Once your form is operational, Otter can continue adding value throughout your site; it includes a slider block to showcase your portfolio and even a live search function if your site expands. What kind of form do you plan to create first? Share your ideas in the comments!

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow the simple steps outlined in our 4-part mini-series to reduce your loading times by 50-80%. 

Congratulations! You’ve concluded the article!