A User Guide For The Craft CMS Formie Plugin

Installing and Activating Formie

Downloading from the Plugin Store

To get started with Formie, you'll first need to download it from the official Craft Plugin Store. This is the recommended way to obtain Formie, as it will ensure you have the latest stable release.

Head over to plugins.craftcms.com and you'll see the option to purchase a license key. Formie is free for personal use, and paid licenses start at £39 for commercial use. After purchasing, you can download the ZIP file containing the plugin code.

The only requirement for Formie is that you must be running Craft CMS 3.1 or later. It's compatible with PHP 7.0 and above. Formie doesn't have any other dependencies, so you won't need to install any additional plugins.

Once downloaded, unzip the Formie file so you have access to the folder containing the plugin code. This will be uploaded to your Craft site next.

Installing the Plugin

With the Formie plugin ZIP downloaded and unzipped, you're ready to add it to your Craft CMS install. Here's how to get Formie installed:

1. Login to your Craft CMS admin area, and navigate to Settings > Plugins.

2. Click the "Install" button at the top right and select the option to upload a plugin in a ZIP file.

3. Choose the Formie ZIP file you downloaded from the Plugin Store earlier.

4. Click "Continue" - this will upload the ZIP and kick off the install process.

The install may take a few moments to complete. A progress bar will display on-screen. When done, you should see a success message that Formie was installed.

If for any reason you run into errors during install, first ensure you're using a compatible version of Craft CMS. Double check the ZIP file is valid and not corrupted. You may need to trigger a manual uninstall, How To Clear Cache In Craft CMS, then attempt installing Formie again.

Activating Formie

Now that Formie is uploaded and installed, the final step is to activate it. This enables Formie and makes it available for use in your Craft site.

Head back to Settings > Plugins and locate Formie in the list of installed plugins. You'll see a button to enable/disable the plugin - click to enable Formie.

The page will refresh, and you should see Formie in the list of active plugins. That's it! The plugin is now installed and activated.

You'll also notice a new "Formie" link in your main sidebar navigation. This is where you'll go to start creating forms and manage all your Formie settings.

Some additional things you may notice after activating Formie:

• New database tables created to store form entries and other Formie data.

• The ability to create new "Form" entries from the main Entries page.

• Formie configuration settings available under Settings.

With the plugin fully activated, you can now start using Formie's powerful form building and management features throughout your Craft site. And since it's installed like any other plugin, you can easily disable or uninstall Formie if needed down the road.

Creating Your First Form

Naming and Configuring the Form

When you first create a new form in Formie, you'll be asked to provide some initial configuration details to get started. Let's look at the key options:

First, give your form a name - this will be displayed to users, so make it descriptive. For example, "Contact Us" or "Subscribe to Newsletter".

Next, set a handle. This is a unique ID that will be used to identify the form in your templates and database. Stick to lowercase letters and underscores, like "contact_form".

You can also pick which template your form should use. Formie includes a default template, but you can create custom templates with different styling and layouts. Leave this as "Default template" for now.

These initial settings impact how the form will be referenced in your code, what it looks like, and how entries are stored. Take a moment to choose logical options that fit your needs. The name and handle especially should be descriptive as they help organize your forms.

Adding and Arranging Fields

With the basic form configured, it's time to add some fields for capturing user input. Formie supports all native Craft field types like Plain Text, Dropdown, Checkboxes, and more.

Click the "New Field" button to add your desired fields in the order you want them displayed. For a simple contact form, you may add Name, Email, Message fields. Drag and drop to arrange them visually.

Make sure to give each field a descriptive name and validate it is required if needed. You can toggle options like character limits, default values, and CSS classes too.

Organize the fields thoughtfully into sections, like Name and Email contact details in one section. Keep critical fields like Email higher up. The layout should be clean and easy to follow for users.

Spend time customizing labels, validation, and display options for each field. This will enhance the form UX and ensure you capture the necessary information.

Displaying and Testing the Form

Once your fields are added and arranged, it's time to display your new Formie form on the front-end.

