Your first form

Let's build a small contact form, put it on a page with a single tag, and follow a submission back into the control panel. It takes about five minutes. You'll need Formidable installed.

Create the form

1. Start a new form

   Open Add-Ons › Formidable, then Forms, and choose New. Name it Contact Us. Formidable suggests the handle contact_us.

   Templates find a form by its handle, so pick one you won't want to change.

2. Add some fields

   Once the form is saved, its edit screen opens on the builder. Drag three fields from the Add field palette into the page:

   • a Text field called First Name
   • a Text field called Last Name
   • an Email field called Email Address

   Click a field to edit its label, instructions and validation. Each field gets a handle from its label (first_name, email_address). That's the name its answer is posted under, and the name you'll use for it in templates.

3. Make Email required

   Open Email Address, switch to its Validation tab and turn on Required. An Email field already checks that the answer is a real address.

Put it on a page

Add the form tag to any template:

templates/default_site/contact.group/index.html

{exp:formidable:form form_handle="contact_us"}

That's the whole template. With only a handle, the tag renders the complete form from your site's theme: the <form> element, its hidden processing inputs, every field, error messages and the submit button.

Submit it

Visit the page, fill the form in and submit it. With no return= parameter, the visitor comes back to the same page and the form shows its success message.

Try it again with the email left empty. The page shows the error beside the field and keeps everything else you typed.

The form, rendered from one tag · Screenshot: ExpressionEngine 7.5.26, demo data

Find the submission

Back in the control panel, the dashboard lists your new submission under Latest submissions. Open it to read the answers, change its status, or edit it. The form's Submissions screen lists every submission, with filters and exports.

What the tag produced

Here's that one-line template, rendered by a real install. Its Contact Us form has the fields above and a few more, and the site uses the Tailwind theme. The excerpt shows the start of the form and its first field.

The whole form, from one tag

Example

templates/default_site/contact.group/index.html

{exp:formidable:form form_handle="contact_us"}

Rendered output (excerpt)Captured from ExpressionEngine 7.5.26 on 2026-10-11. Signed values and the CSRF token shown as “…”, host replaced with example.com, blank lines collapsed.

<form id="contact_us" name="contact_us" method="post" action="https://example.com/index.php?ACT=101" data-formidable-disable-submit="1"><div class="formidable-meta" style="display:none"><input type="hidden" name="_formidable_meta" value="…"><input type="hidden" name="csrf_token" value="…"><input type="text" name="formidable_hp" value="" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;height:0;width:0;border:0;padding:0"><div data-formidable-columns="12" data-formidable-page="1" data-formidable-section="s_1_1" class="col-span-1 flex flex-col space-y-1 lg:col-span-12">
	<label class="formidable-field-label font-semibold" for="age">Age</label>

	<output class="formidable-computed-value" id="age" aria-live="polite" data-formidable-computed-display></output><input name="age" value="" type="hidden" data-formidable-computed='{"type":"date","config":{"to":{"today":true},"from":{"ref":"birthday"},"unit":"years","inclusive":true,"operation":"difference"},"format":{"decimals":2,"thousands":"","decimal_point":".","prefix":"","suffix":""},"today":"2026-10-11","now":"2026-10-11T15:09"}'>

</div>
</div>

<div class="formidable-form-content"><div class="formidable-page mb-8" data-formidable-page="1" data-formidable-page-id="p_1">

	<div class="formidable-section mb-6" data-formidable-section="s_1_1" data-formidable-page="1">

	<div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
		<div data-formidable-columns="12" data-formidable-page="1" data-formidable-section="s_1_1" class="col-span-1 flex flex-col space-y-1 lg:col-span-12">
	<label class="formidable-field-label font-semibold" for="first_name">First Name</label>
	<span class="formidable-field-instructions text-sm text-grey-300" id="first_name-instructions">We prefer your legal name</span>
	<input id="first_name" name="first_name" value="" type="text" aria-describedby="first_name-instructions" class="block w-full rounded-md border border-gray-300 px-4 py-2 shadow-sm">
…

A few things worth noticing:

• The form posts to a Formidable action (?ACT=…). You never write that URL yourself.
• A hidden block comes first. It holds a signed _formidable_meta value telling the server which form this is and how it was rendered, ExpressionEngine's CSRF token, and a honeypot that bots tend to fill in.
• The input's id, name and type come from the field. Its instructions have an id the input points at with aria-describedby, so screen readers announce them.
• The classes come from the theme, and from attributes saved in the control panel. You can change them without touching this template. See Regions and attributes.

Next steps

Render a form your way

Go from the one-line tag to your own markup, one layer at a time.

Send an email on submit

Add a workflow that emails your team, or a copy to the visitor.

Choose a theme

Default, Tailwind or Bootstrap, or your own copy of one.