Download the PHP package danielhuntr/forms-plus without Composer

Forms Plus

A drag-and-drop form builder addon for Statamic. Build and manage forms directly from the Control Panel, style them with a live theme editor, and handle submissions with built-in email notifications.

Requirements

• PHP 8.3+
• Statamic 6.0+

Installation

Install via Composer:

Statamic will automatically discover and register the addon. On the first page load after installation a Contact Us demo form is created so you have a working example to reference.

Control Panel

Navigate to Forms Plus in the CP sidebar. The section has four areas:

Creating a Form

1. Go to Forms Plus → All Forms and click New Form.
2. Enter a Title (e.g. Contact Us) and a Handle (e.g. contact_us). The handle is used in your Antlers templates.
3. Click Create Form to open the form builder.

Form Builder

The builder has four tabs:

Fields

Drag fields from the left palette onto the canvas, or click them to add in order. Click any field on the canvas to open its settings panel on the right.

Available field types:

Field settings (shown in the right panel when a field is selected):

• Label — displayed above the field
• Handle — used as the field name in submissions
• Instructions — optional help text shown below the label
• Placeholder — ghost text inside the input (where applicable)
• Width — 25%, 33%, 50%, 75%, or 100% of the form row
• Required — toggles validation
• Type-specific options: rows (textarea), options (select/radio/checkboxes), multiple (select/file), allowed extensions (file), character limit (text/textarea)

Press Cmd+S (Mac) or Ctrl+S (Windows/Linux) or click Save Form to save your fields.

Submissions

View all submissions in a table. Each row shows the submitted values, date, and a delete button. Use Export CSV (top right) to download all submissions as a spreadsheet.

Settings

Configure per-form behaviour:

• Submit button label — override the default "Submit" text
• On submit — show a success message, or redirect to a URL
• Success title / message — shown after a successful submission
• Enable/disable — temporarily disable the form without deleting it

Email notifications:

• Send notification to — the email address that receives an alert on every submission. Leave empty to disable notifications.
• Reply-to field — when you reply to a notification, the reply goes to the submitter instead of their own address. Automatically pre-selected if the form has a single email field.
• Confirmation email — toggle whether to send the submitter a confirmation email.
• Submitter email field — the form field that holds the submitter's email address. Automatically pre-selected if the form has a single email field.

Email

Design the HTML email templates sent for this form. Both the notification (to your team) and confirmation (to the submitter) templates can be customised with a drag-and-drop builder and support variables like {{name}}, {{email}}, etc. Templates can inherit from the global defaults set in Email Templates.

Mail Settings

By default Forms Plus sends emails using the server's MAIL_MAILER setting from .env. To use a dedicated SMTP account (e.g. Gmail) without touching .env, go to Forms Plus → Mail Settings.

Enable the Use custom mail settings toggle to activate. When disabled, Forms Plus falls back to the server default.

Gmail users: Google requires an App Password — your regular account password will not work for SMTP. Create one at myaccount.google.com/apppasswords and enter it in the Password field.

Use the Send Test button to verify your configuration before going live. Save your settings first, then enter an address and click Send Test.

Embedding a Form in a Blueprint (Fieldtype)

Forms Plus ships a Forms Plus fieldtype you can add to any Statamic blueprint. This lets content editors pick which form appears on a page directly from the entry editor, without hardcoding a handle in your template.

Adding the fieldtype

1. Open the blueprint you want to edit (e.g. a Pages blueprint) in Fields → Blueprints.
2. Add a new field and search for Forms Plus in the fieldtype picker.
3. Give it a handle (e.g. form) and save the blueprint.

Rendering in Antlers

The fieldtype augments to the fully rendered form HTML. Output it anywhere in your template:

That's it — the form is rendered with all your theme styles, settings, and submission handling applied automatically. No additional tag parameters are needed.

Rendering a Form (Antlers)

Use the {{ forms_plus }} tag in any Antlers template:

Parameters

Example with parameters

Success message (no redirect)

When On submit is set to "Show message", the page reloads with ?fpsubmitted=handle in the URL and the form is replaced with the success message automatically. No extra template work needed.

Styling Forms

Theme editor

Go to Forms Plus → Theme for a live preview style editor. Choose a preset theme (Default, Minimal, Rounded, Dark) and fine-tune individual elements using Tailwind CSS utility classes. Changes are previewed in real time.

Available style targets:

CSS editor panel

The Custom CSS section has a full CodeMirror editor with syntax highlighting. By default it sits inline in the sidebar. Click the undock button (top right of the editor) to pop it into a floating panel you can position anywhere on screen:

The detached window can be freely moved by dragging its title bar and resized from any edge or corner — matching the behaviour of a native OS window. Press Cmd+S / Ctrl+S at any time to save without leaving the editor.

Click Dock in the panel header to return the editor to the sidebar.

Preview stylesheet

Select a stylesheet from your resources/css/ directory using the file picker in the Theme sidebar. Forms Plus proxies the file content server-side and injects it into the preview iframe so that:

• CSS custom properties defined in your theme (e.g. --color-button) resolve correctly in the preview.
• @theme blocks (Tailwind v4) are converted to :root {} declarations so var() references work.
• Colour utilities derived from @theme (e.g. bg-green, text-button) are extracted and passed to the Tailwind CDN preview engine.

The preview header has Light and Dark mode toggles so you can check both colour-scheme states without leaving the editor.

Custom CSS

The editor accepts any CSS targeting the .flexible-form namespace. It is injected as a <style> block on every page that renders a form. Click any class chip in the reference panel to insert a ready-made rule at your cursor.

Full class reference:

Using CSS custom properties

If your theme defines custom properties (e.g. via Tailwind v4's @theme), you can reference them directly in the custom CSS editor:

The preview resolves these properties automatically as long as a preview stylesheet is selected.

Tailwind @apply and the CSS build pipeline

@apply is a build-time feature — it cannot run in the browser. Forms Plus integrates with your existing Vite or npm build process to support it:

1. When you save, Forms Plus writes your custom CSS to resources/css/forms-plus.css.
2. If a preview stylesheet is selected, it automatically adds @import './forms-plus.css'; to that file (after any existing @import "tailwindcss" line) so Tailwind picks it up during your next build.
3. Click Rebuild CSS in the theme editor (or run the artisan command below) to trigger the build from within the CP.

This runs vite build (or npm run build as a fallback) using the same binary Vite uses in your project. After the build completes, @apply rules are live on the frontend.

Note: The preview iframe uses the Tailwind CDN and cannot run @apply. Use standard CSS properties or var() references for instant preview feedback, and rely on the build pipeline for final @apply output.

Field widths

Fields support fractional widths (25%, 33%, 50%, 75%, 100%). To make multiple fields sit on the same row, add this CSS to your layout — the form uses a CSS custom property per field:

Updating

After pulling a new release, run:

Artisan Commands

Keyboard Shortcuts

License

MIT