Simply create a template file and output the form using a Formie variable, like {% set form = craft.formie.forms('contactForm') %} - swapping in your form's handle.

Drop the variable in your markup and the form will be rendered: {{ form }}

With the form now displaying, test submitting it to preview the validation, notifications, and data storage. Tweak settings or fields that aren't functioning as expected.

Try submitted with valid and invalid inputs. Verify emails are sending and entries are storing properly under the form's section.

Use Craft's Live Preview or front-end URLs to view real-time changes as you refine the form. Test across devices to catch styling issues.

Keep adjusting the form until the appearance, behavior, and data capture are working perfectly. Don't be afraid to iterate on the design to create the optimal user experience.

With your new form completed, tested, and ready to go live - start embedding it on your site pages to begin collecting submissions from real users!

Form Fields and Layouts

Field Types

Formie supports all the standard form field types you'd expect:

Text fields allow freeform text input, like names, messages, etc. Set character limits and formatting rules.

Email fields validate properly formatted email addresses. Useful for newsletters.

Number fields only accept numerical input. Configure min and max values allowed.

Checkboxes let users select multiple options. Perfect for interests, categories, etc.

Radio buttons allow a single selection from preset options. Great for "one choice" questions.

Dropdowns provide a select list for picking one item. Useful for large preset options.

You can also add HTML for headings, paragraphs, images, and more.

These cover the most common form input types. Each serves distinct purposes, so choose wisely based on the data being collected.

Customizing Fields

Formie offers deep customization for each form field.

Start by providing a clear label that explains what to enter, like "Your Email" or "Select Interests".

Add helper text with additional guidance, like character limits or format examples.

Set default values to prefill fields. Useful for preselecting checkboxes, etc.

Validation rules can require inputs, set types and formats allowed, match values, and more. This ensures users provide valid data.

Adjust field widths and arrangement for optimal layouts. Group related fields into rows or sections.

For selects and radios, customize the options shown, toggle multi-select, and set a default option.

With full control over labels, descriptions, validation, options, and display, you can tailor each Formie field to fit your needs.

Layout and Design

Beyond individual fields, Formie offers form-level layout and styling options.

The column layout lets you create multi-column designs for a cleaner appearance. For example, aligning labels left and fields right.

Field widths can be set to percentage or pixel values for precisely sized inputs. Fit fields to content.

Field margins give spacing control between inputs and sections. Spread things out or condense as needed.

The field layout tab provides drag and drop arrangement of fields, columns, and custom HTML. Construct the optimal form flow.

For styling, use built-in options for input sizes, colours, and responsive behaviour. Or create CSS classes for advanced customization.

Test different column configurations, field sizing, and layouts to find the right balance of visual appeal and usability. Don't be afraid to experiment!

With Formie's flexible settings, you can build forms ranging from simple single-column to complex multi-step layouts with complete control over the field and form presentation.

Form Validation and Error Handling

Required Fields

When creating your form in Formie, you can specify which fields should be mandatory by enabling "Required Field". This forces users to provide input before submitting.

To indicate required fields, add text like "Required" or asterisks (*) to labels. Styling fields in bold or red helps as well. This clearly communicates which inputs can't be skipped.

Don't overdo required fields, or users may abandon forms. Stick to essential info like names, emails, and critical questions.

Test submitting with blank required inputs - the form shouldn't allow it. Required fields help minimize incomplete entries.

Validation Rules

Beyond required fields, Formie supports advanced validation rules through its underlying Craft CMS validation functions.

For example, set email fields to require properly formatted emails. Or number fields to allow only numeric values in a specific range.

Use string validation to define minimum/maximum lengths for text inputs. And regex for complex text formats.

With dropdowns and radio buttons, validate the submitted value matches one of the preset options.

Create multi-part validation like email format + domain for improved accuracy. Chaining validations helps refine criteria.

The key is choosing validation rules that closely match the expected real-world data from users. Don't be overly strict, but prevent nonsensical values.

Test submissions with both valid and invalid inputs. Refine rules until they catch bad data without blocking valid entries. Validations optimize data quality.

Custom Error Messages

