A User Guide For The Craft CMS Freeform Plugin

Installing and Configuring Freeform

Meeting System Requirements

To utilise the full functionality of Freeform, your Craft CMS installation must meet specific prerequisites. Freeform requires PHP 7.0 or later, along with Craft CMS 3.1.0 or newer. Your database must support JSON columns for storing form templates and submissions.

Having PHP 7.2 or later is ideal, as is running Craft CMS 3.5.0 or above. This ensures maximum compatibility and access to the latest Freeform features. Whilst not mandatory, using MySQL 5.7+ or PostgreSQL 9.5+ as your database allows Freeform to operate optimally.

Overall, verifying you satisfy the minimum Craft CMS requirements for Freeform guarantees it will integrate seamlessly with your site. Don't forget to check factors like your PHP memory limit and whether you have installed dependencies like Guzzle. Meeting Freeform's prerequisites avoids puzzling errors and ensures smooth sailing.

Downloading and Installing

Once your Craft CMS site meets the system requirements, installing Freeform takes only minutes.

First, head to the official Craft Plugin Store and purchase a Freeform license. After checkout, you can download the Freeform plugin as a .zip file.

Next, unzip and upload the /freeform folder to your /craft/plugins directory via SFTP. Alternatively, you can unzip and upload the folder directly in your Craft CMS admin Control Panel under Settings > Plugins.

With the files uploaded, navigate to the Plugin page in your Craft admin area. Locate Freeform and click the "Install" button. Assuming no issues, Craft will enable the plugin successfully.

To verify Freeform is installed correctly, check it now displays under Settings > Plugins without any disabled warnings. You can also navigate to Freeform in the main admin navigation to start configuring forms.

Configuring Global Settings

With Freeform now installed, the next step is tailoring the global configuration settings. This allows customising Freeform's functionality to match your specific needs.

The Notifications panel is a good place to begin. Here you can set email addresses for admin notifications when forms are submitted or experience errors. Tweak the subjects and messages to your preference.

Enabling spam protection in the Security settings helps block bot form submissions. Adjust the Honeypot field as desired, and turn on the necessary CAPTCHA and Blacklist options.

Don't forget to set up your form email templates under the Email Templates tab. Freeform includes samples you can modify as needed to control the look of emails for different form events.

The Webhooks settings allow POSTing submissions to other services like Slack or MailChimp. Create webhooks to connect Freeform with these applications.

Finally, the Form Templates section lets you customise the starting templates for new forms. Update these to speed up designing forms with your commonly used fields, layouts and settings pre-loaded.

With Freeform's global configuration adjusted, your forms will now behave precisely as you require. Take time to explore the powerful options available to tailor Freeform's functionality via the intuitive admin settings.

Creating Forms in Freeform

Adding and Arranging Fields

Constructing a form in Freeform begins by adding the required fields. The user-friendly drag-and-drop interface makes including common options like text boxes, email inputs, checkboxes and more a breeze.

Simply drag your desired field from the toolbar onto the canvas. The form builder allows total flexibility, so place fields anywhere on the page. Resize, duplicate or delete fields as needed while designing your layout.

Freeform caters for complex multi-page forms too. Use page breaks to split longer forms across multiple pages with clear navigation. Free-positioning fields and pages fosters creating custom form flows intuitive for users to follow.

Arranging your fields purposefully enhances usability. Logically group related information, with key details upfront. Position longer inputs like comments below shorter fields. Arrange checkboxes and radios vertically for scanning.

With robust design capabilities, Freeform empowers constructing forms tailored precisely to different goals. Carefully consider your field order and layout to optimise for completion rate.

Configuring Field Options

Beyond adding and positioning fields, Freeform enables extensive customising of their options. This allows crafting field behaviour that captures the right information from users.

Use labels to clearly explain what to enter for each field. Well-worded labels reduce confusion and improve the completion rate. Instructions offer further guidance like character limits or format examples.

Making fields required or optional is another useful option. Set essential fields as required to mandate entering information. Leave optional inputs for secondary details.

Entry limits let you specify the number of times users can add values for repeating fields like checkboxes. Restrict to one selection for single-choice radios. Allow multiple selections for interests or topics.

Per field configurations like these ensure your Freeform forms gather the exact data needed. Tailor field settings thoughtfully to optimise the user experience.

Formatting and Design

Freeform provides powerful design functionality for styling attractive, user-friendly forms. Customise form appearance at global and field levels through various formatting options.

Utilise native HTML and CSS support to tweak form designs. Add custom CSS classes and IDs to apply targeted styling rules. Use semantic markup like fieldsets and legends to improve structure.

For quick styling, Freeform includes utility CSS classes for common properties like colours, padding and text size. Easily set validating states as well for visual feedback when entering information.

Beyond looks, consider usability factors like mobile-friendly inputs for phone users and accessibility through proper semantic markup. A stellar design marries aesthetics with optimised interaction.

Freeform's deep design integration with Craft CMS allows building forms that balance visual appeal with purpose. Craft a form which captures user attention while remaining easy-to-use and understand.

Advanced Form Field Types

Multi-Page Forms

While shorter forms can live on one page, Freeform empowers creating multi-page forms for complex use cases through page breaks.

Page breaks segment lengthy forms into separate pages with clear transitions between each. This enhances usability by splitting related sections into their own pages.

For example, use page breaks when progressing through different stages like personal details, background information and finally submissions. Guide users through logical steps.

Multi-page forms maintain context using persistent field values and validation across pages. Conditional logic also hides irrelevant pages based on previous responses.

