danielhuntr/forms-plus

There is no license information available for the latest version (v1.1.40) of this package.

A drag-and-drop form builder for Statamic

v1.1.40 2026-06-25 15:49 UTC

Requires

• php: ^8.3
• statamic/cms: ^6.0

Unknown License

Published on Packagist.org on 2026-06-25 15:49 UTC

README

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:

composer require danielhuntr/forms-plus

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:

Area	Purpose
All Forms	Create, edit, and delete forms
Email Templates	Set global default email templates
Theme	Style all forms with a live preview editor
Mail Settings	Configure a custom SMTP account for sending emails

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:

Type	Description
Text	Single-line text input
Email	Email address input
Phone	Telephone number input
Number	Numeric input
URL	Website address input
Date	Native date picker
Time	Native time picker
Date & Time	Combined date and time picker
Textarea	Multi-line text area
Select	Dropdown with custom options
Radio	Single-choice radio group
Checkboxes	Multi-choice checkbox group
File Upload	Single or multiple file upload

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.

Field	Description
Host	SMTP server hostname (e.g. smtp.gmail.com)
Port	Usually 587 for TLS or 465 for SSL
Encryption	TLS (recommended), SSL, or None
Username	Your SMTP username / email address
Password	Your SMTP password or app password. Never returned to the browser after saving.
From address	The address emails are sent from
From name	The display name shown in the recipient's inbox

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:

{{ form }}

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:

{{ forms_plus handle="contact_us" }}

Parameters

Parameter	Required	Description
handle	Yes	The form's handle
redirect	No	URL to redirect to after successful submission. Overrides the per-form setting.
error_redirect	No	URL to redirect to if validation fails
submit_label	No	Override the submit button text

Example with parameters

{{ forms_plus
    handle="contact_us"
    redirect="/thank-you"
    error_redirect="/contact"
    submit_label="Send Message"
}}

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:

Key	Element
Form wrapper	The <form> element
Field wrapper	Each field's wrapper <div>
Label	Field labels
Inputs	Text, email, number, date, time, URL inputs, textareas, and selects
Textarea	Textarea-specific overrides
Select	Select-specific overrides
Checkbox input	Checkbox <input> elements
Radio input	Radio <input> elements
Choice label	Checkbox/radio label wrappers
Submit button	The submit <button>
Error	Validation error messages
Help text	Instruction text below labels

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:

Panel position	How to activate
Bottom (default)	Click the bottom-dock icon in the floating panel header
Top	Click the top-dock icon
Left	Click the left-dock icon
Right	Click the right-dock icon
Detached window	Click the detach icon (window with traffic lights)

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:

Class	Element
.flexible-form	The <form> element
.flexible-form__field	Each field wrapper
.flexible-form__label	Field labels
.flexible-form__instructions	Help/hint text below labels
.flexible-form__input	Text inputs, textareas, and selects
.flexible-form__textarea	Textarea modifier
.flexible-form__select	Select modifier
.flexible-form__checkbox	Checkbox inputs
.flexible-form__radio	Radio inputs
.flexible-form__check-label	Checkbox/radio label wrappers
.flexible-form__check-group	Container for checkbox/radio options
.flexible-form__fieldset	Fieldset for checkbox/radio groups
.flexible-form__error-msg	Validation error messages
.flexible-form__input--error	Input modifier when a field has a validation error
.flexible-form__button	Submit button
.flexible-form__submit	Submit button wrapper

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:

.flexible-form__button {
    background: var(--color-button);
    color: var(--color-button-foreground);
}

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.

php artisan forms-plus:build-css

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:

.flexible-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flexible-form__field {
    width: var(--field-width, 100%);
}

Updating

After pulling a new release, run:

composer update danielhuntr/forms-plus
php artisan optimize:clear

Artisan Commands

Command	Description
php artisan forms-plus:build-css	Trigger a Vite / npm build to compile @apply rules from resources/css/forms-plus.css into your project's CSS output

Keyboard Shortcuts

Shortcut	Action
Cmd+S / Ctrl+S	Save the current editor (fields, settings, styles, email template, or mail settings)

License

MIT