When users violate validation rules, Formie displays default errors like "Value should be an email".

While accurate, these generic messages aren't very user friendly. Fortunately, Formie allows custom error messages.

For example, a better message for invalid email may be:

"Please enter a valid email address like [email protected] so we can send your free guide."

This is more conversational and actionable for users. Explain why proper input is needed and how to fix errors.

Some best practices for custom error messages:

• Use human-friendly language, not technical jargon

• Keep messages concise yet descriptive

• Provide examples of acceptable values

• Give clear guidance on resolving the error

With tailored messages, you can turn validation failures into positive coaching experiences. Users will understand exactly what went wrong and how to get back on track.

Well-designed error handling improves form completion rates and satisfaction. It pays to go beyond Formie's default validation messages.

Advanced Form Options

Conditional Logic

Conditional logic allows showing or hiding form fields based on user selections. This creates a dynamic, personalized experience.

For example, when selecting "Yes" for "Are you a customer?", reveal a field for entering customer ID. Keep it hidden if they select "No".

Or show different product options based on the item type selected earlier in the form.

Conditional logic is configured per-field under the "Visibility" tab. Define show/hide rules based on values of other fields.

Use visibility conditions for multi-path forms where inputs change based on context. Reduce clutter by only showing relevant fields.

Some tips for effective conditional logic:

• Keep logic simple - avoid complex nesting

• Test all paths to ensure proper field visibility

• Indicate when fields appear/disappear to prevent confusion

• Only show extra fields if critical for personalized data

When strategically applied, conditional logic creates dynamic forms that adapt on the fly. Users provide better data without distraction.

Multi-Page Forms

For lengthy forms, Formie lets you break inputs across multiple pages.

Under form settings, enable multi-page and assign fields to the desired pages. Use page breaks for logical sections.

Pages can have individual titles and descriptions. Use them to introduce each page's purpose.

Previous/next buttons will automatically appear for navigation. Or create custom buttons with CSS.

Multi-page forms benefit user experience. Long pages are daunting. Smaller chunks reduce cognitive load.

Some tips for multi-page forms:

• Limit 3-5 pages max to avoid frustration

• End pages on key questions to compel progression

• Minimize conditional logic across pages

• Use progress indicators so users know completion status

With Formie's multi-page capabilities, you can create flowing, wizard-style forms while guiding users smoothly through the process.

File Uploads

If users need to upload documents, images, or other files through your form, Formie's native file and image field types have you covered.

Just add the desired file field(s), configure max allowed files and individual filesize limits, then set permissions for the upload folder.

It's smart to validate allowed file types to prevent unsupported formats. And scan for potential viruses and malware.

For privacy, store uploads outside public web folders. Formie can automatically organize uploads in dated subfolders by default.

File fields work great for documents, screenshots, applying with work samples, etc. Just be sure your server can handle the storage demands and implement security precautions.

With a few configuration tweaks, Formie forms can accept user-uploaded files as needed - extending their versatility and capabilities.

Managing and Exporting Entries

Viewing and Searching

All submissions for a Formie form are stored as entries in the associated section. To manage form data, go to Formie > Forms then select your form.

The "Entries" tab lists all submissions. Click individual entries to view full details. Search and filter to find specific submissions.

For example, filter by submission date to analyze recent responses. Or search by name or email to lookup a user's entry.

Star important entries for easy reference. Toggle columns in the entry listing as needed.

Drill into the Entry Details to see values for every field, plus metadata like IP address and user agent.

Formie entries can also be managed alongside other Craft entries in the main Entries section. But the Formie entries tab provides quick specialized access.

Use these viewing, searching, and filtering tools to monitor form performance and analyze submission data in detail.

Editing and Updating

By default, form submissions are locked from editing once submitted. This ensures data integrity.

However, Formie does allow enabling editor access on the form settings. Then admins can edit entries after the fact.

This is useful in certain cases like updating contact details or fixing incorrect values. But avoid over-editing as it compromises authenticity.

Consider adding an "Update Your Submission" form separately if users regularly need to modify their data later on.

Also be cautious when deleting or anonymizing entries, as removing data context affects reporting.