Craft compelling multi-step narratives by combining pages with progress trackers and conditional branching logic. Freeform handles the complexity behind the scenes.

Overall, multi-page forms improve completion rates for long or branching forms by presenting digestible segments. Use pages judiciously to avoid overloading users.

File Uploads and Signatures

Certain forms require uploading files like resumes or capturing legally-binding e-signatures. Freeform caters to these specialised needs.

The file upload field allows sending documents like PDFs and images. Configure file types and size restrictions as needed. Multiple uploads are also possible.

For e-signatures, Freeform provides a signature pad letting users sign with a trackpad or mouse. Their signature gets embedded directly into the submission.

Integrate file uploads and signatures into contracts, onboarding paperwork, e-commerce checkouts requiring user verification and more.

Powerful validation ensures users complete necessary uploads or signatures prior to submitting. Add custom follow-up fields confirming acceptance of terms.

With these advanced fields, Freeform handles documents and contracts as easily as contact forms. No more juggling multiple services for file handling and signatures!

Rich Text and Matrix Fields

Certain use cases demand more than basic text boxes, like customizable WYSIWYG content or repeatable Matrix blocks.

The rich text field enables full HTML capabilities, allowing users to add formatted content like images and embeds within form fields.

For repeatable groups of fields, Matrix blocks offers tremendous flexibility. Build custom sets of fields users can re-use as needed like for multiple testimonials.

These advanced fields maintain a streamlined form editing experience. Drag in rich text and Matrix fields and configure them like any other field with validation rules and conditional logic.

Do you need an FAQ form where users can add multiple question/answer pairs? Matrix blocks have you covered. The combinations are endless.

Freeform breaks the mold for traditional forms through robust field types. Don't settle for basic contact forms - create living forms with rich text and Matrix fields.

Controlling Form Validation and Data

Field Validation Rules

Freeform provides extensive validation options to control the quality of submitted data. Beyond marking fields required, specialized rules enforce formatting, lengths and regex patterns.

Required validation ensures completion of critical fields. Length validation defines min/max text lengths and number ranges. Regex helps match complex formatting like phone numbers or postcodes.

Custom validation methods allow custom JavaScript coding for unique needs. Implement custom password strength checking or link validation as examples.

Granular validation prevents submissions from missing essential information. Detailed requirements create clear expectations. Real-time validation highlights errors immediately for quick correction.

Together with spam protection, intelligent validation reduces bot submissions and raises data quality. Yet take care to only implement necessary rules avoiding over-validation frustration.

Conditional Logic

Conditional logic adds dynamism to forms, allowing different field visibility based on user responses. This creates guided, multi-branching paths tailored to individuals.

Hide irrelevant fields until needed to focus users. Branch to separate sections using select menu choices or checkbox logic. Conditionally require certain fields if previous options are chosen.

Page skipping and redirection also help progress users to the appropriate pages. For example, redirect high-value customers to expedited checkout steps.

Implement conditional logic judiciously after careful form planning. Visualize the ideal user flow before building logic to support it. Avoid overly complex conditional mazes.

With conditional logic, Freeform forms adapt on-the-fly to how people respond. Guide your audience to custom journeys without code using intuitive field rules.

Pre-populating Data

In certain cases, pre-populating form fields with existing data simplifies form completion. Set default values, or pull data from user accounts and profiles.

Default values act as placeholders, providing initial guidance which users can change. Pull common values from CRM data like locations for a contact lookup.

Pre-populate with user profile data to save re-entering details. Forms can automatically leverage names, emails, addresses and past submissions.

Take care not to pre-fill too much, or users may blindly submit incomplete forms. Strike a balance between populating necessary basics, without overly influencing responses.

Intelligently pre-filling fields removes friction for known users, whilst still allowing customization. Combined with conditional logic, personalized forms require minimal effort yet still capture unique details.

Managing Form Submissions

Viewing and Exporting Data

Freeform provides robust tools for managing form submissions after they are collected. View, search and export entries for analysis.

The submission index displays entries in a sortable table. Filter and search for specific submissions. Select columns to focus on key data points.

View individual submissions to see all field data or make edits if needed. Revision tracking maintains a history of changes.

Export submission data to CSV/JSON for easy analysis in spreadsheets. Filter exports to specific date ranges or fields.

Together, these features enable inspecting submission trends and metrics to optimize forms. Identify field completion rates or data quality issues. Discover user journeys through multi-page forms.

Webhooks and Workflows

Webhooks allow automatically integrating with other services when new submissions arrive. This removes manual import and speeds workflows.

Trigger actions like creating CRM contacts, sending Slack notifications, integrating with email services and more. Webhooks post data anywhere with customisable mappings.

For example, sync new leads to MailChimp lists. Or, trigger customer follow-ups by notifying the sales team via Slack. Automate document filing by pushing submissions to Google Drive.

Webhooks enable complete form automation across your stack. Workflows fire instantly on submission eliminating manual steps. Customise mappings and conditions to fit each integration need.

Archiving and Deleting

As form entries accumulate, archiving and deleting allows managing data storage needs. Archive older submissions to reduce database load whilst retaining data.

Configurable archiving rules automate moving inactive entries from the main log into archives. Set time ranges like archiving after 3 months or manual thresholds.

Retrieve archived entries anytime as needed. Reporting combines current and archived data for complete analysis. Toggle between active and inactive submissions.

To remove unneeded data, bulk or individually delete entries permanently. For example, clear test submissions after development. Delete irrelevant or sensitive data.

Together, archiving and selective deletion provides granular control over stored submissions. Keep current data accessible while efficiently maintaining total history.