Handle submissions as read-only records whenever possible. Only enable editing when truly beneficial for your business needs.

Exporting and Backups

To utilize form data externally, Formie allows exporting entries as CSV, JSON, XML and Excel files.

Under the entries tab, select entries to export then choose your format. Exports include all field values.

You can also automate exports on a schedule for regular backups. Use Craft's native triggering features.

For example, export all new form entries daily as a CSV. Then review in Excel for reporting.

Be sure to store exports securely, as they contain raw submitted data. Encrypt files as needed.

Regularly exporting form data gives flexibility to analyze it using external tools, integrate into other systems, or satisfy backup requirements. Formie streamlines the process.

Email Notifications and Delivery

Customizing Email Templates

Formie sends email notifications using customizable templates for complete control over messaging.

Under the form's settings, open the Confirmation & Notification tab. From here, edit the templates used for confirmation emails, admin notifications, and autoresponders.

The default templates include merge tags to dynamically insert user-submitted data. Customize the subject, body content, and HTML design to your needs.

For example, address users personally by name, tailor the message for your brand voice, and add header images or formatting. Make it feel like your own customized email.

Take the time to refine email content for each specific form and purpose. Well-written, personalized emails improve open rates and form experience.

To test changes, submit the form and have the test email sent to yourself. Tweak the template and repeat until satisfied.

With Formie's robust email templating, you can ensure notification messages align with your brand and delight users.

Conditional Routing

Using Formie's conditional logic, notification emails can be dynamically routed to different recipients based on the user's selections.

For instance, you may have separate contact email addresses for sales inquiries, support tickets, and general contacts.

Set up conditional routing rules that send the email to sales@ if they selected "Sales Question" as their reason for contacting, or support@ if they picked "Need Help".

This way emails are automatically sent to the optimal recipient without any extra steps.

Some tips for conditional routing:

• Keep rules clear and concise

• Test all routing paths to confirm delivery

• Add a default "catch all" recipient just in case

• Notify users their message is being directed properly

Intelligent conditional routing eliminates misdirected messages and creates a smoother contact process for customers.

Delivery Troubleshooting

If notification emails from Formie are not reliably reaching inboxes, there are a few troubleshooting steps to try.

First, confirm the form is actually working properly by checking logs for email send attempts after submissions.

Try sending a test email through Formie's utilities panel. This verifies Craft can communicate with the SMTP server.

Examine SMTP and error logs for clues. Increase logging levels temporarily if needed.

Email deliverability issues are sometimes on the receiving end. Contact the email service provider to see if messages from your server IP are being blocked or filtered as spam.

Work with your email host to whitelist your IP and domain. Also check for rate limiting issues.

For deeper debugging, enable Craft's email profiling setting to inspect full delivery transaction data.

With some diligent troubleshooting, you can get Formie emails reliably delivered. Just take a methodical approach, leverage logging, and work with your email provider as needed.

Connecting Forms to Databases

Saving Data to Craft CMS

Out of the box, Formie saves all submitted entries as native Craft CMS elements. So the data is automatically stored in Craft's database tables.

Entries are assigned to the section configured when creating the form. View and manage submissions from the Formie or Craft Entries dashboard.

This allows you to leverage Craft's strong content management capabilities for your form data.

For example, pull data into templates, output via GraphQL, or utilize Craft Commerce if collecting payments.

Storing form data as Craft elements keeps everything tidy within one CMS. And allows accessing entries with standard Craft APIs and plugins.

A few tips:

• Structure sections logically for easy organization

• Assign proper user permissions on sections

• Consider a "Forms" parent section to group all form entries

Saving to Craft provides robust data storage and utility without added complexity.

External Database Integration

For advanced scenarios, Formie can insert submitted data directly into external databases.

Use Formie's Post Submit Action to run PHP code on form completion. Query the database and execute INSERT statements to add entries.

This comes in handy when needing to populate data in legacy systems or proprietary apps that rely on custom databases.

Some tips for external DB integration:

• Store connection details securely

• Parameterize queries to prevent injection

• Wrap in transactions for error handling

• Log failures and trigger alerts as needed

With care, you can build custom integrations to shovel Formie data anywhere. No limitations on database type.

CRM Platform Connections

To synchronize form contacts and leads with CRM platforms like Salesforce and HubSpot, check out add-on plugins.

For example, Formie Connect for HubSpot maps form fields to HubSpot properties for inserting contacts.

Or Formie Salesforce Connector for syncing leads, contacts, accounts automatically.

These plugins handle authentication, field mapping, and data pushing seamlessly.

For other CRM systems, use APIs and webhooks to pass data and trigger imports on submission.

A properly integrated CRM connection lets form data flow directly into your sales and marketing systems. No manual importing required.

Just be sure to map fields correctly and test thoroughly before launching live integration. Don't corrupt your CRM data.

With the right plugins and APIs, Formie can feed data into virtually any external platform or database. The possibilities are endless!

Accepting Payments with Formie

Payment Gateway Setup

To collect payments through your Formie forms, first integrate a payment gateway like Stripe or PayPal.

Under Formie's settings, connect your Stripe account or PayPal credentials. This enables the Stripe and PayPal field types.

For Stripe, copy your publishable and secret API keys into Formie. PayPal requires client ID and secret.

Double check credentials are accurate before saving. Test transactions in sandbox mode before going live.

Formie can also process payments through supported Craft Commerce gateways like Braintree and Authorize.net. Just enable the relevant plugins.

With your payment provider configured, new "Stripe" and "PayPal" fields will be available when building forms.

Some security tips:

• Use test keys during development

• Only allow form admins gateway access

• Encrypt stored credentials

• Monitor logs for failures

With setup complete, your Formie forms are ready to securely collect payments!

Collecting Payments

To actually charge users upon form submission, first add a Stripe or PayPal field to your form.

Configure the amount, description, currency, and any special options.

On form display, the field will render as a credit card or PayPal checkout for entering payment details.

On submission, Formie will validate then tokenize the data and charge the gateway using their APIs behind the scenes.

The form won't complete until payment succeeds, so you are guaranteed funded entries.

Users will also receive payment confirmations and receipts from the gateway directly.

For server-side processing, listen for Formie's beforeSaveEntry event to fulfill orders, email invoices, etc.

With a few simple fields, your forms can easily collect payments for services, products, events, and more!

Managing Transaction Data

Formie logs all payment transaction details like charges, subscriptions, and refunds to the Craft database.

Find logs under Formie -> Utilities -> Payment Gateways

View transaction IDs, amounts, statuses, and other metadata. Search and filter to analyze performance.

Export logs as needed for audits or importing into accounting systems. Monetizing forms produces lots of valuable data!

For deeper insights, use Google Analytics ecommerce tracking on your site to capture revenue metrics.

Or integrate with business intelligence tools like ChartMogul to visualize subscription revenue over time.

Don't forget the payment gateways also provide detailed transaction histories and reporting. Sync it up for a complete financial picture.

Formie streamlines payment collection while still providing access to underlying transaction data from multiple sources. Payments with perks!

Administering and Managing Forms

The Formie Dashboard

The Formie plugin includes a centralized dashboard for monitoring form analytics and activity.

View top-level stats like total entries, conversion rates, and most-submitted forms. See recent activity and errors at a glance.

Drill into individual form analytics for insights like:

• Submissions over time

• Conversion funnel

• Most common values

• Field completion rates

• Errors and validation failures

The dashboard provides a powerful overview of form performance and health. No manual analysis required.

Use it to catch issues early, like drops in submissions or spikes in errors. And optimize user experience over time.

Form Management

Formie gives full control over managing existing forms:

Clone forms to rapidly create variations for A/B tests or iterative changes.

Archive forms to retire old forms while preserving data.

Import/export forms to migrate between environments or backup work.

Duplicate fields across forms to maintain consistency.

Permissions allow granular access by group. Restrict form deletion and edits.

Title formatting tags enable dynamically changing names in templates.

Keyboard shortcuts speed up workflow for power users.

Robust management capabilities help keep a tidy, controlled form collection over time. Don't let it become unruly!

Settings and Configuration

Each Formie form has deep customization available under its settings:

• Emails and autoresponders

• Conditional logic

• Data retention policies

• CRM and API integrations

• Styling and CSS classes

• Anti-spam protections

• Success behaviors

• ...and much more

Tailor settings to suit that specific form's goals and quirks.

For example, configure unique autoresponder sequences, default field values, specialized data handling, or custom styling.

Don't be afraid to dive into the advanced settings once familiar with the basics. There are tons of possibilities to explore.

Formie balances easy starting setup with extensive customization options. You control exactly how forms behave at both a macro and micro level.

Global Configuration and Settings

General Settings

Formie includes global general settings for managing default behaviors site-wide.

Configure a Google reCAPTCHA site key for human verification on all forms. Stop bots in their tracks.

Set default values for the number of allowed entries per IP and per form. Prevent spamming.

Choose whether new forms default to multi-page or single view. Set expectations.

Specify a default template for the styling and markup of all new forms. Quick branding.

Define default email providers and custom fields to include in all notification emails site-wide.

Enable debug logging to capture requests and errors for troubleshooting issues.

These general settings allow controlling important default behaviors universally. Values can still be customized per-form later.

Think through the optimal global rules and policies for your use case upfront. It gives new forms an instant head start.

Email Settings

Formie's global email settings define how all notification emails behave by default.

Set the global "From" name and email addresses for the "User" and "Admin" email roles. This populates new form email defaults.

Choose an email template theme like Classic or Modern to set the styling tone.

Configure custom SMTP providers for improved delivery rates, or leverage Craft's native email settings.

Set global email rate limiting to prevent bombarding inboxes during traffic spikes.

With thoughtful email defaults in place, each new form already has a solid email foundation you can build on.

Design and Styling

For quick branding, Formie allows defining global styles used in new forms.

Set a primary color used for buttons and highlights. And secondary for backgrounds.

Choose font families, weights, and typographic settings.

Upload custom CSS classes for reusable components like boxes or images.

Pick an optional default CSS framework like Bootstrap for grid layouts.

With styling basics established globally, new forms inherit a cohesive look and feel.

Tweak the global theme to match your brand, then focus on custom form design knowing the foundations are set.

Customizing and Extending Formie

Templates and UI Text

Developers can customize Formie's front-end form markup and UI text strings.

To brand the form HTML, copy the form.html template file to templates/_custom in your Craft site. Now edit to your needs.

For example, add custom CSS classes, output extra data, modify the field layout, etc. Changes will apply site-wide.

To tweak UI text like labels and messages, create a formie.php language file. Define custom translations.

No need to be locked into Formie's default templating or terminology. Customize it all!

Some examples of customizations:

• Branding with colors, logos, and fonts

• Rearranging field layouts

• Custom validation messages

• Multi-language support

• Front-end notifications before redirect

Don't be afraid to diverge from the standard Formie form appearance by leveraging template overrides. Make it your own.

Fields and Logic

Extend Formie functionality with custom fields, actions, and conditional logic.

Create a custom Craft plugin for advanced field types like signature capture, rich text editors, or nested repeaters.

Write custom validation rules for greater data integrity, like password match confirmation.

Build custom conditional logic bricks that reveal fields based on complex criteria.

Trigger external APIs or databases in custom submitted actions.

Integrate with Craft Commerce for customized payment flows.

The possibilities are endless when pairing Formie with custom code. Don't settle for just standard fields and options!

Webhooks and Integrations

For pushing data or triggering workflows on form submissions, leverage Formie's webhooks and APIs.

Register custom webhooks that fire on form events like completion or validation failures. Pass data payloads.

Subscribe the beforeSaveEntry event for programmatic entry manipulation before storage.

Use Craft GraphQL to output and query form schemas, entries, and submissions.

Integrate headless with reactive frontends using real-time submission streaming.

Build data flows to business systems by tapping into submission webhooks.

Formie provides integration points to extend functionality beyond the CMS walls. Connect it to your unique stack!