# WS Form
> WS Form PRO is a form builder plugin for WordPress. This file maps publicly available product, feature, integration, knowledge base, and template content on wsform.com.

Use the linked pages for full detail. Prefer Premium Integrations vs Built-In Integrations terminology as labeled. Do not refer to the product as “WordPress Forms”.

This file includes full text for product hubs, features, integrations, knowledge base articles, and templates. Blog posts are listed under Optional with short excerpts only.

## Home

URL: https://wsform.com/

# Smart. Fast. Forms.

## Trusted by Developers. Built for WordPress.

Community Voices

## The Experts' Choice

Featured in

## Respected WordPress Resources

## Feature-Rich. One Plugin.

View All Features

## Click, Connect. [ws_form_total_integrations]+ Integrations.

View All Integrations

## What People Say About WS Form

More Reviews

## Modern Form Development for WordPress

### 100+ Templates

Go beyond a traditional template library. WS Form dynamically creates forms that include your custom fields, repeaters, column widths and more. WS Form has deep and bi-directional integration with custom field plugins such as ACF, Meta Box and Pods.

### 65+ Field Types

WS Form includes over 65 feature rich field types, no additional plugins or coding required. Control field behavior with our unrivalled no-code settings including styling, validation, breakpoint responsiveness and accessibility. All HTML 5 field attributes are supported.

### Responsive Forms

We were the first form plugin for WordPress to offer true drag and drop, resizable, breakpoint specific, multi-column editing. Furthermore, WS Form can render native Bootstrap and Foundation HTML if your theme demands it.

### Multi-Step Forms

Improve conversation rates by splitting forms into easily digestible chunks. Our built-in multi-step options allow you easily create tabs or even control the visibility of sections and fields using our extensive conditional logic library.

### Conditional Logic

We're not just talking about toggling a field if another field equals a value. We're talking 100+ different IF conditionals and 50+ context sensitive THEN/ELSE actions. You won't find form conditional logic like this anywhere else.

### Calculated Fields

Use calculated fields and 200+ variables and functions to create dynamic, feature rich forms that provide invaluable tools for your website users. Our built-in templates provide single click forms for a variety of commonly used calculators.

### Repeaters

Create repeatable sections that can contain any number of fields, conditional logic, calculations, cascading and e-commerce functionality. No additional coding or plugins required. No lengthy knowledge base article to follow, just check 'Repeatable' and go.

### Debug Console

Gone are the days of filling out each field individually to test a form. Unique to WS Form, our debug console allows you to populate complex forms and submit them in a single click. The console also includes detailed event logging and error management.

## Pricing

URL: https://wsform.com/pricing/

# Choose Your WS Form PRO Edition

All plans include a 14-day money-back guarantee. Upgrade or cancel anytime.

## Features & Integrations

Browse what's bundled with each plan, from core form-building features to marketing, payment and CRM integrations.

## Features

URL: https://wsform.com/features/

Browse product features for forms in WordPress.

## Integrations

URL: https://wsform.com/integrations/

Premium Integrations and Built-In Integrations for WS Form PRO.

## Templates

URL: https://wsform.com/templates/

Ready-made form templates for WordPress.

## Accessibility

URL: https://wsform.com/feature/accessibility/

Create more accessible forms in WordPress with responsive layouts, ARIA attributes, high contrast styling, and accessible spam protection.

WS Form has a goal of complying with Web Content Accessibility Guidelines (WCAG) wherever possible to make forms in WordPress more accessible.

Accessibility considerations include ARIA attributes for field labels, descriptions, and required fields, fully responsive layouts for different devices, high contrast text, and high contrast button and message colors.

You can also use section labels, adjust form, tab, and section headings to follow sequential heading requirements, and add help text at both form and field level. Accessibility-friendly spam protection methods include Honeypot and Cloudflare Turnstile.

WS Form also uses a default font size of 16px to help prevent unnecessary input zoom on mobile devices and provides a clean DOM structure for easier custom styling with CSS.

## Action & Filter Hooks

URL: https://wsform.com/feature/action-filter-hooks/

Modify rendering, validation, actions, and submissions with WS Form action and filter hooks.

WS Form includes action and filter hooks that let you customize how forms behave in WordPress. You can modify forms before they render, change submission validation, adjust action output, and respond when submissions are created, updated, posted, or change status.

Hook coverage spans rendering, styling, scripts, variables, translations, exports, redirects, webhooks, email notifications, PDF generation, and submission handling. For example, hooks can modify Send Email recipients, subject, message, headers, attachments, and template output, or change Webhook headers and payloads.

You can also tailor validation and messaging during submission. WS Form supports field-level and form-level validation hooks, custom invalid feedback, custom messages, redirects on validation failure, blocked IP and keyword checks, and hidden fields injected at submit time.

## AI Generated Forms

URL: https://wsform.com/feature/ai-generated-forms/

Describe the form you need and generate a form in WordPress you can edit in WS Form.

Create a form in WordPress simply by describing the type of form you want. The AI Generated Form template in WS Form uses the OpenAI add-on to build a form from your prompt.

Supported fields for AI-generated forms include Text, Text Area, Email, Phone, URL, Number, File Upload, Rating, Select, Checkbox, and Radio. Help text and placeholders can also be generated for each field when you request them in your description.

Once the form is created, you can edit it like any other form using the layout editor. The OpenAI add-on also includes templates and actions for text, image, audio, chat, and moderation workflows.

## Calculations

URL: https://wsform.com/feature/calculated-fields/

Calculate field values in real time with formulas, math functions, repeatable sections, and price formatting.

Create calculated fields in your forms in WordPress with the #calc function in WS Form. Calculations update in real time and can handle everything from simple addition to more complex trigonometric functions.

Calculated fields work with all fields that can accept numeric input, including rating and progress. You can calculate from any field or variable that outputs a numeric value, including dates, and use calculations in settings such as Default Value, Label, Placeholder, Help, Minimum, Maximum, and field content for Text Editor and HTML fields.

WS Form also includes a calculator to help build formulas. It can insert compatible fields, add math variables, and supports calculations in repeatable sections. If you need to display a result as a price, you can format it using your currency settings.

## Cascading Fields

URL: https://wsform.com/feature/cascading-fields/

Build dynamic select, checkbox, and radio lookups that change based on another field.

Cascading fields let you create dynamic lookups that change based on the value of another field on your form in WordPress.

WS Form supports cascading for select, checkbox, and radio fields. A common example is a vehicle make, model, and year lookup, where each selection filters the next set of options.

These fields are configured with a data grid, making it easy to manage options and filter them by a selected value. You can also daisy chain cascaded select and radio fields, and use AJAX with larger select datasets to improve form performance.

## Certified Submissions

URL: https://wsform.com/feature/certified-submissions/

Add TrustedForm certification to your forms to capture consent details and validate submitted lead data.

Add TrustedForm to your forms in WordPress to certify and validate submitted form data. It helps document proof of consent, contact intent, and the time and source of form submissions.

The TrustedForm field can add compliance support to any WS Form form. You can choose fields for the certificate URL, ping URL, and token, enable sandbox mode for testing, and set an optional identifier for tracking and reporting.

WS Form automatically enqueues the TrustedForm JavaScript and binds TrustedForm to your form so it only records consent for that form. You can also use TrustedForm on multiple forms on the same page.

## Conditional Logic

URL: https://wsform.com/feature/conditional-logic/

Create dynamic forms that respond to how people interact with your fields.

Conditional Logic lets you create dynamic forms that change according to the way a user interacts with your form.

In WordPress, you can use conditional logic to show a field or block of text when a checkbox is checked, display a warning when a range slider is greater than 50%, or reveal extra fields based on user input.

It can also trigger actions such as saving form progress when a Next tab button is clicked, firing an email action when a button is clicked, pushing partial completions to Constant Contact or MailChimp, or running JavaScript when a field is clicked or changed.

## Conversational Forms

URL: https://wsform.com/feature/conversational-forms/

Show questions one by one on a dedicated full-screen form page.

Conversational forms present questions one-by-one instead of showing the entire form at once. This can make forms easier to complete and improve user satisfaction.

In WordPress, each section becomes a step in the conversational form. These forms run on a dedicated full-screen page, giving you larger, easier-to-read fields.

You can customize colors, fonts, and layouts, use conditional logic, calculated fields, and variables, and integrate with WS Form actions. Conversational forms are also fully mobile responsive.

## Conversion Tracking

URL: https://wsform.com/feature/conversion-tracking/

Fire conversion tags from your forms for Google, Facebook, LinkedIn, and Fathom analytics.

Track form conversions in WordPress by firing conversion tags from a WS Form action. Supported options include Google Tag Manager (Data Layer), Google Analytics, Fathom Analytics, Facebook (Standard), Facebook (Custom), and LinkedIn (Insight Tag).

You can choose when the action runs when a form is saved, submitted, or both. Many settings accept straight text or WS Form variables, so you can pass dynamic values into your tracking setup.

If you need to fire a different type of conversion tag, you can use the Run JavaScript action.

## CSS Variables

URL: https://wsform.com/feature/css-variables/

Browse, copy, and download WS Form CSS variables for faster form styling.

WS Form includes a browsable reference of its CSS variables. You can click the copy icon to copy any variable name or default value.

You can also copy variable names directly from the Styler by clicking its copy icon. For form styling in WordPress workflows, WS Form also provides downloadable CSV and JSON files of its CSS variables.

## Data Encryption

URL: https://wsform.com/feature/data-encryption/

Encrypt form submissions in WordPress with seamless submission data encryption.

Protect form submission data with built-in encryption in WS Form. Submission meta data is encrypted and decrypted seamlessly, with no additional coding required.

WS Form uses HKDF-SHA256 keys and AES-256-CTR encryption for form submissions. In WordPress, only submissions made after data encryption is enabled are encrypted.

File uploads and signature files stored on the server are not encrypted. CSV exports, emails sent with wp_mail, and data sent to third-party integrations are also unencrypted.

## Data Sources

URL: https://wsform.com/feature/data-sources/

Populate form choices automatically from WordPress, presets, and supported custom field plugins.

Data Sources let you automatically populate Select, Checkbox, and Radio fields, plus other fields that support data lists. In WordPress, you can pull choices from presets, posts, terms, users, and supported custom field plugins.

Choose a data source, configure its settings, and click Get Data to retrieve and preview the results. WS Form also supports optional column mapping, so you can choose which columns are used for labels, values, and action variables.

Some data sources update dynamically in real time as your WordPress content changes. You can also switch a data source to Off to manually edit the data grid and make it static.

## Debug Console

URL: https://wsform.com/feature/debug-console/

Populate fields, submit test entries, and review logs and errors while viewing your form.

The Debug Console helps you test and debug forms in WordPress created with WS Form PRO while viewing a form. It includes tools for populating fields, submitting test entries, and reviewing useful technical information.

You can automatically fill form fields with appropriate sample data and, in many cases, submit a test form in a single click. The console also shows performance data, logs, and server-side errors to help you understand how your form is behaving.

If you use multiple form instances on the same page, the Debug Console lets you switch between them and review each instance independently.

## Dynamic Variables

URL: https://wsform.com/feature/dynamic-variables/

Insert dynamic content into form fields and email templates with WS Form variables.

WS Form variables let you add dynamic content to different parts of your form. You can use them in places such as default field values and email templates.

Areas that support variables include a field lookup icon. Click the icon to view available variables for that field and insert one into the value you are editing.

All variables start with the # character. Some variables accept parameters, including multiple parameters, and values containing commas can be enclosed in double quotes.

## E-Commerce

URL: https://wsform.com/feature/e-commerce/

Build forms for selling products or services in WordPress.

WS Form includes e-commerce field types that help you create forms for selling products or services.

With the WooCommerce add-on, you can add forms to products in your store. This gives you a flexible way to use forms in WordPress in your e-commerce workflow.

## Email Validation

URL: https://wsform.com/feature/email-validation/

Verify email addresses with a validation link and use the result in your form logic.

Verify a user's email address by sending a validation link. When they click the link in the email, they are returned to the form and the submission is verified.

In WordPress, this gives you a simple way to confirm submissions before changing what happens next. You can then use conditional logic to change the appearance or behavior of the form.

This method can also be used as a form of double opt-in. WS Form also includes an Email Validation demo template to help you build this kind of form.

## File Uploads

URL: https://wsform.com/feature/file-uploads/

Let visitors upload one or more files and use them in submissions, emails, and supported integrations.

Let people upload files with your forms in WordPress. The File Upload field allows users to choose one or more files from their device and upload them when the form is submitted.

Uploaded files can be saved to submissions, attached to emails, or mapped to integrations where supported. You can also choose different file handlers for each file field, including private, public, and Media Library destinations.

WS Form supports both a default file upload type and a DropzoneJS type. DropzoneJS uploads images immediately, can reduce form submission time, and performs image resizing, format, and quality changes in the browser.

## Floating Field Labels

URL: https://wsform.com/feature/floating-field-labels/

Show labels inside fields and move them out of the way when visitors enter content.

Floating field labels appear inside a field when it is empty and move outside the field when it contains content. This creates a placeholder-like effect while keeping the label visible as people type.

In WS Form, this approach helps forms occupy less screen real estate. The feature uses a pure CSS method and does not require JavaScript or third-party libraries.

You can set label positioning to Inside for all default fields in a form or apply it to individual fields in your forms in WordPress. Styling options are also available to adjust how inside labels behave when a field is populated.

## Form Scheduling

URL: https://wsform.com/feature/form-scheduling/

Set submission behavior, validation, messages, and spam controls for your forms.

WS Form gives you detailed form settings so you can control how your form behaves when it is submitted. You can change the form label, show or hide that label, reset the form after submit, and choose whether Enter or Return can submit the form.

For multi-step forms in WordPress, you can control tab behavior with options such as remembering the last tab clicked, validating each tab before moving forward, showing invalid fields, and hiding tabs while keeping tab functionality.

You can also configure invalid feedback, focus the first invalid field, set error message styles and positions, apply custom CSS classes, and use built-in spam controls such as IP throttling, IP blocklists, and keyword blocklists.

## Form Templates

URL: https://wsform.com/feature/single-click-templates/

Start with built-in templates and create forms in a single click.

Create forms faster in WordPress with built-in templates. When you add a new form in WS Form, you can start with a blank form or choose a template.

Template forms let you build a form in a single click. You can then edit any template as much as you like using the layout editor.

If you install an add-on that includes templates, you can open that add-on tab and select a template. Some add-ons also let you create forms from connected data in a single click, ready to go.

## GDPR Compliant

URL: https://wsform.com/feature/gdpr-ready/

Add consent checkboxes and create data erasure or export request forms in WordPress.

WS Form can help make your forms and website GDPR-compliant. You can add consent checkboxes to explain why data is being collected and request consent for using the information provided.

WS Form also supports GDPR request workflows in WordPress. It integrates with the WordPress personal data tools so you can create forms for data erasure requests and data export requests.

If you need guidance on GDPR itself, you can learn more here: What is GDPR?

## High Performance

URL: https://wsform.com/feature/high-performance/

Render forms fast with pre-compiled output, isolated submissions, and smart asset loading.

WS Form is designed with form-rendering performance in mind. In WordPress, published forms are rendered from a pre-compiled snapshot that uses a single database query per rendering.

Form submissions are stored separately from standard WordPress database tables. This helps avoid adding submission records to tables used by pages, posts, and attachments.

WS Form also keeps front-end output lean. Most fields use native browser functionality, scripts and CSS are only enqueued when a form is rendered, and additional libraries are only loaded when a form contains a field type that needs them.

## HoneyPot

URL: https://wsform.com/feature/honeypot/

Add honeypot protection to forms in WordPress and strengthen your spam prevention setup.

WS Form includes HoneyPot as part of its spam prevention tools for forms in WordPress.

Use HoneyPot alongside other spam protection features in WS Form, including deduplication, custom server-side validation, form validation, NONCE, IP throttling, and spam protection fields.

WS Form also supports integrations and third-party services for spam prevention, giving you multiple ways to reduce unwanted submissions.

## If ... Endif

URL: https://wsform.com/feature/if-endif/

Use #if and #endif to conditionally include content across your forms, actions, and mappings.

Use #if and #endif to conditionally include content in WS Form. In forms in WordPress, this lets you show or hide content when an expression evaluates to true or false.

These variables can be used in a variety of locations, including the Send Email action, Show Message action, conditional logic, and field mappings to external APIs.

You can compare values with operators such as equals, does not equal, less than, greater than, contains, starts with, and ends with. You can also combine multiple conditions with && and ||.

## Import / Export

URL: https://wsform.com/feature/import-export/

Back up forms, move them between websites, and import JSON or CSV data where supported.

Import and export tools in WS Form help you back up forms and transfer them between websites. Form exports download as a JSON file that you can save and later import.

In WordPress, you can import a form by selecting a JSON file from the layout editor or by dragging the file into the form builder area. You can also drag forms into the Form list.

WS Form can also export data such as select options, checkboxes, and radios, and import CSV files into data grids for entering large volumes of data. If you need to bring part of a form into another form, use the Section Library.

## Layout Editor

URL: https://wsform.com/feature/layout-editor/

Build multi-column form layouts visually with drag-and-drop editing and breakpoint control.

The Layout Editor helps you build and edit form layouts visually in WS Form. Arrange sections and fields, create multi-column structures, and refine how your form is organized without writing code.

You can also adjust layouts by breakpoint, so forms stay clear and usable across different screen sizes. It is part of the standard WS Form form-building workflow.

## MCP Server

URL: https://wsform.com/feature/mcp-server/

Use compatible AI clients to create, edit, and manage forms in WordPress with natural language.

WS Form includes a built-in Model Context Protocol (MCP) server that lets compatible AI clients connect directly to WS Form in WordPress. Using natural language, you can create and edit forms, configure fields, conditional logic and actions, apply styles, work with submissions, and retrieve form statistics.

The MCP server exposes more than 40 WS Form Abilities as MCP tools. It works with MCP-compatible AI clients including Claude, ChatGPT, Novamira, and Angie, with no middleware or custom integration code required.

Form editing through the MCP server is disabled by default for security reasons. All exposed abilities are protected by permission callbacks, and user access is checked against standard WS Form User Capabilities.

## Migrate Forms

URL: https://wsform.com/feature/migrate-forms/

Import forms and submissions from supported plugins, or export forms, sections, and data grids for transfer or backup.

WS Form includes migration tools to help you move existing forms into WordPress with less manual work. You can import forms and submissions from supported plugins and export forms, sections, and data grids for backup or transfer.

WS Form supports migration from Gravity Forms, Visual Form Builder Pro, and WPForms. It also supports importing and exporting forms, sections, and data grids when you need to move content between websites.

## Multi-Step Forms

URL: https://wsform.com/feature/tabulated-forms/

Build multi-step forms in WordPress with tabs, next and previous navigation, and tab-level validation options.

Tabs are a convenient way to build multi-step forms in WordPress. Each form can have one or many tabs, and tabs appear on your website when your form has two or more tabs.

You can add, clone, delete, rename, and reorder tabs in the layout editor. Tab labels can also be shown as headings when a tab is selected.

WS Form also lets you hide tab navigation while keeping tab functionality, so users can still move through your form with previous and next tab buttons. Validation options are available to control progress between tabs.

## Online Payment

URL: https://wsform.com/feature/online-payment/

Accept credit card and PayPal payments directly through your forms in WordPress.

Accept online payments directly from your forms with WS Form payment gateway add-ons for WordPress.

Available options include Authorize.Net Accept, ConvesioPay, Mollie, PayPal Checkout, and Stripe Elements. Depending on the gateway, you can accept credit card payments, PayPal payments, or online payments through your forms.

The Mollie add-on acts as a gateway prior to creating a form submission.

## Progress Bars

URL: https://wsform.com/feature/progress-bars/

Show form, tab, upload, or custom progress in your forms in WordPress.

Add a progress bar to your form in WordPress to show visitors how far they have progressed. WS Form supports form progress, tab progress, upload progress, and custom progress.

For multi-tab forms, you can add a progress bar to each tab. The bar shows the overall progress of the entire form across all tabs.

You can also control a progress bar manually with calculated fields, conditional logic, or your own JavaScript. Help text supports progress variables such as #progress and #progress_percent.

## Ratings Fields

URL: https://wsform.com/feature/star-ratings/

Collect one or more ratings in your forms in WordPress with flexible icons, colors, defaults, and validation.

The Rating field lets people give one or more ratings on your form. In WordPress, you can use it to collect a numeric rating value from 1 up to your chosen maximum rating.

You can control the label, help text, default value, required status, and visibility. The field also includes ARIA label support, styling options, icon choices, and validation settings.

WS Form also lets you change the icon design, icon size, selected and unselected colors, horizontal alignment, and maximum rating. For more control, you can add custom classes and custom HTML attributes.

## Repeaters

URL: https://wsform.com/feature/repeaters/

Let people duplicate rows of fields for orders, lists, and other repeatable form entries.

Repeatable sections let people duplicate a row of fields in your form. This works well for order forms, lists of names, and other forms where extra rows make completion easier.

In WordPress, you can make any section repeatable and add as many repeatable sections to a form as you wish. No additional plugins or coding are required.

Repeatable sections are compatible with conditional logic and e-commerce fields, and support all field types with usual exceptions such as reCaptcha. Repeated fields are also neatly presented in emails and submissions.

## Responsive Forms

URL: https://wsform.com/feature/responsive-forms/

Create responsive forms that adapt to phones, tablets, laptops, and desktops.

Responsive forms adjust their layout to suit the screen size of the device being used. That matters because incorrect scaling can make form elements harder to read and interact with, especially on smaller screens.

With WS Form, you can build fully responsive forms in WordPress using a drag and drop interface. You can work with breakpoints, change field and section widths and offsets, and create layouts that are easier to use across different devices.

Widths are measured in columns, with a maximum of 12 columns per field or section. You can start with a single-column mobile layout, then progressively introduce more columns at larger breakpoints for tablets, laptops, and desktop screens.

## Right-To-Left Support

URL: https://wsform.com/feature/right-to-left-support/

Use WS Form with right-to-left languages in both admin screens and front-end forms.

WS Form PRO is compatible with RTL (Right-To-Left) languages and screen layouts.

That compatibility covers both administration screens and front-end rendering, helping you build and display forms in WordPress in RTL environments.

## Run JavaScript

URL: https://wsform.com/feature/run-javascript/

Run custom JavaScript when a form is saved, submitted, or both.

Use the Run JavaScript action to run JavaScript when a form is saved or submitted. This gives you a direct way to add custom behavior to your forms in WordPress.

You can choose when the action runs: on save, on submit, or both. Enter your JavaScript in the action editor and save your changes in the sidebar.

The JavaScript can include straight text or WS Form variables. For example, you can output submitted values inside your script.

## Run WordPress Hooks

URL: https://wsform.com/feature/run-wordpress-hooks/

Run WordPress actions or filters when a form is saved, submitted, or both.

The Run WordPress Hook action lets you run a WordPress action or filter when a user saves or submits a form. It gives developers a way to run PHP code from a form workflow in WordPress.

You can choose whether the hook runs on save, submit, or both. You can also select a filter or action, enter the hook tag, and choose whether it runs before submission creation, before other actions, or after other actions.

When used as a filter, the hook can return updated submit data, a spam level, custom messages, error messages, redirects, or a halt signal for action processing. When used as an action, the hook receives the form and submit data so you can work with submitted values in your own code.

Learn how to use the Run WordPress Hook action.

## Save Progress

URL: https://wsform.com/feature/save-progress/

Let visitors save their form progress and return later to complete it.

The Save button lets a website visitor save the progress of their form and come back later to complete it.

To use Save for forms in WordPress, the Save to Submissions action must be active on the form with the Save event enabled. Actions that run when the Save button is clicked are configured in the Actions sidebar.

The Save button also includes field settings for label, help text, ARIA label, styles, visibility, disabled state, user status, custom classes, custom attributes, and breakpoint-based layout control.

## Section Library

URL: https://wsform.com/feature/section-library/

Use ready-made sections to create forms faster and reuse your own sections across your website.

The Section Library includes ready-made sections that help you create forms more quickly. In WordPress, you can open it from the Build menu under the Sections tab.

Add a section by dragging and dropping it into your form to choose where it goes, or click a section to add it to the bottom of your form.

Sections can include conditional logic. WS Form adds that logic automatically when you insert the section, helping you keep interactive behavior intact.

You can also save your own sections to My Sections, search built-in and custom sections by keyword, and import or export library items for reuse.

## Select2 Dropdowns

URL: https://wsform.com/feature/select2-dropdowns/

Upgrade select fields with Select2 for searching, AJAX, and smoother large option lists.

Select2 is a jQuery-based replacement for select boxes. In WS Form, you can add it to any Select or Price Select field in your form in WordPress.

Select2 supports searching, AJAX, and infinite scrolling of results. If your select field has a lot of options, you can enable AJAX to help improve performance.

You can enable Select2 in the field settings, or add it manually to a Select or Price Select field on your website.

## Send Emails

URL: https://wsform.com/feature/send-emails/

Send any number of form emails with configurable recipients, content, attachments, and headers.

Send Email lets you send any number of emails when a form is saved, submitted, or both. In WordPress, you can configure recipients, subject, message content, attachments, headers, and character set.

Choose HTML or plain text email format and edit messages with the WordPress visual editor or raw HTML. You can also dynamically set supported email values with WS Form variables.

Attach uploaded files, signature fields, or media library files to your emails. You can also link uploaded file names in the email submission and clear hidden field values before the action is processed.

## Server-Side Validation

URL: https://wsform.com/feature/custom-server-side-validation/

Validate submissions and fields server-side, then show feedback, messages, or redirects when checks fail.

WS Form includes server-side validation hooks for validating a full submission or validating each field when a form is submitted. This gives you a way to add your own validation logic to forms in WordPress and return errors back to the form.

Field-level validation can return standard invalid feedback, custom invalid feedback, messages, or a redirect. Submission-level validation can return messages or a redirect. WS Form supports one or more errors by pushing actions to the validation array and returning them to the form.

Validation hooks receive context such as the post mode and a partial submit object. Field validation also includes the field ID, submitted value, and repeatable section row index, and email addresses can be validated before sending emails with the Send Email action.

## Signatures

URL: https://wsform.com/feature/signatures/

Let visitors sign forms with a mouse or touch device and save signatures with each submission.

The Signature field lets website visitors physically sign your form using a mouse or a finger on a touch device.

In WordPress, you can add a signature field to a form, make it required, show help text, and control how the field is displayed. You can also choose the output format for the signature as PNG, JPG, or SVG.

Signatures are stored in a submission much like a file upload. You can also attach signatures to email actions as attachments.

## Spam Protection

URL: https://wsform.com/feature/spam-protection-2/

Protect forms in WordPress with spam checks, blocking tools, scoring, and anti-bot integrations.

WS Form includes a range of spam protection tools for forms in WordPress. You can reduce unwanted submissions with validation, blocking rules, throttling, anti-bot fields, and third-party spam protection services.

Built-in options include deduplicating form submissions, custom server-side validation, form validation, HoneyPot, NONCE, and IP throttling. You can also block submissions by keyword, IP, domain name, and user agent.

WS Form also integrates with services including Akismet, OpenAI Moderation, CleanTalk, Clearout, OOPSpam, Cloudflare Turnstile, hCaptcha, reCAPTCHA, and CaptureFox.

Spam checking with Akismet, reCAPTCHA Version 3, and hCaptcha stores a spam score against submissions. Scores run from 0% to 100%, are shown as a colored circle, and submissions deemed as spam are moved to the Spam folder on the submissions page.

## Statistics

URL: https://wsform.com/feature/form-statistics/

Monitor daily views, saves, submissions, conversion rates, and unread counts for forms in WordPress.

WS Form includes built-in statistics for forms, including views, saves, and submissions. A view is counted when a form is shown on your website, a save is counted when someone uses a Save Button to save progress, and a submission is counted when someone uses a Submit Button.

Statistics are counted daily and shown in multiple places, including the WordPress dashboard widget and the form list for individual forms. You can view statistics for all forms or a single form over a selected date range, and each form also shows an overall conversion percentage for submissions versus views.

WS Form can also send daily, weekly, or monthly email reports with views, saves, submits, and conversion analytics. Unread submission counts are shown in the WS Form admin menu and at form level, and those counts decrease when submissions are viewed.

## Styling

URL: https://wsform.com/feature/customize-appearance/

Control colors, typography, sizes, and responsive styling for better-looking forms in WordPress.

Customize how your forms in WordPress look with styling tools built into WS Form. Control colors, typography, and sizes to create forms that fit your website.

WS Form includes Styler for designing forms with intuitive controls and over 400 customizable settings. You can also use CSS variables for deeper visual control.

Responsive forms help your forms look good across mobile phones, tablets, and desktop screens. WS Form also supports form and field attributes for additional HTML-level configuration.

## Summary

URL: https://wsform.com/feature/summary/

Let users review completed fields with automatic or custom form summaries.

Add a summary to long forms so users can review the fields they have completed before submitting. In WS Form, you can create a summary automatically with the Summary field or build your own summary markup in an HTML field.

The Summary field can show or hide form, tab, and section labels, create multi-column layouts, exclude certain fields, and create tables for repeatable sections.

For custom summaries in WordPress, you can insert base summary markup with the Insert Form Summary HTML button and use WS Form variables such as #field, #text, #if, and repeatable section variables to control the output.

## Translation

URL: https://wsform.com/feature/translation/

Build multilingual forms with popular WordPress translation plugins or create separate forms for each language.

Create multilingual forms in WordPress with WS Form. It supports popular translation plugins including WPML, Polylang, TranslatePress, and Weglot.

You can also translate forms manually by creating separate forms for each language. This gives you a simple option for multilingual websites.

WS Form integrates with Polylang and WPML to automatically translate form in WordPress content into multiple languages. It also works with TranslatePress for visual browser-based translation and with Weglot for automatic translation of visible form content.

## Visitor Tracking

URL: https://wsform.com/feature/visitor-tracking/

Capture visitor tracking attributes with form submissions and use them in email acknowledgements.

WS Form includes built-in tracking attributes that can provide information about the website visitors using your form.

When a form is saved or submitted, you can attach tracking attributes to the submission. In WordPress, tracking attributes are disabled by default to help support GDPR compliance.

You can enable or disable tracking attributes in form settings while editing a form. WS Form also lets you show tracking data in an email acknowledgement using #email_tracking.

## AbuseIPDB

URL: https://wsform.com/integration/abuseipdb/

Use IP reputation data to catch abusive form submissions earlier

Type: Built-In Integration.

AbuseIPDB is an IP reputation service that helps identify IP addresses associated with abusive activity. In WS Form, you can check a visitor's IP address whenever a form is submitted and use the returned abuse confidence score as the submission's spam score.

Spam scores range from 0 to 100 and appear on the submissions page with the same colored indicators used by other WS Form spam protection services. Each check is also recorded as a system note, including the IP address, abuse confidence score, country, domain, total reports, and the reason a submission was flagged when applicable.

In WordPress, you can enable AbuseIPDB on all forms or turn it on per form. You can also set an abuse confidence score, choose a report window, add country and domain blocklists, and optionally report spam submissions back to AbuseIPDB as web spam.

If AbuseIPDB is temporarily unavailable or returns an error, WS Form still accepts the submission. The submission is not blocked solely because the AbuseIPDB request failed.

## ACF

URL: https://wsform.com/integration/advanced-custom-fields/

Create and edit ACF-powered content with flexible frontend forms

Type: Premium Integration.

Advanced Custom Fields lets you create custom fields for any post type, and WS Form can be fully integrated with those fields. You can build mobile-friendly forms with flexible layouts instead of using a fixed frontend ACF form layout.

Using WS Form with the Post Management Premium Integration, you can automatically create forms for registered WordPress post types, including ACF fields configured for that post type. WS Form can also add basic post fields and taxonomy term selectors, and it automatically creates field mappings when you build from a template.

WS Form supports ACF field types including text, email, URL, image, file, gallery, select, checkbox, radio, button group, post object, taxonomy, user, date and time pickers, color picker, group, and repeater. Repeater fields are converted to repeatable sections in WS Form, while nested repeaters and groups are not supported.

In addition to creating new posts, WS Form can pre-populate forms using post data that includes ACF custom fields. This makes it easy to load existing content into a form for editing.

## ACPT

URL: https://wsform.com/integration/acpt/

Create and edit WordPress content with ACPT custom fields from your forms

Type: Premium Integration.

ACPT lets you create custom fields for any post type, and WS Form can integrate with those fields. Using the Post Management Premium Integration, you can build forms that create and update WordPress posts containing ACPT custom fields.

WS Form can automatically create a form from a post type template, including basic post fields, ACPT fields, and taxonomy term selectors. Choice-based fields such as select, checkbox, radio, and button groups can be populated from the choices configured in ACPT.

ACPT repeater fields are supported when creating, populating, and submitting forms. WS Form can also pre-populate forms using post data that includes ACPT fields, making it easier to edit existing content.

## ACSS

URL: https://wsform.com/integration/acss/

Create consistent WS Form styling with ACSS across your site

Type: Third Party.

Recommended.

ACSS provides comprehensive styling support for WS Form. When ACSS form loading is enabled, form styling is applied automatically through a unified configuration system.





Forms share the same structural and spacing values used across your site, helping maintain a consistent look in WordPress. ACSS also gives you control over form colors and appearance.





Forms can automatically adapt to your sites configured color scheme using CSS light-dark() support. If you want more explicit control, ACSS also supports the optional utility classes .form--light and .form--dark.





ACSS form styling is currently compatible with WS Form, and the WS Form Styler must be enabled so ACSS can use the CSS variables it relies on.

## ActiveCampaign

URL: https://wsform.com/integration/activecampaign/

Build ActiveCampaign-ready forms faster and subscribe contacts automatically

Type: Premium Integration.

Connect your forms in WordPress to ActiveCampaign with the WS Form ActiveCampaign premium integration. You can push new contacts using an action, or create new forms from your ActiveCampaign lists in a single click.

Single-click form creation builds a form from one of your ActiveCampaign lists and fully configures it so it is ready to use immediately. If you prefer, you can also use any form created in WS Form and add an action to submit it to ActiveCampaign when a user saves or submits the form.

The premium integration supports all field types and includes field mapping, tag mapping, and automation mapping. You can also choose an opt-in field and assign contacts to an account.

## Airtable

URL: https://wsform.com/integration/airtable/

Turn Airtable tables into ready-to-use forms in WordPress

Type: Premium Integration.

The Airtable premium integration lets you create new forms from Airtable in a single click and push form submissions as new rows in a table.

WS Form can create a form for any of your Airtable tables automatically. The form is fully configured and ready to add to your WordPress website.

You can also use an existing WS Form and add an Airtable action to run when a form is saved, submitted, or both. Field mapping and custom mapping are available, and comments can be added when a record is added or updated.

## Akismet

URL: https://wsform.com/integration/akismet/

Reduce spam in forms in WordPress with Akismet checks built into WS Form

Type: Built-In Integration.

Akismet gives WordPress the ability to check comments and form submissions against its global spam database. WS Form integrates with Akismet so you can check form submissions for spam content.

Submissions checked with Akismet are graded for spam in the WS Form submissions page. A colored circle shows the result: red for blatant spam, orange for possible spam, and green for submissions not considered spam.

You can choose an email field and select text-based fields for Akismet to analyze. WS Form also lets you decide how to handle suspect submissions, including using a spam threshold or rejecting suspect or blatant spam.

## Amazon S3

URL: https://wsform.com/integration/amazon-s3/

Send uploaded files from your forms to Amazon S3

Type: Premium Integration.

Use the Amazon S3 premium integration to configure file fields in forms in WordPress to upload files to a connected Amazon S3 account.

You can choose the bucket path for each file field, and uploaded files remain easy to access from the submissions page. WS Form adds an Amazon S3 file handler for this setup.

The upload path defaults to WS Form/#form_id/#submit_hash/#field_id/. You can also use WS Form variables in the path to make it dynamic.

## Angie

URL: https://wsform.com/integration/angie/

Bring agentic AI into your form workflows

Type: Built-In Integration.

Connect your forms in WordPress with Angie to bring agentic AI into your workflows.

WS Form and Angie are featured together in a dedicated integration article that explores how they work side by side.

You can also explore more AI ideas for forms in our related WordPress article on building smarter forms with AI.

## Anthropic

URL: https://wsform.com/integration/anthropic/

Create forms in WordPress from a prompt with Anthropic

Type: Built-In Integration.

Use Anthropic with WS Form Create from AI to generate a form from a prompt. After you configure an AI connector, the Create from AI template appears on the Add Form admin page in WordPress.

To connect Anthropic, go to Settings > Connectors, install Anthropic, enter your API keys, and save. When the connection is successful, WordPress shows Connected.

Once connected, hover over the Create from AI template, click Use Template, describe the form you want in the modal, and click Create. You can learn more here: Create from AI template.

## ApiX-Drive

URL: https://wsform.com/integration/apix-drive/

Move WS Form submissions into ApiX-Drive for wider automation

Type: Third Party.

Connect WS Form with ApiX-Drive to send form data into your automation workflows.

This integration gives you a way to pass submissions from your forms in WordPress to ApiX-Drive using the integration page provided by ApiX-Drive.

You can learn more or start from the ApiX-Drive integration page: https://apix-drive.com/en/integrations/wsform.

## Attributer

URL: https://wsform.com/integration/attributer/

See where your form leads came from

Type: Third Party.

Connect your forms in WordPress with Attributer to capture lead source data when someone submits a form.

Attributer provides an integration page for WS Form, making it a useful option for tracking attribution data alongside your form submissions.

You can learn more about the integration on the Attributer WS Form integration page.

## Authorize.Net Accept

URL: https://wsform.com/integration/authorize-net-accept/

Take credit card payments from your forms with flexible checkout options

Type: Premium Integration.

Authorize.Net Accept lets you accept credit card payments from your forms in WordPress. You can charge a fixed amount with the button on its own, or use WS Form e-commerce fields for more advanced cart options.

The button uses Authorize.Net Accept, the latest client-side payment process offered by Authorize.Net. You can configure sandbox and production credentials, and the payment page must be served over HTTPS.

WS Form also supports one-time charges and subscriptions. You can customize the button label, header text, billing address option, and map billing and shipping address fields to the corresponding Authorize.Net fields.

## AutomatorWP

URL: https://wsform.com/integration/automatorwp/

Trigger AutomatorWP actions from your WS Form submissions

Type: Premium Integration.

Connect your forms in WordPress with AutomatorWP using the WS Form premium integration.

This integration provides 4 built-in triggers and works for anonymous and logged-in users.

You can also use field value conditional logic and an easy-to-use editor to build your automations. Learn more at AutomatorWP.

## AWeber

URL: https://wsform.com/integration/aweber/

Build AWeber-ready forms faster in WordPress

Type: Premium Integration.

Connect WS Form to AWeber to add, update, and delete subscribers using form actions. You can also pull contact data with the autocomplete feature and create new forms from your AWeber lists in a single click.

On the Add New page, choose an AWeber list to generate a form automatically. WS Form creates the form and configures it so it is ready to use on your WordPress website.

You can also use an existing form and add an AWeber action. Available settings include list selection, subscriber status, an opt-in field, field mapping, and tag mapping.

WS Form can also populate form fields using AWeber contact data for signed-in visitors whose WordPress email address matches a contact in AWeber.

## Beaver Builder

URL: https://wsform.com/integration/beaver-builder/

Add forms to Beaver Builder pages quickly

Type: Built-In Integration.

If you use Beaver Builder on your WordPress website, you can add WS Form forms with the built-in Beaver Builder module.

The module is ready to use as soon as WS Form PRO is installed. No additional plugins are required.

When editing a page in Beaver Builder, click the + icon, choose the WS Form module, and select your form from the pulldown list.

For more information about Beaver Builder, visit Beaver Builder.

## Bento

URL: https://wsform.com/integration/bento/

Build Bento-ready forms and send contact data where it needs to go

Type: Premium Integration.

Connect your forms in WordPress to Bento with the WS Form Bento premium integration. You can create new people using an action, or generate a Bento form in a single click from the Add Form page.

Single-click form creation builds a form for your Bento lists and configures it so it is ready to use immediately. Bento does not currently expose field types in its API, so fields added this way are created as text fields.

You can also use any form created in WS Form and add a Bento action to run when the form is saved, submitted, or both. The premium integration supports field mapping, custom field mapping, tag mapping, custom tag mapping, event types, and subscribed or unsubscribed status.

## Bit Integrations

URL: https://wsform.com/integration/bit-integrations/

Send WS Form submissions into Bit Integrations

Type: Third Party.

WS Form can be used with Bit Integrations to connect your forms in WordPress with Bit Integrations.

Bit Integrations provides a WS Form trigger. This lets you use WS Form submissions as part of your Bit Integrations workflows.

## Block Editor

URL: https://wsform.com/integration/wordpress-blocks/

Add forms to WordPress pages with the WS Form block

Type: Built-In Integration.

The WS Form block makes it easy to add a form to your WordPress website using the Block Editor.

Add the block from the Add Block icon, then search for WS Form or choose the WS Form category. Select the form you want to use in the editor sidebar.

WS Form shows a preview of your form on the page. The preview is approximate, and the final output depends on your website theme and styling. You can also use the Preview button to preview the form on your web page.

## Bootstrap

URL: https://wsform.com/integration/bootstrap/

Make your forms match Bootstrap-based WordPress themes

Type: Built-In Integration.

Bootstrap is a popular open-source CSS framework for responsive, mobile-first front-end development. If your WordPress theme uses Bootstrap, WS Form can output form HTML markup that is native to that framework.

WS Form physically changes the HTML so your form fits seamlessly into your theme. It also changes the breakpoint selector to match the available breakpoints in Bootstrap.

WS Form supports Bootstrap 5+, Bootstrap 4.1-4.5.x, Bootstrap 4.0, and Bootstrap 3.x. All available WS Form field types are fully compatible with Bootstrap.

When you install WS Form, it scans your theme files and automatically uses Bootstrap markup if Bootstrap is detected. You can also select Bootstrap manually in WS Form settings.

## Brevo (Sendinblue)

URL: https://wsform.com/integration/brevo/

Build Brevo-connected forms faster in WordPress

Type: Premium Integration.

Connect your forms in WordPress to Brevo with the WS Form premium integration. You can subscribe and unsubscribe contacts, create new forms from your Brevo lists in a single click, and pre-populate forms with Brevo contact data.

WS Form can automatically create a form from a Brevo list and configure it so it is ready to use immediately. You can also add a Brevo action to any WS Form form and choose whether it runs when the form is saved, submitted, or both.

The premium integration supports field mapping for Brevo attributes, including normal, category, and transactional attributes. You can also use custom mapping, and choose subscribe, unsubscribe, or subscribe with double opt-in status.

## Bricks

URL: https://wsform.com/integration/bricks-visual-site-builder/

Place your forms directly inside Bricks layouts

Type: Built-In Integration.

Add a form to a Bricks Visual Site Builder template using the WS Form element.

In Bricks, open the WS Form PRO section and add the Form element to your layout. Then choose a form from the dropdown, or enter the form ID if no form is selected.

Dynamic values are supported for the form setting. You can also optionally enter an ID for the form DOM element. This makes it easy to display your WordPress form inside a Bricks template.

## Campaign Monitor

URL: https://wsform.com/integration/campaign-monitor/

Build Campaign Monitor forms faster and manage subscribers from WordPress

Type: Premium Integration.

Connect your forms in WordPress to Campaign Monitor with the WS Form premium integration. You can push new subscribers using an action, pull subscriber data with autocomplete, and create new forms from your Campaign Monitor lists in a single click.

WS Form can create a form from any of your Campaign Monitor lists and fully configure it so the form is ready to use immediately. If you prefer, you can also add a Campaign Monitor action to any form you build in WS Form.

Available Campaign Monitor methods include Subscribe, Update, Unsubscribe, and Delete. The premium integration also supports auto field mapping, and forms created from a Campaign Monitor template automatically create field mappings for you.

You can also populate form fields using Campaign Monitor subscriber data. This is available when a signed-in website visitor has a WordPress email address that matches a subscriber email address in Campaign Monitor.

## CaptchaFox

URL: https://wsform.com/integration/captchafox/

Protect your forms with privacy-friendly CAPTCHA verification

Type: Built-In Integration.

Add CaptchaFox CAPTCHA verification to your forms in WordPress to help prevent spam and automated submissions. CaptchaFox is a privacy-friendly CAPTCHA service and a reCAPTCHA alternative.

WS Form Pro supports current CaptchaFox display modes, including Inline, Popup, and Hidden. Visible modes also support light and dark themes.

To use CaptchaFox, register your website with CaptchaFox and choose JavaScript as the platform. CaptchaFox provides a site key and secret key, which you can enter in Global Settings or directly in the field settings.

## CleanTalk

URL: https://wsform.com/integration/cleantalk/

Reduce spam in forms in WordPress with more protection options

Type: Third Party.

WS Form includes a range of spam protection tools for forms in WordPress, including CleanTalk as a third-party service integration.

You can combine spam protection methods such as HoneyPot, NONCE, IP throttling, custom server-side validation, and keyword, IP, domain name, or user agent blocking.

WS Form also supports spam scoring with selected services. Submissions identified as spam are moved to the Spam folder on the submissions page.

## Clearout

URL: https://wsform.com/integration/clearout/

Catch invalid email addresses as forms are submitted

Type: Third Party.

Clearout Email Validator integrates with WS Form to validate email addresses submitted through your forms in WordPress in real time.

The plugin performs 20+ refined real-time validation checks to determine the current status of an email address.

Once enabled, any email fields submitted on a form are checked automatically. If an email address is deemed invalid, feedback is shown on the field.

## CleverReach

URL: https://wsform.com/integration/cleverreach/

Build CleverReach-ready forms faster and keep subscriber data in sync

Type: Premium Integration.

Connect your forms in WordPress to CleverReach with the WS Form premium integration. You can push new subscribers using an action, pull subscriber data with autocomplete, and create new forms from your CleverReach lists in a single click.

WS Form can create a form for any of your CleverReach lists automatically. The form is fully configured and ready to use immediately, helping you get forms on your site faster.

You can also add a CleverReach action to any WS Form. Choose a list, select a method such as Subscribe, Blacklist, or Delete, and map your form fields to CleverReach fields.

For signed-in visitors, WS Form can populate form fields using CleverReach subscriber data when their WordPress email address matches a subscriber email address. Learn more.

## Cloudflare Turnstile

URL: https://wsform.com/integration/cloudflare-turnstile/

Add privacy-focused spam protection to your forms

Type: Built-In Integration.

Cloudflare Turnstile adds a privacy-focused, accessible widget to your WordPress form to help detect whether a visitor is human. It requires no interaction and can be used to protect your forms from unwanted spam.

To use Cloudflare Turnstile, create a Cloudflare account, create a Turnstile widget for your website hostname, and add your site key and secret key in WS Form Global Settings under Spam Protection. After that, you can add a Cloudflare Turnstile field to any form.

The Cloudflare Turnstile field includes settings for label display, site and secret keys, theme, size, appearance mode, help text, styles, vertical alignment, custom classes, user status visibility, invalid feedback, and breakpoint layout.

## CommandUI

URL: https://wsform.com/integration/commandui/

Manage WS Form faster with keyboard-first commands in WordPress

Type: Third Party.

CommandUI is a productivity tool for WordPress that adds a command palette for common administrative tasks. It is deeply integrated with WS Form, so you can access and manage forms directly from the WordPress admin interface.

With CommandUI installed, press ⌘+K on Mac or Ctrl+K on Windows and Linux to open the command palette. Type ws to access WS Form commands, then filter by form label to find the form you need.

You can quickly access WS Form actions including adding, editing, duplicating, previewing, and viewing submissions. CommandUI also provides shortcuts to styles, settings, the debug console, spam protection, reporting, variables, and more.

## Comment Management

URL: https://wsform.com/integration/comment-management/

Turn form submissions into WordPress post comments

Type: Premium Integration.

Use the Comment Management premium integration to add comments to posts from a WS Form. This helps visitors leave feedback, ask questions, or share their thoughts directly on your WordPress content.

You can create a comment form automatically from the available sample form templates, or add the Comment Management action to an existing form. Forms that use this action should be added to pages that contain a post, such as a blog article.

The action supports field mapping so you can connect your form fields to WordPress comment fields. You can also choose whether the action runs when the form is saved, submitted, or both, and set comments to Approved or Pending.

Post ID: Leave it blank to use the post ID of the page the form is on, or enter a specific post ID.

Meta: Add comment meta mappings with a meta key and value.

Type: Optionally enter a comment type, or leave it blank for normal post comments.

## Constant Contact

URL: https://wsform.com/integration/constant-contact/

Build Constant Contact forms faster and keep contact data in sync

Type: Premium Integration.

Connect your forms in WordPress to Constant Contact with the WS Form premium integration. You can push new contacts using an action, pull contact data with autocomplete, and create new forms from your Constant Contact lists in a single click.

WS Form can create a form for any of your Constant Contact lists and fully configure it so it is ready to use. You can also add an action to any WS Form form and send data to a Constant Contact list when a form is saved, submitted, or both.

The premium integration supports field mapping, custom mapping, additional list memberships, and tag mapping. It also includes options for handling duplicate contacts, including update, halt, and merge behavior for lists and tags.

## Conversion Bridge

URL: https://wsform.com/integration/conversion-bridge/

Connect your forms to Conversion Bridge for clearer tracking

Type: Third Party.

Recommended.

Use WS Form with Conversion Bridge to connect your forms in WordPress with your tracking setup.

This integration is available through Conversion Bridge. It is designed for WS Form and Conversion Bridge together.

If you want to learn more about using this integration, visit Conversion Bridge for WS Form.

## ConvesioPay

URL: https://wsform.com/integration/convesiopay/

Take credit card payments directly from your forms

Type: Premium Integration.

Connect ConvesioPay to your forms in WordPress to accept credit card payments. You can charge a fixed amount or use WS Form e-commerce fields for more advanced cart options.

Card details are sent to ConvesioPay client-side and securely tokenized before the form is submitted. If the payment succeeds, the rest of the actions configured on the form run. If it does not, an error is shown on the form.

WS Form includes Basic and Advanced ConvesioPay form templates to help you get started. You can also add the ConvesioPay and ConvesioPay Submit fields to your form and place them anywhere you like.

Serve the payment page over HTTPS.

Use test or live API keys to match your ConvesioPay environment.

Configure the webhook to receive transaction status updates such as Pending and Succeeded.

## DataKit

URL: https://wsform.com/integration/datakit/

Connect form data with DataKit

Type: Built-In Integration.

Use WS Form with DataKit to connect your forms in WordPress with your wider data workflow.

DataKit is available as a third-party integration. If you use DataKit, WS Form can be part of that setup.

## Divi

URL: https://wsform.com/integration/divi/

Build and place powerful forms inside Divi 5 faster

Type: Built-In Integration.

Use the WS Form module to add forms directly inside the Divi 5 builder on your WordPress website. The module is ready to use as soon as WS Form PRO is installed, with no additional plugins, integrations, or setup steps required.

Once added, the module behaves like any other Divi module. Click +, choose the WS Form module, then select your form from the pulldown list to render it in your layout.

This makes it easy to build and manage forms centrally in WS Form, insert them anywhere in Divi layouts, update forms without editing the page layout again, and reuse forms across multiple pages.

WS Form also supports conditional logic, calculations, multi-step forms, integrations, spam protection, and detailed form analytics for more advanced form experiences inside Divi.

## dotdigital

URL: https://wsform.com/integration/dotdigital/

Build dotdigital-ready forms faster in WordPress

Type: Premium Integration.

Connect your forms in WordPress to dotdigital with the WS Form dotdigital premium integration. You can create new forms from your dotdigital lists in a single click, push new contacts using an action, and pull contact data into forms with WS Form autocomplete.

WS Form can fully configure a form from your dotdigital list so it is ready to use immediately. You can also add a dotdigital action to any WS Form and choose whether it runs when the form is saved, submitted, or both.

The premium integration supports contact actions including subscribe, unsubscribe, resubscribe, create, suppress, and unsuppress. Field mapping links your form fields to the corresponding dotdigital fields, and forms created from a dotdigital template have field mappings created automatically.

## Drip

URL: https://wsform.com/integration/drip/

Build Drip-ready forms faster and keep contact data in sync

Type: Premium Integration.

The Drip premium integration for WS Form helps you add, update, and delete people and subscribers from your forms in WordPress. You can also remove people from campaigns, unsubscribe them, and pull people data using autocomplete.

WS Form can create a Drip form in a single click from your Drip campaigns or People. It can also fully configure the form so it is ready to use immediately.

If you prefer, you can add a Drip action to any WS Form and choose when it runs: on save, on submit, or both. The premium integration also supports field mapping, custom mapping, and tag mapping.

## Dropbox

URL: https://wsform.com/integration/dropbox/

Send form file uploads straight to Dropbox

Type: Premium Integration.

The Dropbox premium integration lets you configure file fields to upload directly to a connected Dropbox account from your forms in WordPress.

You can choose the Dropbox upload path for each file field. WS Form also supports variables in the path, so you can make folder locations dynamic.

Uploaded files are easy to access from the submissions page using the file upload icons. Files are also available in your Dropbox folder.

## Elementor

URL: https://wsform.com/integration/elementor/

Add forms to Elementor pages in a few clicks

Type: Built-In Integration.

If you use Elementor for your WordPress website, you can add forms with the WS Form PRO widget.

The widget is ready to use as soon as WS Form PRO is installed. No additional plugins are required.

To use it, drag the WS Form PRO widget from the Elements tab to your page, then select your form from the pulldown list.

For more information about Elementor, visit Elementor.

## Engine Awesome

URL: https://wsform.com/integration/engine-awesome/

Turn Engine Awesome objects into ready-to-use forms in WordPress

Type: Premium Integration.

The Engine Awesome premium integration lets you push new records to Engine Awesome objects using a WS Form action. You can also create new forms from your Engine Awesome objects in a single click on the add form page.

After connecting Engine Awesome, you can choose the objects you want to work with on the settings page. Custom objects are included, and WS Form can create a form for any working object so it is ready to use on your WordPress website.

You can also add multiple Engine Awesome actions to the same form. In the included example workflow, WS Form creates a Company first, then creates a Contact and links it to that Company by using the #engine_awesome_object_id variable.

## Etch

URL: https://wsform.com/integration/etch/

Add forms to Etch pages with a simple shortcode

Type: Built-In Integration.

Etch is a visual development platform for building scalable, maintainable, and accessible WordPress sites through a fully visual workflow.

To add a form in Etch, use the WS Form shortcode anywhere in your page markup. You can copy the shortcode from the form settings while editing a form, or from the forms list in the WordPress admin.

Form styling is handled in WS Form itself. You can learn more about shortcodes and styling in the Etch integration guide.

## Facebook Ads

URL: https://wsform.com/integration/facebook-ads/

Track Facebook conversions from your forms in WordPress

Type: Built-In Integration.

WS Form includes a Conversion Tracking action that can fire Facebook Tracking Pixel events from your forms in WordPress.

You can choose Facebook (Standard) to select an event name and add optional object properties. You can also choose Facebook (Custom) to manually enter the event name and define object properties as key value pairs.

For Facebook conversion tracking to work, a Facebook Tracking Pixel must already be installed on your website. WS Form also lets you enter straight text or use WS Form variables in these settings.

## Fathom Analyics

URL: https://wsform.com/integration/fathom-analyics/

Track form submissions as Fathom Analytics events

Type: Built-In Integration.

Use WS Form to fire Fathom Analytics events when a form is submitted on your WordPress website.

Fathom Analytics is a privacy-focused website analytics tool. In WS Form, you can add a Conversion Tracking action and choose Fathom Analytics as the action type.

When you configure the action, you can enter an event name. You can also optionally add a cents value and a site ID for the event.

## FlowMattic

URL: https://wsform.com/integration/flowmattic/

Connect your forms to FlowMattic workflows

Type: Third Party.

Connect WS Form with FlowMattic to use your form submissions in automation workflows.

This integration supports WordPress sites using WS Form and FlowMattic.

You can learn more about the integration on the FlowMattic WS Form integration page.

## FluentCRM

URL: https://wsform.com/integration/fluentcrm/

Connect your forms to FluentCRM and keep contact data moving

Type: Premium Integration.

Use the FluentCRM Premium Integration to subscribe and unsubscribe FluentCRM contacts with a WordPress form created in WS Form.

You can create new forms from your FluentCRM lists in a single click from the add form page. WS Form supports all FluentCRM field types as well as tagging.

You can also use a WS Form action to add contacts to FluentCRM when a form is saved, submitted, or both. Field mapping, custom mapping, tag mapping, duplicate handling, and opt-in settings are available.

WS Form can also pre-populate forms with data from FluentCRM for signed-in website visitors whose WordPress email address matches a contact in FluentCRM.

## Form Data Vault

URL: https://wsform.com/integration/form-data-vault/

Connect your forms with Form Data Vault

Type: Third Party.

Connect WS Form with Form Data Vault to link your forms in WordPress with Form Data Vault.

This integration is available from Form Data Vault, with more information available on their integration page.

View the Form Data Vault integration.

## Form Vibes

URL: https://wsform.com/integration/form-vibes/

Send form data to Form Vibes from WordPress

Type: Third Party.

Connect your forms in WordPress with Form Vibes.

WS Form supports Form Vibes as a third-party integration for WordPress.

## Foundation

URL: https://wsform.com/integration/foundation/

Build forms that fit Foundation-based WordPress themes cleanly

Type: Built-In Integration.

Foundation is a responsive front-end framework used by many WordPress themes. When your theme uses Foundation, WS Form can output HTML markup that is native to that framework.

This helps your forms dovetail seamlessly into your theme. WS Form also changes the breakpoint selector to match the available breakpoints in Foundation.

WS Form supports Foundation 6.4+, Foundation 6.0-6.3.1, and Foundation 5.x. All available WS Form field types are fully compatible with Foundation.

## Freshdesk

URL: https://wsform.com/integration/freshdesk/

Turn forms in WordPress into Freshdesk support tickets

Type: Premium Integration.

Use the Freshdesk premium integration to create custom support ticket forms on your WordPress website and push submissions to your Freshdesk account.

You can create a form automatically by choosing New Ticket or one of your Freshdesk forms when you add a new form in WS Form.

You can also use any form created in WS Form and add a Freshdesk action that runs when the form is saved, submitted, or both. The premium integration supports field mapping, custom mapping, tag mapping, and file attachments for Freshdesk tickets.

## FunnelKit

URL: https://wsform.com/integration/funnelkit/

Trigger FunnelKit automations from your form submissions

Type: Premium Integration.

Use the FunnelKit premium integration to push form submission data from WS Form to FunnelKit. This lets your forms in WordPress trigger FunnelKit automations.

Add an Add to FunnelKit action to your form and choose when it should run. By default, the action runs when the form is submitted.

You can also choose an opt-in field so the action only runs when an opt-in checkbox is checked. In FunnelKit, select the WS Form > Form Submits trigger for your automation and choose the form you want to use.

When building the automation, you can map the basic contact fields. You can also add an Update Fields action to set additional fields using WS Form merge fields.

## FuseWP

URL: https://wsform.com/integration/fusewp/

Connect form submissions to your email marketing software

Type: Third Party.

Use FuseWP to connect WS Form with your email marketing software. This helps you send form submission data where you need it.

FuseWP provides a guide for syncing WS Form with email marketing tools. It is a third-party option for WordPress sites that want to connect forms and email marketing.

View the FuseWP guide to learn how to set up the connection.

## GetResponse

URL: https://wsform.com/integration/getresponse/

Turn GetResponse lists into ready-to-use forms in WordPress

Type: Premium Integration.

The GetResponse premium integration connects your forms to GetResponse so you can add subscribers with a form action, pull subscriber data with autocomplete, and create new forms from your lists in a single click.

You can create a GetResponse form automatically from the Add New page in WordPress. WS Form builds the form and configures it so it is ready to use immediately.

You can also use any existing form and add an action to send entries to a GetResponse list when the form is saved, submitted, or both. The premium integration supports field mapping and tag mapping, and forms created from a GetResponse template can set up mappings automatically.

The premium integration can also populate form fields using GetResponse contact data for signed-in visitors when their WordPress email address matches a contact in GetResponse.

## Google Analytics

URL: https://wsform.com/integration/google-analytics/

Measure form activity in Google Analytics

Type: Built-In Integration.

Use the Conversion Tracking action to fire Google Analytics events from your forms in WordPress. You can choose to run the action when a form is saved, submitted, or both.

For Google Analytics, WS Form supports event settings for Event Category, Event Action, Event Label, and Event Value. You can also add Data Layer Variables and use straight text or WS Form variables in these settings.

To fire a Google Analytics event, a Google Analytics tag must be installed on your website. You can learn more in the Conversion Tracking guide.

## Google Directions

URL: https://wsform.com/integration/google-directions/

Add route details and map output to your forms

Type: Built-In Integration.

Google Directions in WS Form lets you retrieve route information in forms in WordPress. Set a start and end location, and the Google Routing field can return route distance, duration, summary, and the latitude and longitude of the start and end locations.

Route information is requested when the start and end locations are completed or changed. You can show the route details in the Google Routing field itself, hide the field if it is not needed, or map routing components to other form fields.

The field can also show the route on a WS Form Google Map field. It works with Google Address fields for easier location selection and can be used with Conditional Logic, Calculated Fields, and E-Commerce Fields.

## Google Drive

URL: https://wsform.com/integration/google-drive/

Send form file uploads straight to Google Drive

Type: Premium Integration.

Connect WS Form to Google Drive and configure file fields to upload directly to your connected Google Drive account.

You can choose the upload path for each file field and use WS Form variables to make that path dynamic. The default path is /WS Form/#form_id/#submit_hash/#field_id/, which helps keep files organized by form, submission, and field.

Files uploaded from your forms in WordPress can be accessed from the submissions page using the file upload icons. They are also available in your Google Drive folder.

You can upload to My Drive, a shared folder, or a shared drive by setting the Root Folder ID for the file field.

## Google Gemini

URL: https://wsform.com/integration/google-gemini/

Build forms faster from a simple prompt

Type: Built-In Integration.

Use Google Gemini with WS Form to create a form from an AI prompt in WordPress.

To use the Create from AI template, configure a Google connector in WS Form and enter your API key. When the connection is successful, WordPress shows it as connected.

After setup, the Create from AI template appears on the WS Form Add Form admin page. Select the template, describe the form you want to create, and click Create.

## Google Maps

URL: https://wsform.com/integration/google-maps/

Capture map locations directly in your forms

Type: Built-In Integration.

Add one or more interactive Google Maps to your forms in WordPress with the Google Map field. When someone clicks the map, the selected latitude and longitude are stored in the submission.

You can set a default latitude, longitude, zoom level, and map type. Available map types are Road Map, Satellite, Hybrid, and Terrain.

The field can also auto-center to the user’s location using browser geolocation, IP geolocation, or both. You can optionally use a text field as an address search field to find a location on the map.

To use the Google Map field, you need a Google Cloud Project with billing enabled, the Maps JavaScript API, Places API (New), and Geocoding API enabled, plus an API key entered in WS Form settings.

## Google Places

URL: https://wsform.com/integration/google-places-api/

Speed up address entry with Google-powered autocomplete

Type: Built-In Integration.

The Google Address field lets you autocomplete address fields in forms in WordPress using the Google Places API. When someone enters a partial address, suggested addresses appear. After an address is selected, its components can populate other fields on your form.

You can map Google address components to Text, Text Area, Select, Google Address, and Google Map fields. The selected address can also center a WS Form Google Map field, with an optional zoom level.

The field includes restrictions for result type and country restrictions, with support for up to five countries. You can also filter results by businesses and use geolocation methods such as browser or IP to attempt to set the address to the user’s location.

## Google reCAPTCHA

URL: https://wsform.com/integration/google-recaptcha/

Protect your forms with flexible Google reCAPTCHA options

Type: Built-In Integration.

Add a Google reCAPTCHA field to your forms in WordPress to help protect them from spam. WS Form supports all current reCAPTCHA versions: Version 2 image or audio, Version 2 invisible, and Version 3 action-based invisible reCAPTCHA.

To use reCAPTCHA, register your website with Google and add your site key and secret key. You can enter keys on each field or use global site and secret keys for all reCAPTCHA fields.

Version 3 runs silently and provides a spam score on successful submissions. WS Form stores that score with each submission and shows it on the submissions page as a color-coded indicator from 0% to 100%.

## Google Sheets

URL: https://wsform.com/integration/google-sheets/

Send form data to Google Sheets and build forms from your sheets

Type: Premium Integration.

Connect your forms in WordPress to Google Sheets and push submissions as new rows in your spreadsheet. You can also create new forms from your Google Sheets in a single click on the add form page.

The premium integration supports field mapping so you can match form fields to the column headings in the first row of your sheet. If the spreadsheet ID is entered correctly, available sheets are retrieved for selection.

You can choose to run the Google Sheets action when the form is saved, submitted, or both. The premium integration also supports custom mapping, repeater rows to sheet rows, and URL output for mapped file and signature fields.

## Groundhogg

URL: https://wsform.com/integration/groundhogg/

Connect your forms to Groundhogg contact creation, updates, and funnel activity

Type: Premium Integration.

Recommended.

Groundhogg is a marketing automation and CRM plugin for WordPress. The WS Form premium integration lets you use any form created in WS Form to create and update Groundhogg contacts, and trigger a funnel using the WS Form PRO benchmark.

You can start with one of the included Groundhogg form templates, or add a Groundhogg action to any form. The action supports field mapping, custom mapping, opt-in settings, owner assignment, tags, notes, attachment mapping, and custom meta.

The premium integration can also populate form fields using Groundhogg contact data. This works for signed-in visitors when their WordPress email address matches the email address of a contact in Groundhogg.

## hCaptcha

URL: https://wsform.com/integration/hcaptcha/

Protect your forms with flexible hCaptcha support

Type: Built-In Integration.

Add an hCaptcha field to your WordPress form to help detect whether a visitor is human before a submission is made.

WS Form supports current hCaptcha versions including Default and Invisible. You can use your site key and secret key from hCaptcha, or set global keys for all hCaptcha fields.

Visible hCaptcha fields can use a light or dark theme, and you can choose a normal or compact size. WS Form also includes language, label, help text, validation, styling, and visibility settings for the field.

When an Enterprise hCaptcha is used and a submission is successful, hCaptcha provides a spam score. WS Form stores that score with the submission and shows it on the submissions page.

## Help Scout

URL: https://wsform.com/integration/help-scout/

Turn form submissions into Help Scout conversations

Type: Premium Integration.

Connect your forms in WordPress to Help Scout and push submissions to your account as conversations. You can build custom conversation forms for your website or use mailbox-based templates to create them quickly.





The integration can create a conversation when a form is submitted and lets you choose the Help Scout mailbox, conversation status, conversation type, assignment, and whether to send the mailbox auto reply.





WS Form supports field mapping for Contact, Conversation, and Company fields, including custom fields configured in Help Scout. You can also add custom mappings, map choice fields to tags, add static tags, include an internal note, and send file uploads or signatures as attachments.



 

## HighLevel

URL: https://wsform.com/integration/highlevel/

Keep your HighLevel forms working and move to LeadConnector when you're ready

Type: Premium Integration.

The HighLevel premium integration for WS Form has been discontinued in favor of the new LeadConnector premium integration.

Your existing HighLevel integration will continue to function, but it will no longer receive updates and will eventually be discontinued.

For WordPress sites using HighLevel, WS Form now recommends upgrading to the LeadConnector premium integration and recreating each form action there before disabling the old HighLevel action.

## Hostinger Reach

URL: https://wsform.com/integration/hostinger-reach/

Send form contacts straight to your Hostinger Reach groups

Type: Premium Integration.

Connect your forms in WordPress to Hostinger Reach with a WS Form action. You can push new contacts from a form and add them to a selected Hostinger Reach group.

WS Form can also create new forms from your Hostinger Reach groups in a single click from the Add Form page. The form is created and configured so it is ready to use immediately.

If you prefer, you can add a Hostinger Reach action to any form you create in WS Form. You can choose whether the action runs when the form is saved, submitted, or both.

Select the Hostinger Reach group for new contacts

Choose an opt-in field so the action only runs when checked

Set contact status to Subscribed or Unsubscribed

Map WS Form fields to Hostinger Reach fields

## HubSpot

URL: https://wsform.com/integration/hubspot/

Send form data to HubSpot with flexible field mapping

Type: Premium Integration.

Connect your forms in WordPress to HubSpot with the WS Form HubSpot premium integration. You can push form submissions to HubSpot Companies, Contacts, and Deals using a WS Form action.

WS Form can also create new forms automatically from your HubSpot forms in a single click on the Add Form page. The form is created and configured so it is ready to use immediately.

For manual setups, you can add an Add to HubSpot action to any WS Form form and choose whether it runs when the form is saved, submitted, or both. Field mapping and custom mapping are available, and created contact, company, and deal IDs can be used in subsequent actions.

## iContact

URL: https://wsform.com/integration/icontact/

Build iContact-ready forms and manage contact data from WordPress

Type: Premium Integration.

The iContact premium integration for WS Form helps you work with iContact contact data from your forms in WordPress. You can push new contacts using an action, pull contact data into forms with autocomplete, and create new forms from your iContact lists in a single click.

WS Form can create a form from any of your iContact lists and fully configure it so the form is ready to use immediately. If you prefer, you can add an iContact action to any existing form and choose whether it runs when the form is saved, submitted, or both.

The premium integration also supports field mapping between your form fields and iContact fields. Signed-in website visitors can have form fields populated from iContact when their WordPress email address matches a contact in iContact.

## InstaWP

URL: https://wsform.com/integration/instawp/

Create InstaWP WordPress sites directly from your forms

Type: Premium Integration.

Use the InstaWP premium integration to launch WordPress sites from forms built in WS Form. It helps you collect the information needed to build a site and personalize email notifications and messages for new site creations.

You can create sites from specific InstaWP templates, selected templates, or from scratch. From-scratch site creation can use an InstaWP configuration or manually specified WordPress and PHP versions.

WS Form also includes InstaWP form templates and can create a fully configured form for an InstaWP endpoint in a single click. You can also add a Create InstaWP Site action to an existing form.

## JetEngine

URL: https://wsform.com/integration/jetengine/

Build forms that create and populate JetEngine-powered content

Type: Premium Integration.

Use WS Form with JetEngine to build forms in WordPress that create posts with JetEngine custom fields. WS Form can be fully integrated with custom fields created in JetEngine, including repeater fields.

With the Post Management Premium Integration, WS Form can automatically create forms for post types that use JetEngine fields. It can add basic post fields, JetEngine fields configured from your settings, and taxonomy selectors for the post type.

WS Form can also pre-populate forms using post data that includes JetEngine fields. Choice-based fields such as select, checkbox, radio, and button groups can pull their choices dynamically from JetEngine.

## Keyword Blocklist

URL: https://wsform.com/integration/keyword-blocklist/

Stop keyword-based spam before submissions get through

Type: Premium Integration.

Keyword Blocklist helps reduce spam submissions by checking form content against a blocklist of more than 1,300 keywords. Checks run server-side for reliable filtering.

Keywords are organized into 10 categories: Adult, Crypto, Finance, Gambling, Legal, Pharmaceutical, Profanity, Sales, SEO, and URL Shorteners. Each category can be enabled or disabled independently, and Adult and Profanity are enabled by default.

The integration is enabled by default and can also be extended with the wsf_submit_block_keywords filter hook if you need to add more blocked keywords.

## Kit

URL: https://wsform.com/integration/kit/

Capture subscribers in Kit from your forms in WordPress

Type: Premium Integration.

Connect your forms in WordPress to Kit and add subscribers to forms, sequences, and tags.





WS Form can create new forms for your Kit forms in a single click. Those forms automatically include your custom fields and tags so they are ready to use immediately.





You can also use a WS Form action to add subscribers to a Kit form when a form is saved, submitted, or both. Field mapping, custom mapping, tag mapping, and tag assignment are supported.



 

## Klaviyo

URL: https://wsform.com/integration/klaviyo/

Build Klaviyo signup forms faster in WordPress

Type: Premium Integration.

Use the Klaviyo premium integration to create WS Form forms that subscribe profiles in Klaviyo. You can create forms for your Klaviyo lists in a single click, and the form is fully configured so it is ready to use immediately.

You can also add a Klaviyo action to any form and choose whether it runs when the form is saved, submitted, or both. The action lets you choose a Klaviyo list, set a source, and map your form fields to the corresponding fields in Klaviyo.

The premium integration also supports email and SMS opt-in fields, with separate settings for each. In WordPress, you can also populate form fields using Klaviyo profile data when a signed-in visitor's WordPress email address matches a profile in Klaviyo.

## Laposta

URL: https://wsform.com/integration/laposta/

Create Laposta-ready forms faster and send subscribers where they belong

Type: Premium Integration.

Connect your forms in WordPress to Laposta with the WS Form Laposta premium integration. You can push new subscribers using an action and create new forms from your Laposta lists in a single click.

WS Form can build a form from any of your Laposta lists and fully configure it so the form is ready to use immediately. If needed, you can also use an existing form and add an action to send submissions to a selected Laposta list.

The premium integration supports field mapping, custom mapping, and an opt-in field. You can choose whether the Laposta action runs when a form is saved, submitted, or both.

You can also populate form fields using subscriber data from Laposta when a signed-in website visitor has a WordPress email address that matches a contact in Laposta.

## LeadConnector

URL: https://wsform.com/integration/leadconnector/

Create LeadConnector records from your forms faster

Type: Premium Integration.

Connect forms in WordPress to LeadConnector and push new submissions to LeadConnector objects using WS Form actions. You can also generate a form from your LeadConnector objects in a single click.

WS Form can create forms for your working LeadConnector objects and fully configure them so they are ready to use immediately. Common objects such as Contacts, Companies, and Opportunities are supported, and custom objects can be selected on the settings page.

You can also add a LeadConnector action to any WS Form form and choose whether it runs when the form is saved, submitted, or both. The premium integration supports field mapping, custom mapping, duplicate handling, tags for Contact objects, and relationships between records.

Do not use this premium integration with the LeadConnector external-tracking.js script, as it can create duplicate record errors. You can use WS Form tracking features to map tracking data to LeadConnector instead.

## LinkedIn Ads

URL: https://wsform.com/integration/linkedin-ads/

Track LinkedIn conversions when forms are saved or submitted

Type: Built-In Integration.

Use WS Form to fire a LinkedIn Insight Tag conversion event from your forms in WordPress with the Conversion Tracking action.

You can choose when the action runs: when the form is saved, submitted, or both. For LinkedIn, enter the Conversion ID you want to fire.

The same Conversion Tracking action also supports Google Tag Manager, Google Analytics, Fathom Analytics, and Facebook tracking options.

## Madlitics

URL: https://wsform.com/integration/madlitics/

See where every lead came from before it submits your form

Type: Third Party.

Madlitics captures marketing attribution data before a visitor submits your form and writes that data into WS Form fields. This helps each submission include source, channel, campaign, landing page, and click ID context.





With Madlitics on your WordPress site, you can keep first-touch attribution and UTM data attached to form submissions as visitors browse, return later, or submit from a different page.





That gives your team cleaner lead records and better reporting. You can pass attribution data collected through WS Form into your CRM, email platform, spreadsheet, or reporting workflow.



 

## Mailchimp

URL: https://wsform.com/integration/mailchimp/

Build Mailchimp-ready forms and keep contact data in sync

Type: Premium Integration.

Connect your forms in WordPress to Mailchimp with the WS Form Mailchimp premium integration. You can create new forms from your Mailchimp lists in a single click, or use a Mailchimp action with any form you build in WS Form.

The premium integration supports adding new contacts, unsubscribing contacts, and editing contacts. It also includes automatic field mapping and automatic tag mapping when you create a form from a Mailchimp list.

You can also pull contact data into your form using WS Form autocomplete. WS Form can populate form fields from Mailchimp for signed-in visitors when their WordPress email address matches a Mailchimp contact.

## MailerLite

URL: https://wsform.com/integration/mailerlite/

Add MailerLite subscribers from your forms in WordPress faster

Type: Premium Integration.

Connect your forms in WordPress to MailerLite with the WS Form MailerLite premium integration. You can add subscribers using an action, pull subscriber data with autocomplete, and create new forms for your MailerLite groups in a single click.

WS Form can create a MailerLite form automatically from any of your MailerLite groups, or with no group selected. The form is fully configured and ready to use immediately.

You can also add a MailerLite action to any WS Form form and choose whether it runs when the form is saved, submitted, or both. The premium integration supports field mapping and custom mapping, and forms created from a MailerLite template have field mappings created automatically.

## MailPoet

URL: https://wsform.com/integration/mailpoet/

Build MailPoet list forms faster in WordPress

Type: Premium Integration.

Use the MailPoet premium integration to create WS Form forms that subscribe or unsubscribe contacts in MailPoet. You can also create forms for your MailPoet lists in a single click.

WS Form can fully configure a MailPoet list form automatically so it is ready to use right away. If you prefer, you can add a MailPoet action to any existing WordPress form and choose whether it runs when the form is saved, submitted, or both.

The premium integration supports field mapping, an opt-in field, and options for confirmation, welcome, and subscriber notification emails. It can also populate form fields from MailPoet contact data when the visitor is signed in and their WordPress email address matches a contact in MailPoet.

## Mailster

URL: https://wsform.com/integration/mailster/

Build Mailster forms faster and keep subscriber data in sync

Type: Premium Integration.

Recommended.

Use the Mailster premium integration to create forms in WordPress that subscribe or unsubscribe contacts in Mailster. You can also create forms for your Mailster lists in a single click.

WS Form can add a Mailster action to any form so data is sent when a form is saved, submitted, or both. The premium integration supports field mapping, custom mapping, tag mapping, tags by name, double opt-in, and overwriting an existing subscriber.

You can also populate form fields using Mailster contact data. This is available when a visitor is signed in and their WordPress email address matches a contact in Mailster.

## Make

URL: https://wsform.com/integration/make/

Send WordPress form submissions to Make and use your data across thousands of apps

Type: Premium Integration.

Connect WS Form submissions to Make and integrate with thousands of apps. The Make premium integration includes a form submission trigger and makes your form fields available for use in filters or mappings.

To use the premium integration, you create a scenario in Make with the WS Form Form Submission trigger, then connect it using the API URL and API Key from the Make settings in WS Form.

Make can retrieve submission data from a published WordPress form after at least one submission has been created. Additional submission fields are also available, including submission ID, form ID, status, preview, date added, date updated, and admin URL.

## MCP Server

URL: https://wsform.com/integration/mcp-server/

Connect your forms to AI-powered workflows

Type: Built-In Integration.

WS Form includes an MCP server that lets external applications, scripts, and services interact with your forms, including AI tools that support the MCP protocol.

This opens the door to intelligent form handling, automated decision-making, and AI-assisted workflows in WordPress. The MCP server can create forms with supported WS Form field types and simplified form features such as tabs, calculations, field settings, option population, and field sizing.

For security, form editing is disabled by default and all abilities exposed through the MCP server are protected by permission callbacks. User capabilities are checked against standard WS Form capabilities.

AI-generated form modifications are experimental, so review changes carefully and test them in a staging environment before publishing.

## Meta Box

URL: https://wsform.com/integration/meta-box/

Build forms for Meta Box custom fields and WordPress content

Type: Premium Integration.

Connect WS Form with Meta Box to build forms in WordPress that work with custom fields, post types, and taxonomies. You can create forms that submit new posts containing Meta Box fields.

With the Post Management Premium Integration, WS Form can automatically create forms for registered post types, add Meta Box fields based on your settings, and add taxonomy selectors. Choice-based fields can also pull their choices dynamically from Meta Box.

WS Form also supports pre-populating forms with post data that includes Meta Box fields. Group fields are supported when creating, populating, and submitting forms.

## Modula

URL: https://wsform.com/integration/modula/

Manage Modula galleries directly through your forms

Type: Premium Integration.

Recommended.

The WS Form Modula premium integration lets you show a Modula gallery on a form and update that gallery when the form is submitted.

You can add, reorder, and delete images in a gallery. Submitted uploads and deletions are reflected in the Modula gallery, including the image order.

WS Form can also automatically create a WordPress form from an existing Modula gallery. The generated form shows the images already contained in that gallery.

The integration uses a File Upload field configured for multiple, sortable uploads with Media Library handling, and supports appending images plus horizontal and vertical alignment options for newly added images.

## Mollie

URL: https://wsform.com/integration/mollie/

Take payments through your forms in WordPress with Mollie

Type: Premium Integration.

The WS Form Mollie premium integration lets you accept online payments in forms in WordPress. It can charge a fixed amount with a button on its own, or work with WS Form e-commerce fields for more advanced cart options.

Mollie supports a wide range of payment options, including credit cards, PayPal, and local payment methods for certain countries or regions. The payment method used in a form depends on your Mollie account configuration.

The premium integration includes Mollie form templates to help you get started. Once configured, Mollie fields appear in the E-Commerce section of the form builder, including cardholder, card, expiry, CVV, and Mollie Submit fields.

You can also map billing and shipping address fields, set the amount to charge, choose a currency, add a transaction description, and control how zero-amount payments are handled.

## Moosend

URL: https://wsform.com/integration/moosend/

Turn forms in WordPress into Moosend subscriber signups

Type: Premium Integration.

Connect your forms in WordPress to Moosend with the WS Form Moosend premium integration. You can push new subscribers using an action and create new forms from your Moosend lists in a single click.

WS Form can build a form automatically from any of your Moosend lists. The form is fully configured and ready to add to your website, and you can refresh the list view if a new list does not appear.

You can also add a Moosend action to any WS Form form and choose whether it runs when the form is saved, submitted, or both. The action supports list selection, an opt-in field, field mapping, and custom mapping using WS Form variables.

The premium integration can also retrieve subscriber data to populate form fields when a signed-in visitor's WordPress email address matches a contact in Moosend.

## Notion

URL: https://wsform.com/integration/notion/

Send WordPress form submissions straight to your Notion databases

Type: Premium Integration.

The Notion premium integration lets you push WS Form submissions from your WordPress website to Notion databases.

You can create a form for any shared Notion database in a single click. WS Form builds the form and configures it so it is ready to use immediately.

You can also use an existing form and add an action to submit data to Notion when a user saves the form, submits it, or both.

Supports all field types

Quick Connect

Uses latest API

## Novamira

URL: https://wsform.com/integration/novamira/

Connect forms in WordPress with Novamira

Type: Third Party.

WS Form can be used with Novamira.

Use this integration to connect your forms in WordPress with Novamira.

## Omnisend

URL: https://wsform.com/integration/omnisend/

Build Omnisend-ready forms and manage contacts from your forms in WordPress

Type: Premium Integration.

The Omnisend premium integration for WS Form lets you add new contacts using an action and create an Omnisend form automatically in a single click.

You can create a Contact form from the Omnisend tab on the Add New page. WS Form creates the form and configures it so it is ready to use on your WordPress website.

You can also use any WS Form form and add an Omnisend action that runs when the form is saved, submitted, or both. The premium integration supports field mapping, custom mapping, custom properties, tags, contact status, and an opt-in field.

## OOPSpam

URL: https://wsform.com/integration/oopspam/

Add spam protection to your forms with OOPSpam

Type: Third Party.

Use OOPSpam with WS Form to add spam protection to your forms in WordPress.

OOPSpam provides spam protection for WS Form. This integration is available as a third-party option.

You can learn more about using OOPSpam with WS Form here: OOPSpam spam protection for WS Form.

## OpenAI

URL: https://wsform.com/integration/openai/

Build AI-powered forms in WordPress with OpenAI

Type: Premium Integration.

Use the WS Form OpenAI premium integration to create forms in WordPress from a simple prompt and connect forms to core OpenAI endpoints for text, image, audio, and moderation tasks.

Included templates let you create an AI Generated Form by describing the form you need. Supported generated fields include Text, Text Area, Email, Phone, URL, Number, File Upload, Rating, Select, Checkbox, and Radio. Help text and placeholders can also be generated.

You can also add a Make OpenAI Request action to an existing form. Documented use cases include improving copy in a text area field, transcribing speech from an uploaded audio file, creating spoken audio from text, generating image content, question-and-answer experiences, and moderating submissions for inappropriate content.

## Option Management

URL: https://wsform.com/integration/option-management/

Manage site-wide WordPress options with forms

Type: Premium Integration.

Use WS Form Option Management to set WordPress options and populate form fields with stored option values. This makes it easier to work with site-wide settings in WordPress without writing custom code.

You can use the integration with regular WordPress options or with settings pages created by supported custom field plugins. Supported plugins include Advanced Custom Fields (ACF) PRO, JetEngine, and Meta Box.

WS Form can automatically create option forms for supported settings pages. You can also use any WS Form form and map fields to option names, set custom option values, and use WS Form variables in custom mappings.

## Oxygen

URL: https://wsform.com/integration/oxygen-builder/

Add forms to Oxygen layouts quickly

Type: Built-In Integration.

Add a form to a WordPress page in Oxygen Visual Site Builder with the WS Form element.

In Oxygen, open the WS Form PRO section and add the Form element to your layout. Then choose a form from the dropdown and click Apply Params to show the form in your layout.

## Pabbly

URL: https://wsform.com/integration/pabbly/

Send form submissions into your Pabbly Connect workflows

Type: Third Party.

Connect WS Form to Pabbly Connect and use your form submissions in automated workflows.

This integration helps you pass data from forms in WordPress into Pabbly Connect so you can connect it with the apps and processes you use.

Learn more about the WS Form integration for Pabbly Connect.

## PayPal Checkout

URL: https://wsform.com/integration/paypal-checkout/

Take PayPal and card payments directly from your forms

Type: Premium Integration.

PayPal Checkout for WS Form lets you accept PayPal or credit card payments from your forms in WordPress. You can charge a fixed amount with the button on its own, or use WS Form e-commerce fields for more advanced cart options.

The PayPal Checkout button uses PayPal’s latest client-side payment process. When a transaction is completed, WS Form stores the transaction ID with the form submission.

You can configure billing and shipping address mapping, pre-populate payer details, and map transaction breakdown values such as subtotal, shipping, tax, handling fee, shipping discount, insurance, and gift wrap. The payment page must be served over HTTPS.

## PDF

URL: https://wsform.com/integration/pdf/

Turn form submissions into PDFs you can send and export

Type: Premium Integration.

The PDF premium integration lets you create PDFs from form submissions in WordPress. You can attach a PDF to a Send Email action and export a PDF from the submissions page.

You can adjust page size, page orientation, and font settings in the PDF settings tab. The premium integration also includes a Page Break field type to control where page breaks appear in generated PDFs.

Custom PDF templates are supported. The premium integration uses parsed HTML templates with WS Form variables, and generated PDF files are created dynamically rather than stored on your server.

## PersonalizeWP

URL: https://wsform.com/integration/personalizewp/

Personalize WordPress content using data collected in your forms

Type: Third Party.

Connect WS Form with PersonalizeWP to use form data for content personalization in WordPress.

This integration helps you tailor what visitors see based on information collected through your forms.

You can learn more about PersonalizeWP at personalizewp.com.

## Pipedrive

URL: https://wsform.com/integration/pipedrive/

Turn form submissions into Pipedrive deals faster

Type: Premium Integration.

Connect your forms in WordPress to Pipedrive and push new deals to a selected pipeline and stage using a WS Form action.

You can also create new forms from your Pipedrive pipelines in a single click. WS Form builds the form and configures it so it is ready to use immediately.

For existing forms, add the Pipedrive action and map your fields to deal, organization, and person fields. You can also use custom mapping, add notes, and apply deduplication options when a deal is added.

## Pods

URL: https://wsform.com/integration/pods/

Build forms for Pods custom fields and post types

Type: Premium Integration.

Use WS Form with Pods to build forms in WordPress that work with custom fields, post types, and taxonomies. WS Form can be fully integrated with custom fields created using Pods.

With the Post Management Premium Integration, you can automatically create forms for any registered post type, add Pods fields based on your settings, and include taxonomy term selectors such as categories and tags.

WS Form can push submissions as new posts that are fully compatible with Pods, pre-populate forms using post data that includes Pods fields, and support Pods group fields when creating, populating, and submitting forms.

Automatically create forms from registered post type templates

Dynamically populate select, checkbox, radio, and button group choices from Pods

Support core Pods field types, including group fields

## Polylang

URL: https://wsform.com/integration/polylang/

Make your forms available in every site language

Type: Built-In Integration.

Polylang is a multilingual plugin for WordPress that supports server-side string translation. WS Form integrates directly with Polylang and can automatically register translatable form strings for translation.

When Polylang is installed and activated, WS Form adds a Translation tab to Form Settings. You can enable the integration, manage translations in Polylang, and have translated forms display automatically in the active language.

Polylang string translation can be used for form settings, tab labels, section labels, field labels, placeholders, help text, default values, action settings, and ARIA accessibility strings.

WS Form can also translate data grid choices used by Select, Checkbox, and Radio fields. Data grid translation uses the Label column mapping, and only data grids without a data source can be translated.

## Post Management

URL: https://wsform.com/integration/post-management/

Build forms that create and update WordPress content

Type: Premium Integration.

Use the Post Management premium integration to create forms that add and update posts of any post type in WordPress. That includes posts, pages, products, and custom post types.

WS Form can create a post management form in a single click. The automatic setup creates the form, maps fields, and creates checkboxes for taxonomies associated with the post type you select.

You can map form fields to post fields, post meta data, attachments, featured images, and terms. The premium integration is also compatible with Advanced Custom Fields (ACF), ACPT, JetEngine, Meta Box, Pods, and Toolset.

## Salesforce

URL: https://wsform.com/integration/salesforce/

Connect your forms to Salesforce and work with leads, contacts, files, and flows

Type: Premium Integration.

Connect forms in WordPress directly to Salesforce with WS Form. You can create and update Salesforce objects, run supported invocable actions, upload files, detect and update duplicate records, and populate forms from Salesforce.





WS Form supports standard and custom Salesforce objects. You can choose which objects and invocable actions are available, then build a form automatically from a Salesforce object or add Salesforce actions manually to any form.





Field mapping includes automatic and custom mapping. You can send form values, fixed values, or WS Form variables to Salesforce, map file uploads and signatures, and use data returned by Salesforce in subsequent actions.



 

## Slack

URL: https://wsform.com/integration/slack/

Send WordPress form submissions straight to Slack

Type: Premium Integration.

Use the Add to Slack action to push messages from a WordPress form to Slack. You can configure the message text and use WS Form variables in message settings.

The Slack premium integration supports message color, attachment titles, images, icons, buttons, and field mapping. Messages can be posted to public and private channels in your workspace.

WS Form can also create a Slack form automatically so it is pre-configured to push messages to one of your Slack channels. If you use a private channel, add WS Form as an app to that channel first.

## Stripe Elements

URL: https://wsform.com/integration/stripe-elements/

Take secure card payments directly from your forms

Type: Premium Integration.

Stripe Elements lets you accept credit card payments from your forms in WordPress. You can charge a fixed amount with the button on its own, or use WS Form e-commerce fields for more advanced cart options.

The payment flow sends card details to Stripe client-side for secure tokenization. If tokenization succeeds, the form is saved and a payment intent is created server-side. If card authorization is required, it is shown to the user before the payment is confirmed and the form is submitted.

Once configured, two Stripe Elements fields are available in the form builder under E-Commerce: Stripe Card and Stripe Submit. The page containing the payment form must be served over HTTPS.

## Toolset

URL: https://wsform.com/integration/toolset/

Create WordPress posts with Toolset custom fields from your forms

Type: Premium Integration.

Use WS Form with Toolset to build forms in WordPress that create posts containing Toolset custom fields. Toolset lets you create custom fields, post types, and taxonomies, and WS Form can integrate with those custom fields.

With the Post Management Premium Integration, you can automatically create forms for any registered post type, add Toolset fields configured to your settings, and include taxonomy term selectors. WS Form can also push submissions as new posts that are compatible with Toolset and pre-populate forms using post data that includes Toolset fields.

WS Form supports Toolset group fields when creating, populating, and submitting forms. It also supports Toolset core field types including text, textarea, email, URL, phone, date, numeric, select, radio, checkboxes, image, file, WYSIWYG, and more. Repeatable fields and groups are not supported for integration purposes.

## TranslatePress

URL: https://wsform.com/integration/translatepress/

Translate your forms visually on the front end

Type: Built-In Integration.

TranslatePress is a client-side translation plugin for WordPress that translates pages visually in the browser. WS Form works with TranslatePress out of the box and does not require any special integration settings.

Create and publish your form with WS Form, add it to a page, then open that page on the front end of your website. Use TranslatePress to translate visible form content in the visual editor.

You can translate field labels, field help text, field placeholders, button labels, validation messages, and confirmation messages. Once translated, forms automatically display in the active language.

## TrustedForm

URL: https://wsform.com/integration/trustedform/

Capture TrustedForm certificates in forms in WordPress

Type: Built-In Integration.

Add the TrustedForm field to your WordPress form to bring TrustedForm lead certification into WS Form. It helps certify consumer consent, document the time and source of submissions, and support transparency in data collection and usage.

When you add the TrustedForm section, WS Form automatically adds four fields: TrustedForm, TrustedForm Certificate URL, TrustedForm Ping URL, and TrustedForm Token. WS Form also automatically enqueues the TrustedForm JavaScript and binds TrustedForm to that form.

You can choose which fields store the certificate URL, ping URL, and token, and enable sandbox mode for testing. WS Form also supports multiple TrustedForm-enabled forms on the same page and lets you set an optional identifier for tracking and reporting.

## Twilio

URL: https://wsform.com/integration/twilio/

Send SMS messages from your forms with Twilio

Type: Premium Integration.

Connect Twilio to a WordPress form created in WS Form and send SMS messages when a form is saved, submitted, or both.

You can create new forms from your Twilio phone numbers in a single click from the Add New page. WS Form creates the form and configures it so it is ready to use.

The Twilio action supports text messages and can include file uploads, signatures, and media library files as attachments.

## Uncanny Automator

URL: https://wsform.com/integration/uncanny-automator/

Trigger WordPress automations from your forms

Type: Third Party.

Connect your forms in WordPress to Uncanny Automator and build automated workflows without code.

WS Form works with Uncanny Automator through the WS Form Lite integration page from Uncanny Automator.

You can explore the integration here: Uncanny Automator for WS Form Lite.

## User Management

URL: https://wsform.com/integration/user-management/

Build WordPress user forms faster

Type: Premium Integration.

Use the User Management premium integration to create forms in WordPress for user registration, profile editing, login, forgot password, reset password, and logout.

WS Form can create these user management forms in a single click. You can also add a User Management action to an existing form and choose whether it runs when the form is saved, submitted, or both.

For register and update methods, you can map form fields to user metadata and set custom meta keys and values. The premium integration is also compatible with Advanced Custom Fields (ACF), ACPT, JetEngine, Meta Box, Pods, and Toolset.

You can also pre-populate forms with user data, which is useful for edit profile forms. For login forms, you can create a fixed redirect or pass a redirect URL dynamically.

## Webex

URL: https://wsform.com/integration/webex/

Send form submissions to Webex your way

Type: Built-In Integration.

Use the Webex premium integration to push messages to Webex from a WordPress form. You can configure the message text, add a file attachment, and build an adaptive card.

WS Form variables can be used in message settings, including text and adaptive card content. You can send messages to a Webex space or directly to a person by email address.

WS Form can also create a pre-configured form for your Webex spaces. You can also add a Webex action to an existing form so it runs when a form is saved, submitted, or both.

## Webhook Action

URL: https://wsform.com/integration/webhook-action/

Connect your forms to custom endpoints and return data to fields

Type: Built-In Integration.

Webhook Action lets you send WordPress form submission data to any URL endpoint. Supported request methods include POST, GET, PUT, DELETE, and PATCH.

You can map form fields to request keys, add custom key/value pairs, and include additional HTTP headers. WS Form also supports JSON and URL encoded content types.

When response processing is enabled, returned JSON data can be mapped into form fields. You can also map HTTP status codes to ignore the response, process response field mapping, throw an error, or halt action processing.

Common uses include pushing submissions to a custom endpoint, sending data to a third party without a native integration, and pre-loading form fields with data from an endpoint.

## Weglot

URL: https://wsform.com/integration/weglot/

Show translated forms in the active language with Weglot

Type: Built-In Integration.

Weglot is a client-side translation platform for WordPress that automatically translates website content using JavaScript. WS Form includes built-in support for Weglot by registering dynamic selectors so form content can be translated correctly.

Weglot can translate visible form content including field labels, field placeholders, field help text, validation messages, button labels, and confirmation messages.

To translate a form, create and publish your form, add it to a page, then open that page in the translated language. You can review and edit translations in the Weglot Visual Editor.

Once translated, forms automatically display in the active language. Translation management and language display behavior are controlled through Weglot.

## WooCommerce

URL: https://wsform.com/integration/woocommerce/

Create WooCommerce product add-ons with flexible form layouts

Type: Third Party.

Use WS Form with WooCommerce to build product premium integrations for your store. This integration is designed for WooCommerce product premium integrations in WordPress.

You can use WS Form to create flexible form layouts for product pages. This helps you present extra product options in a format that fits your store.

Learn more about the WooCommerce product premium integrations integration at WooCommerce.

## WordPress Hooks

URL: https://wsform.com/integration/wordpress-hooks/

Add custom WordPress hook logic to your form workflow

Type: Built-In Integration.

Use the Run WordPress Hook action to run a WordPress action or filter when a user saves or submits a form. This gives developers a flexible way to run custom PHP code from a WordPress form workflow.

You can choose whether the hook runs on save, submit, or both. WS Form also lets you choose a filter or action hook type, enter the hook tag, and decide whether it runs before submission creation, before other actions, or after other actions.

When using a filter, WS Form passes the form and submit objects to your hook. Your filter can return an updated submit object, a spam level from 0 to 100, an array for messages, field value changes, or redirects, or a value that halts further action processing.

Action hooks also receive the form and submit data, making it possible to retrieve submitted field values and process them in your own PHP code.

## WP Fusion

URL: https://wsform.com/integration/wp-fusion/

Send WordPress form submissions to your CRM with flexible mapping

Type: Premium Integration.

Recommended.

Use the WP Fusion premium integration to synchronize WS Form submissions with leading CRMs and marketing automation systems. It can also keep user profiles in sync with CRM contact records.

When the WP Fusion plugin is installed, WP Fusion appears as an action in your form settings. You can run that action when a form is saved, submitted, or both, and push the submission to the CRM configured in WP Fusion.

WS Form supports field mapping, custom field mapping, and list selection for WP Fusion. You can also choose an opt-in field, or enable Add Only When so only new contacts are added and existing ones are not updated.

## WPBakery

URL: https://wsform.com/integration/wpbakery/

Embed WS Form layouts directly inside WPBakery

Type: Built-In Integration.

WS Form includes a native integration with WPBakery, so you can add any WS Form to a page or post built with WPBakery using the built-in WS Form element.

The integration works in both the WPBakery backend editor and frontend editor. After you select a form, the element shows a live preview in the editor to help you position it in your layout.

You can choose the form to display and optionally add a custom element ID or CSS class to the form wrapper. On published pages, the form is rendered using the standard WS Form engine, so WS Form functionality remains available.

## WPML

URL: https://wsform.com/integration/wpml/

Build multilingual forms that display in the active language

Type: Built-In Integration.

WS Form integrates directly with WPML so you can translate form content in WordPress using WPML string translation. When enabled, WS Form can automatically register translatable form strings for each form.

You can translate form settings, tab labels, section labels, field labels, placeholders, help text, default values, action settings, and ARIA accessibility strings. WS Form also installs a WPML translation package for each form to help manage translations.

Data grids used by Select, Checkbox, and Radio fields can also be translated. Translation uses the Label column mapping, and data grids without a data source can be registered as translatable strings.

## Zapier

URL: https://wsform.com/integration/zapier/

Send WS Form submissions to thousands of apps with Zapier

Type: Premium Integration.

Connect your forms in WordPress to 3000+ apps with the WS Form Zapier premium integration. Zapier uses a New Submission trigger so you can start actions when a form submission is received.

You can connect Zapier to WS Form using the API URL and API Key shown in the Zapier settings tab. To create a zap, you will need one published form and at least one submission.

Along with your form fields, WS Form makes additional submission data available in Zapier for filters and mappings. This includes values such as Submission ID, Form ID, status, preview, date added, date updated, and the admin URL.

## Zendesk

URL: https://wsform.com/integration/zendesk/

Turn WordPress form submissions into Zendesk support tickets

Type: Premium Integration.

The Zendesk premium integration lets you create custom support ticket forms on your WordPress website and push submissions to your Zendesk account.

You can get started quickly with the included Support Ticket template, which creates a form in a single click and is ready to add to your website.

You can also use any form created in WS Form and add a Zendesk action. The action can run when a form is saved, submitted, or both, and supports field mapping, custom mapping, and tag mapping.

The premium integration also supports attaching files and signatures to Zendesk tickets, and includes additional variables for use in actions such as messages and emails.

## Zoho CRM

URL: https://wsform.com/integration/zoho-crm/

Build Zoho CRM forms quickly and send form data where it belongs

Type: Premium Integration.

Connect forms in WordPress to Zoho CRM with the WS Form Zoho premium integration. You can push new records to Zoho CRM modules using a WS Form action.

WS Form can also create new forms from your Zoho module layouts in a single click on the add form page. This creates the form and configures it so it is ready to use immediately.

You can work with selected Zoho modules, including custom modules. The premium integration supports field mapping, custom mapping, attachment mapping, and updating existing records using Zoho upsert behavior.

## Abilities

URL: https://wsform.com/knowledgebase/abilities/

A list of the registered abilities used by our MCP Server.

The following abilities are registered with the WordPress abilities-api.

## AbuseIPDB

URL: https://wsform.com/knowledgebase/abuseipdb/

Protect your forms from abusive IP addresses by integrating WS Form with AbuseIPDB to automatically score, identify, and manage spam submissions.

AbuseIPDB is a third-party IP reputation service that helps identify IP addresses associated with abusive activity. WS Form can check a visitor's IP address against the AbuseIPDB database whenever a form is submitted and use the returned abuse confidence score as the submission's spam score.

Spam scores range from 0 (low risk) to 100 (high confidence of abuse). On the submissions page, spam scores are shown using the same colored indicators as other WS Form spam protection services:

Red - Blatant spam

Orange - Possible spam

Green - Not considered spam

Each AbuseIPDB check is also recorded as a system note on the submission, including the IP address, abuse confidence score, country, domain, total reports, and the reason a submission was flagged when applicable.

If AbuseIPDB is temporarily unavailable or returns an error, WS Form will still accept the submission. The submission is not blocked solely because the AbuseIPDB request failed.

## Get an AbuseIPDB API Key

Before you can use AbuseIPDB with WS Form, you'll need an AbuseIPDB account and API key.

Create an account at https://www.abuseipdb.com/register.

Copy your AbuseIPDB API key.

In WS Form, go to Settings > Spam Protection > AbuseIPDB.

Paste your API key into the API Key setting.

## Configuring AbuseIPDB

Global AbuseIPDB settings are located at:

WS Form > Settings > Spam Protection > AbuseIPDB

### API Key

Enter your AbuseIPDB API key to enable AbuseIPDB checks.

If you prefer not to store the API key in the database, it can also be defined using the PHP constant WSF_ABUSEIPDB_API_KEY.

### Enable On All Forms

Enable this setting to check submissions against AbuseIPDB on every form.

If this setting is disabled, you can enable AbuseIPDB individually for each form using the form's Spam settings.

When enabled globally, the form-level Enable setting is locked to show that AbuseIPDB is enabled for all forms.

### Bypass If Administrator

This option is enabled by default.

When enabled, AbuseIPDB checks are skipped for users who are signed in as an administrator and can manage WS Form. This is useful while building or testing forms.

If enabled globally, the matching form-level setting is locked.

### Abuse Confidence Score

This optional setting accepts a value between 0 and 100.

If you enter a value, any submission whose AbuseIPDB score is equal to or greater than that value is immediately treated as spam on every form. The submission can still be saved by the Database action, but other actions and integrations do not run.

If you leave this setting blank, WS Form uses each form's Spam Threshold setting instead. The AbuseIPDB score is still recorded on the submission and compared against that form's threshold to determine whether it should be placed in the submissions spam folder.

### Report Window (Days)

Specify how many days of AbuseIPDB reports should be considered when checking an IP address.

The default value is 30 days. Valid values are between 1 and 365.

### Country Blocklist

Select one or more countries to block.

If a visitor's IP address is associated with a blocked country, the submission is treated as maximum spam regardless of its AbuseIPDB score. The submission can still be saved by the Database action, but other actions and integrations do not run.

The system note records the flagged reason as Country blocklist.

### Domain Blocklist

Enter one or more domains separated by commas or new lines.

For example:

example.com

Domain matching is suffix-aware, so entering example.com also matches domains such as subdomain.example.com.

If the visitor's IP address matches a blocked domain, the submission is treated as maximum spam regardless of its AbuseIPDB score. The submission can still be saved by the Database action, but other actions and integrations do not run.

The system note records the flagged reason as Domain blocklist.

### Report Spam To AbuseIPDB

Enable this setting if you want WS Form to report spam submissions back to AbuseIPDB as web spam.

Each submission is reported only once. When the report is successful, a system note is added to the submission confirming that the IP address was reported.

## Enabling AbuseIPDB on a Form

If Enable On All Forms is not enabled globally, you can enable AbuseIPDB for individual forms.

Open the form in the layout editor.

Click the Settings icon at the top of the layout editor.

Click the Spam tab.

Locate the AbuseIPDB section in the sidebar.

Enable Enable.

If an API key has not yet been configured, the sidebar displays instructions to configure your API key under Settings > Spam Protection > AbuseIPDB, then enable protection for the current form or for all forms.

## Per-Form Settings

### Enable

Enable this option to check submissions against the AbuseIPDB IP reputation database.

If Enable On All Forms is enabled globally, this setting is locked.

### Bypass If Administrator

This option is enabled by default.

When enabled, AbuseIPDB checks are skipped while you are signed in as an administrator.

If the global Bypass If Administrator setting is enabled, this option is locked.

### Spam Threshold

The form's Spam Threshold setting is used when the global Abuse Confidence Score setting is left blank.

Submissions receive a spam score between 0 and 100. If the AbuseIPDB score meets or exceeds the form's Spam Threshold, the submission is placed in the submissions spam folder.

## How AbuseIPDB Spam Checking Works

When a submission is received, WS Form performs the following checks:

Gets the visitor's IP address and checks it with AbuseIPDB using the configured report window.

Receives the abuse confidence score and related information such as the country, domain, and total reports.

Records the result as a system note on the submission.

If the visitor's country appears in the Country Blocklist, the submission is treated as spam and other actions and integrations do not run.

Otherwise, if the visitor's domain appears in the Domain Blocklist, the submission is treated as spam and other actions and integrations do not run.

Otherwise, if a global Abuse Confidence Score has been configured and the returned score meets or exceeds it, the submission is treated as spam and other actions and integrations do not run.

If no global Abuse Confidence Score has been configured, the returned score is compared with the form's Spam Threshold to determine whether the submission should be placed in the submissions spam folder.

## Tip

During development, leave Bypass If Administrator enabled so you can test your forms without your own submissions being checked by AbuseIPDB.

## Accessibility and Web Forms for WordPress

URL: https://wsform.com/knowledgebase/accessibility-and-web-forms/

WS Form has a goal of complying with Web Content Accessibility Guidelines (WCAG) wherever possible to make Web forms more accessible.

WS Form has a goal of complying with Web Content Accessibility Guidelines (WCAG) wherever possible to make Web forms for WordPress more accessible.

Considerations for accessibility in WS Form include:

Accessible Rich Internet Applications (ARIA) attributes such as field labels, descriptions, required fields.

Fully responsive form design allowing for different layouts per device.

High contrast text used by default in our WS Form framework, for example, ensuring required asterisks have a high contrast red color and providing the option to change the required indicator to a text string.

High contrast button and message colors.

Offering section (fieldset) labels on fields to better describe sections of a form.

Offering the ability to change the form, tab and section headings to comply with heading tags sequential requirements.

Offering the ability to add help text at a form and field level.

Accessibility friendly spam protection methods such as Honeypot and Cloudflare Turnstile.

A default font size of 16px to prevent unnecessary input zoom on mobile devices.

Clean DOM structure allowing for easy custom styling with CSS.

We would recommend that you adjust your form to comply with WCAG requirements when embedded on your WordPress website.

The WAVE Web Accessibility Evaluation Tool can be used to test your website for WCAG errors. Their free browser plugin is a great tool for helping ensure websites are accessible.

## Actions

URL: https://wsform.com/knowledgebase/introduction-actions/

Actions are events that occur when a form is either saved or submitted.

Actions run whenever a user clicks a submit or save button. An action could be sending an email, redirecting to a different web page or showing a message. Actions can also involve more complex functionality such as adding a contact to an email marketing platform such as MailChimp, or pushing a message to a Slack channel.

To manage your actions, click the Actions icon at the top of the layout editor. This will open the Actions sidebar:

## Adding Actions

To add an action, click the add icon below the action list.

Select an action from the pulldown list. Once selected, you can rename that action to anything you like.

Configure the action settings. To see a complete list of the available actions and learn more about how to configure them, click here.

## Editing Actions

To edit an action, click the settings icon next to the action name.

To disable an action, click the disable icon . You can also use conditional logic to disable and enable actions.

The delete an action, click the delete icon .

The actions included with WS Form PRO are:

Send Email

Show Message

Redirect to a Page

Save Submissions

Conversion Tracking

Run WordPress Hook

Run WordPress Search

Run Javascript

Webhook

Data Export Request

Data Erasure Request

## Integrations

Premium integrations are also available. Click here to learn more about configuring these actions.

[downloads category="32" columns="3" number="0" orderby="title" order="ASC"]

## ActiveCampaign Integration

URL: https://wsform.com/knowledgebase/activecampaign/

The ActiveCampaign integration lets you push new contacts using an action and create new forms from your lists in a single click on the add form page.

The ActiveCampaign integration lets you push new contacts using an action and create new forms from your lists in a single click on the add form page.

## Installation

The ActiveCampaign plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the ActiveCampaign plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ActiveCampaign tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to ActiveCampaign

In order to use the integration, you need to connect it to ActiveCampaign. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ActiveCampaign tab at the top of the page.

Enter your API URL and key.

If you do not have a ActiveCampaign account, you can create a new account here.

## Creating a Form for ActiveCampaign

### Automatically

WS Form can create a form for any of our ActiveCampaign lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a ActiveCampaign form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the ActiveCampaign tab at the top of the page.

Click on any of your ActiveCampaign lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the ActiveCampaign tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to ActiveCampaign when a user saves or submits their form.

To add a ActiveCampaign action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a ActiveCampaign List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The ActiveCampaign action settings are as follows:

#### When Should This Action Run?

You can choose to run the ActiveCampaign action when the form is saved, submitted, or both.

#### ActiveCampaign List

Choose the ActiveCampaign List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding custom fields in ActiveCampaign. For example you would want to map your Email field to the Email field in ActiveCampaign.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding ActiveCampaign field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to the tags ActiveCampaign.

To map a field:

Click the Add  icon at the bottom right of the interest mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields. The value of the submitted value should be the tag ID.

If you use the automatic method above, WS Form PRO will automatically build tag mapping options for you.

#### Account Assignment

Account assignments allow you to assign ActiveCampaign contacts to an account.

At present ActiveCampaign only supports one account assignment but this may change in future.

To add a new account assignment:

Click the Add  icon at the bottom right of the interest mapping section.

Enter the Account ID.

Optionally enter a Job Title for the account assignment.

Click the Save button at the bottom of the sidebar to save your changes.

#### Automation Mapping

Automation mapping tells WS Form which active ActiveCampaign automations you would like newly subscribed contacts to be assigned to.

To add a new automation assignment:

Click the Add  icon at the bottom right of the interest mapping section.

Select an active automation (inactive automations are not shown).

Repeat this process for each automation you want to assign.

Click the Save button at the bottom of the sidebar to save your changes.

## Add Button

URL: https://wsform.com/knowledgebase/section_add/

The add button is used with repeatable sections to add a new row.

The Add button is used with repeatable sections to add a new row. The add button can be placed within or outside of the section it will add rows to.

## Demo

## Adding an Add Button

To learn how to add, edit, clone, move, resize, offset, or delete an add button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the add button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Repeatable Section

This setting determines which section the row should be added to when the add button is clicked. You can choose to put the add button inside the repeatable section, or outside of it.

If you add the add button to a repeatable section, it will automatically be assigned to it. If you add to a section that is not repeatable you will be alerted to the fact that the repeatable section needs to be chosen.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the add button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custome attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custome attributes as you need.

To add a custome attributes key value pair:

Click the Add  icon to add a custome attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custome attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Add Custom Templates to the Template Library

URL: https://wsform.com/knowledgebase/add-custom-templates-to-the-template-library/

Learn how to add custom templates to the WS Form 'Add New' page.

When users create a new form they use the Add New admin page in WS Form. This displays the template library which contains a combination of built in templates and templates added by integrations. It is also possible for you to add your templates to this page.

There are a few steps to setting this up.

Create and export custom templates

Create a custom template directory structure

Create a config.json file

Register your custom template directory

## Create and Export Custom Templates

Creating custom templates is easy with WS Form! Simply create a new form and then export the form to a JSON file. To export a form, click the export  icon at the top of the layout editor. You'll put any exported form files in a custom template directory.

Exported forms have a file name such as: wsft-form-my-custom-template.json

## Create a Custom Template Directory

You can create a custom template directory anywhere that is accessible to your web server. We recommend using the wp-content directory which won't be overwritten when you update WordPress, plugins or themes. An example location for your custom template directory relative to the WordPress root directory might be:

wp-content/ws-form/templates/

Within this folder you will create a folder that will contain your JSON template files. For example:

wp-content/ws-form/templates/my-custom-templates/

You can add as many custom templates as you wish into this folder.

An example path full path to a JSON template file might be:

wp-content/ws-form/templates/my-custom-templates/wsft-form-my-custom-template.json

A config.json file will also be placed in the root of your custom template directory.

## Create a config.json File

The config.json file describes your custom template directory structure to WS Form. The file is located in the root of your custom template directory. For example:

wp-content/ws-form/templates/config.json 

An example config.json file is shown below:

{"template_categories": [

 {
 "id" : "my-custom-templates",
 "label" : "My Custom Templates",
 "file_path" : "my-custom-templates/",
 "templates" : [

 {
 "id" : "wsft-form-my-custom-template",
 "label" : "My Custom Template",
 "file_json" : "wsft-form-my-custom-template.json",
 "pro_required" : 1
 }
 ]
 }
]}

Each custom template category is defined as an object in the template_categories array. Each category is configured as follows:

Key
Value
Example

id
A unique identifier for the template category.
my-custom-templates

label
A public facing label that describes the template category.
My Custom Templates

file_path
The file path relative to your custom template directory.
my-custom-templates/

templates
An array describing each of the templates in the category.
See below

Each template description is defined as an object in the templates array key as follows:

Key
Value
Example

id
A unique identifier for the template.
my-custom-templates

label
A public facing label that describes the template.
My Custom Templates

file_json
The file name relative to your template category directory.
wsft-form-my-custom-template.json

pro_required
1 = WS Form PRO required
0 = WS Form PRO not required (Will work with WS Form LITE)
1

## Register the Custom Template Directory

To tell WS Form about your custom template directory, you use the wsf_template_form_config_files filter hook. This filter hook has a single parameter passed to it which is an array of the template config.json files used by the Add New admin page.

Using the example file custom template directory path above, an example of using this filter hook is shown below:

// Register filter function for wsf_template_form_config_files hook
add_filter('wsf_template_form_config_files', 'my_template_form_config_files', 10, 1);

// Filter function for wsf_template_form_config_files hook
function my_template_form_config_files($config_files) {

 // Add path to my config.json file
 $config_files[] = WP_CONTENT_DIR . '/ws-form/templates/config.json';

 // Return $config_files array to WS Form
 return $config_files;
}

This code would typically be placed in your themes functions.php file (preferably a child theme is one exists) but it could also be added using a custom code plugin.

## Example Completed Template Directory

An example completed template directory might look as follows:

wp-content/ws-form/templates/ wp-content/ws-form/templates/config.json wp-content/ws-form/templates/my-custom-templates/ wp-content/ws-form/templates/my-custom-templates/wsft-form-my-custom-template-1.json wp-content/ws-form/templates/my-custom-templates/wsft-form-my-custom-template-2.json wp-content/ws-form/templates/my-custom-templates/wsft-form-my-custom-template-3.json

## Add File Types to File Upload Fields in WordPress

URL: https://wsform.com/knowledgebase/add-file-types-to-file-upload-fields-in-wordpress/

Learn how to enable additional file types for WS Form file upload fields by extending WordPress's default MIME type settings.

By default, WordPress restricts which file types can be uploaded for security reasons. If you're using a File Upload field in WS Form and want to allow additional file types (such as .svg, .zip, or other custom formats), you can enable them by adding a simple code snippet to your website.

## Step 1: Allow Additional File Types in WordPress

To enable additional file types, use the upload_mimes filter in WordPress. Add the following code to your theme’s functions.php file or use a plugin like Code Snippets to add it safely:

add_filter( 'upload_mimes', 'wsf_allow_additional_mime_types' );

function wsf_allow_additional_mime_types( $mimes ) {

 // Example: Allow SVG and ZIP files
 $mimes['svg'] = 'image/svg+xml';
 $mimes['zip'] = 'application/zip';
 
 // Add more file types as needed:
 // $mimes['ext'] = 'mime/type';

 return $mimes;
}

Only allow file types you trust. Enabling certain formats (e.g., SVG) may require extra sanitization for safe use.

## Step 2 (Optional): Restrict File Types in WS Form

Once WordPress allows additional file types, you can optionally restrict which types are permitted for a specific File Upload field in WS Form.

Edit your form in WS Form.

Click the File Upload field to open its settings.

In the Allowed File Types setting, enter the file extensions you want to accept (e.g., svg, zip).

Save your form.

This step is not required, but it allows you to limit uploads to specific file types at the form level.

Learn more: File Upload Accept Parameters

## Step 3: Test Your Form

Preview or publish your form and try uploading a file using the new extension. If configured correctly, the file should upload successfully without errors.

## Additional Notes

Some file types (e.g., .svg) may not preview properly in the WordPress media library unless additional plugins or sanitizers are used.

If uploads still fail, check server-level restrictions (e.g., MIME type filtering in PHP or NGINX/Apache).

Use a trusted MIME type reference: Common MIME Types (MDN)

## Add PDF Links to Submissions CSV Exports

URL: https://wsform.com/knowledgebase/add-pdf-links-to-submissions-csv-exports/

It is possible to add links to submission PDF exports using WS Form filter hooks.

It is possible to add links (URLs) to submission PDF exports using the WS Form wsf_submit_export_csv_header and wsf_submit_export_csv_row filter hooks.

Sample code for doing so can be found below:

// Add a callback function for the wsf_submit_export_csv_row filter hook
add_filter( 'wsf_submit_export_csv_header', 'wsf_submit_export_csv_header_function', 10, 2 );

// Callback function for the wsf_submit_export_csv_header filter hook
function wsf_submit_export_csv_header_function( $csv_header, $form_id ) {

 // Add PDF URL to CSV export header
 $csv_header['pdf_url'] = __('PDF URL', 'ws-form');

 // Return key value pairs array for CSV header
 return $csv_header;
}

// Add a callback function for the wsf_submit_export_csv_row filter hook
add_filter( 'wsf_submit_export_csv_row', 'wsf_submit_export_csv_row_function', 10, 3 );

// Callback function for the wsf_submit_export_csv_row filter hook
function wsf_submit_export_csv_row_function( $csv_row, $form_id, $submit ) {

 // Create instance of the PDF action class
 $ws_form_action_pdf = new WS_Form_Action_PDF();

 // Get PDF URL
 $pdf_url = $ws_form_action_pdf->get_pdf_url(

 $submit->hash, // Submission hash
 $form_id, // Form ID
 true // Download (true = Yes, false = No)
 );

 // Add PDF URL to CSV row
 $csv_row['pdf_url'] = $pdf_url;

 // Return key value pairs array for CSV row
 return $csv_row;
}

 

## Add Row Numbers to Repeatable Sections

URL: https://wsform.com/knowledgebase/add-row-numbers-to-repeatable-sections/

This tutorial demonstrates how to add row numbers to repeatable sections.

This tutorial demonstrates how to add row numbers to each repeater in a repeatable sections.

## Demo

## Tutorial

Create a repeatable section by checking the Repeatable setting in a section.

Add a Text Editor field to the repeatable section.

Enter the following in the content of the Text Editor field: Row #calc(#section_row_number)

The #calc variable tells WS Form to keep the #section_row_number variable up to date each time the repeatable section row count changes.

## Other Section Variables

In addition to #section_row_number, the following section related variables can be used.

## Add Select2 to a WS Form Select Field

URL: https://wsform.com/knowledgebase/add-select2-to-a-ws-form-select-field/

This tutorial explains how to add the Select2 jQuery plugin to any select field in your form.

Select2 is a jQuery based replacement for select boxes. It supports searching, AJAX, and infinite scrolling of results.

You can add Select2 to any Select or Price Select field in your WordPress form.

## Demo

## How To

Click the field settings icon.

In the Basic tab enable the Select2 setting.

Optional: Check the Use AJAX setting if your select field has a lot of options to improve performance.

Click Save & Close.

## Manually Adding Select2

You can also manually add Select2 to any Select or Price Select field.

### Prerequisites

#### Select2

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files. Learn more.

### Sample JavaScript

Add this JavaScript to your website and replace 123 with the field ID of your select field. If you can't find you field ID, click here.

(function($) {

 // When WS Form has finished rendering a form, it fires a wsft-rendered event on the document element
 // The event is passed the form object, form_id and instance_id
 $(document).on('wsft-rendered', function(e, form, form_id, instance_id) {

 // Select field ID goes here
 var field_id = 123;

 // Initialize select2 on the select field
 $('#wsft-' + instance_id + '-field-' + field_id).select2();
 });

})(jQuery);

## Support

For additional questions about Select2, please visit: https://select2.org/

 

## Adding Forms to Your Website

URL: https://wsform.com/knowledgebase/adding-forms-to-your-website/

There are various ways to add a form to your website, such as via a WordPress Block or visual editor such as Elementor, Beaver Builder or Divi.

Before you add a form to your website, you should ensure it is published first.

There are various ways to add a form to your website.

## WordPress Block

To add a form to a post or page using the WordPress block:

Click the Add Block icon.

Search for WS Form.

Click the WS Form icon.

Select the published form you wish to insert into your content.

Select the form you want to use for that block in the settings toolbar and then click the editor's Update button.

## Visual Builders

WS Form has modules for the following popular visual builders:

Beaver Builder

Breakdance

Bricks

Divi

Elementor

Oxygen

## Shortcode

The WS Form Shortcode

## PHP Code

To add a form in your PHP code, you can use the following code:

<?php echo do_shortcode('[[ws_form id="123"]]'); ?>

... where 123 is equal to your form ID.

## Classic Editor (Legacy)

To add a form to a post or page using the regular WordPress visual editor (Classic Editor):

Click the Add WS Form button.

Select the published form you wish to insert into your content.

Click the Insert WS Form button.

This will automatically insert a shortcode into your content.

## Widget (Legacy)

If your theme allows widgets to be added to areas of your website, you can add the WS Form widget.

For more information about adding a widget to your website theme, click here.

## Agent Skills

URL: https://wsform.com/knowledgebase/agent-skills/

Learn how to install and use WS Form Agent Skills to give compatible AI coding agents product-specific knowledge, workflows, and best practices.

Agent Skills provide compatible AI coding agents with packaged knowledge about how to work with WS Form. They help an agent understand the product, choose the appropriate native functionality, and follow recommended workflows when building or modifying forms.

The official WS Form Agent Skills repository is available at github.com/wsform/skills.

There is currently one skill available, named ws-form.

## What Are WS Form Agent Skills?

WS Form Agent Skills are designed for AI coding agents that support the Agent Skills specification.

Compatible agents can load the ws-form skill to learn how WS Form works and how it should be used.

The skill provides knowledge and workflow guidance covering areas such as native functionality, preferred workflows, architectural decisions, common pitfalls, and best practices.

For example, the skill teaches an agent to prefer native WS Form functionality instead of unnecessarily writing custom PHP or JavaScript.

Agent Skills provide guidance only. They do not execute operations on a form or WordPress site by themselves.

## Agent Skills, Abilities, And MCP

Agent Skills, WS Form Abilities, and the WS Form MCP Server perform different roles.

FeaturePurpose

Agent SkillsProvide knowledge and workflow guidance so an AI agent understands how WS Form works and which approach it should use.

AbilitiesProvide executable capabilities for creating, editing, and inspecting forms on a WordPress site.

MCP ServerMakes WS Form capabilities available to compatible AI clients through the Model Context Protocol.

These components are designed to complement each other.

The ws-form skill helps the agent decide what it should do. Abilities and MCP provide the executable capabilities needed to make those changes when connected to a WordPress site.

For example, an agent can use the skill to determine the appropriate native WS Form approach for a task, then use MCP to inspect the existing form and make the required changes.

Agent Skills are not a replacement for Abilities or MCP.

## Prerequisites

To use the WS Form Agent Skill, you need an AI coding agent that supports the Agent Skills format.

Examples of compatible coding agents include Cursor and Claude Code. Other agents that support Agent Skills can also use the repository.

If you only want the agent to use WS Form knowledge while helping with development, you do not need to connect it to a WordPress site.

If you want the agent to inspect or modify forms on a WordPress installation, you will also need WS Form installed on that site and an appropriate Abilities or MCP connection.

See MCP Server for information about connecting an AI client to WS Form.

## Installing The WS Form Skill

The official skill can be installed from the WS Form Skills GitHub repository using the Vercel Skills CLI.

Open a terminal in the environment where you use your AI coding agent.

Run the following command:

npx skills add wsform/skills --skill ws-form

The CLI installs the ws-form skill for use by supported agents.

### List Available Skills

You can list the skills available in the repository without installing them by running:

npx skills add wsform/skills --list

There is currently one official skill:

ws-form

## What The ws-form Skill Covers

The ws-form skill gives compatible agents guidance for working with WS Form across common form-building and administration tasks.

It helps agents:

Build and modify forms using native WS Form functionality.

Select appropriate field types.

Work with sections, tabs, and layouts.

Configure Conditional Logic.

Work with calculations.

Configure actions and integrations.

Work with submissions.

Use validation correctly.

Use spam protection correctly.

Style forms using supported WS Form mechanisms.

Troubleshoot forms and submissions.

Use WS Form Abilities and MCP effectively.

Avoid unnecessary custom PHP and JavaScript.

The skill also provides WS Form-specific terminology and conventions.

For example, repeatable rows in WS Form are implemented using repeatable sections. WS Form does not use a repeater field.

It also teaches agents that email notifications are configured using Send Email actions rather than form settings, and uses terminology such as Field ID 123 when referring to a field by ID.

## Using Agent Skills With MCP And Abilities

For the most complete AI-assisted workflow, you can use the ws-form skill together with the WS Form MCP Server and WS Form Abilities.

The skill provides the knowledge. Abilities and MCP provide the executable capabilities.

A typical workflow is:

Install the ws-form skill so your agent understands WS Form workflows and best practices.

Connect your AI client to WS Form using MCP if you want it to work with forms on a WordPress site.

Ask the agent to inspect the existing form before making changes.

Use the skill's guidance to determine the appropriate native WS Form solution.

Use the available Abilities through MCP to make the required changes.

Review the changes before publishing or using the form on a live site.

You do not need to duplicate the MCP configuration when installing the skill. The skill and MCP connection are separate components.

For MCP setup, authentication, and supported capabilities, see MCP Server.

## Working Safely With AI Form Editing

When allowing an AI agent to modify forms, we recommend working on a staging site rather than a production site and reviewing all changes before publishing them.

New forms created through Abilities are created as drafts. You must publish the form before embedding it on a live page.

Form editing through AI is disabled by default. To enable it:

Go to WS Form → Settings → AI.

Enable Allow Updates.

Deleting forms or other supported resources requires Allow Deletes, which is also disabled by default.

Only enable the permissions your AI client needs.

## Using The Skill Effectively

Install the ws-form skill whenever you want a compatible AI coding agent to help with WS Form development. This gives the agent product-specific context before it starts proposing solutions.

If the agent also needs to inspect or change forms on a WordPress site, connect it to the WS Form MCP Server.

Where possible, have the agent inspect an existing form before modifying it. This gives it the context it needs to work with the existing fields, sections, actions, Conditional Logic, calculations, and other configuration.

Prefer native WS Form functionality wherever possible. Custom PHP or JavaScript should generally only be considered when the required behavior cannot be achieved using supported WS Form features.

MCP can be used with both WS Form LITE and WS Form PRO. Available field types and some capabilities differ by edition. See MCP Server for information about field-type scope.

## AI Generated Forms for WordPress

URL: https://wsform.com/knowledgebase/ai-generated-forms-for-wordpress/

In this tutorial, we’ll walk you through the process of creating an AI generated form using WS Form’s OpenAI integration.

WS Form PRO was the first WordPress form plugin to integrate with OpenAI, allowing you to generate forms for WordPress dynamically using AI by providing a simple prompt.

In this tutorial, we’ll walk you through the process of creating an AI generated form using WS Form’s OpenAI integration.

## Install the OpenAI Integration

To enable the AI generated forms feature in WS Form PRO, you first need to install and activate the OpenAI Integration in WordPress.

Download the OpenAI Integration.

Navigation to the WordPress plugins page.

Click Add New Plugin.

Click Upload.

Choose the OpenAI Integration zip file.

Follow the on-screen instructions to Install and Active the plugin.

## Obtain an API Key from OpenAI

To use the OpenAI integration, you need an API key from OpenAI.

Go to OpenAI’s website.

Sign in or create an account.

Navigate to the API Keys section.

Generate a new API key and copy it.

## Configure the OpenAI Integration in WS Form

In your WordPress dashboard, go to WS Form > Settings.

Click the OpenAI tab.

Add your OpenAI License Key obtained when you downloaded the OpenAI integration.

Paste the OpenAI API Key obtained in the previous step.

Click Save Changes.

## Create an AI Generate Form

To create a form for WordPress from a prompt:

Click Add New in the WS Form WordPress admin menu.

Click the OpenAI tab.

Click Use Template on the AI Generated Form template.

Enter a Prompt, then click Create.

## How to Write a Prompt

Prompts should be written in natural language.

### Simple Prompts

Example basic prompts are:

A dog adoption form.

A doctor appointment form.

A form for booking a rental property.

A membership form for a club.

### Adding More Context

You can prompt for WS Form to add more functionality to a form. For example:

A dog adoption form. Add help text to each field to improve accessibility.

A doctor appointment form. Add a select field that contains reasons for the appointment.

A form for booking a rental property. Add a check-in and check-out date fields.

A membership form for a club. Add a file upload field for uploading a member photo.

### Calculators

The WS Form AI Generated Form feature can also be used for creating calculators. Example prompts might be:

A mortgage calculator.

A window configurator.

 

## Airtable Integration

URL: https://wsform.com/knowledgebase/airtable/

The Airtable integration lets you push form submissions as new rows in a table and create new forms from Airtable in a single click on the add form page.

The Airtable integration lets you push form submissions as new rows in a table and create new forms from Airtable in a single click on the add form page.

## Installation

The Airtable plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Airtable plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Airtable tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Airtable

In order to use the integration, you need to connect it to Airtable. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Airtable tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Airtable account, you can create a new account here.

## Creating a Form for Airtable

### Automatically

WS Form can create a form for any of your Airtable tables in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Airtable form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Airtable tab at the top of the page.

Click on any of your bases.

A modal will pop-up from which you should select the table within Airtable base you want to push form submissions to.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your Airtable base does not appear, click the refresh icon in the Airtable tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is added as a row to a Airtable table form when a user saves or submits their form. Your Airtable table should, at minimum, have columns of field headings in the first row.

To add a Airtable action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Airtable from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Airtable action settings are as follows:

#### When Should This Action Run?

You can choose to run the Airtable action when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Update Record ID

By default, WS Form will create a new table row. If you enter a record ID you can update an individual row in your table.

To find a record ID, you can click the Expand Record icon in Airtable and then look for the record ID in the URL that begins with rec. Learn more.

WS Form variables can also be used in this field.

#### Update Method

If an update record ID has been specified, you can choose which method should be used with the record is updated. There are two options:

Update mapped fields
This option will update any fields than have been mapped. Any fields that are not mapped will be left as is.

Replace record
This option will update any fields than have been mapped. Any fields that are not mapped will be set blank.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding column in Airtable. For example you would want to map your Email field to the Email column in Airtable.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Airtable column heading.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Airtable cell to any value you wish, including the use of WS Form variables. For example, you might want to map a lead source to a cell in your sheet.

To add a custom mapping:

Click the Add  icon at the bottom right of the custom mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the center column, select the corresponding Airtable table column.

In the right-hand column. select the cell format.

Repeat this process for each custom mapping you require.

Click the Save button at the bottom of the sidebar to save your changes.

#### Comments

Comments can also be added to a record when it is added or updated.

To add a comment:

Click the Add  icon at the bottom right of the comments section.

Enter a comment. WS Form variables can be used here.

Click the Save button at the bottom of the sidebar to save your changes.

## Allow Users to Add Custom Terms to Posts

URL: https://wsform.com/knowledgebase/allow-users-to-add-custom-terms-to-posts/

You can allow users to add custom terms by enabling tagging on a select field.

You can use the Post Management integration to add or update posts in WordPress. When a post is added or updated you can also specify which terms a post is assigned to. It is also possible to add additional terms to a taxonomy if they don't exist by using a select field that has the Enable Tagging setting checked.

By enabling tagging, any term not found in the options of a select field will be added as a new option and submitted with the form. If that select field is then mapped to a taxonomy, the new term will be added.

Let's create a select field and configure it to enable tagging:

Add a select field to your form.

Edit the select field and In the Basic tab and check the following settings:

Multiple

Select2

Enable Tagging

Click on the Options tab and configure it as follows:

Data Source: Terms

Filter By Taxonony: Choose the taxonomy you want to choose terms from and add new terms to

Click Get Data and ensure the following settings are present under Column Mapping:

Labels: Name

Values: ID

Click Save & Close.

Next we need to configure the Post Management action so that the select field is mapped to the taxonomy you chose in step 3 above. You should add a Post Management action if you don't already have one.

Click the Actions icon at the top of the page. The Actions sidebar will open.

Edit your Post Management action.

Under Term Mapping choose your select field in the left column and the taxonomy you chose in step 3 above in the right column.

Click Save & Close.

You form will now add a term if the term chosen does not already exist.

 

 

## Amazon S3 Integration

URL: https://wsform.com/knowledgebase/amazon-s3/

The Amazon S3 integration allows you to configure file fields to upload to a connected Amazon S3 account.

The Amazon S3 integration allows you to configure file fields to upload to a connected Amazon S3 account. You can choose which path to upload the files to and can easily access the files from the submissions page.

The integration creates a new file handler to WS Form called Amazon S3.

## Installation

The Amazon S3 integration is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Amazon S3 integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Amazon S3 tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Amazon S3

In order to use the integration, you need to connect it to Amazon S3.

First you will need to create IAM user credentials. To do this:

Open the IAM console in your Amazon account.

Click Users from the side menu.

Click Create User.

Enter a User Name.

Ensure the user has read and write permissions for the S3 service. You may wish to create a new policy specifically for this purpose. Learn more.

Edit the newly created user, then click the Security credentials tab.

Under Access keys click Create access key.

Choose Third-party service as the user case.

Click Create access key.

Copy the provided access key and secret key and store it somewhere securely.

Next you will need to enter the access key and secret key in WS Form settings

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Amazon S3 tab at the top of the page.

Enter the access key and secret key.

Click Save.

Alternatively you can add the keys to your wp-config.php file as follows:

define('WSF_AMAZON_S3_ACCESS_KEY', 'PASTE YOUR ACCESS KEY HERE');
define('WSF_AMAZON_S3_SECRET_KEY', 'PASTE YOUR SECRET KEY HERE');

## How to Configure File Fields for Amazon S3

To configure a file field to push its uploads to Amazon S3:

Click the settings icon on the file field.

In the basic tab change the File Handler setting to Amazon S3.

Choose the region of your bucket, e.g. us-west-2

Enter the name of the bucket you wish to upload files to, e.g. ws-form. This must match the name of an existing bucket. Learn more.

Optionally, change the upload path.

The upload path defaults to:

WS Form/#form_id/#submit_hash/#field_id/

You can use WS Form variables in this path to make it dynamic. The default value ensures each form, submission and field on the form is given its own folder in Amazon S3 to minimize the chance of files being overwritten. Bear in mind that each file field can be configured with the Multiple setting to be able to upload more than one file.

Some variables you might find helpful for this path are:

Variable
Description

#form_id
Returns the ID of the form.

#submit_hash
A unique identifier for the submission.

#field_id
The ID of the file field.

## Accessing Amazon S3 Uploads

To access the files that are uploaded to Amazon S3, you can click on the file upload icons in submissions as you would any other file upload. The files are, of course, also accessible from within your Amazon S3 bucket.

## Angie

URL: https://wsform.com/knowledgebase/angie/

Learn how to use Angie, Elementor’s agentic AI, to create and manage WS Form forms in WordPress using natural language commands.

This article applies to WS Form version 1.10.60 and above. Features described here may change in future updates.

WS Form integrates with Angie, Elementor’s agentic AI assistant for WordPress. This integration allows Angie to create and modify WS Form forms using natural language. For example, you can ask Angie to create a contact form, add a field, or translate form labels.

Angie connects to WS Form through the Model Context Protocol (MCP), which provides a secure way for AI agents to communicate with WordPress plugins.

## What is Agentic AI?

Agentic AI can perform actions rather than just generate text. It can analyze a situation, plan steps, and complete tasks automatically. In WordPress, that could include creating a page, installing a plugin, or building a form without manual setup.

## What is Angie?

Angie is Elementor’s agentic AI plugin. It connects your site to your Elementor account and provides AI-powered automation. When used with WS Form, Angie can create and manage forms directly in WordPress.

## Getting Started

### Install and Connect Angie

In your WordPress admin, go to Plugins > Add New.

Search for Angie.

Click Install Now, then Activate.

After activation, click Sign in to Angie to connect your site to your Elementor account. You must be signed in for Angie to access AI-powered services. Angie includes free daily credits. For extended or commercial use, select an Elementor AI plan.

Once Angie is connected, it will automatically detect WS Form.

### Configure WS Form

Warning: AI-generated form modifications are experimental. While Angie provides powerful automation capabilities, AI technology can produce unexpected or incorrect results. We strongly recommend reviewing all AI-generated form changes before publishing and never using AI-driven edits directly on production forms. Always test modifications in a staging environment first. WS Form and its authors assume no responsibility for data loss, form errors, or other issues arising from AI-assisted actions.

AI editing is disabled by default for security reasons. If you would like to experiment with making form edits with AI:

Go to WS Form > Settings > AI.

Under Abilities API, check Allow Updates.

Click Save Changes.

## Using Angie with WS Form

After setup, you can communicate with Angie using plain language prompts. Angie will interpret your request and perform the task through WS Form’s API and schema.

Here are some example actions you can request:

## Tips

Start a new, fresh chat for each form you work with.

If you create a new form, you don't need to specify the form ID in subsequent prompts.

If you are modifying an existing form, identify it initially in your prompt using the form ID
e.g. Publish form ID 123.

You can insert fields before another field by identifying it by ID or label
e.g. Add a select field before the submit button for preferred method of communication.

## Available Field Types

Angie can create forms using both WS Form LITE and WS Form PRO field types.

LITE field types:

Checkbox

Email

Note

Number

Phone

Radio

Select

Text

Text Area

Text Editor

URL

PRO-only field types:

Color

Date/Time

File Upload

Hidden

Next Tab Button

Previous Tab Button

Price

Rating

Validate

Supported WS Form features:

Tabs (multi-step forms)

Calculations (for example, #calc(#field(1) + #field(2)))

Field settings such as Required, Placeholder, Default Value, Help, and Invalid Feedback

Select, Checkbox, and Radio option population

Responsive field sizing

## Current Limitations

Updates to select, checkbox and radio data grid rows are limited a 2 column format of values and labels.

Tabs and sections can only be added when initially creating a new form.

Conditional logic cannot be added.

We hope to add additional functionality as AI technology evolves and becomes more reliable.

## Security

All MCP abilities exposed to Angie are protected by WS Form’s capability system. Permission callbacks ensure only authorized users can make changes. Refer to User Capabilities for more information.

## Disabling WS Form in Angie

WS Form automatically detects when Angie is installed. To disable the integration:

Go to WS Form > Settings > AI.

Under Angie, uncheck Enabled.

Click Save Changes.

## Assign a Form to a WooCommerce Product

URL: https://wsform.com/knowledgebase/how-to-assign-a-form-to-a-woocommerce-product/

WS Form PRO can be used to customized WooCommerce products.

WS Form PRO can be used to customized WooCommerce products.

This brief tutorial explains how to assign a form to a product.

We also recommend that you read the full documentation for the WooCommerce extension to understand all of the available configuration options.

## Prerequisites

The following plugins are required to be installed and activated on your WordPress website.

WooCommerce

WS Form PRO

WS Form PRO Product Integrations (WooCommerce Extension)*

* Sold Separately

## Assigning a Form to a WooCommerce Product

To assign a new or existing form to a WooCommerce product:

Create or edit a WooCommerce product

Enter a regular price (You can enter 0 if you want WS Form to control the price of the product using e-commerce fields)

Click on the WS Form tab in the Product data section.

Choose a template or click to choose an existing published form you have already created.

Once the form has been created or selected, a preview of your form will be shown along with options to edit or remove the form.

To test your product customization, click Publish (or Update for an existing product) to save your changes then click the product URL at the top of the page.

## Template Considerations

Your WooCommerce product template should, at minimum, include an Add to Cart button.

## Learn More

The full documentation for the WooCommerce extension can be found here.

## Authorize Accept Gets Stuck on Loading

URL: https://wsform.com/knowledgebase/authorize-accept-gets-stuck-on-loading/

If the Authorize Accept gets stuck on loading, it may because your hosting is not configured with a required Content-Security-Policy directive.

If the Authorize Accept gets stuck on loading, it may because your hosting is not configured with a required Content-Security-Policy directive. You can add the following code to your .htaccess file to fix this issue:

Header set Content-Security-Policy "frame-ancestors self *.YOUR_WEBSITE.com *.authorize.net"

Replace .YOUR_WEBSITE.com with your domain name.

## Authorize.Net Accept Integration

URL: https://wsform.com/knowledgebase/auth_checkout/

The Authorize.Net integration allows you to accept credit card payments from your forms.

Note: You must serve the page containing the payment form over HTTPS. In short, the address of the page containing Authorize.Net Accept must start with https:// rather than just http://.

The Authorize.Net integration allows you to accept credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

The Authorize.Net button uses the latest, client-side payment process offered by Authorize.Net called Accept.

## Installation

The WS Form Authorize.Net integration is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Authorize.Net integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Authorize.Net tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Configuring Authorize.Net

In order to use the Authorize.Net button, you first need to enter the following information for your sandbox and/or production accounts:

API Login ID

API Transaction Key

Client Key

To find these credentials, log in to your sandbox or production account and go to: Authorize.Net under Account > Settings > Security Settings > General Security Settings

Your API Login ID and Transaction Key can be found under API Credentials and Keys. Your Client Key can be found (or created) under Manage Public Client Key.

If you do not yet have an Authorize.Net sandbox or production account, you can create them here:

Create Sandbox Account (We recommend you read the Authorize.Net Testing Guide)

To enter your credentials and keys:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Authorize.Net tab at the top of the page.

Choose Sandbox or Production under Environment, depending on the environment you want to use.

Enter your sandbox and production credentials and keys.

Click the Save button.

Once configured, the Authorize.Net button will appear under the E-Commerce section of the Build when editing a form.

You can enter sandbox and/or production credentials and keys; having both sets is not necessary.

## Adding The Authorize.Net Button

To learn how to add, edit, clone, move, resize, offset, or delete an Authorize.Net button field, please click here.

When editing a custom button field, the field settings sidebar will appear. This contains the following tabs:

Basic

Advanced

You can edit any of the settings in each of these tabs and then click the Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the custom button in the WS Form form builder.

### Transaction

#### Type

You can create a one-time charge or initiate a subscription (ARB). The available options are:

One-Time

Subscription

By Field

The By Field setting allows you to specify the type by a field. For example you could use a Radio field to determine the type of transaction. The type field should return onetime or subscription as a value.

#### Amount To Charge

By default this field is blank, and the Authorize.Net button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

#### Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

### Subscription

These settings are only shown if the transaction Type is set to Subscription.

#### Name

Enter the name of the subscription for reference.

#### Interval Length

Enter the interval length for the subscription. For a unit of days, use an integer between 7 and 365, inclusive. For a unit of months, use an integer between 1 and 12, inclusive.

#### Interval Unit

Choose the interval unit. Options are:

Month(s)

Days

By Field

#### Total Occurencies

Enter how many times the subscription will occur. Enter 9999 for infinite.

#### Start Date

Enter a start date for the payment schedule.

### Customer

#### ID

Enter a unique customer ID used to represent the customer associated with the transaction. WS Form variables can be used in this field, for example:

#field(1)-#field(2)

#### Email

Select a email field on your form to associate with the transaction. This field is optional.

#### Phone

Select a phone field on your form to associate with the transaction. This field is optional.

#### Type

Select Individual or Business to determine how transactions should be classified.

### Appearance

#### Billing Address Option

Specify whether the name and postal code fields should be shown on the form and whether they are required to be filled in.

#### Header Text

This is the text that is displayed on the header of the payment form. The default is to not display any text.

#### Button Label

This is the text that is displayed on the button. The default is "Pay".

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how the Authorize.Net button is rendered.

### Billing

#### Billing Address Mapping

This field is optional. Billing Address Mapping tells WS Form which of your form fields relate to the corresponding billing fields in Authorize.Net.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Authorize.Net field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Shipping Address Mapping

This field is optional. Shipping Address Mapping tells WS Form which of your form fields relate to the corresponding shipping fields in Authorize.Net.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Authorize.Net field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Transaction

#### Zero Amount

You can configure how WS Form should handle zero amounts for Authorize.Net buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

#### Zero Amount Message

If you opt to show an error message, enter the error message you would like to be shown here.

#### Error Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the Show Message action. You can configure these options to change how the error messages are displayed to users.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Auto Delete Submissions

URL: https://wsform.com/knowledgebase/auto-delete-submissions/

Automatically move saved submissions to trash or permanently delete them after a set number of days using the Save Submission action.

WS Form can automatically remove saved submissions after a specified number of days. You can choose to move expired submissions to trash, where they can be restored, or permanently delete them.

This is useful when you only need to retain submission data for a limited period, such as when implementing a data retention policy or GDPR-style cleanup.

## Requirements

The Save Submission action must be present and enabled on the form.

If the Save Submission action is disabled or removed, submissions will not be saved and the auto delete feature cannot be applied to new submissions.

## How to Enable Auto Delete Submissions

Edit the form in WS Form.

Open the Actions sidebar.

Select the Save Submission action.

Find Auto Delete Submissions.

Choose Move to Trash or Permanently Delete.

Enter the retention period in Delete After (Days).

Save or publish the form.

The default value for Delete After (Days) is 90 days. The minimum value is 1 day.

## Auto Delete Submissions Options

### Off

Select Off to disable auto deletion for new submissions. New submissions will not be given an expiry date.

Turning this setting off does not immediately remove expiry dates that have already been assigned to existing submissions.

### Move to Trash

Select Move to Trash to move expired submissions to trash after the number of days specified in Delete After (Days).

This is the safer option if you may need to recover a submission later. Trashed submissions can be restored from the submissions Trash view.

### Permanently Delete

Select Permanently Delete to permanently remove expired submissions after the number of days specified in Delete After (Days).

Permanent deletion cannot be undone. Related submission data, such as notes, meta data, and uploaded files, is also removed.

This option can be useful when implementing a retention policy or GDPR-style data cleanup where submission data should not be retained beyond a specified period. Choose it carefully because deleted submissions cannot be restored.

### Delete After (Days)

Delete After (Days) determines how many days a submission is retained before it is moved to trash or permanently deleted.

The default is 90 days, and the minimum is 1 day.

For example, setting this to 30 means a new submission will be assigned an expiry date 30 days after it is created.

## What Happens After Setup?

When a submission is saved, WS Form stores an expiry date based on the current Delete After (Days) value.

WS Form then uses WordPress scheduled events, known as WP-Cron, to check for expired submissions. The scheduled check runs hourly.

Processing may not happen at the exact moment a submission expires. With the default WordPress WP-Cron system, scheduled events are triggered by visits to the site. On a low-traffic site, an expired submission may therefore remain for longer before it is processed.

Existing submissions that have already been assigned an expiry date keep that date if you later change the Delete After (Days) setting.

When an expired submission is processed, WS Form uses the form's current Auto Delete Submissions setting to determine how it should be handled.

## Restoring Trashed Submissions

If you select Move to Trash, expired submissions are moved to the submissions Trash view. They can be restored if you need them again.

If you select Permanently Delete, the submission and its related data are removed permanently. There is no restore option within WS Form.

If you are unsure whether submission data might be needed later, Move to Trash provides a recoverable option.

## Troubleshooting

### Submissions Are Not Being Automatically Deleted or Moved to Trash

Check the following:

The Save Submission action exists on the form and is not disabled.

Auto Delete Submissions is set to Move to Trash or Permanently Delete, not Off.

Delete After (Days) is set.

Enough days have passed since the submission was created.

You have allowed time for the scheduled check to run.

WS Form checks for expired submissions about once per hour. Processing is not instant.

WordPress WP-Cron is triggered by site visits by default. A site receiving little or no traffic may experience delays.

### WP-Cron Is Not Running

WordPress uses WP-Cron to run scheduled tasks. Unlike a traditional server cron service, the default WP-Cron system is normally triggered when someone visits the site.

On sites with little or no traffic, scheduled tasks may therefore run late.

You can use a WP-Cron management plugin such as WP Crontrol to check whether the following scheduled event is present:

ws_form_wp_cron_action_database

If WP-Cron has been disabled, check wp-config.php for:

define( 'DISABLE_WP_CRON', true );

When DISABLE_WP_CRON is enabled, the built-in WP-Cron system will not be triggered by site visits. This configuration usually requires a server cron job that requests wp-cron.php on a regular schedule.

A server-level cron job is also a more reliable option for sites where scheduled tasks need to run consistently.

Caching and CDN configurations can sometimes prevent WP-Cron from being triggered if requests do not reach WordPress. If scheduled events are consistently delayed or not running, check your caching, CDN, and hosting configuration.

Your hosting provider can usually help confirm whether WP-Cron is running correctly and configure a real server cron if required.

### Submissions Are Being Trashed Instead of Permanently Deleted

If submissions are being moved to trash when you expected them to be permanently deleted, or permanently deleted when you expected them to be moved to trash, check the form's current setting.

WS Form uses the form's current Auto Delete Submissions setting when the scheduled task processes an expired submission.

Edit the form, open the Save Submission action, and check the current Auto Delete Submissions setting. Make sure you save or publish the form after making changes.

### I Turned Auto Delete Off but Older Submissions Still Disappeared

Turning Auto Delete Submissions to Off prevents new submissions from being assigned an expiry date.

It does not immediately clear expiry dates that were previously assigned to existing submissions. An older submission that already has an expiry date may therefore still be processed when the scheduled task runs.

## Frequently Asked Questions

### What Is the Default Retention Period?

The default Delete After (Days) value is 90 days.

### What Is the Minimum Retention Period?

The minimum value is 1 day.

### Can I Restore an Automatically Deleted Submission?

If Move to Trash was selected, you can restore the submission from the submissions Trash view.

If Permanently Delete was selected, the submission cannot be restored.

### Does Changing Delete After (Days) Update Existing Expiry Dates?

No. Submissions that have already been assigned an expiry date keep that date. The new value is used when assigning expiry dates to new submissions.

### Does Auto Delete Run at the Exact Time a Submission Expires?

No. WS Form checks for expired submissions using an hourly WordPress scheduled event. The exact processing time can vary, particularly when the default visit-triggered WP-Cron system is used on a low-traffic site.

### Should I Use Move to Trash or Permanently Delete?

Use Move to Trash if you want the ability to recover expired submissions.

Use Permanently Delete when the data should be removed completely after your chosen retention period. This can be useful for retention or GDPR-style cleanup policies, but permanent deletion cannot be undone.

## Automatically Login Users After Registration

URL: https://wsform.com/knowledgebase/automatically-login-users-after-registration/

Using the User Management integration, it is possible to automatically login a user after they have been registered.

Using the User Management integration, it is possible to automatically login a user after they have been registered. This is done by simply adding an additional User Management action configured to use the Login method.

To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open.

Click the Add  icon to add a new action.

Select User Management from the Action pulldown. A series of settings will appear.

Choose Login as the Method.

Map the same Username and Password field as you used for the Register action to the Login action.

Click Save

Now once the register action completes successfully, the user will be automatically logged into the website.

## AWeber Integration

URL: https://wsform.com/knowledgebase/aweber/

The AWeber integration lets you add, update, and delete subscribers, pull contact data, and create new forms from your lists in a single click.

The AWeber integration lets you add, update, and delete subscribers using an action, pull contact data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

More information on AWeber.com

## Installation

The AWeber plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the AWeber plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the AWeber tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to AWeber

In order to use the integration, you need to connect it to AWeber. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the AWeber tab at the top of the page.

Click Connect and follow the onscreen prompts.

If you do not have a AWeber account, you can create a new account here.

## Creating a Form for AWeber

### Automatically

WS Form can create a form for any of your AWeber lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create an AWeber form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the AWeber tab at the top of the page.

Click on any of your AWeber lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the AWeber tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to AWeber when a user saves or submits their form.

To add an AWeber action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a AWeber List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The AWeber action settings are as follows:

#### When Should This Action Run?

You can choose to run the AWeber action when the form is saved, submitted, or both.

#### AWeber List

Choose the AWeber List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Status

Select the subscriber status you would like to process submissions as. Choose from:

Subscribe

Unsubscribe

Delete

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in AWeber. For example, you would want to map your Email field to the Email field in AWeber.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding AWeber field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to tags in AWeber.

To map a field:

Click the Add  icon at the bottom right of the interest mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Interest mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

If you use the automatic method above, WS Form PRO will automatically build interest mapping options for you.

## Populate Forms Using AWeber

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in AWeber.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose AWeber from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the AWeber fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a AWeber template, the field mappings will automatically be created for you. You can also map tags.

## Beaver Builder Module

URL: https://wsform.com/knowledgebase/beaver-builder-module/

If you use Beaver Builder for your WordPress website, you can use the WS Form PRO module to easily add forms to your website.

If you use Beaver Builder for your WordPress website, you can use the WS Form PRO module to easily add forms to your website. The module is ready to use a soon as you have installed WS Form PRO, no additional plugins are required.

To use the module, simple click + and select the WS Form module when editing a page in Beaver Builder.

Then select your form from the pulldown list and that’s it!

For more information about Beaver Builder, click here. Beaver Builder is a plugin developed by Fastline Media.

The Beaver Builder module was introduced in version 1.4.59 of WS Form PRO.

## Bento Integration

URL: https://wsform.com/knowledgebase/bento/

The Bento integration lets you create new people using an action and create new forms in a single click on the add form page.

The Bento integration lets you create new people using an action and create new forms in a single click on the add form page.

## Installation

The Bento plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Bento plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Bento tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Bento

In order to use the integration, you need to connect it to Bento. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Bento tab at the top of the page.

Enter your Site ID, Publishable and Secret Key.

If you do not have a Bento account, you can create a new account here.

## Creating a Form for Bento

### Automatically

WS Form can create a form for any of our Bento lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Bento form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Bento tab at the top of the page.

Click on the Person template to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

Note that Bento does not currently expose field types in their API, so until then all fields added will be text fields.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Bento when a user saves or submits their form.

To add a Bento action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Bento List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Bento action settings are as follows:

#### When Should This Action Run?

You can choose to run the Bento action when the form is saved, submitted, or both.

#### Bento List

At present this will always be Person.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Status

Choose 'Subscribed', 'Unsubscribed' or 'None'. This setting is sends a 'subscribe' or 'unsubscribe' command to Bento when the subscribers is added.

#### Event Types

Events can be used to trigger flows in Bento. You can add as many event types to trigger as you wish. By default, the action is configured to fire a $subscribe event type.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding custom fields in Bento. For example you would want to map your Email field to the Email field in Bento.

To map a field:

Click the Add  icon at the bottom right of the Field Mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Bento field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Field Mapping

Custom mapping allows you to set a Bento field to any value you wish, including the use of WS Form variables.

To add a custom mapping:

Click the Add  icon at the bottom right of the Custom Field Mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Bento field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to the tags Bento.

To map a field:

Click the Add  icon at the bottom right of the Tag Mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields. The value of the submitted value should be the tag ID.

If you use the automatic method above, WS Form PRO will automatically build tag mapping options for you.

#### Custom Tag Mapping

As well as mapping WS Form fields to subscriber tags, you can also add tags by name using this setting. If a tag doesn't already exist in Bento it will be automatically created before being assigned to the subscriber.

To add a tag:

Click the Add  icon at the bottom right of the Custom Tag Mapping section.

Enter the tag name. WS Form variables can be used in this setting.

Repeat this process for each tag you wish to assign to the subscriber.

Click the Save button at the bottom of the sidebar to save your changes.

## Bootstrap Framework

URL: https://wsform.com/knowledgebase/building-wordpress-forms-for-bootstrap/

WS Form can output HTML markup that is native to the Bootstrap framework

Bootstrap is a popular, free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Many popular WordPress themes use Bootstrap.

If your WordPress theme uses the Bootstrap framework, WS Form can output forms that contain  HTML markup that is native to that framework. This means that WS Form physically changes the HTML so that your form dovetails seamlessly into your theme.

In addition to output native markup, WS Form will also change the breakpoint selector to match the available breakpoints in Bootstrap. This feature is only available in WS Form PRO.

All of the available WS Form field types are fully compatible with Bootstrap.

## Demo

To view a demo of a WS Form outputting a form for the Bootstrap framework, click here.

## Supported Versions

WS Form supports the following versions of Bootstrap:

Bootstrap 5+

Bootstrap 4.1-4.5.x

Bootstrap 4.0

Bootstrap 3.x

## Configuring WS Form to Use Bootstrap Framework

### Automatic

When you first install WS Form, it will scan your theme files and if Bootstrap is detected it will automatically output your form using Bootstrap markup.

### Manual

To manually select Bootstrap as your framework:

Click on WS Form in the WordPress administration menu.

Click on 'Settings'.

Click on the Advanced tab.

Select Bootstrap under the Framework dropdown.

Click Save.

## Sample Output

An example of the HTML output for a tel field is shown below (includes some additional markup required by WS Form).

<div class="col-6 col-md-3 form-group" id="wsft-1-field-wrapper-6" data-id="6" data-type="tel">
 <label id="wsft-1-label-6" for="wsft-1-field-6">Phone</label>
 <input type="tel" id="wsft-1-field-6" name="field_6" class="form-control" aria-labelledby="wsft-1-label-6">
 <div id="wsft-1-invalid-feedback-6" class="invalid-feedback">Please provide a valid phone number.</div>
</div>

## Breakdance Website Builder - Form Element

URL: https://wsform.com/knowledgebase/breakdance-website-builder-form-element/

Adding a form to a Breakdance Website Builder layout can be done easily by using the WS Form element.

Adding a form to a Breakdance Website Builder (breakdance.com) layout can be done easily by using the WS Form element.

In Breakdance, click Add.

Open the Forms category and click the WS Form element to add it to your layout.

Choose a form from the dropdown, or you can enter the form ID below the dropdown if no form is selected. Dynamic data is also supported for this setting.

The form will then be displayed in your template.

You can also optionally enter an ID for the form DOM element too.

## Breakpoint Queries

URL: https://wsform.com/knowledgebase/breakpoint-queries/

By default, responsive columns in WS Form are based on the width of the browser window. This works well for most forms, but it can cause layouts to appear too…

By default, responsive columns in WS Form are based on the width of the browser window. This works well for most forms, but it can cause layouts to appear too wide when the same form is used in a narrow container such as a sidebar, modal, popup, footer, or card.

Breakpoint Queries let you choose whether responsive columns are based on the browser width or the width of the form itself. This makes it easy to reuse the same form in different locations without creating separate versions or writing custom CSS.

This setting only affects the WS Form responsive column grid. It does not change the layout of your theme or other page content.

## Before You Start

Your front end framework must be set to WS Form (WS Form > Settings > Appearance / Markup > Framework).

Layout CSS must be enabled. This is enabled by default when using the WS Form framework.

This setting is not available when using Bootstrap or Foundation because those frameworks provide their own responsive grid system.

## How to Enable Breakpoint Queries

Edit your form in the Layout Editor.

Click Settings in the top toolbar.

Open the Styling tab.

Locate the Breakpoint Queries setting.

Select either Browser Width or Form Width.

Click Save or Save & Close, then publish your form if required.

## Breakpoint Query Options

OptionDescription

Browser WidthResponsive columns are based on the width of the browser window. This is the default behavior.

Form WidthResponsive columns are based on the width of the form itself. Ideal for forms displayed in sidebars, popups, modals, cards, footers, and other narrow containers.

## Breakpoint Sizes

Changing the Breakpoint Queries setting does not change the breakpoint sizes. Only what is measured changes.

Extra Small: Up to 575px

Small: 576px and above

Medium: 768px and above

Large: 992px and above

Extra Large: 1200px and above

## When to Use Form Width

Form Width is recommended when your form is displayed inside a container that is significantly narrower than the browser window.

Sidebars

Modals and popups

Cards and panels

Footer areas

The same form is reused in multiple locations with different widths

Choose Browser Width if your forms are typically displayed full width or you want to retain the default responsive behavior.

## Example

Imagine you have a two-column contact form that is used on a full width contact page and inside a 320px sidebar.

With Browser Width, the sidebar version may remain in two columns because the browser window is still wide.

With Form Width, the sidebar version automatically stacks into a single column because the form itself is narrow.

## Browser Support

Form Width uses CSS Container Queries, which are supported by current versions of Chrome, Edge, Firefox, and Safari.

If you need to support very old browsers that do not support Container Queries, use the Browser Width option instead.

## Troubleshooting

### I Can't See the Breakpoint Queries Setting

Breakpoint Queries are only available when using the WS Form framework. If you are using Bootstrap or Foundation, this setting will not appear because those frameworks manage responsive layouts themselves.

### Nothing Changed After Enabling Form Width

Save and publish your form after changing the setting.

If Compile CSS is enabled under WS Form > Settings, save the global settings to rebuild the layout CSS.

Confirm the form is actually narrower than the breakpoint you expect.

### Only Part of My Form Changed

Breakpoint Queries only control the WS Form responsive column grid. Third party widgets, custom CSS, and theme styles continue to use their own responsive behavior.

## For Developers

When Form Width is enabled, WS Form adds the wsf-form-container-query class to the form and uses CSS Container Queries to control responsive columns. This makes it easy to target container based layouts with your own custom CSS if required.

## Brevo Integration

URL: https://wsform.com/knowledgebase/brevo/

This integration lets you subscribe and unsubscribe Brevo contacts using a WordPress form created in WS Form.

This integration lets you subscribe and unsubscribe Brevo contacts using a WordPress form created in WS Form. You can create new forms from your Brevo lists in a single click from the add form page. You can also pre-populate forms with data from Brevo.

Brevo was formerly Sendinblue.

## Installation

The Brevo plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Brevo plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Brevo tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Brevo

In order to use the integration, you need to connect it to Brevo. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Brevo tab at the top of the page.

Enter your API key from the Brevo SMTP and API page. Ensure you are using a version 3 key.

Click Save.

If you do not have a Brevo account, you can create a new account here.

## Creating a Form for Brevo

### Automatically

WS Form can create a form for any of your Brevo objects in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Brevo form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Brevo tab at the top of the page.

Click on a list.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Brevo tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a Brevo object when a user saves or submits their form.

To add a Brevo action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Brevo from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Brevo action settings are as follows:

#### When Should This Action Run?

You can choose to run the Brevo action when the form is saved, submitted, or both.

#### Brevo List

Select which list the contact should be subscribed to.

#### Status

You can choose to subscribe or unsubscribe a contact. For GDPR compliance you can also choose the Subscribe with Double Opt-In status. This method requires you to set-up a double opt-in template in Brevo.

If you are subscribing a contact, the email address or SMS attribute must be mapped and completed.

If you are unsubscribing a contact, the email address must be mapped and completed.

#### Enable Update (Subscribe Status Only)

If checked, the contact will be updated if a matching contact is already found.

#### Double Opt-In Template ID (Subscribe with Double Opt-In Status Only)

If you have chosen the Subscribe with Double Opt-In status, you will need to specify the template ID of a double opt-in template.

The template ID is a number. For example, in the screenshot below, the template ID would be: 1

##### How to Create a Double Opt-In Email Template in Brevo

To learn how to create a double opt-in email template please refer to the Brevo article:

Create a custom double opt-in (DOI) email template

The optional step in this article of adding an optin tag to your email template is mandatory. You must add an optin tag to the email in order for Brevo to be able to identify it as a double opt-in template.

You can ignore the last step in this article,  ("Link your custom double opt-in confirmation template to your sign-up form") as the double opt-in email will be triggered via their API from WS Form.

#### Double Opt-In Redirect URL (Subscribe with Double Opt-In Status Only)

If you have chosen the Subscribe with Double Opt-In status, you will need to specify the redirect URL that a user will be sent to after they have clicked the double opt-in link. This would typically be an absolute URL to a page on your website.

For example: https://mywebsite.com/double-opt-in-thank-you/

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

When the users opts-in, WS Form will set the custom attribute OPT_IN to True.

#### Field Mapping

Field mapping tells WS Form which of your form fields relates to the corresponding attributes in Brevo. For example you would want to map your email form field to the email attribute in Brevo. WS Form supports mapping to normal, category and transactional attributes.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Brevo attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

If you are mapping a phone field, we recommend enabling the International Phone Input setting and setting the Return Format setting to E164. Otherwise the format should be: +15551234567

#### Custom Mapping

Custom mapping allows you to set a Brevo field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to a source attribute in Brevo, or perhaps set a transaction attribute ID to the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Brevo attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Brevo

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Brevo.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Brevo from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Brevo attribute to your form fields.

Click Save at the bottom.

Note that if you created your form using a Brevo template the field mappings will automatically be created for you.

## Bricks Visual Site Builder - Form Element

URL: https://wsform.com/knowledgebase/bricks-visual-site-builder-form-element/

Adding a form to a Bricks Visual Site Builder template can be done easily by using the WS Form element.

Adding a form to a Bricks Visual Site Builder (bricksbuilder.io) template can be done easily by using the WS Form element.

In Bricks open the WS Form PRO section and click the Form element to add it to your layout.

Choose a form from the dropdown, or you can enter the form ID below the dropdown if no form is selected. Dynamic values are supported in this setting.

The form will then be displayed in your template.

You can also optionally enter an ID for the form DOM element too.

## Build a WordPress Form with the ACPT Plugin

URL: https://wsform.com/knowledgebase/build-a-wordpress-form-with-the-acpt-plugin/

In this tutorial, we’ll show you how to integrate WS Form PRO with the ACPT WordPress plugin.

ACPT is a plugin that allows you to create custom fields for any post type. WS Form can be fully integrated with custom fields created using ACPT.

In this tutorial, we’ll show you how to integrate WS Form PRO with the ACPT WordPress plugin. You'll learn how to create a form that can create and update a WordPress post that contains custom fields configured in ACPT.

https://www.youtube.com/watch?v=MdwlVaocdLk

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in ACPT for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in ACPT.

Push form submissions as new posts that are fully compatible with ACPT.

Pre-populate forms using post data that includes ACPT fields.

ACPT repeater fields are fully supported when creating, populating and submitting forms.

## Prerequisites

For this tutorial you will need the following plugins:

ACPT

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in ACPT

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that ACPT offers, including groups and repeaters.

The following ACPT field types are supported in WS Form:

Basic

Checkbox

Editor

HTML

Number

Radio

Range

Select

Select (Multiple)

Text

Textarea

Toggle

Specialized

Address

Color

Country

Email

Date

Date / Time

Icon

Phone

Rating

Time

URL

Unit of Measure

Currency

Weight

Length

Media

Embed

File

Gallery

Image

Video

Grouped

Repeater

Relations

Post

Post (Multiple)

Relationship

Term

Term (Multiple)

User

User (Multiple)

If you add a Repeater field in ACPT, that field will be converted to a repeatable section in WS Form. When that form is submitted the repeated rows will be populated in the post at rows in ACPT. WS Form also supports the above field types in repeatable sections.

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. Note that the Post template has an ACPT icon on it indicating that custom fields have been found for that post type. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add ACPT fields, fully configured according to your ACPT settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with ACPT. WS Form sets the width of fields to match your ACPT configuration settings.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or ACPT fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and ACPT Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from ACPT. This means that if you change a choice in ACPT it will automatically update on your form.

Likewise, relational fields in ACPT such as Post and Term fields are also updated dynamically.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in ACPT that have also been populated.

WS Form supports integration with all of the core ACPT field types.

## Pre-Populating a Form with ACPT Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using ACPT custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and ACPT fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with ACPT!

 

## Build a WordPress Form with the Advanced Custom Fields (ACF) Plugin

URL: https://wsform.com/knowledgebase/how-to-build-a-wordpress-form-with-the-advanced-custom-fields-acf-plugin/

Automatically create forms that contain the fields you have made in ACF for any post type.

Advanced Custom Fields (ACF) is a plugin that allows you to create custom fields for any post type. WS Form can be fully integrated with custom fields created using ACF.

To obtain the official free or PRO version of ACF, please refer to this ACF blog article:

Installing and Upgrading to the Latest Version of ACF

In this tutorial, we’ll show you how to integrate WS Form PRO with the ACF plugin. You'll learn how to create a form that can create a WordPress post that contains custom fields configured in ACF.

https://www.youtube.com/watch?v=Npx4-igXxAM

ACF has basic form functionality built-in that enables you to place the same ACF form you find in the WordPress admin onto the frontend of your website. However, this form has a fixed layout and design.

By using WS Form you can develop powerful, mobile friendly forms that have any layout in place of this basic functionality.

In this tutorial we’re going to create a form that will create a new blog post when it is submitted. These same instructions can be used to create any other post types such as pages or products.

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in ACF for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in ACF.

Push form submissions as new posts that are fully compatible with ACF.

Pre-populate forms using post data that includes ACF fields.

## Prerequisites

For this tutorial you will need the following plugins:

Advanced Custom Fields (ACF)

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in ACF

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that ACF offers, including groups and repeaters.

You can find some helpful resources on how to configure ACF here.

The following ACF field types are supported in WS Form:

Basic

Text

Textarea

Number

Range

Email

URL

Password

Content

Image

File

Gallery

WYSIWYG

Choice

Select

Checkbox

Radio

Button Group

True/False

Relational

Post Object

Page Link

Relationship

Taxonomy

User

jQuery

Google Map

Date Picker

Date Time Picker

Time Picker

Color Picker

Layout

Message

Tab

Group

Repeater

If you add a Repeater field in ACF, that field will be converted to a repeatable section in WS Form. Nested repeaters and groups are not supported. When that form is submitted the repeated rows will be populated in the post at rows in ACF. WS Form supports all field types in repeatable sections.

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add ACF fields, fully configured according to your ACF settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with ACF. WS Form sets the width of fields to match your ACF configuration settings.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or ACF fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and ACF Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from ACF. This means that if you change a choice in ACF it will automatically update on your form.

Likewise, relational fields in ACF such as Post Object and User fields are also updated dynamically.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in ACF that have also been populated.

WS Form supports integration with all of the core ACF field types.

## Pre-Populating a Form with ACF Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using ACF custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and ACF fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with ACF!

 

## Build a WordPress Form with the JetEngine Plugin

URL: https://wsform.com/knowledgebase/build-a-wordpress-form-with-the-jetengine-plugin/

In this tutorial, we’ll show you how to integrate WS Form PRO with the JetEngine plugin.

In this tutorial, we’ll show you how to integrate WS Form PRO with the JetEngine plugin. You'll learn how to create a form that can create a WordPress post that contains custom fields configured in JetEngine.

JetEngine is a plugin that allows you to create custom fields for any post type. WS Form can be fully integrated with custom fields created using JetEngine. By using WS Form you can develop powerful, mobile friendly forms that have any layout in place of this basic functionality.

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in JetEngine for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in JetEngine.

Push form submissions as new posts that are fully compatible with JetEngine.

Pre-populate forms using post data that includes JetEngine fields.

WS Form also integrates JetEngine with user management forms such as Register and Edit Profile.

JetEngine repeater fields are fully supported when creating, populating and submitting forms.

## Prerequisites

For this tutorial you will need the following plugins:

JetEngine

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in JetEngine

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that JetEngine offers, including repeaters. Custom fields are added to a Meta Box in JetEngine.

You can find some helpful resources on how to configure JetEngine here.

The following JetEngine field types are supported in WS Form:

Text

Date

Time

Datetime

Textarea

WYSIWYG

Switcher

Checkbox

Media

Gallery

Radio

Repeater

Select

Number

Colorpicker

Posts

HTML

If you add a Repeater field in JetEngine, that field will be converted to a repeatable section in WS Form. When that form is submitted the repeated rows will be populated in the post at rows in JetEngine. WS Form supports all field types in repeatable sections.

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. Any post types that contain JetEngine custom fields will be indicating with a JetEngine icon. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add JetEngine fields, fully configured according to your JetEngine settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with JetEngine. WS Form sets the width of fields to match your JetEngine configuration settings.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or JetEngine fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and JetEngine Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from JetEngine. This means that if you change a choice in JetEngine it will automatically update on your form.

Likewise, relational fields in JetEngine such as Posts are also updated dynamically.

## JetEngine Relations (Optional)

You can create a JetEngine relation from a WS Form field using this setting. The relation will relate to the Post ID created or updated with the Post Management action. To do this, use the JetEngine Relation setting. To add a Jet Engine Relation setting:

Click the add icon.

Choose the WS Form field you would like to use to populate the relationship with. We would recommend using a Select, Checkbox or Radio field. A Hidden field could also be used. You can use the Data Source feature to populate the field with Post data if you wish. Ensure the value mapping is set to ID and the label mapping is set to Title. Ultimate the field value should contain a Post ID you want to establish a relationship with.

In the second column, choose the JetEngine Relation you would like to set.

In the third column choose the Context. This defaults to Child which will update the child component of the relationship.

In the fourth column you can choose whether or not to replace all existing relationships on the post.

## Custom JetEngine Relations (Optional)

You can create a JetEngine relation from a custom value which can contain a WS Form variable. The relation will relate to the Post ID created or updated with the Post Management action. To do this, use the JetEngine Relation setting.

Two useful variables for this setting are:

#post_id_last - This represents the post ID added or updated by the previous Post Management action. #post_id_first - This represents the post ID added or updated by the first Post Management action.

To add a Jet Engine Relation setting:

Click the add icon.

Choose the WS Form field you would like to use to populate the relationship with. We would recommend using a Select, Checkbox or Radio field. A Hidden field could also be used. You can use the Data Source feature to populate the field with Post data if you wish. Ensure the value mapping is set to ID and the label mapping is set to Title. Ultimate the field value should contain a Post ID you want to establish a relationship with.

In the second column, choose the JetEngine Relation you would like to set.

In the third column choose the Context. This defaults to Child which will update the child component of the relationship.

In the fourth column you can choose whether or not to replace all existing relationships on the post.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in JetEngine that have also been populated.

WS Form supports integration with all of the core JetEngine field types.

## Pre-Populating a Form with JetEngine Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using JetEngine custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and JetEngine fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us.

In addition to field mapping, JetEngine Relations are also supported. You can populate a WS Form field with a JetEngine relation value. The relation will relate to the post ID you have configured to populate from. To add a JetEngine Relation setting:

Click the add icon.

Choose the JetEngine Relation you would like to set the WS Form field from.

In the second column choose the WS Form field you would like to populate. We would recommend using a Select, Checkbox or Radio field. You can use the Data Source feature to populate the field with Post data if you wish. Ensure the value mapping is set to ID and the label mapping is set to Title.

In the third column choose the Context. This defaults to Child which will update the child component of the relationship.

Next click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with JetEngine!

 

## Build a WordPress Form with the Meta Box Plugin

URL: https://wsform.com/knowledgebase/build-a-wordpress-form-with-the-meta-box-plugin/

Automatically create forms that contain the fields you have made in Meta Box for any post type.

In this tutorial, we’ll show you how to integrate WS Form PRO with the Meta Box plugin. You'll learn how to create a form that can create a WordPress post that contains custom fields configured in Meta Box.

https://www.youtube.com/watch?v=BW9DrvfOXqc

Meta Box is a plugin that allows you to create custom fields, post types and taxonomies. WS Form can be fully integrated with custom fields created using Meta Box.

By using WS Form you can develop powerful, mobile friendly forms that have any layout in place of this basic functionality.

In this tutorial we’re going to create a form that will create a new blog post when it is submitted. These same instructions can be used to create any other post types such as pages or products.

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in Meta Box for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in Meta Box.

Push form submissions as new posts that are fully compatible with Meta Box.

Pre-populate forms using post data that includes Meta Box fields.

Meta Box group fields are fully supported when creating, populating and submitting forms.

## Prerequisites

For this tutorial you will need the following plugins:

Meta Box (And any associated extensions)

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in Meta Box

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that Meta Box offers, including groups and key value fields.

You can find some helpful resources on how to configure Meta Box here.

The following Meta Box field types are supported in WS Form:

Basic

Button

Button Group

Checkbox

Checkbox List

Hidden

Password

Radio

Select

Select Advanced

Text

Textarea

URL

Advanced

Autocomplete

Color Picker

Custom HTML

Date Picker

Datetime Picker

Google Maps

Image Select

Key Value

oEmbed

jQuery UI Slider

Switch

Time Picker

WYSIWYG Editor

HTML 5

Datetime Local

Email

Month

Number

Range

Phone Number

Week

WordPress

Post

Taxonomy

Taxonomy Advanced *

User

Upload

File

File Advanced

File Input

File Upload *

Image

Image Advanced

Image Upload *

Single Image

Video

Layout

Divider

Heading

Group

Tab

* Recommended

The post management integration also provides support for MB Relationships.

## Tips

When creating Meta Box fields for WS Form, the following tips will help:

To create a repeater, use the Meta Box Group field. WS Form supports all of the above field types in groups up to one level.

For map fields, we support the Google Maps field type.

For file uploads:

In Meta Box we recommend using the File Upload and Image Upload fields.

In WS Form, File Upload fields must use Media Library as the file handler. We recommend using DropzoneJS as the file upload type.

When using Tabs, you should start a field group with a Tab field to ensure Meta Box renders the tabs correctly.

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add Meta Box fields, fully configured according to your Meta Box settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with Meta Box. WS Form sets the width of fields to match your Meta Box configuration settings.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or Meta Box fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and Meta Box Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from Meta Box. This means that if you change a choice in Meta Box it will automatically update on your form.

Likewise, relational fields in Meta Box such as Post Object and User fields are also updated dynamically.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in Meta Box that have also been populated.

WS Form supports integration with all of the core Meta Box field types.

## Pre-Populating a Form with Meta Box Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using Meta Box custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and Meta Box fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with Meta Box!

 

## Build a WordPress Form with the Pods Plugin

URL: https://wsform.com/knowledgebase/build-a-wordpress-form-with-the-pods-plugin/

In this tutorial, we’ll show you how to integrate WS Form PRO with the Pods plugin.

If you're a regular user of Pods, consider donating to help support the project. Donate here.

In this tutorial, we’ll show you how to integrate WS Form PRO with the Pods plugin. You'll learn how to create a form that can create a WordPress post that contains custom fields configured in Pods.

https://www.youtube.com/watch?v=ylsHWxcvfmQ

Pods is a plugin that allows you to create custom fields, post types and taxonomies. WS Form can be fully integrated with custom fields created using Pods.

By using WS Form you can develop powerful, mobile friendly forms that have any layout.

In this tutorial we’re going to create a form that will create a new blog post when it is submitted. These same instructions can be used to create any other post types such as pages or products.

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in Pods for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in Pods.

Push form submissions as new posts that are fully compatible with Pods.

Pre-populate forms using post data that includes Pods fields.

Pods group fields are fully supported when creating, populating and submitting forms.

## Prerequisites

For this tutorial you will need the following plugins:

Pods (And any associated extensions)

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in Pods

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that Pods offers, including groups and key value fields.

You can find some helpful resources on how to configure Pods here.

The following Pods field types are supported in WS Form:

Text

Plain Text

Website

Phone

E-mail

Password

Paragraph

Plain Paragraph Text

WYSIWYG (Visual Editor)

Code (Syntax Highlighting)

Date / Time

Date / Time

Date

Time

Number

Plain Number

Currency

Relationships / Media

File / Image / Video

oEmbed

Relationship

Other

Yes / No

Color Picker

Layout Elements

Heading

HTML Content

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add Pods fields, fully configured according to your Pods settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with Pods.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or Pods fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and Pods Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from Pods. This means that if you change a choice in Pods it will automatically update on your form.

Likewise, relational fields in Pods such as Post Object and User fields are also updated dynamically.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in Pods that have also been populated.

WS Form supports integration with all of the core Pods field types.

## Pre-Populating a Form with Pods Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using Pods custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and Pods fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with Pods!

 

## Build a WordPress Form With the Toolset Plugin

URL: https://wsform.com/knowledgebase/build-a-wordpress-form-with-the-toolset-plugin/

In this tutorial, we’ll show you how to integrate WS Form PRO with the Toolset plugin.

In this tutorial, we’ll show you how to integrate WS Form PRO with the Toolset plugin. You'll learn how to create a form that can create a WordPress post that contains custom fields configured in Toolset.

Toolset is a plugin that allows you to create custom fields, post types and taxonomies. WS Form can be fully integrated with custom fields created using Toolset.

By using WS Form you can develop powerful, mobile friendly forms that have any layout.

In this tutorial we’re going to create a form that will create a new blog post when it is submitted. These same instructions can be used to create any other post types such as pages or products.

When used with the WS Form Post Management Integration you can:

Automatically create forms that contain the fields you have made in Toolset for any post type.

Automatically populate select, checkbox, radio and button groups with the choices you have configured in Toolset.

Push form submissions as new posts that are fully compatible with Toolset.

Pre-populate forms using post data that includes Toolset fields.

Toolset group fields are fully supported when creating, populating and submitting forms.

## Prerequisites

For this tutorial you will need the following plugins:

Toolset

WS Form PRO

Post Management Integration (Also compatible with the User Management Integration)

## Create Fields in Toolset

First, we’re going to create some custom fields that will appear when we edit a post in WordPress. We can choose any of the field types that Toolset offers, including groups and key value fields.

You can find some helpful resources on how to configure Toolset here.

The following Toolset field types are supported in WS Form:

Audio

Checkbox

Checkboxes

Colorpicker

Date

Email

Embed

File

Image

Numeric

Phone

Post

Radio

Select

Skype

Textarea

Textfield

URL

Video

WYSIWYG

Repeatable fields and groups are not currently supported for integration purposes.

## Create a Form

Next, we’re going to create a form in WS Form. To do this, we click on Add New in the WS Form menu.

Because we have the Post Management integration installed, you’ll see that we have a Post Management tab. If we click on that tab it will show us templates for each post type registered in WordPress. We’re going to choose the Post template.

After you click on a template, WS Form automatically creates a form for you. WS Form will:

Add basic post fields (title, excerpt and featured image).

Add Toolset fields, fully configured according to your Toolset settings.

Add taxonomy term selectors (e.g. Category and Tags on posts).

At the top of the form is a section that includes standard fields we would expect to see for a post, such as the title, content an excerpt. In addition to that it has created fields and sections for all of the custom fields we created with Toolset.

You can edit the form in exactly the same way as you would any other form. For example, you can resize fields, resize sections and even split the form up across multiple tabs. All of the functionality of the WS Form layout editor is available to you.

## Field Mapping (Optional)

When the form is submitted, the fields on your form are used to create a post in WordPress. WS Form automatically creates field mappings for you if you use a template.

The fields are mapped to either WordPress or Toolset fields by using a Post Management action.

To edit the field mappings:

Click the Actions icon at the top of the layout editor.

Click the gear icon next to the Post Management action.

Scroll down to the Field Mapping and Toolset Field Mapping.

Adjust the field mappings as required then click Save & Close. For more information about field mapping, see our Post Management knowledge base article.

Fields such as selects, checkboxes and radios pull their choices dynamically from Toolset. This means that if you change a choice in Toolset it will automatically update on your form.

Likewise, relational fields in Toolset such as Post Object and User fields are also updated dynamically.

## Preview The Form

Now let’s test the form. To do that we simply click the Preview button.

You’ll notice in our preview window that we have the WS Form debug console open. This is a really great feature for testing forms and allows you to populate a form in a single click. Every time you click Populate the form is populated with different data. There’s even a Populate & Submit button which lets you populate the form with data and submit it.

## View The Post

Now that the form is submitted, let’s take a look at how that looks in WordPress.

First, we’ll click back to the WordPress admin. Then we’ll click on Posts in the WordPress menu.

And there is our new post that was created by WS Form.

If we click on the post, we can see that the post title, excerpt and content have been populated from the form. Below that you can see the custom fields created in Toolset that have also been populated.

WS Form supports integration with all of the core Toolset field types.

## Pre-Populating a Form with Toolset Custom Fields

In addition to creating posts, WS Form can also pre-populate forms using Toolset custom fields. To demonstrate this, we’ll go back to the layout editor for the form we just created. Next, we click on the form settings icon at the top of the layout editor.

Then we click on the data tab. From here we configure WS Form to populate the form using the data from an existing WordPress post. In this example, we’ll set WS Form to use the ID of the post we just created.

Below that, you will find the field mappings.

These allow you specify which post and Toolset fields will be mapped to which WS Form field. You’ll notice that because we created this form from a template, all of the fields are already mapped for us, so all we need to do is click Save & Close. Then we click Preview to view the form.

The form has been populated with the data from the post and is ready for editing.

And that’s how easy it is to integrate WS Form with Toolset!

 

## Calculate Character and Word Counts for a Form Field

URL: https://wsform.com/knowledgebase/calculate-character-and-word-counts-for-a-form-field/

You can use WS Form PRO to calculate the number of characters or words in a form field.

You can use WS Form PRO to calculate the number of characters or words in a form field. You can also incorporate this with other calculations, for example you could multiply the number for characters by 10 in a Price field.

## Demo

## Character Count

Syntax: #field_count_char(field_id, "regex_filter")

To get the number of characters in a field, you could use:

#calc(#field_count_char(123))

... where 123 is the ID of the field. The #calc variable ensures the value is updated whenever the source field changes. You would typically add this to the default value of a field.

The calculation can also be filtered by using a JavaScript regular expression. For example:

#calc(#field_count_char(123, "/[^0-9a-z]/gi"))

This would only include alphanumeric letters in the character calculation, i.e. spaces would not be included.

Furthermore you can also use the #field_count_char variable alongside arithmetic within the #calc variable. For example:

#calc(#field_count_char(123, "/[^0-9a-z]/gi") * 10)

This would multiple the count of alphanumeric characters by 10.

## Word Count

Syntax: #field_count_word(field_id, "regex_filter")

To get the number of words in a field, you could use:

#calc(#field_count_word(123))

... where 123 is the ID of the field. The #calc variable ensures the value is updated whenever the source field changes. You would typically add this to the default value of a field.

Furthermore you can also use the #field_count_word variable alongside arithmetic within the #calc variable. For example:

#calc(#field_count_char(123, "/[^0-9a-z]/gi") * 10)

This would multiple the count of alphanumeric characters by 10.

## Calculated Fields

URL: https://wsform.com/knowledgebase/calculated-fields/

The calculated fields function in WS Form PRO makes it easy to create calculate field values that are updated in realtime.

The #calc calculated fields function in WS Form PRO makes it easy to create calculate field values that are updated in realtime. It can handle everything from simple addition to more complex trigonometric functions.

## Demo

## Features

Works with all fields that can accept a numeric input (including rating and progress).

Calculates from any field or variable that can output a numeric output (including dates).

Works with repeatable sections.

Full logging to the debug console.

## How To Create A Calculated Field

Common field types you might use a calculated field in include:

Number

Price

Text

Text Area

Text Editor

HTML

You can put calculated values in the following settings of a field:

Label

Default value

Content (Text Editor / HTML fields)

Placeholder

Help

Minimum

Maximum

To create a calculated field value for the default value of a field, click the field settings icon and then enter a #calc(...) variable in the Default Value setting.

Anything within the brackets will be calculated in realtime on your form and used as the value of your field.

You can create calculations such as:

#calc(1 + 2)

You can include values from other fields on your form, for example, multiplying field ID 123 value by 5:

#calc(#field(123) * 5)

You can use WS Form math variables (listed at the end of this document) to perform more complex calculations, for example, rounding the previous example to two decimal places:

#calc(#round(#field(123) * 5, 2))

You could even create a calculated field that works out the sum of all values of a field in a repeatable section. The syntax is easy:

#calc(#field(123))

... where field ID 123 is a field in a repeatable section. WS Form PRO automatically sums the values together.  The #section_row_count(456) function (where 456 is the section ID) can be used to calculate the average value of those values:

#calc(#field(123) / #section_row_count(456))

There is an easier way of creating these calculations ... the calculator!

### Calculator

WS Form PRO includes a calculator feature that helps creating calculated values for fields.

Click the field settings icon.

Click the calculator icon. On most fields this is found on the Default Value setting.

The calculator will then appear directly below:

The cursor will automatically position itself within the #calc() function. In addition to the normal numeric and arithmetic buttons, the calculator has the following additional buttons:

Insert Field - Click this to insert a #field() variable into your calculated field. It lists all of the fields on your form that are compatible with the calculated field feature.

del - Deletes a character

AC (All Clear) - Deletes the entire calculation

f - Inserts a math variable into your calculation such as #pi, #cos(...) or #sin(...) (See below)

Note that whilst the calculator will do its best to maintain a suitable cursor position, you can always click on the default value itself to reposition the cursor.

### Source Field Rules

If a field used in a calculation is an e-commerce type (e.g. price, price select etc), the input value is assumed to be a currency and WS Form will therefore correctly interpret the price according to your currency symbol, decimal and thousand separator settings and will convert that to a floating point number.

If a field used in a calculation is not an e-commerce type (e.g. number, text, select etc), the input value should follow standard conventions used for evaluating numbers in JavaScript, i.e.

Period for decimal separator

No thousand separators

For example: 123.45

### Display Calculations as Prices

If you wish to show a calculation as a price using your currency settings, you can use the ecommerce_price variable, for example:

#ecommerce_price(#calc(#field(1) + #field(2)))

### JavaScript Floating Point Rounding

WS Form calculations are assessed using standard JavaScript. In some cases this can result in floating point numbers such as:

123.40000000000001 instead of 123.4

This is actually perfectly normal in the computing world! If you're interested here is an explanation.

In order to get a neater looking number, simply use the #round variable, for example:

#round(#calc(#field(1) + #field(2)), 1)

The last parameter is the number of decimal places you would like to use.

### Variables

In addition to #field(...), the following variables can be used inside with #calc(...).

 

## Calculating Minimum and Maximum Field Attributes

URL: https://wsform.com/knowledgebase/calculating-minimum-and-maximum-field-attributes/

WS Form can calculate minimum and maximum field attributes of a series of fields.

WS Form can calculate minimum and maximum field attributes of a series of fields.

## Demo

## Variables

The calculations in the demo above are achieved using the following variables:

Variable
Description
Client-Side Example

#field_min_id(id, id[, id])
Returns the ID of the field that contains the lowest number.
#calc(#field_min_id(1, 2, 3))

#field_max_id(id, id[, id])
Returns the ID of the field that contains the highest number.
#calc(#field_min_id(1, 2, 3))

#field_min_label(id, id[, id])
Returns the label of the field that contains the lowest number.
#text(#field_min_label(1, 2, 3))

#field_max_label(id, id[, id])
Returns the label of the field that contains the highest number.
#text(#field_min_label(1, 2, 3))

#field_min_value(id, id[, id])
Returns the value of the field that contains the lowest number.
#calc(#field_min_value(1, 2, 3, 4))

#field_max_value(id, id[, id])
Returns the value of the field that contains the highest number.
#calc(#field_max_value(1, 2, 3, 4))

You must specify 2 or more field ID's for these variables to work.

If you use these variables in an action, such as Send Email, you should not include #calc or #text

## Campaign Monitor Integration

URL: https://wsform.com/knowledgebase/campaign-monitor/

The Campaign Monitor integration lets you push new subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new for…

The Campaign Monitor integration lets you push new subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

## Installation

The Campaign Monitor plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Campaign Monitor plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Campaign Monitor tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Campaign Monitor

In order to use the integration, you need to connect it to Campaign Monitor. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Campaign Monitor tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Campaign Monitor account, you can create a new account here.

## Creating a Form for Campaign Monitor

### Automatically

WS Form can create a form for any of our Campaign Monitor lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Campaign Monitor form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Campaign Monitor tab at the top of the page.

Click on any of your Campaign Monitor lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Campaign Monitor tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Campaign Monitor when a user saves or submits their form.

To add a Campaign Monitor action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Campaign Monitor List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Campaign Monitor action settings are as follows:

#### When Should This Action Run?

You can choose to run the Campaign Monitor action when the form is saved, submitted, or both.

#### Campaign Monitor List

Choose the Campaign Monitor List you would like subscribers to be added, updated or removed from. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Method

Select the Campaign Monitor method you would like to call when the action runs. Choose from:

Subscribe

Update

Unsubscribed

Delete

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Name Mask

The name mask determines how the name field for a subscriber is determined. We recommend using text field variable for this setting. For example:

#field(1)

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Campaign Monitor. For example you would want to map your Email field to the Email field in Campaign Monitor.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Campaign Monitor field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Campaign Monitor

As well as pushing form data with this integration, you can also retrieve subscriber data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a subscriber in Campaign Monitor.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Campaign Monitor from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Campaign Monitor fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Campaign Monitor template the field mappings will automatically be created for you. You can also map tags (Campaign Monitor interests).

## CaptchaFox Field

URL: https://wsform.com/knowledgebase/captchafox/

Adds EU-based, privacy-friendly CAPTCHA verification to help prevent spam for form submissions in WordPress.

The CaptchaFox field lets you add CaptchaFox CAPTCHA verification to your WordPress forms to help prevent spam and automated submissions. Because CaptchaFox is a privacy-friendly CAPTCHA service and reCAPTCHA alternative, it distinguishes human users from bots using interactive or invisible challenges.

WS Form Pro supports all current CaptchaFox display modes for WordPress spam protection. Specifically, you can choose from:

Inline

Popup

Hidden

## Demo

[ws_form id="13811"]

## Register Your WordPress Site with CaptchaFox

To use CaptchaFox in WordPress, you must first register your website. Then CaptchaFox can issue the keys required for verification.

Sign up for a CaptchaFox account

Register your website and, under “Choose your platform,” select JavaScript.

After you register your website, CaptchaFox provides two keys:

Site key

Secret key

You can enter these keys either in Global Settings or directly in the field settings (see below). As a result, CAPTCHA spam protection becomes active on your WordPress forms.

## Adding a CaptchaFox CAPTCHA Field to WordPress Forms

To learn how to add, edit, clone, move, resize, offset, or delete a CaptchaFox field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field. Click Save & Close or Save to apply your changes. To discard changes, click Cancel or select another form element to close the field settings sidebar.

### Basic

The Basic tab contains the settings most commonly used to configure this field.

#### Label

This is the label displayed alongside the field. You can enter a label here or double-click the field label directly in the editor. Use a clear, descriptive label such as Verification.

#### Show Label

If enabled, the label is shown on your form. Disable this option if you do not want the label to appear.

#### CaptchaFox Type

Select the desired CaptchaFox type from the dropdown. Depending on your selection, you will be prompted for the required configuration details.

#### Site Key

Enter the site key provided when you registered your website. You can also define a global site key for all CaptchaFox fields in Global Settings.

#### Secret Key

Enter the secret key provided when you registered your website. You can also define a global secret key for all CaptchaFox fields in Global Settings.

#### Mode

Select how the CaptchaFox challenge is displayed: Inline, Popup, or Hidden.

#### Theme

Visible modes support light and dark themes. Choose a theme that matches your site design.

#### Help

For visible modes you can enter help text to be shown alongside the field.

### Advanced

The Advanced tab contains additional settings for controlling how the field is displayed and behaves.

#### Styles

Use the Styles settings to customize the field’s appearance.

##### Vertical Alignment

Controls how this field aligns vertically relative to other fields in the same row:

Top

Middle

Bottom

#### Classes

WS Form allows you to add custom CSS classes to fields.

##### Field Wrapper

Add one or more CSS classes to the field wrapper. Field wrappers are HTML containers used to position fields on the page. Separate multiple classes with a space.

#### Restrictions

##### User Status

Choose which users can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you select Has User Role or Capability, additional options appear to choose specific roles or capabilities.

#### Localization

##### Language

Select the language used by CaptchaFox.

#### Validation

##### Show Invalid Feedback

Displays validation feedback when the form is submitted and the field fails validation. If enabled, the message appears below the field.

##### Invalid Feedback Text

WS Form automatically generates validation feedback for all fields. If this setting is left empty, the default text shown in light gray will be used. You can enter custom feedback text here if required.

WS Form variables can be used in this field.

#### Breakpoints

Breakpoint settings control the field width and offset (number of columns from the left side of the form or the previous field) at each responsive breakpoint. For more information, click here.

## Cart Detail Field

URL: https://wsform.com/knowledgebase/cart_price/

The e-commerce cart detail field is used to show cart level amounts such as the cart subtotal, shipping, and discount fields. These fields are optional.

The Cart Detail field is used to show cart-level amounts, such as the cart subtotal, shipping, and discount fields. These fields are optional.

Their location on a typical cart can be found below:

The following types of cart detail fields are available:

Subtotal - The total amount of all price subtotal fields

Shipping

Tax

Handling Fee

Discount - Learn more about creating a discount field

Shipping Discount

Insurance

Gift Wrap

Other

The cart total is calculated from the sum of all the cart detail fields. You are not required to put any cart detail fields on the form in order for the cart to calculate correctly.

Put the amount you want to charge for that detail in the Default Value setting of the field. WS Form variables can be use too.

For example, to charge 10% tax you could configure a Price Detail field as type Tax and then enter the following in the Default Value setting:

#calc(#ecommerce_cart_subtotal * 0.1)

## Adding a Cart Detail Field

To learn how to add, edit, clone, move, resize, offset, or delete a price subtotal field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Price Subtotal.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Text Align

This setting determines how the price will be aligned in the field. This defaults to Right for ease of reading, but you can change it to different justifications.

### Type

Select which type of cart detail field this is. Choose from:

Subtotal (the total amount of all price subtotal fields)

Shipping

Tax

Handling Fee

Discount

Shipping Discount

Insurance

Gift Wrap

Other

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Allow Negative Value

If negative amounts are permitted in this field, check this box.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as $1.00 for a currency field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the cart detail field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the minimum number that should be entered into the field in order for it to be valid. Leaving this blank will mean any minimum value can be entered. This can be any negative or positive number.

#### Maximum

This is the maximum value that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. This can be any negative or positive number.

#### Allow Negative Values

If negative amounts are permitted in this field, check this box.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Cart Total Field

URL: https://wsform.com/knowledgebase/cart_total/

The e-commerce cart total field allows you to show the overall cart total amount.

The Cart Total field allows you to show the overall cart total amount. This is the sum of all cart detail fields.

The cart total field is read-only and cannot be changed by the web user.

## Adding a Cart Total Field

To learn how to add, edit, clone, move, resize, offset, or delete a price subtotal field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Price Subtotal.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Text Align

This setting determines how the price will be aligned in the field. This defaults to Right for ease of reading, but you can change it to different justifications.

### Allow Negative Value

If negative amounts are permitted in this field, check this box.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the cart total field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Change Form Submission Limit Settings Using PHP

URL: https://wsform.com/knowledgebase/how-to-change-form-submission-limit-settings-using-php/

Sometimes you might want to change form settings dynamically using PHP prior to the form being rendered on your website.

Sometimes you might want to change form settings dynamically using PHP prior to the form being rendered on your website.

In this tutorial we show you how to change the form submission limit and message shown if that limit is exceeded using a simple PHP script. The script would typically reside in the functions.php file in your theme folder (always use the child theme for custom configuration if your theme allows it).

## Creating The Filter

First we are going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

You can learn more about this function by clicking here.

The tag we will use is a WS Form filter called:

wsf_pre_render_<form_id>

For example, to process the form_object for form ID 123, the tag would be:

wsf_pre_render_123

The second parameter provides WordPress with the callback function through which $form_object  will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function, in this case it is 2; $form_object and $preview.

The complete statement looks something like this:

add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

This filter is applied prior to the form being rendered.

## Creating The Callback Function

The callback function is a called by WordPress to filter the form.

Two parameters are passed to the callback function:

$form_object - A complete object containing the form itself.

$preview - Whether the form is being rendered in preview mode or not (We'll ignore this parameter in this tutorial).

Here is a simple example of the callback function:

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Do something with $form_object here
 // ...

 // Return the form object back to WS Form
 return $form_object;
}

As you can see, we return $form_object back to WS Form at the end of the function after making changes to it.

For the purpose of this tutorial we're going to edit two different meta values, one to set the form submission limit and another to change the message that is shown if the form submission limit is exceeded.

To edit the meta values we use the following code:

$form_object->meta->submit_limit_count = 5;

This changes the submit_limit_count property in the meta data to 5. You can set that to any value you wish.

$form_object->meta->submit_limit_message = __('Test message');

This changes the message shown if the limit is exceeded to read 'Test Message'. We'd recommend adding a domain to the __() function. Learn more here.

## Putting It All Together

The final code you would add to your functions.php file can be found below:

// Add a filter for form ID 123
add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Set limit to 5
 $form_object->meta->submit_limit_count = 5;

 // Change limit message (optional)
 $form_object->meta->submit_limit_message = __('Test message', 'ws-form');

 // Return the form object back to WS Form
 return $form_object;
}

## Change Required Field Indicators

URL: https://wsform.com/knowledgebase/change-required-field-indicators/

You can change field required indicators to use any HTML you wish.

WS Form uses the markup <strong class="wsft-text-danger">*</strong> to indicate required fields using an accessible friendly and high contrast tone of red. In the Styler this color can be found under Form > Color Palette > Danger. The same color is used for showing invalid feedback and field borders when a field is invalid.

This a commonly used method for indicating that a field is required. For improved accessibility, you may wish to change this to a word.

You can change this to anything you would like, such as small text. To do this:

Click the settings icon in the top toolbar when editing a form. The form settings sidebar will then appear on the right-hand side of the page.

Click the Styling tab.

In the Required Fields section, change the Custom Required HTML setting. For example, simply enter <small>Required</small> or if you are familiar with HTML you can enter anything else you wish here.

Click Save & Close.

## Change Tab Labels Using PHP

URL: https://wsform.com/knowledgebase/change-tab-labels-using-php/

Sometimes you might want to change a tab label dynamically using PHP prior to the form being rendered on your website.

Sometimes you might want to change a tab label dynamically using PHP prior to the form being rendered on your website.

In this tutorial we show you how to change a tab label using a simple PHP script. The script would typically reside in the functions.php file in your theme folder (always use the child theme for custom configuration if your theme allows it).

## Creating The Filter

First we are going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

The tag we will use is a WS Form filter called:

wsf_pre_render_<form_id>

For example, to process the form_object for form ID 123, the tag would be:

wsf_pre_render_123

The second parameter provides WordPress with the callback function through which $form_object  will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function, in this case it is 2; $form_object and $preview.

The complete statement looks something like this:

add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

This filter is applied prior to the form being rendered.

## Creating The Callback Function

The callback function is a called by WordPress to filter the form.

Two parameters are passed to the callback function:

$form_object - A complete object containing the form itself.

$preview - Whether the form is being rendered in preview mode or not (We'll ignore this parameter in this tutorial).

Here is a simple example of the callback function:

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Do something with $form_object here
 // ...

 // Return the form object back to WS Form
 return $form_object;
}

As you can see, we return $form_object back to WS Form at the end of the function after making changes to it.

For the purpose of this tutorial we're going to change the label of the first tab. Data about each tab is stored in an array called groups. Each group array element is an object. The label is stored in an object variable called label.

To edit the tab label we use the following code:

$form_object->groups[0]->label = 'New Tab Label';

## Putting It All Together

The final code you would add to your functions.php file can be found below:

// Add a filter for form ID 123
add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Change label of first tab (0 = First tab, 1 = Second tab etc)
 $form_object->groups[0]->label = 'New Tab Label';

 // Return the form object back to WS Form
 return $form_object;
}

## Changing a Field or Button Label with PHP

URL: https://wsform.com/knowledgebase/changing-a-field-or-button-label-with-php/

You can use WordPress filter hooks and WS Form functions to dynamically update the label of any field before a form is rendered.

You can use WordPress filter hooks and WS Form functions to dynamically update the label of any field or button before a form is rendered.

## Example Code

Here is example code for setting the label of the field with ID 321 in form ID 123. Add this code to your theme functions.php file or favorite code snippet plugin.

<?php

 // Add filter to change form ID 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Get field ID: 321
 $field = wsf_form_get_field($form, 321);

 // Change the field label
 $field->label = 'Your label here';

 // Return the form
 return $form;
 }

## Code Breakdown

### WordPress Filter

Before WS Form outputs a form, a WordPress filter named wsf_pre_render_{form_id} runs, where {form_id} is your form ID. WS Form provides a form object to this filter that you can modify.

Below is an example of using this filter:

<?php

 // Add filter to change form ID 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Your code here
 }

### Getting a Field

To update a field, use wsf_form_get_field($form, $field_id) where $form is the form passed through the filter and $field_id is the ID of the field you want to modify. This function returns the field settings.

### Changing the Field Label

To update the label of a field, set the label property of the field object. For example:

<?php

 // Add filter to change form ID 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Get field ID: 321
 $field = wsf_form_get_field($form, 321);

 // Change the field label
 $field->label = 'Your label here';

 // Return the form
 return $form;
 }

## Checkbox Field

URL: https://wsform.com/knowledgebase/checkbox/

The Checkbox field creates a list of tickable inputs.

The Checkbox field creates one or more square boxes on your form that can be checked.

## Demo

Learn more: Style Checkboxes

## Adding a Checkbox Field

To learn how to add, edit, clone, move, resize, offset, or delete a checkbox field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Enable Select All

When enabled, WS Form will show a Select All checkbox above the first checkbox. This enables users to select or deselect all checkboxes in a single click.

### Default Value

If a value is entered into this setting, the checkbox containing that value will be checked by default. Note that this value needs to be the checkbox value not the text shown for the checkbox.

Comma separated values can be entered into this setting. Values will be trimmed.

Other ways of setting the default value, include:

Select rows in the Checkboxes tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Layout

#### Orientation

Checkboxes can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the checkboxes to appear in.

If you select Grid, you can set a width for each checkbox at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you have more than one checkbox in your field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the checkbox field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### Minimum Checked

Enter a number in this setting to determine the minimum number of checkboxes that should be checked in order for this field to validate.

#### Maximum Checked

Enter a number in this setting to determine the maximum number of checkboxes that can be checked in order for this field to validate.

Note that this option is not available if Enable Select All is checked.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to checkbox fields that are within a repeatable section. It prevents the same checkbox from being checked across multiple repeatable section rows. For example, if you had a checkbox field with t-shirt sizes and selected Small in the first row, then the Small checkbox will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Checkboxes

Each checkbox is configured in this tab. Checkboxes are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a checkbox as selected, required, disabled, or hidden.  You can also wrap checkboxes in a fieldset which groups the checkboxes together. That fieldset can then be disabled.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the checkboxes shown by using the value of another field on your form. An example application of this feature would be to filter a list of checkboxes for vehicle models by another field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your checkboxes to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your checkboxes by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

## Clear Button

URL: https://wsform.com/knowledgebase/clear/

The clear button allows a website visitor to clear all of the fields on the form. In contrast to the reset button, all fields are cleared regardless of their d…

The Clear button allows a website visitor to clear all of the fields on the form.

## Demo

## Adding a Clear Button

To learn how to add, edit, clone, move, resize, offset, or delete a clear button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the clear button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the clear button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Clearing the Session Hash Using Conditional Logic

URL: https://wsform.com/knowledgebase/clearing-the-session-hash-using-conditional-logic/

This article explains how to clear a form’s session hash using conditional logic so users can start with a fresh form.

When a form is saved a session hash is generated. The session hash is used to later retrieve the contents of the form so that the user can continue completing the form where they left off. A session hash is also generated if an error occurs during form testing to prevent you from having to re-enter the data on the form.

Session hashes are made up of 32 characters and look like this: 9d7a83fd82c5ddf1d832cad2593c5845

If you want to delete the session hash and start with a fresh form, you can do so using conditional logic. For example:

IF [Button] [Clicked] THEN [Form] [Clear Session Hash]

Older versions of WS Form may use "Clear Session ID".

## Clearing the Session Hash Using the Debug Console

URL: https://wsform.com/knowledgebase/clearing-the-session-hash-using-the-debug-console/

This article explains how to clear a form’s session hash using the debug console.

When a form is saved a session hash is generated. The session hash is used to later retrieve the contents of the form so that the user can continue completing the form where they left off. A session hash is also generated if an error occurs during form testing to prevent you from having to re-enter the data on the form.

Session hashes are made up of 32 characters and look like this: 9d7a83fd82c5ddf1d832cad2593c5845

If you want to delete the session hash and start with a fresh form, you can do so from the debug console.

Ensure the debug console is open. Learn more.

In the debug console, click the Tools tab.

Click the Clear Session Hash icon.

## CleverReach Integration

URL: https://wsform.com/knowledgebase/cleverreach/

The CleverReach integration lets you push new subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new forms fr…

The CleverReach integration lets you push new subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

## Installation

The CleverReach plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the CleverReach plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the CleverReach tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to CleverReach

In order to use the integration, you need to connect it to CleverReach. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the CleverReach tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a CleverReach account, you can create a new account here.

## Creating a Form for CleverReach

### Automatically

WS Form can create a form for any of our CleverReach lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a CleverReach form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the CleverReach tab at the top of the page.

Click on any of your CleverReach lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the CleverReach tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to CleverReach when a user saves or submits their form.

To add a CleverReach action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a CleverReach List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The CleverReach action settings are as follows:

#### When Should This Action Run?

You can choose to run the CleverReach action when the form is saved, submitted, or both.

#### CleverReach List

Choose the CleverReach List you would like subscribers to be added, updated or removed from. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Method

Select the CleverReach method you would like to call when the action runs. Choose from:

Subscribe

Blacklist

Delete

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Double Opt-In

When checked, a double opt-in email will be sent to the recipient to confirm their subscriptions. This is useful for confirming a users email address as well as adhering to GDPR requirements.

You will also need to enter a CleverReach form ID to associate with the double opt-in with. Enter this in the Form ID setting, see below.

The following data will be sent to CleverReach as part of the double opt-in request:

Remote IP

Referrer

Agent

We recommend informing your website users that this information will be shared with CleverReach as part of your privacy policy.

#### Form ID

If you choose double opt-in you will be required to enter a form ID to associate it with. Learn how to find your form ID.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in CleverReach. For example you would want to map your Email field to the Email field in CleverReach.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding CleverReach field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a CleverReach field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source (e.g. #blog_name) to the source field in CleverReach.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding CleverReach attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using CleverReach

As well as pushing form data with this integration, you can also retrieve subscriber data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a subscriber in CleverReach.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose CleverReach from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the CleverReach fields to your form fields.

Select any choice fields you wish to map tags to (e.g. Select, Checkbox or Radio fields)

Click Save at the bottom.

Note that if you created your form using a CleverReach template the field mappings will automatically be created for you.

## Cloudflare Turnstile Field

URL: https://wsform.com/knowledgebase/turnstile/

This field is used to add a Cloudflare Turnstile Widget to your form.

This field is used to add a Cloudflare Turnstile widget to your WordPress form. Cloudflare Turnstile detects whether the user of a site is human using a privacy focussed, accessible widget that requires no interaction. Use the Cloudflare Turnstile widget to protect your form from unwanted spam.

## Demo

[ws_form id="13708"]

## Register Your WordPress Website with Cloudflare Turnstile

In order to use the Cloudflare Turnstile, you first need to create an Cloudflare account.

Sign up for a Cloudflare account

Once you have signed up, you need to create a turnstile widget for your WordPress website hostname.

Create a Cloudflare Turnstile Widget

Once you have created a widget, you will be provided with two keys:

Site key

Secret key

You can add these keys to the Global Settings under the Spam Protection tab. You can then add Cloudflare Turnstile fields to any form and only have to enter your keys once.

## Adding a Cloudflare Turnstile Field

To learn how to add, edit, clone, move, resize, offset, or delete a Turnstile field, please click here.

### Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Site Key

Enter the site key provided when you registered your website. You can also enter a global site key to use for all you Turnstile fields in global settings.

### Secret Key

Enter the secret key provided when you registered your website. You can also enter a global secret key to use for all you Turnstile fields in global settings.

### Theme

Visible Turnstile widgets are available in Auto, Dark or Light themes. Choose a theme that suits your website design.

Cloudflare Turnstile Configurations

### Size

Visible Turnstile widgets are available in Normal and Compact sizes. Choose a size that suits your website design.

Cloudflare Turnstile Widge Size

### Appearance

Visible Turnstile widgets are available in Always, Execute and Interactive Only appearance modes. Choose a mode that suits your website requirements.

Cloudflare Turnstile Appearance Modes

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example, if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Color Field

URL: https://wsform.com/knowledgebase/color/

The Color Picker field type lets a website visitor specify a color using a visual color-picker interface.

The Color field type lets a website visitor specify a color, either by using a visual color-picker interface or by entering the color into a text field in "#rrggbb" hexadecimal format.

## Demo

## Adding a Color Field

To learn how to add, edit, clone, move, resize, offset, or delete a color field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Color

The default color setting is used to set an initial color for the field on your form.

In basic mode simply click this setting and pick a default color.

In advanced mode you should enter a hex color reference, for example, #ff8800. WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the color field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Transform

#### Transform

The transform setting can be used to force the case of the characters that are entered in the field. For example, choosing Uppercase will convert any lowercase characters entered into the field to uppercase. There are four transform options:

Uppercase

Lowercase

Capitalize

Sentence

To see examples of how the transform options work, you can learn more by reading our Transform Strings knowledge base article.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

Hex color references should be entered as color suggestions.

## Combine First and Last Name Fields into a Full Name Field

URL: https://wsform.com/knowledgebase/combine-first-and-last-name-fields-into-a-full-name-field/

Using WS Form PRO variables or conditional logic you can easily create a full name field that is automatically updated when a user enters their first or last n…

Using WS Form PRO variables or conditional logic you can easily create a full name field that is automatically updated when a user enters their first or last name. This is useful if, for example, you have a third party system you need to push a full name field to but you still want to keep the first and last name fields separate for other purposes such as personalizing an email.

## Using Variables

Add text fields for the first and last name.

Add a text field for the full name (you can also make this at hidden field if you wish).

In the Default Value setting of the full name field, enter #text(#field(1)) #text(#field(2)) where 1 is the ID of the first name field and 2 is the ID of the last name field.

Click Save & Close.

## Using Conditional Logic

Add text fields for the first and last name.

Add a text field for the full name (you can also make this at hidden field if you wish).

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add icon.

Add the conditional logic as shown in the screenshot below, choosing the first, last and full name fields from your form.

Click Save & Close.

## CommandUI

URL: https://wsform.com/knowledgebase/commandui/

CommandUI is deeply integrated with WS Form, providing users with a seamless way to access and manage forms directly from the WordPress admin interface.

CommandUI is a powerful productivity tool for WordPress that allows you to quickly perform common administrative tasks using a simple command palette. It brings lightning-fast navigation, plugin management, content editing, and more to your fingertips without ever leaving your keyboard. Perfect for developers, power users, and anyone looking to streamline their workflow in WordPress.

CommandUI is deeply integrated with WS Form, providing users with a seamless way to access and manage forms directly from the WordPress admin interface. By pressing a simple keyboard shortcut, users can instantly open CommandUI and perform tasks like creating a new form, editing existing ones, duplicating, previewing, or even accessing WS Form settings.

## Installing CommandUI

You can download CommandUI from their website: https://commandui.com/

## Accessing WS Form Commands

When installed, typing ⌘+K (Mac) or Ctrl+K (Windows/Linux) will open CommandUI and using simple key combinations you can quickly access some of the most popular features of WS Form.

To access the WS Form specific commands, simply type:

ws

You can then filter the list by the form label. You can partially enter the form label so, for example, to filter commands for a form called Contact Us, you could simply type:

ws cont

To edit that form, type:​

ws cont edit

## Available Commands

CommandUI allows you to quickly access features such as:

Forms

Add

Edit

Preview

Style

View submissions

Copy shortcode

Styles

Add

Edit

Debug Console

Enable

Disable

Settings

Basic

Advanced

Styling

E-Commerce

License

System

Data

Spam Protection

Reporting

Variables

 

## Comment Management Integration

URL: https://wsform.com/knowledgebase/comment-management/

The Comment Management integration allows you to add comments to WordPress posts.

Post comments in WordPress allow visitors to engage with content by leaving feedback, asking questions, or sharing their thoughts directly on a post. Comments enhance user interaction, build community, and can contribute to SEO by keeping content fresh and engaging. Each comment typically includes the author’s name, email, and message, and can be moderated by administrators to prevent spam or inappropriate content.

The Comment Management integration allows you to add comments to posts. The integration comes with sample form templates to get you started.

## Installation

The Comment Management plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Comment Management plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Comment Management tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for Comment Management

### Automatically

To automatically create a Comment Management form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Comment Management tab at the top of the page.

Click on a form template.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

You should add forms that include the Comment Management action to pages on your website that contain a post, such as a blog article.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted as a post comment.

To add a Comment Management action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Comment Management from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click on the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Comment Management action settings are as follows:

#### When Should This Action Run?

You can choose to run the Comment Management action when the form is saved, submitted, or both.

#### Post ID

If this field is left blank, the form will use the post ID of the page it’s on. Alternatively, you can enter a specific post ID here if needed. WS Form variables can be used in this field.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Comment Management. For example you would want to map the Comment field on your form to the WordPress Comment field.

Tip: At minimum, you should map the Comment field. If a user is logged in, the Name and Email field mappings are not required. WS Form will automatically set those to the currently logged in user.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your Form Field.

In the right-hand column, select the corresponding Comment Field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Approved

If this setting is checked, new comments will automatically set as Approved and will appear on your website immediately.

If this setting is not checked, new comments will be set as Pending. The comment will need to be moderated prior to it being shown on your website.

#### Meta

WordPress comment metadata allows developers to store additional information about comments using the commentmeta table. Each comment can have multiple meta fields that store structured data beyond the default fields like author, email, and content.

To add a meta mapping:

Click the Add  icon at the bottom right of the meta section.

In the left-hand column, enter the Meta Key.

In the right-hand column, enter the Meta Value. WS Form variables can be used in this setting.

Repeat this process for each meta mapping.

Click the Save button at the bottom of the sidebar to save your changes.

#### Type

Optionally enter a comment type. Leave this blank for normal post comments.

## Remote IP and Agent Tracking

WordPress comments support storing the user's remote IP and agent.

To enable this feature you first need to enable remote IP and/or agent tracking.

Click the Form Settings icon at the top of the layout editor.

Click on the Tracking tab.

Check the Remote IP and/or Agent settings.

Click Save & Close.

## Conditional Logic

URL: https://wsform.com/knowledgebase/conditional-logic/

Conditional Logic provides a way for you to create dynamic forms that change according to the way a user interacts with your form.

Conditional Logic provides a way for you to create dynamic forms that change according to the way a user interacts with your form.

https://www.youtube.com/watch?v=TcvYmjMTbDQ

## Demo

An example of conditional logic might be that you might want to show a particular field or block of text if a checkbox field is checked. Or you might want to show a warning if a range slider is greater than 50%. The possibilities are endless.

## Other examples:

Automatically save the form progress when a Next tab button is clicked

Show shipping address fields is a Use separate shipping address checkbox is checked

Make the form turn green all required fields are complete and the form validates

Show an Almost there! message when a progress bar is equal to or great than 75%

Fire an email action if a user clicks a button

Push partial form completions to an email marketing connector such as Constant Contact or MailChimp

Show additional form fields if the hue of a color field exceeds a certain value

Fire JavaScript when a field is clicked on or changed

## Adding Conditional Logic

To add conditional logic to your form:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add icon.

## Conditional Logic and the Debug Console

The debug console logs all conditional logic activity in the Log tab.

## Conditional Logic Based on Day of the Week

URL: https://wsform.com/knowledgebase/conditional-logic-based-on-day-of-the-week/

This tutorial shows how to create conditional logic that checks the day of a week from a date field.

In this tutorial we will build a WordPress form that shows a message if a date chosen is on a Saturday or Sunday. This same methodology can be used to create any conditional logic that is based on the day of a week.

## Demo

## Tutorial

### Adding Fields

First we add three fields to the form. They are as follows:

Date / Time field

Number field (This could also be a hidden field)

Message field

The Date / Time field is used to select a date. The Number field will contain the day of the week. The Message field will contain the message shown if the day of the week is Saturday or Sunday.

## Setting the Number Field Default Value

The following is added to the Default Value setting of the Number field.

#text(#field_date_format(123, "N"))

This syntax is used to insert the day of a date field:

Breaking this down:

#text keeps the value updated dynamically. If the Date / Time field is changed, WS Form will update this value.

#field_date_format returns a formatted date for a particular field ID. In this tutorial the Date / Time field has an ID of 123 and "N" returns the day of the week from 1 (Monday) through 7 (Sunday).

## Creating the Conditional Logic

The following is an example of the conditional logic that will show the Message field if the chosen Date / Time is a Saturday or Sunday.

## Confirmation Fields

URL: https://wsform.com/knowledgebase/confirmation-fields/

Confirmation fields require users to verify an email address, password, or other text information that has been typed into a form.

Confirmation fields require users to verify an email address, password, or other text information that has been typed into a form. You can add as many confirmation fields as you need on your form using some simple conditional logic.

The tutorial below shows how to build a confirmation field.

## Demo

## Add Fields

First add two text based fields to you form. Fields you can use include:

Text

Email

Password

Tip: The Section Library has a password confirmation fields ready to use.

Simply add the two fields to your form using any layout you wish:

## Add Conditional Logic

Conditional logic is used to compare Field A with Field B. To add conditional logic to your form:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add icon to add a new row.

Enter a label for the row, for example: Compare Fields.

### The IF Statement

To compare Field A with Field B, you add the following for the IF statement:

The IF statement will be true if Field A and Field B do not match.

Below this you will then add the THEN and ELSE statements.

### The THEN and ELSE Statements

In this example we're going to do two things if the fields do not match:

Invalidate the field by setting the invalid feedback message on field B. We'll set the message to say Fields do not match.

Show the invalid feedback on field B.

When the fields do match, we'll do the following:

Remove the invalid feedback message on the field B.

Hide the invalid feedback on field B.

Invalid feedback on a fields is usually only shown on the form when the form is submitted. We can force a field to be invalid by using the Set custom validity method on a field and by adding a class of wsft-validated to the field wrapper.

The resulting THEN and ELSE statements in your conditional logic will therefore look as follows:

The completed conditional logic looks as follows:

You can use this same method to do anything else you wish when two fields do not match, for example instead of showing invalid feedback you should show a message field.

An advantage of using the method above is that it will invalidate fields so that other form functionality reliant on field validation will work correctly such as tab validation.

 

## Constant Contact Integration

URL: https://wsform.com/knowledgebase/constant-contact/

The Constant Contact integration lets you push new contacts, pull contact data, and create new forms from your lists in a single click on the add form page.

The Constant Contact integration lets you push new contacts using an action, pull contact data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

This knowledge base article relates to the Constant Contact V3 integration which uses version 3 of the Constant Contact API.

## Installation

The plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Constant Contact tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Constant Contact

In order to use the integration, you need to connect it to Constant Contact. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Constant Contact tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Constant Contact account, you can create a new account here.

## Creating a Form for Constant Contact

### Automatically

WS Form can create a form for any of your Constant Contact lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Constant Contact form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Constant Contact tab at the top of the page.

Click on any of your Constant Contact lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Constant Contact tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Constant Contact when a user saves or submits their form.

To add the action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Constant Contact List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The action settings are as follows:

#### When Should This Action Run?

You can choose to run the action when the form is saved, submitted, or both.

#### Constant Contact List

Choose which list to assign the contact to.

Additional List Memberships

Constant Contact supports assigning contacts to more than one list. You can assign a contact to additional lists by using this setting.

To add a list to assign the contact to:

Click the Add  icon at the bottom right of the Additional List Memberships setting.

Choose an additional list.

Repeat this process for each list you want the contact to be assigned to.

Click the Save button at the bottom of the sidebar to save your changes.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Constant Contact. For example you would want to map your Email field to the Email field in Constant Contact.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Constant Contact field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Constant Contact field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source hidden field to a custom field in Constant Contact.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Constant Contact field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tags are labels you create to help organize your contacts. You can add any number of tags to a contact.

Tags are identified by a unique ID. The easiest way to obtain those IDs is to create a form using the Constant Contact form template under Add New.

Tags are set by mapping a select, checkbox or radio field containing tag values. To map a tag field:

Click the Add  icon at the bottom right of the tags section.

Choose the field on your form to map.

Repeat this process for each field.

Click the Save button at the bottom of the sidebar to save your changes.

#### If Duplicate Found

When a duplicate contact is found with a matching email address you can determine how WS Form should deal with that condition:

Do nothing

Update

Halt (Stops further actions from running)

#### Merge Lists

If Update is chosen under If Duplicate Found, you can check this setting to merge the lists assigned to the contact if an update occurs. If unchecked, the lists assigned to the contact will be replaced.

#### Merge Tags

If Update is chosen under If Duplicate Found, you can check this setting to merge the tags assigned to the contact if an update occurs. If unchecked, the tags assigned to the contact will be replaced.

## Populate Forms Using Constant Contact

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Constant Contact.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Constant Contact from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Constant Contact fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Constant Contact template the field mappings will automatically be created for you.

## Control Actions With Conditional Logic

URL: https://wsform.com/knowledgebase/control-actions-with-conditional-logic/

It is possible to control when WS Form PRO actions run by using conditional logic.

By default an action will run when a form is submitted or saved. It is also possible to control when actions run by using conditional logic. This enables you to do the following when a condition is true (or not true):

Run an action when the form is submitted or saved

Do not run an action when the form is submitted or save

Run an action immediately

You can choose any action you wish for these scenarios, such as sending an email, pushing data to an email marketing service, pushing a message to a Slack channel or even running a WordPress hook. The possibilities are endless!

## Demo

Choose a tab below to see how to set up each of these scenarios:

## Run on Submit / Save

In this example we will show you how to run an action when a condition is met and the form is submitted.

Click the Conditional Logic icon at the top of the layout editor.

Create an IF condition that, when true, will enable the action. In this example, we'll enable the action when a radio with the label Radio 1 is checked:

In the THEN statement, select the action you want to run when the form is submitted. In this example we choose an action called Send Email (Option 1) to be enabled when the form is submitted. You can also choose to enable the action when the form is saved.

In the ELSE statement select the same action and set it to Do not run when form submitted. This will disable the action when the IF condition is false.

Click Save & Close.

## Do Not Run on Submit / Save

In this example we will show you how to not run an action when a condition is met and the form is submitted.

Click the Conditional Logic icon at the top of the layout editor.

Create an IF condition that, when true, will disable the action. In this example, we'll disable the action when a radio with the label Radio 1 is checked:

In the THEN statement, select the action you want to disable when the form is submitted. In this example we choose an action called Send Email (Option 1) to be disabled when the form is submitted. You can also choose to disable the action when the form is saved.

In the ELSE statement select the same action and set it to Run when form submitted. This will enable the action when the IF condition is false.

Click Save & Close.

## Run Immediately

In this example we will show you how to immediately run an action when a condition is met.

Click the Conditional Logic icon at the top of the layout editor.

Create an IF condition that, when true, will immediately run the action. In this example, we'll run the action when a radio with the label Radio 1 is checked:

In the THEN statement, select the action you want to run immediately. In this example we choose an action called Send Email (Option 1) to be run. You can also choose to run the action when the form is saved.

Click Save & Close.

## Conversational Forms

URL: https://wsform.com/knowledgebase/conversational-forms/

Conversational forms present each form section to the user in turn instead of showing the entire form at once.

Conversational forms present questions one-by-one instead of showing the entire form at once. This makes completing the form easier, improving conversion rates and user satisfaction. They are presented as a full screen form on a dedicated page, allowing for larger, easier to read fields.

## Demo

To view a demo of a conversational form, visit: https://wsform.com/conversational/

## Features

Conversational forms have the following features:

Add unlimited sections and fields to your form.

No integrations or coding required.

Fully customizable colors, fonts and layouts.

Enqueue your own CSS for advanced styling.

Compatible with conditional logic, calculated fields and variables.

Fully integrated with WS Form actions.

Fully mobile responsive.

## A Few Rules

Conversational forms require forms to be developed in a certain way to work correctly.

The WS Form framework must be used. Conversational forms are not compatible with Bootstrap or Foundation frameworks.

Sections should be 100% width.

Tabs should not be used.

For date fields, we recommend using the Inline setting.

Conversational forms cannot be embedded onto other pages. The form is located on a dedicated URL to allow for a full page format.

## How It Works

Each section of your form becomes a step in your conversational form and each section can contain any number of fields. We recommend keeping each section to one or two fields for an optimum user experience.

Conversational forms reside on a full website page at a permalink determined by you.

## Getting Started

To help you get started we have created a Conversational form template. You can find it here:

Click on WS Form in the WordPress administration menu.

Click Add New.

Click on the Survey tab, then choose the Conversational template.

This will create form that contains an introductory section and a selection of section examples that you can customize to your own preference.

## Enabling Conversational on an Existing Form

The conversational form feature is disabled by default. To enable it:

Click the form settings icon at the top of the layout editor when editing a form.

Click the Conversational tab.

Check the Enable setting.

Click Save.

## Previewing the Form

You can preview the conversational form by clicking the Preview button in the conversation tab. If you have Live Preview enabled in Global Settings, the preview will automatically update as you edit your form.

## Permalink

Once enabled, WS Form will create a permalink for your conversational form. By default, the permalink is:

https://yourwebsite.com/wsft-conversational-form-123/

... where 123 is the ID of your form.

You can customize the permalink as follows:

Click the form settings icon at the top of the layout editor.

Click the Conversational tab.

Enter any slug you wish into the URL Slug setting.

Click Save.

Be sure not to enter an existing slug used by another page or post.

Your form must be published in order to be seen at the permalink.

## Setting Section Heights

You can set any sections of the conversational form to have a height of 100% so that it fills the screen completely. This is useful for an introductory section such as is found in the Conversational form template (see Getting Started above) or for providing an effect where you only ever see one section at a time.

To set a section height:

Hover your mouse over a section.

Click the section settings icon.

Click the Advanced tab.

Check the Full Height (Conversational) checkbox.

Click Save.

## Customizing Appearance

To customize the appearance of your conversational form you can either use the WordPress customizer, or enqueue your own CSS file.

### Customizer

To access the customizer feature:

Click the form settings icon at the top of the layout editor.

Click the Conversational tab.

Click Customize.

Use the WordPress customize feature to change colors, fonts and layout settings.

Click Publish to save your changes.

### Enqueue Your Own CSS

To enqueue your own CSS, you can use the wsf_conversational_enqueue_styles action.

Sample code this can be found below:

// Callback function for the wsf_conversational_enqueue_styles action hook
function my_hook_function() {

 // CSS file URL
 $css_file_url = sprintf( '%s/conversational-form.css', get_bloginfo( 'template_directory' ) );

 // Enqueue CSS file
 wp_enqueue_style( 'conversational-form', $css_file_url );
}

// Add a callback function for the wsf_conversational_enqueue_styles action hook
add_action( 'wsf_conversational_enqueue_styles', 'my_hook_function', 10, 0 );

## Navigation

By default, conversational forms have a navigation bar shown at the bottom of the page. It includes a progress bar and navigation icons for moving up and down the sections. The progress is determined by the number of required fields that have been completed.

The Conversational tab in Form Settings has the following settings for the navigation bar:

### Enable

Uncheck this option if you wish to remove the navigation bar from the conversational form.

### Progress Help

This setting enables you to add smaller text under the progress bar. By default it shows he progress as a percentage, e.g. 25%.

The following variables can be inserted into this field:

Progress

#progress
The form progress represented as a number from 0 to 100.

#progress_percent
The form progress represented as a percentage from 0% to 100%.

#progress_remaining
The remaining form progress represented as a number from 100 to 0.

#progress_remaining_percent
The remaining form progress represented as a percentage from 100% to 0%.

Other WS Form variables can also be entered into this field.

### Scroll Duration (ms)

Use this setting to configure the time it takes to vertically scroll between sections. This value defaults to 300ms.

## Conversion Bridge

URL: https://wsform.com/knowledgebase/conversion-bridge/

Learn how to track WS Form submissions as conversions using Conversion Bridge with a simple, no-code setup.

Conversion Bridge is a WordPress plugin that enables conversion tracking without the need for manual scripts, tags, or complex configuration. It connects your website, including WS Form, directly to analytics and advertising platforms such as Google Analytics, Google Ads, Meta Ads, and more.

By automatically sending form submissions and other user actions as conversion events, Conversion Bridge provides accurate, real-time tracking while simplifying setup and ongoing maintenance.

This guide explains how to track WS Form submissions as conversions using Conversion Bridge.

## Prerequisites

Before configuring your form, you must install and activate the Conversion Bridge plugin.

Download the Conversion Bridge plugin from: https://conversionbridgewp.com

Install and activate the plugin in WordPress

Configure your desired integrations, such as Google Analytics, Google Ads, or Meta Ads, in Conversion Bridge settings

## Adding Conversion Tracking to a WS Form

Follow these steps to track form submissions as conversions:

### 1. Edit Your Form

Open your form in WS Form.

### 2. Open the Actions Panel

Click the Actions   icon at the top of the form layout editor.

### 3. Add the Conversion Bridge Action

Click the Add Action icon.

Select Conversion Bridge.

### 4. Configure the Action (Optional)

You can optionally configure the following fields:

Label
A name for the conversion event

Value
A numeric value associated with the conversion

Conversion Data
Key/value pairs to send additional data

### 5. Save & Publish the Form

Save and publish your form to apply the changes.

Form submissions will now be sent to Conversion Bridge as conversion events.

## Sending Custom Data

You can pass additional data using the Conversion Data setting.

Use key/value pairs

WS Form variables can be used for dynamic values

Example:

plan = #field(123)

source = contact_form

## Enhanced Conversion Data

Conversion Bridge supports enhanced conversion data.

You can include fields such as:

_email

_first_name

_last_name

_phone

Ensure compliance with applicable privacy regulations when sending personal data.

## Conversion Tracking Action

URL: https://wsform.com/knowledgebase/conversion-tracking/

The Conversion Tracking action allows you to fire conversion tags for Google Analytics and other analytics events.

The Conversion Tracking action allows you to fire conversion tags for:

Google Tag Manager (Data Layer)

Google Analytics

Fathom Analytics

Facebook (Standard)

Facebook (Custom)

LinkedIn (Insight Tag)

## Adding a Conversion Tracking Action

To add a Conversion Tracking action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select Conversion Tracking from the Action pulldown. A series of settings will appear.

The Conversion Tracking action settings are as follows:

### When Should This Action Run?

You can choose to run the WordPress hook when the form is saved, submitted, or both.

### Type

Select the type of hook you would like to run:

Google Tag Manager (Data Layer)

Google Analytics

Fathom Analytics

Facebook (Standard)

Facebook (Custom)

LinkedIn (Insight Tag)

#### Google Tag Manager (Data Layer)

In order to fire a Google Tag Manager event, you need to install a GTM tag on your site.

The Google Tag Manager settings for the Conversion Tracking action are as follows:

SettingDescription

Data Layer VariablesYou can add any number of variables to the data layer for the event. You can enter straight text or use a WS Form variable in the value. For more information about WS Form variables, click here.

#### Google Analytics (gtag, ga or _gaq)

In order to fire a Google Analytics event, you need to install a Google Analytics tag on your website.

The Google Analytics settings for the Conversion Tracking action are as follows:

SettingDescription

Event Category
A category is a name that you supply as a way to group objects that you want to track. Typically you will use the same category name multiple times over related UI elements that you want to group under a given category.

For example: Form - #form_label

Event Action (Optional)
Typically you will use the action parameter to name the type of event or interaction you want to track for a particular web object.

For example: Submitted

Event Label (Optional)
With labels you can provide additional information for events that you want to track.

For example: Contact Us

Event Value (Optional)(Numeric)
Value differs from the other components in that it is an integer rather than string, so use it to assign a numerical value to a tracked page object.

For example: the perceived value of a lead in dollars, such as 123.

Data Layer VariablesYou can add any number of variables to the data layer for the event. You can enter straight text or use a WS Form variable in the value. For more information about WS Form variables, click here.

You can enter straight text or use a WS Form variable in these settings. For more information about WS Form variables, click here.

#### Fathom Analytics

SettingDescription

Event NameEnter a Fathom event name. Event names can be anything, but most importantly, they need to be something you (and your team) can easily and instantly recognize so you know what each event conversion means. Learn more

CentsOptionally enter a value in cents. 100 = $1.

Site IDOptionally enter a site ID to attribute the event to that specific site.

You can enter straight text or use a WS Form variable in these settings. For more information about WS Form variables, click here.

#### Facebook (Standard)

In order to fire a Facebook Tracking Pixel event, you need to install a Facebook Tracking Pixel on your website.

The Facebook (Standard) settings for the Conversion Tracking action are as follows:

SettingDescription

Event NameSelect the event name you want to fire. For more information on these events, click here.

Object Properties (Optional)You can add any number of object properties to the event. For more information on these object properties, click here.

You can enter straight text or use a WS Form variable in these settings. For more information about WS Form variables, click here.

#### Facebook (Custom)

In order to fire a Facebook Tracking Pixel event, you need to install a Facebook Tracking Pixel on your website.

The custom Facebook option allows you to manually type in the event name and specify each object property yourself as key value pairs.

The Facebook (Custom) settings for the Conversion Tracking action are as follows:

SettingDescription

Event NameEnter the event name you want to fire. For more information, click here.

Object Properties (Optional)You can add any number of object properties to the event. For more information, click here.

You can enter straight text or use a WS Form variable in these settings. For more information about WS Form variables, click here.

#### LinkedIn (Insight Tag)

In order to fire a LinkedIn conversion event, you need to install a LinkedIn InSight Tag on your website.

The LinkedIn (InSight Tag) settings for the Conversion Tracking action are as follows:

SettingDescription

Conversion IDEnter the conversion ID want to fire.

## ConvertKit Integration

URL: https://wsform.com/knowledgebase/convertkit/

The ConvertKit integration lets you add subscribers to forms, sequences and tags.

The ConvertKit integration lets you add subscribers to forms, sequences and tags. Create new forms the automatically include your custom fields and tags in a single click.

## Installation

The ConvertKit plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the ConvertKit plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ConvertKit tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to ConvertKit

In order to use the integration, you need to connect it to ConvertKit. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ConvertKit tab at the top of the page.

Enter your API key which can be found on your ConvertKit Account Info page.

Click Save Settings,

If you do not have a ConvertKit account, you can create a new account here.

## Creating a Form for ConvertKit

### Automatically

WS Form can create a form for any of your ConvertKit forms in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a ConvertKit form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the ConvertKit tab at the top of the page.

Click on any of your ConvertKit forms.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your form does not appear, click the refresh icon in the ConvertKit tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to ConvertKit when a user saves or submits their form.

To add an ConvertKit action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to ConvertKit from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The ConvertKit action settings are as follows:

#### When Should This Action Run?

You can choose to run the ConvertKit action when the form is saved, submitted, or both.

#### ConvertKit Form

Choose the ConvertKit Form you would like the subscriber to be added to. If you have created a new form since viewing this screen, you can click the refresh icon to retrieve the new list.

#### ConvertKit Sequence (Optional)

Choose the ConvertKit Sequence you would like the subscriber to be added to. If you have created a new sequence since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in ConvertKit. For example, you would want to map your Email field to the Email field in ConvertKit.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding ConvertKit field. If you added any custom fields they will be shown here too.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to push custom values (including WS Form variables) to ConvertKit fields.

To create a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter the value you would like to map to a ConvertKit field.

In the right-hand column, select the corresponding ConvertKit field. If you added any custom fields they will be shown here too.

Repeat this process for each ConvertKit field.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to tags in ConvertKit.

To map a field:

Click the Add  icon at the bottom right of the tag mapping setting.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapping fields need to be a choice field, such as Select, Checkbox, or Radio fields. The values should be the corresponding tag IDs found in ConvertKit.

If you use the automatic method above, WS Form PRO will automatically build interest mapping options for you.

#### Tag Assignment

You can also choose which tag to assign the subscriber to using this setting.

To assign a tag:

Click the Add  icon at the bottom right of the tag assignments setting.

Choose a tag.

Repeat this process for each tag you want to assign to the subscriber.

Click the Save button at the bottom of the sidebar to save your changes.

 

## ConvesioPay Integration

URL: https://wsform.com/knowledgebase/convesiopay/

The ConvesioPay integration allows you to accept credit card payments from your forms.

Note: You must serve the page containing the payment form over HTTPS. In short, the address of the page containing ConvesioPay must start with https:// rather than just http://. For more information, click here.

The ConvesioPay integration allows you to accept credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

## How it Works

The ConvesioPay payment process works as follows:

Customer enters their credit card details on the form.

The credit card details are sent to ConvesioPay client-side and are securely tokenized.

If tokenization is successful (e.g. the card number is correct), the form is submitted.

A payment is created server-side using the token.

If the card payment is successful, the rest of the action configured on the form are run.

If the card payment is not successful, an error is shown on the form.

New payments will have a transaction status of Pending.

When the payment clears the transaction status will update to Succeeded.

## Register For ConvesioPay

If you do not yet have a ConvesioPay account, register for a new account.

## Installation

The WS Form ConvesioPay plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the ConvesioPay integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ConvesioPay tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Configuring ConvesioPay

### Obtaining ConvesioPay API Keys

In order to use the ConvesioPay fields on your form, you first need to enter your ConvesioPay keys.

To obtain your API keys:

Log in to your ConvesioPay account.

From your Dashboard, click Advanced Settings.

Under Checkout API Settings, there are three keys you will need to obtain:

API Key (Click: Get Your API Key).

Secret Key (Click: Generate a Secret Key).

Client Key (Click: Generate Client Keys).

Each account in ConvesioPay is either a test or live environment. Ensure you set the Environment setting to match the environment you currently want to use when submitting your form.

### Entering Your API Keys

To enter your publishable keys:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ConvesioPay tab at the top of the page.

Enter your test or live keys.

Click the Save button.

### Configuring the Webhook

The webhook accepts requests from ConvesioPay to update transaction information such as the status (e.g. if a Pending transaction is changed to Succeeded). Status updates will not occur unless the webhook is configured.

To set up the webhook:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the ConvesioPay tab at the top of the page.

You will see four webhook values:

Webhook Name

Webhook Integration Name

Webhook Signature (A signature is automatically generated for you, but you can change it prior to setting up the webhook if you wish)

Webhook URL

Keeping the WS Form settings page open, open a new tab and go to your ConvesioPay dashboard.

Click on Advanced Settings.

Under Checkout API Settings, click on Register Webhooks.

Copy and paste the four settings above into the Register Webhooks fields.

Click Register Webhook.

## Form Templates

WS Form provides two form templates that you can use to get started. To use one of the templates:

Click on Add New from the WS Form admin menu.

Click on the ConvesioPay tab.

Choose the Basic or Advanced ConvesioPay template.

You can add any other fields you wish to these templates.

## ConvesioPay Fields

The ConvesioPay fields appear under the E-Commerce section of the Build when editing a form. Two fields types are added:

ConvesioPay - The user enters their credit card details here.

ConvesioPay Submit - The user clicks this to submit their credit card details.

You can place the ConvesioPay and ConvesioPay Submit fields anywhere you like on the form.

## Form Suggestions

If you are manually adding the ConvesioPay fields to your form, here are a few suggestions:

Enable the Loader. This will ensure users are aware their transaction is processing.

Ensure you use the ConvesioPay Submit field instead of the regular Submit button.

You can use the #convesiopay_transaction_id WS Form variable in the Show Message action or other integrations.

## Settings

The majority of the settings are found in the ConvesioPay field settings. To access the settings sidebar, click the settings icon on the ConvesioPay field.

The ConvesioPay Submit field acts like a regular custom button field type. Please refer to that field type for more information about the settings.

The ConvesioPay field settings are split into Basic and Advanced tabs in the sidebar as are detailed below:

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown above the credit card entry field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Credit or Debit Card.

### Render Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Label Position

There are five options you can choose from for positioning your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the Form Settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks, some label positions may not be available.

### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

### Hidden

If checked, the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Transaction

#### Amount To Charge

By default this field is blank, and the ConvesioPay button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

#### Currency

ConvesioPay currently supports US Dollars.

#### Payment Reference

Enter a payment reference for the transaction. This defaults to WSF-#submit_id.

WS Form variables can be entered into this field.

#### Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

The description is shown in a single line item for the transaction.

### Customer

#### Name

Use this field to specify the name of the payer.  If you have text fields for first and last names, you would enter something such as:

#field(1) #field(2)

WS Form variables can be entered into this field.

#### Email

Choose an email field from your form to use for the payer's email address.

#### Pass User to Component

If checked, WS Form will use the currently logged in users email address to identify the custom completing the payment form. This allows ConvesioPay to show stored payment methods on the form.

#### Billing Address Mapping

Use the billing address mapping option to specify which fields on your form relate to the different parts of the billing address.

To map your form fields to ConvesioPay billing address fields:

Click the Add  icon at the bottom right of the billing address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding ConvesioPay billing address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Shipping Address Mapping

Use the shipping address mapping option to specify which fields on your form relate to the different parts of the shipping address.

To map your form fields to ConvesioPay shipping address fields:

Click the Add  icon at the bottom right of the shipping address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding ConvesioPay shipping address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Language

Choose a language to display the credit card form in. Choose Auto Detect to use the browser locale.

## Advanced

### Styles

Use the Styles settings to change the design of the credit card entry field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Transaction

#### Zero Amount

You can configure how WS Form should handle zero amounts for ConvesioPay buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

#### Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

### Messages

#### Error Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the Show Message action. You can configure these options to change how the error messages are displayed to users.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when the credit card information entered is not valid, or if a transaction fails. If this setting is checked, invalid feedback is shown under the field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Variables

The ConvesioPay integration introduces additional variables that you can use in actions such as messages and emails.

## Cookies

URL: https://wsform.com/knowledgebase/cookies/

Cookies are small text files stored in a web user's browser.

Cookies are small text files stored in a web user's browser.  The cookies used by WS Form contain no identifiable information and are used to personalize a users experience when completing forms.

## Cookie Settings

To access the cookie settings:

Click on WS Form from the WordPress admin menu.

Click on Settings.

Click on the Advanced tab.

The cookie settings are as follows:

### Cookie Timeout (Seconds)

This setting determines how long a cookie will stay valid (session duration). The default value is 28 days (2419200 seconds).

### Cookie Prefix

This setting determines what the prefix of the cookies will be. This defaults to ws_form.

## Filter Hook

If you want to set the cookie expiry dynamically, you can use this PHP filter hook: wsf_cookie_expiry

## Cookie Descriptions

All cookies are session based and are not persistent.

The following cookies are created and used by WS Form.

### Save Form Hash

[cookie_prefix]_[form_id]_hash

Example: ws_form_1_hash

This preference cookie is used to anonymously recall form data if the form Save feature is used.

This cookie is only set if the Enable Save Cookie setting is enabled in Settings. This setting is enabled by default.

This cookie is cleared when the form is submitted or it expires.

### Tab Index

[cookie_prefix]_[form_id]_tab_index

Example: ws_form_1_tab_index

This preference cookie is used to anonymously remember the last tab someone accessed for a particular form.

This cookie is only set if the Remember Last Tab Clicked setting is enabled in Form Setting. This setting is enabled by default.

This cookie is cleared when it expires.

### Duration

[cookie_prefix]_[form_id]_date_start

Example: ws_form_1_date_start

This statistics cookie is used to anonymously determine how long it has taken for a user to complete the form. It stores the date of when the form was first shown. The duration is shown when a submission is view on the Submissions page.

This cookie is only set if the Duration tracking setting is enabled in Form Setting. This setting is enabled by default.

The cookie is cleared when the form is submitted or it expires.

 

## Create a Contact Form in WordPress

URL: https://wsform.com/knowledgebase/how-to-create-a-contact-form-in-wordpress/

In this tutorial, we’ll show you how to create a contact us form for WordPress using WS Form.

In this tutorial, we’ll show you how to create a contact us form in WordPress using  WS Form. You'll learn how to create, preview and publish your form.

https://www.youtube.com/watch?v=yALv5Ssb5NM

To get started, we’re going to install a form builder plugin for WordPress. I’m going to be using WS Form in this tutorial.

To install the plugin, we need to login to the WordPress admin. To do this, we go to our website address with wp-admin added to the end.

Next we enter our username and password and then click Log In.

Once the WordPress Dashboard is shown, click on Plugins and then click Add New.

Next, let’s search for WS Form.

Click Install Now to install the plugin and then click Activate.

You’ll now see WS Form in the WordPress admin menu. To create our first form, lets click on Add New. You can either do this from the WordPress Administration menu, or you can use the toolbar menu at the top of the page.

The first time we use WS Form, it’s going to ask you a few questions to personalize your experience. In this tutorial, we’ll choose the Keep It Simple option.

WS Form shows a brief introductory video that explains how to build your first form. It’s a helpful video that shows you how to use the layout editor and preview forms.

Next, we click Get Started.

WS Form comes with various templates to help get you started.

You can also install integrations for third party integrations such as MailChimp, Salesforce and Slack. When you do that, additional templates are made available.

For this tutorial, we’re going to use the Contact Us template. Let’s click that template to build our form.

So, as you can see, WS Form has built a form for us in the layout editor. It has added the normal fields you would expect to see on a contact form plus a GDPR compliance checkbox for requesting consent.

To preview the form, let’s click on the Preview button at the top of the layout editor.

WS Form shows us the form in your website theme so that you can test it. Let’s complete the form and submit it.

If we go back to the layout editor tab, we can click Submissions to view the form we just submitted. The nice thing about the free version of WS Form is that the ability to see your form submissions within WordPress is included.

Now, you might want to change the email address that your form submissions are sent to. To do this, we’ll click on the Edit button at the top of the page to get back to the layout editor.

Then we’ll click the Actions icon . It’s the icon with a lightning bolt on it.

So, what are actions? Well, actions run whenever a form is submitted and you can add as many of them as you like. For example, you could can show a thank you message or redirect to different web page. As you can see, WS Form has already added a Send Email action, so let’s edit that.

Click the settings icon . Then, under the To section we can change the address that the email notification is sent to.

Then click the Save & Close button.

Let’s also add another field to the form to request a company name. To do this you simply drag and drop a text field from the Build to the form.

Once you have added it you can immediately rename the field then type Return to save it.

Because we made a change to the form, our preview tab has been automatically updated and we can immediately test the form again.

Now that we’ve created a form, we need to add it to a page on our website.

Before adding the form, we need to click the Publish button in the layout editor. This makes any changes we have made to the form public.

Now that the form is ready, let’s create a new Contact Us page for our form. To do this, click on Add New under Pages in the WordPress menu.

Give the page a title, and then click on the Add icon to add a block to our page. Search for WS Form and click on the icon to add the block.

Now we need to choose the form we just created from the side menu. You’ll notice that a preview of the form is shown in the WordPress editor.

The last step is to click Publish on the page itself and then we can click View Page to view our new web page.

In addition to adding forms using a block, you can also use a WordPress shortcode, Widget or you can use the WS Form module in visual editors such as Beaver Builder, Divi and Elementor.

And that’s how easy it is to create a contact form in WordPress using WS Form!

## Create a Copy to Clipboard Button

URL: https://wsform.com/knowledgebase/create-a-copy-to-clipboard-button/

With WS Form's powerful conditional logic, you can easily create a Copy to Clipboard button that allows users to copy the value of any text-based field on your…

With WS Form's powerful conditional logic, you can easily create a Copy to Clipboard button that allows users to copy the value of any text-based field on your form.

## Demo

## Compatible Field Types

You can copy text from the following field types:

Text

Text Area

Number

Phone

Email

URL

Date/Time

Color

## The Conditional Logic

Here is an example of the conditional logic used to create the above demo.

IF [Button] [Clicked]

THEN [Text Field] [Copy to Clipboard]

Optional to show successful copy: THEN [Button] [Set Label] "Copied!"

## Create a Custom Integration with WS Form

URL: https://wsform.com/knowledgebase/create-a-custom-integration-with-ws-form/

Learn how to create custom integrations with WS Form using webhooks, WordPress hooks, automation platforms like Make and Zapier, and custom validation hooks.

WS Form includes over [ws_form_total_integrations] integrations with popular third-party services, including email marketing platforms, CRMs, automation tools, payment gateways, spreadsheets, cloud storage platforms, and more.

If the service you want to connect to is not natively supported, you can still create a custom integration using the extensibility features built into WS Form.

This article explains the best ways to create a custom integration with WS Form, including webhooks, WordPress hooks, automation platforms, integration integrations, and custom validation hooks.

## Custom Integration Options

The main options for creating a custom integration are:

Webhook action

Run WordPress Hook action

Make integration

Zapier integration

For validation integrations, you can also use:

wsf_submit_field_validate

wsf_submit_validate

## Option 1: Use the Webhook Action

The Webhook action is often the best place to start when you want to send WS Form submission data to an unsupported third-party service.

A webhook allows WS Form to push form submission data to a URL endpoint using HTTP request methods such as POST, GET, PUT, DELETE, or PATCH.

### When to Use a Webhook

Use the Webhook action when the service you want to connect to provides an endpoint that can receive data.

Common use cases include:

Push a form submission to a custom endpoint

Push a form submission to a third-party service that WS Form does not natively integrate with

Make a request to an API and use returned data to populate form fields

Pre-load a form with statistical data from an endpoint

Create lookup functionality, such as a vehicle VIN lookup

Send leads, enquiries, orders, or registrations to an external system

### Webhook Configuration

When configuring the Webhook action, you can choose when the action should run, enter the endpoint URL, choose the request method, and select the content type.

Supported request methods include:

POST

GET

PUT

DELETE

PATCH

Supported content types include:

JSON

URL encoded

### Field Mapping

The Webhook action uses Field Mapping to control which form fields are sent to the endpoint.

For each field mapping, you select a field from your form and enter the key name that should be used in the request data.

Example field mappings might include:

Name field mapped to name

Email field mapped to email

Phone field mapped to phone

Company field mapped to company

You can use simple key names, such as first_name, or more advanced key names using dot notation, such as person[0].name.first.

### Custom Mapping

Custom Mapping lets you send additional key and value pairs to the endpoint.

This is useful if you need to send static values, WS Form variables, tracking values, hidden values, or other data that is not directly mapped from a single form field.

### Header Mapping

Header Mapping lets you add HTTP headers to the request.

This is commonly used for:

API keys

Authorization headers

Content negotiation

Custom headers required by the endpoint

### Processing the Webhook Response

The Webhook action can process the response returned by the endpoint.

If Process Response is enabled, WS Form can use Response Code Mapping and Response Field Mapping.

Response Code Mapping lets you decide how different HTTP status codes should be handled. For example, a response code can be ignored, used to process response field mapping, used to throw an error, or used to halt action processing.

Response Field Mapping lets you map JSON data returned from the endpoint back into form fields.

This is useful for integrations that return:

A customer ID

A quote value

A status message

A reference number

A validation result

Data that should be used by later actions

### Testing Webhooks

When building a webhook integration, it can be useful to test the request using a service such as Webhook.site.

You can enter the test URL as the webhook endpoint, submit your form, and inspect the request that WS Form sends.

## Option 2: Use the Run WordPress Hook Action

The Run WordPress Hook action lets developers run a WordPress action or filter when a user saves or submits a form.

This is a powerful option when you need to run custom PHP code as part of the form submission process.

### When to Use Run WordPress Hook

Use Run WordPress Hook when you need more control than a webhook or automation platform provides.

Common use cases include:

Run custom PHP code when a form is submitted

Modify submission data before other actions run

Connect to a proprietary system

Write data to a custom database table

Call one or more APIs

Set a spam level

Return a custom message

Redirect the user

Halt action processing

### Hook Types

The Run WordPress Hook action can run either:

A filter using apply_filters

An action using do_action

When configuring the action, you enter the hook tag that you want WS Form to run.

### Action Priority

You can choose when the hook should run:

Before submission created

Before other actions

After other actions

Use Before submission created or Before other actions if you need to manipulate field values before other actions run.

Use After other actions if you need to use data created by another action.

### Example WordPress Filter

The following example shows the general pattern for using a filter with the Run WordPress Hook action.

add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

function wsf_filter_function($form, $submit) {

 $meta_key = 'field_123';

 $field_value_old = $submit->meta[$meta_key]['value'];

 $field_value_new = str_replace('replace_this', 'with_this', $field_value_old);

 $submit->meta[$meta_key]['value'] = $field_value_new;

 return $submit;
}

In this example, field_123 should be changed to match the ID of the field you want to work with.

## Option 3: Use an Automation Platform

Automation platforms are a good option if you want to connect WS Form to another app without writing custom code.

WS Form provides integrations for automation platforms such as Make and Zapier.

### Make Integration

The Make integration allows you to integrate WS Form submissions with thousands of apps using Make scenarios.

Make was formerly called Integromat.

To use the Make integration, you create a scenario in Make, choose the WS Form submission trigger, connect Make to WS Form using the API URL and API key from the WS Form Make settings, and choose the published form you want to use.

Make can then use your form fields and submission fields in filters and mappings.

### Zapier Integration

The Zapier integration allows you to send WS Form submissions to Zapier.

To use the Zapier integration, you create a Zap, choose the WS Form New Submission trigger, connect Zapier to WS Form using the API URL and API key from the WS Form Zapier settings, and choose the published form that should trigger the Zap.

Zapier can then pass WS Form submission data to other apps.

### Important Notes About Make and Zapier

For Make and Zapier integrations:

You need WS Form PRO.

The integration must be installed and licensed.

You need at least one published form.

You need at least one submission to help configure the scenario or Zap.

The WordPress REST API must be enabled and accessible so Make or Zapier can retrieve submission data from your site.

### Example Automation Workflows

Automation platforms are useful for workflows such as:

Create a CRM contact

Add a subscriber to an email marketing list

Create a task in a project management system

Add a row to a spreadsheet

Send a notification to a team communication tool

Pass form submission data to another app in a multi-step workflow

## Custom Validation Integrations

Some integrations need to validate data before the form submission is accepted.

For example, you might need to check an email address, verify a membership number, perform a fraud check, or validate data against an external system.

WS Form provides validation hooks that allow developers to add custom server-side validation.

### Field-Level Validation

Use wsf_submit_field_validate when you need to validate each field as a form is submitted.

This filter hook receives information such as the field ID, submitted field value, repeatable section index, post mode, and partial submit object.

Use field-level validation for:

Email address validation

Phone number validation

Disposable email blocking

Username availability checks

Membership number validation

Field-specific API checks

If validation fails, your hook function adds one or more errors to the error action array and returns it to WS Form.

Errors can be shown as field invalid feedback, form messages, or redirects.

### Field Validation Example

add_filter('wsf_submit_field_validate', 'my_field_validation', 10, 6);

function my_field_validation($field_error_action_array, $field_id, $field_value, $section_repeatable_index, $post_mode, $submit) {

 if($post_mode !== 'submit') {

 return $field_error_action_array;
 }

 if($field_id === 123 && empty($field_value)) {

 $field_error_action_array[] = 'Please enter a value for this field.';
 }

 return $field_error_action_array;
}

### Submission-Level Validation

Use wsf_submit_validate when you need to validate the full form submission.

This filter hook is useful for validation that depends on more than one field or on business rules that apply to the submission as a whole.

Use submission-level validation for:

Cross-field validation

Duplicate submission checks

Customer record validation

Fraud checks

Eligibility checks

Custom business rules

If validation fails, your hook function adds one or more errors to the error action array and returns it to WS Form.

### Submission Validation Example

add_filter('wsf_submit_validate', 'my_submit_validation', 10, 3);

function my_submit_validation($field_error_action_array, $post_mode, $submit) {

 if($post_mode !== 'submit') {

 return $field_error_action_array;
 }

 $validation = false;

 if(false === $validation) {

 $field_error_action_array[] = array(
 'action' => 'message',
 'message' => 'The submission could not be validated.'
 );
 }

 return $field_error_action_array;
}

## Which Custom Integration Method Should You Use?

RequirementRecommended option

Send submission data to an external endpointWebhook action

Map returned JSON data back into form fieldsWebhook action

Build a no-code workflow with thousands of appsMake or Zapier

Use an existing WS Form integrationConnector integrations

Run custom PHP during form processingRun WordPress Hook action

Validate an individual fieldwsf_submit_field_validate

Validate the whole submissionwsf_submit_validate

## Recommended Approach

For most custom integrations, start with the simplest option first.

Check whether WS Form already has a native integration integration for the service.

Use the Webhook action if the service provides an endpoint that can receive data.

Use webhook response mapping if the endpoint returns JSON data that should be added back to the form.

Use Make or Zapier if you want a no-code workflow that connects WS Form to other apps.

Use the Run WordPress Hook action if you need custom PHP logic during form processing.

Use wsf_submit_field_validate or wsf_submit_validate if your integration needs to validate data before the submission is accepted.

## Conclusion

WS Form is designed to be extensible, so you are not limited to the integrations that are available out of the box.

For many custom integrations, the Webhook action is the best starting point because it can push submission data to an endpoint, map selected fields to request keys, add custom mappings and headers, and process returned JSON data.

For no-code workflows, use the Make integration, the Zapier integration, or another WS Form integration integration.

For developer-led integrations, use the Run WordPress Hook action or the WS Form validation hooks to build custom PHP processing and server-side validation.

## Create a Customizable T-Shirt Product

URL: https://wsform.com/knowledgebase/creating-customizable-t-shirt/

This tutorial explains how we created the customizable t-shirt product demo.

This tutorial explains how we created the customizable t-shirt product demo. In this demo, the color of the t-shirt changes when a color field on the form is changed. This is achieved by changing the color of an element in an SVG file.

## Demo

[ws_form id="13568"]

The tutorial requires:

WS Form PRO WordPress plugin.

WS Form PRO Product Integrations WooCommerce extension.

tshirt.svg SVG file.

tshirt.json form file.

Our WooCommerce demo site also feature text editing (not included in this tutorial). You can download the full t-shirt form file here: tshirt-full.json

## The SVG File

If you would like to learn more about the SVG format, click here. You can create SVG files using popular vector software such as Adobe Illustrator or Sketch.

The tshirt.svg file has several layers that make the coloring effect possible.

A JPEG image layer. This is an image of a  solid white t-shirt.

A SCREEN layer. This is the layer that the color is applied to that makes the t-shirt appear to be a different color. (Class: wsft-tshirt-screen).

A LOGO layer (This later is optional).

## Enable SVGs in WordPress

To enable SVG's in WordPress we recommend using the plugin SVG Support. This enables you to use SVG's as featured images in posts, pages and products.

You will need to force inline SVG. This will ensure the SVG is not output as an img tag and allows JavaScript to manipulate elements of the SVG.

To do this:

Click on Settings then SVG Support in the WordPress admin menu.

Check the Enable Advanced Mode? setting.

Click Save.

Check the Force Inline SVG? setting.

Click Save.

## Create The Form

Click Add New under the WS Form menu.

Click Blank to create a blank form.

Drag the tshirt.json file into the layout editor to import it. Click Ok when prompted. (You can also use the Import icon at the top of the layout editor).

Click Publish.

## Creating The Product

To create the product:

Add a product in WooCommerce.

Enter a product name (e.g. T-Shirt Tutorial).

Add a regular price of zero or greater (e.g. 10).

Click on Set product image.

Upload the tshirt.svg file.

Click Set product image.

Click Publish to create the product.

## Assigning The Form To The Product

The next step is to assign your form to the product to customize it. While still editing the product...

Click on the WS Form tab in the Product data section.

Click choose an existing form.

Select the Customizable T-Shirt Product Tutorial form you imported above.

Click Update to save the changes.

Click on the product URL to preview the product.

## Test The Product

Click the product link to view the product. You should now find the SVG screen layer is updated when a color is selected.

## How It Works - Conditional Logic

In order to change the SVG screen layer color, we use conditional logic in WS Form. Conditional logic lets you create interactive forms.

To view the conditional logic for the T-Shirt form:

Edit the form.

Click the Conditional Logic  icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the gear icon next to the Color Picker row.

### Color Picker

The conditional logic for the color picker checks for On input (when a user clicks or drags the color picker) and Changed (when the color is changed by the user or another conditional logic THEN/ELSE statement) events on the Color Picker field.

The THEN statement runs whenever the color picker is changed. When a change occurs, the following JavaScript is executed:

$('.wsft-tshirt-screen').css({fill: '#field(612)', 'mix-blend-mode': 'multiply'});

This is a combination of regular JQuery and WS Form variables. The value of the color picker #field(612) (612 will be different in your form and is the field ID of the color picker) is used to set the CSS file property of the wsft-tshirt-screen class.

### Commerce Color

The conditional logic for the Commerce text on the t-shirt checks the lightness of the Color Picker field.

If the lightness is less than 50 (dark), the text is set to white using the following JavaScript:

$('.wsft-tshirt-logo-commerce').css({fill: '#fff'});

If the lightness is greater than or equal to 50 (light), the test is set to white using the following JavaScript:

$('.wsft-tshirt-logo-commerce').css({fill: '#000'});

## Create a Field Prefix or Suffix

URL: https://wsform.com/knowledgebase/create-a-field-prefix-or-suffix/

Using WS Form you can easily add prefixes and suffixes to your WordPress form fields.

 You can use WS Form to quickly and easily add prefixes and suffixes to your WordPress form fields.

No additional plugin is required for this feature.

Full Bootstrap and Foundation framework support.

## Demo

## How To

To add a prefix or suffix to a field:

Click the field settings icon.

In the Basic tab enter a value in the Prefix or Suffix setting.

Click Save & Close.

WS Form Variables and HTML are supported in these fields. The demo above shows an example of using Font Awesome icons.

## Supported Fields

Prefixes and suffixes are supported in the following field types:

Text

Text Area

Number

Phone

Email

URL

Select (including Select2)

Date/Time

Password

Search

Price

Price Select

Quantity

Price Subtotal

Cart Detail

Cart Total

## Create a File Upload Progress Bar

URL: https://wsform.com/knowledgebase/create-a-file-upload-progress-bar/

Show the progress of a file upload by using a combination of file upload and progress fields.

Using a combination of file upload and progress fields, you can show your website users the progress of a file upload. WS Form enables you to put the progress bar anywhere on your form for complete layout flexibility. The progress bar works when the form is submitted or saved.

## Demo

## Tutorial

WS Form comes with a File Upload template on the Add New page. To add a progress bar to an existing form with a file upload field:

Drag or click a Progress field anywhere on your form. You can add as many progress bars on your form as you wish (for example, on every tab).

Click the settings icon on the Progress field.

Under Source select Upload Progress.

Click Save and then click Preview to test your form.

## Hiding The File Upload Field

For a more seamless effect, you can also hide the file upload field when the form is submitted using conditional logic. An example of the conditional logic to achieve this is shown below:

## Create a Fixed Discount Code Field

URL: https://wsform.com/knowledgebase/create-a-fixed-discount-code-field/

Add a coupon code field to your WS Form that applies a fixed discount amount to the cart total when a valid code is entered.

This tutorial shows how to add a discount code field to a WS Form that applies a fixed discount amount to the cart total.

Example used in this guide

Coupon code: 50OFF

Discount: 50.00

You can change these values to match your own coupon setup.

## Demo

## How it works

The demo form includes these main fields:

Price
Determines the cart subtotal.

Cart Detail (Discount)
Applies the fixed discount when a valid coupon is entered.

Cart Total
Shows the final total after the discount.

## Step 1 – Add a Discount Field

In WS Form, discounts are created using a Cart Detail field set to type Discount.

Configure the field as follows:

Type: Discount

Allow negative values: Checked

Default value: 0

Read only: Optional

The discount field starts at zero so no discount is applied until the coupon is validated.

## Step 2 – Add Coupon Input and Button

Add two fields to your form:

Text field
Label: “Discount Code”

Custom Button
Label: “Apply”

The user enters the coupon and clicks Apply.

## Step 3 – Add Conditional Logic

We only want the discount applied when:

The correct code is entered (50OFF)

The Apply button is clicked

Open Conditional Logic:

Click the Conditional Logic icon in the layout editor.

Click Add.

Condition

Discount Code field = 50OFF

Apply button = clicked

Action

Set Discount field value → -50

When this value is applied, WS Form includes it in the cart calculation and the discount is deducted from the total.

You can disable Case Sensitive so the coupon also works if users enter 50off.

## Adding more coupon codes

You can repeat this method to support multiple coupons:

Change the code value

Change the discount amount

Add another conditional rule

Example

25 off → value -25

Code: 25OFF

## Summary

To create a fixed discount coupon in WS Form:

Add a Cart Detail field set to Discount

Allow negative values and set default to 0

Add a coupon text field and Apply button

Use conditional logic to set the discount value when the correct code is entered

This approach works for any number of coupon codes or discount amounts.

## Create a Forgot and Reset Password Form

URL: https://wsform.com/knowledgebase/create-a-forgot-and-reset-password-form/

Learn how to create a custom forgot and reset password page.

The WS Form PRO User Management Integration allows you to create a custom forgot password page which in turn sends an email to the user and leads them to a reset password page. The user can then enter their new password.

There are three steps to the forgot password process.

The forgot password form is presented to the user. They enter their username or email address into the form and then click the submit button. A confirmation message is shown indicating that an email has been sent to them.

An email is sent to the email address associated with the user identified by the username or email that was entered. The email contains a clickable link to a page containing the reset password form. The link contains a unique key which identifies the user and validates the reset password request. This is done by using a Send Email action on the forgot password form.

The reset password form is presented to the user. They enter a new password twice for confirmation and then click the submit button. WordPress then resets their password and a confirmation message is shown.

This tutorial describes how to build these steps.

## Prerequisites

In order to build a custom forgot password process, you will require:

WS Form PRO

User Management Integration

The user management provides the interface between your forms and the WordPress user management functionality.

## Creating Forms

You need to create two forms for this process. WS Form PRO has two ready made form templates you can use. To do this:

Click on WS Form in the WordPress administration menu.

Click Add New.

Click on the User Management tab.

Click on the Forgot Password template.

In the layout editor, click the Publish button to publish the form so that it is ready for adding to a page.

Repeat this process and create a Reset Password form.

## Creating Pages

You need to create two pages on your website:

Forgot Password

Reset Password

To do this:

Click on Pages in the WordPress administration menu.

Click Add New.

Add a title to the page: Forgot Password.

Use your preferred page builder (e.g. WordPress blocks) to add the corresponding form you created to the page. Learn more.

Publish the page.

Repeat this process for the Reset Password page.

Copy the permalink (URL) of the Reset Password page to your clipboard.

## Configuring the Email Link

When the forgot password email link is clicked, we want to ensure the user is linked to the Reset Password page that you created above.

To do this:

Click on WS Form in the WordPress administration menu.

Edit your Forgot Password form.

Click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Settings icon next to the Send Email action.

In the settings for the email, scroll down to the Message setting.

Change: #user_lost_password_url to #user_lost_password_url("/reset-password-path/"). Replace /reset-password-path/ with  the reset password permalink you copied earlier. You do not need to enter the hostname, WS Form PRO will automatically add that for you.

Click Save & Close.

Click Publish

Your Forgot Password form will now send an email containing a link to the Reset Password page you created earlier.

 

## Create a Form Recipient Selector Using Conditional Logic

URL: https://wsform.com/knowledgebase/create-a-form-recipient-selector-using-conditional-logic/

In this tutorial we'll show you how to allow a user to select a recipient by enabling and disabling 'Send Email' actions using conditional logic.

In this tutorial we'll show you how to allow a user to select a recipient by enabling and disabling Send Email actions using conditional logic.

## 1. Create Form

For the purpose of this tutorial, we'll create multiple recipients for a Contact Us form. To create a quick Contact Us form:

Click on Add New from the WS Form administration menu.

Click the Contact Us template.

## 2. Add Radio Field

Once you are in the layout editor, we are going to add a radio field to the form that will be used to select the recipient. You could also use a select field if you wish. To do that, we simply click or drag and drop the Radio field from the Build sidebar. We'll give that field a label of Select Department, but you can label it anything you wish.

## 3. Configure Radio Field

Next we need to configure the radio field with the departments we want to allow the user to choose from.

Click on the settings (gear) icon for the Select Department field.

In the sidebar, click the Radios tab.

Remove the sample rows and then add as many rows as you need for each intended recipient. We'll add Sales and Support in this tutorial.

Click the checkmark on the first row to ensure the first row is checked by default. We need to do this to ensure at least radio is selected. Another option is that you could check the Required checkbox in the Basic tab to ensure at least radio is checked when the form is submitted.

Click Save at the bottom of the sidebar to save your changes.

If you preview the form, it will now display two radio fields that allow the user to select which recipient they would like their inquiry to go to.

Next we need to set up two send email actions, one for each recipient.  The advantage of using this method is you can set up different email for each recipient if you wish, for example you could change the subject line and/or content of each email.

## 4. Set Up Email Actions

To access the email actions, click the Actions icon at the top of the page. This will open the Actions sidebar:

Because this is a new form, we already have a Send Email action. Let's rename that to say Send Email to Sales, and then add a new Send Email action that we'll call Send Email to Support.  You would create as many Send Email actions as you have recipients and name them appropriately. To do this:

Click just after the word Email in the actions list and type to Sales to rename the first action.

Click the add icon below the action list to add a new action.

Select Send Email from the Action pulldown list.

Click just after the word Email in the actions list again, and type to Support to rename the section.

You should then end up with two email actions, one called Send Email to Sales and one called Send Email to Support (or whatever department names you have chosen).

For each email action, configure the recipient email address and any other settings required for that email. For more information about configuring the Send Email action, click here.

## 5. Conditional Logic

The last step is to create the Conditional Logic. WS Form conditional logic enables you to enable and disable actions based upon the output of an IF condition.

In this tutorial, we want to enable the Send Email to Sales if the Sales radio is checked. Likewise if the Support radio is checked instead, we will want the Send Email to Support action to be enabled.

The pseudo logic for the sales condition would be:

IF Select Department ROW CHECKED IS Sales THEN RUN ACTION ON SUBMIT Send Email to Sales ELSE DO NOT RUN ACTION ON SUBMIT Send Email to Sales

To create this conditional logic:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the add icon below the conditional logic list.

Enter a label for the conditional logic, e.g. Send Email to Sales

Create the conditional logic (see below).

Click Save at the bottom of the sidebar.

An example of how to set up the above pseudo logic is shown below:

Create conditions for each of your recipients. And that's it!

WS Form will now enable the appropriate Send Email action depending on which radio has been checked. Click Preview to try it or click Publish and add the form to your web site.

## Create a Form Recipient Selector Using PHP

URL: https://wsform.com/knowledgebase/create-a-form-recipient-selector-using-php/

In this tutorial we'll show you how to allow a user to select a recipient using the wsf_action_email_to filter hook.

WS Form has a number of WordPress filter hooks that can be used to dynamically change the settings of the Send Email action.

In this tutorial we'll show you how to allow a user to select a recipient using the wsf_action_email_to filter hook.

## 1. Create Form

For the purpose of this tutorial, we'll create multiple recipients for a Contact Us form. To create a quick Contact Us form:

Click on Add New from the WS Form administration menu.

Click the Contact Us template.

## 2. Add Radio Field

Once you are in the layout editor, we are going to add a radio field to the form that will be used to select the recipient. You could also use a select field if you wish. To do that, we simply click or drag and drop the Radio field from the Build sidebar. We'll give that field a label of Select Department, but you can label it anything you wish.

## 3. Configure Radio Field

Next we need to configure the radio field with the departments we want to allow the user to choose from.

Click on the settings (gear) icon for the Select Department field.

In the sidebar, click the Radios tab.

Remove the sample rows and then add as many rows as you need for each intended recipient. We'll add Sales and Support in this tutorial.

Click the checkmark on the first row to ensure the first row is checked by default. We need to do this to ensure at least radio is selected. Another option is that you could check the Required checkbox in the Basic tab to ensure at least radio is checked when the form is submitted.

Click Save at the bottom of the sidebar to save your changes.

If you preview the form, it will now display two radio fields that allow the user to select which recipient they would like their inquiry to go to.

Next we need to ensure we have a Send Email action set up for the form.

## 4. Set Up Send Email Action

To access the form actions, click the Actions icon at the top of the page. This will open the Actions sidebar:

Because this is a new form, we should already have a Send Email action. If a Send Email action does not exists, you can add one as follows:

Click the add icon below the action list to add a new action.

Select Send Email from the Action pulldown list.

Set up your Send Email action with your desired From address Subject Line and Message. You can set the To address to #blog_admin_email, this will ultimately be changed by the WordPress filter hook.

## 5. WordPress Filter Hook PHP

The last step is to create the WordPress Filter Hook function in PHP. This would typically go in your themes functions.php file or code snippet plugin.

An example code snippet can be found below:

// Callback function for the wsf_action_email_to filter hook
function wsf_action_email_to_hook_function( $to, $form, $submit, $action ) {

 // ID of form this filter hook applies to
 $form_id = 123;

 // ID of field
 $field_id = 123;

 // Check form ID
 if( $form_id != $form->id ) { return $to; }

 // Build meta key containing the field value
 $meta_key = sprintf( 'field_%u', $field_id );

 // Get field value (Will be an array of values for a select, checkbox or radio field)
 $values = wsf_submit_get_value( $submit, $meta_key );

 // Check field value
 if( empty( $values ) || !is_array( $values ) ) { return $to; }

 // Field value to email address lookup table (Build this data using your own code)
 $to_lookups = array(

 'Sales' => 'Sales <sales@mysite.com>',
 'Support' => 'Support <support@mysite.com>'
 );

 // Return array
 $to_array = array();

 // Process values
 foreach( $values as $value ) {

 // Check if lookup exists
 if( isset( $to_lookups[$value] ) ) {

 // If it does exist, add this email address to the return array
 $to_array[] = $to_lookups[$value];
 }
 }

 // Return value
 return count( $to_array ) ? $to_array : $to;
}

// Add a callback function for the wsf_action_email_to filter hook
add_filter( 'wsf_action_email_to', 'wsf_action_email_to_hook_function', 10, 4 );

In this code example you would change the value for the $form_id variable to match the ID of the form you created. You also need to change the $field_id variable to match the ID of the field containing the recipient options.

## Create a Form Summary

URL: https://wsform.com/knowledgebase/create-a-form-summary/

On a long form you may wish to add a summary of the fields the user has completed.

On a long form you may wish to add a summary / review of the fields the user has completed. There are two ways to create a summary in WS Form.

Automatically create a summary by using the Summary field type.

Custom code a summary using your own markup in an HTML field.

In this tutorial, we explain how to create a summary using both of these methods.

## Demo

## Automatically Create a Summary

To create a summary automatically, you can use the Summary field. Simply drag and drop (or click) the Summary field onto your form. The Summary field can be configured to:

Show and hide form, tab and section labels.

Create multi-column layouts.

Exclude certain fields.

Create tables for repeatable sections.

## Custom Code a Summary

You can also use an HTML field to insert a summary into your form. To make this process easier, you can automatically create some base markup to work with by clicking the Insert Form Summary HTML button.

The #field variable is used to insert the value of a field. This is wrapped in the #text variable which tells WS Form to keep the field value updated in the HTML field whenever the value changes.

An example of this syntax is: #text(#field(123))

An example of this added to an HTML field is shown below:

A working example of this is shown below:

The #text field can also be used in text editor, message or even the default value of fields such as text, phone or email.

You can combine these variables with regular HTML code to style and format the output as you wish.

## Conditionally Showing Field Values

Sometimes you may only wish to show a field value if it contains a value. To do this, you can use the #if(condition) and #endif variables.

### Example

#if(#field(1))
<dl class="wsft-summary-field-wrapper"><dt class="wsft-summary-field-label">#field_label(1)</dt><dd class="wsft-summary-field-value">#text(#field(1))</dd></dl>
#endif

#if(#field(2))
<dl class="wsft-summary-field-wrapper"><dt class="wsft-summary-field-label">#field_label(2)</dt><dd class="wsft-summary-field-value">#text(#field(2))</dd></dl>
#endif

In this example, WS Form checks to see if the field with ID 1 has content. If it does, it shows the content between the #if(#field(1)) and #endif variables. This functionality is then repeated for the field with ID 2.

Please note that the classes in these examples are optional and intended for use with the WS Form Styler for the purpose of styling a summary field.

## Repeatable Sections

You can also create a summary of fields contained within a repeatable section.

Example code to do this is shown below:

<h3 id="wsft-summary-section-label-123" class="wsft-summary-section-label">My Repeatable Section</h3>

<table role="table" aria-labelledby="wsft-summary-section-label-123">

 <thead>

 <tr>
 <th scope="col">#</th>
 <th scope="col">#field_label(1)</th>
 <th scope="col">#field_label(2)</th>
 </tr>

 </thead>

 <tbody>

#section_rows_start(10)
 <tr>
 <th>#section_row_number</th>
 <td>#text(#field(1))</td>
 <td>#text(#field(2))</td>
 </tr>
#section_rows_end

 </tbody>

</table>

In this example, we are outputting a simple HTML table. The rows in the table are wrapped in #section_rows_start(section_id) and #section_rows_end. WS Form then repeats the HTML contained within for each row in the repeatable section that has an ID of 10. The variable #section_row_number outputs the row number.

## Styling Summaries

To style a summary that uses the WS Form markup and classes:

Click Style at the top of the layout editor.

Click on Field Types.

Click on Summary.

Edit the style.

Click the Save icon at the top of the Styler.

Keyword: preview

## Create a Link in a Checkbox or Radio Label

URL: https://wsform.com/knowledgebase/create-a-link-in-a-checkbox-or-radio-label/

WS Form allows you to add HTML to checkbox and radio labels.

Occasionally, you may find the need to incorporate a hyperlink within a checkbox or radio button label. For instance, you might want to include a link directing users to a privacy policy or terms and conditions page in association with an opt-in checkbox.

WS Form allows you to add HTML to checkbox and radio labels.

An example of doing this with a checkbox field is shown below and the same method applies for radio fields too.

Edit the Checkbox field by clicking the settings icon.

Click the Checkboxes tab.

Optionally click the expand icon at the top to make the label setting easier to edit.

In the label of the checkbox, enter the HTML for adding a link.

Click Save & Close

## Example HTML

I agree to the <a href="https://mysite.com/privacy-policy/" target="_blank">Privacy Policy</a>.

 

## Create a Percentage Discount Code Field

URL: https://wsform.com/knowledgebase/create-a-percentage-discount-code-field/

Add a coupon code field to your WS Form that reveals a hidden discount and applies a percentage reduction to the cart total when a valid code is entered.

This tutorial shows how to add a discount code field to a WS Form that applies a percentage discount to the cart total.

Example used in this guide

Coupon code: 50OFF

Discount: 50%

You can change these values to match your own coupon setup.

## Demo

## How it works

The demo form includes these main fields:

Price
Determines the cart subtotal amount.

Cart Detail (Subtotal)
Shows the subtotal of the e-commerce fields.

Cart Detail (Discount)
Applies the percentage discount when visible.

Cart Total
Shows the final total after the discount.

## Step 1 – Add a Discount Field

In WS Form, discounts are created using a Cart Detail field set to type Discount.

Configure the field as follows:

Hidden: Checked

Type: Discount

Allow negative values: Checked

Hidden e-commerce fields are excluded from totals until they are shown. This prevents the discount from applying before the coupon is entered.

## Step 2 – Add the Discount Calculation

In the Default Value of the Discount field, add this WS Form calculation:

#calc(#field(123) * -0.5)

What this does

#field(123) = Gets the cart subtotal (where 123 is the ID of the subtotal field)

* -0.5 = 50% discount (negative so it reduces the total)

Example

Sub-total = 150

Discount = −75

Cart total = 75

## Step 3 – Add Coupon Input and Button

Add two fields to your form:

Text field
Label: “Discount Code”

Custom Button
Label: “Apply”

The user will enter the coupon and click Apply.

## Step 4 – Add Conditional Logic

We only want the discount applied when:

The correct code is entered (50OFF)

The Apply button is clicked

Open Conditional Logic:

Click the Conditional Logic icon in the layout editor.

Click Add.

Condition

Discount Code field = 50OFF

Apply button = clicked

Action

Set Discount field → Visible

When the field becomes visible, WS Form includes it in the cart calculation and the discount is applied.

## Adding more coupon codes

You can repeat this method to support multiple coupons:

Change the code value

Change the percentage in the calculation

Add another conditional rule

Example

25% off → #calc(#field(123) * -0.25)

Code: 25OFF

## Summary

To create a percentage discount coupon in WS Form:

Add a hidden Cart Detail field set to Discount

Add a negative percentage calculation

Add a coupon text field and Apply button

Use conditional logic to show the discount when the correct code is entered

This approach works for any number of coupon codes or discount amounts.

## Create a Redirect Selector Using Conditional Logic

URL: https://wsform.com/knowledgebase/create-a-redirect-selector-using-conditional-logic/

In this tutorial we'll show you how to set up form redirects using conditional logic.

In this tutorial we'll show you how to set up form redirects using conditional logic. This enables you to redirect to different web addresses depending on the choice a user makes on your form.

## 1. Create Form

For the purpose of this tutorial, we'll create two different redirects for a Contact Us form. When the form us submitted it will redirect to either a Sales or Support page depending on the selection made by the user completing the form.

To create a quick Contact Us form:

Click on Add New from the WS Form administration menu.

Click the Contact Us template.

## 2. Add Radio Field

Once you are in the layout editor, we are going to add a radio field to the form that will be used to select a department. You could also use a select field if you wish. To do that, we simply click or drag and drop the Radio field from the Build sidebar. We'll give that field a label of Select Department, but you can label it anything you wish. Of course, the input criteria could be anything you wish but for the purpose of this tutorial we'll use a radio field as our conditional logic criteria.

## 3. Configure Radio Field

Next we need to configure the radio field with the departments we want to allow the user to choose from.

Click on the settings (gear) icon for the Select Department field.

In the sidebar, click the Radios tab.

Remove the sample rows and then add as many rows as you need for each intended recipient. We'll add Sales and Support in this tutorial.

Click the checkmark on the first row to ensure the first row is checked by default. We need to do this to ensure at least radio is selected. Another option is that you could check the Required checkbox in the Basic tab to ensure at least radio is checked when the form is submitted.

Click Save at the bottom of the sidebar to save your changes.

If you preview the form, it will now display two radio fields that allow the user to select which recipient they would like their inquiry to go to.

Next we need to set up two redirect actions, one for each department.

## 4. Set Up Redirect Actions

To access the redirect actions, click the Actions icon at the top of the page. This will open the Actions sidebar:

Because this is a new form, we'll need to add two new Redirect actions. You would create as many Redirect actions as you need. To do this:

Click the add icon below the action list to add a new action.

Select Redirect from the Action pulldown list.

We'll rename that action by clicking on it and then enter Redirect to Sales.

In the URL setting, enter the URL you want to redirect to. In this example we'll use /sales/ as the path. This can be any URL you wish, including external websites, e.g. https://wordpress.org

Repeat the above and call it Redirect to Support

You should then end up with two actions, one called Redirect to Sales and one called Redirect to Support (or whatever department names you have chosen).

For each redirect action, configure the URL. For more information about configuring the Redirect action, click here.

## 5. Conditional Logic

The last step is to create the Conditional Logic. WS Form conditional logic enables you to enable and disable actions based upon the output of an IF condition.

In this tutorial, we want to enable the Redirect to Sales if the Sales radio is checked. Likewise if the Support radio is checked instead, we will want the Redirect to Support action to be enabled.

The pseudo logic for the sales condition would be:

IF Select Department ROW CHECKED IS Sales THEN RUN ACTION ON SUBMIT Redirect to Sales ELSE DO NOT RUN ACTION ON SUBMIT Redirect to Sales

To create this conditional logic:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the add icon below the conditional logic list.

Enter a label for the conditional logic, e.g. Redirect to Sales

Create the conditional logic (see below).

Click Save at the bottom of the sidebar.

An example of how to set up the above pseudo logic is shown below:

Create conditions for each of your redirects. And that's it!

WS Form will now enable the appropriate Redirect action depending on which radio has been checked. Click Preview to try it or click Publish and add the form to your web site.

## Create a State / Province by Country Selector

URL: https://wsform.com/knowledgebase/create-a-state-province-by-country-selector/

Download a demo form showing how to create a simple state / province selector filtered by country.

This demo shows how to create a state / province select field that is filtered by a country select field. Cascading fields are use to achieve this.

## Create a UK Postcode Lookup

URL: https://wsform.com/knowledgebase/create-a-uk-postcode-lookup/

The WS Form Google Address field can be used to create a UK postcode lookup feature for your form.

The WS Form Google Address field can be used to create a UK postcode/postal code lookup feature for your WordPress form. The Google Address field can also be used to lookup full addresses.

## Demo

## Google Address Field Settings

The following Google Address components were mapped to create this demo:

To limit the search to the United Kingdom, use the Country Restrictions setting in the Advanced tab when editing the Google Address field.

## Create an 'Other' Option Using Conditional Logic

URL: https://wsform.com/knowledgebase/create-an-other-option-using-conditional-logic/

A common scenario on a form is the case of an 'Other' option as part of a list of options in a select, checkbox or radio field.

A common scenario on a form is the case of an Other option as part of a list of options in a select, checkbox or radio field, giving the user the possibility to enter a missing option. WS Form PRO allows you to do this while retaining full control of the positioning and style of the Other option.

## Demo

## Tutorial

Conditional logic and a supplemental text field is used to create an Other option in WS Form PRO. This allows you to place and style the Other text field in any position on the form per your requirement.

To create an Other option (Example given for a select field):

Click the settings icon on your select, checkbox or radio field.

Click on the Options tab and add a new row. Enter Other into the row.

Click Save & Close.

Add a text field to your form underneath the select, checkbox or radio field by clicking Text in the Build or by dragging and dropping a text field. Label the field Other.

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the add icon to add a new conditional logic row.

Add the logic shown below, selecting the fields on your form.

Click Save & Close.

The conditional logic checks to see if the Other row has been selected. If that condition is true, the Other text field is made visible, otherwise it is hidden.

## Create an Email Notification

URL: https://wsform.com/knowledgebase/create-an-acknowledgement-email/

You can add any number of additional 'Send Email' actions to your form.

WS Form includes a Send Email action in most form templates that sends an email notification to the blog admin email address to inform them that a submission has occurred.

You can add any number of additional Send Email actions to your form. This tutorial shows you the best settings to use if you want to send an email notification / acknowledgement to the person completing the form.

In this tutorial, we'll use a simple Contact Us form template, but you could use any form you wish.

To create the acknowledgement email, first click on the Actions icon at the top of the layout editor.

Next, to add a new action, we click on the add + icon.

We can then immediately name the action. Lets call it Send Email to User.

Now we choose the type of action from the dropdown. We're going to choose the Send Email action.

Once the type is chosen, the settings for that action type are shown.

For an email sent to the person completing the form, we recommend using the following settings:

From Email Address: #blog_admin_email

From Display Name: #blog_name

To Email Address: #field(3)

To Display Name: #field(1) #field(2)

You would change the IDs in the #field variables above to match the IDs of your email, first and last name fields. You are welcome to change these to anything you wish.

Using these settings we are telling WS Form to send the email from the blog, to the user details that were completed on the form.

Make any necessary changes you would like to the email content or other settings and then click Save & Close.

Add as many additional email notifications / acknowledgements as you wish, there are no limits on the number of actions you can run.

## Create Floating Inside Field Labels With CSS

URL: https://wsform.com/knowledgebase/create-floating-inside-field-labels-with-css/

Floating field labels appear inside a field when it is empty and move outside the field when it contains content.

Floating field labels appear inside a field it is empty and move outside the field when it contains content. This makes fields appear to have a placeholder, but when you enter text into the field the label moves out of the way. The advantage of this method is that your forms occupy a smaller amount of screen real estate.

There are various ways of achieving this effect. WS Form PRO uses a pure CSS method that doesn't require JavaScript or third party libraries.

## Enabling Inside Label Positioning

You can enable inside label positioning in WS Form PRO by setting Label Position to Inside either on all fields or a specific field.

### Setting All Fields

To set the label position to Inside for all fields:

Click the settings icon at the top of the layout editor.

Click the Styling tab.

Change the Default Label Position setting to Inside.

Click Save & Close.

This sets all fields that are set to label position Default to Inside.

### Setting Individual Fields

Click the settings icon on a field.

Click the Advanced tab.

Change the Label Position setting to Inside.

Click Save & Close.

You can use this method to override the Default (Form setting) label position on individual fields.

## Change Inside Label Positioning Parameters

It is possible to use the Styler to adjust how the label appears when it is populated with content.

To do this:

Click on Styles in the WS Form admin menu.

Edit a Style.

Search for: inside

Change Inside Label settings to suit your preference:

Behavior: Move or Hide

Vertical Offset: Defaults to -20px (Applies to Move only)

Scale: Defaults to 0.9 (Applies to Move only)

Click the Save icon to save your changes.

When the hidden behavior is chosen, the class wsft-label-position-inside-hide will be added to the form element.

### CSS Class

The CSS class applied to fields that support this feature is: wsft-label-position-inside.

## Create from AI Template

URL: https://wsform.com/knowledgebase/create-from-ai-template/

The Create from AI template lets you generate an entire form from a single prompt, automatically building fields, settings, and layouts based on your descripti…

The WS Form Create from AI template can be used to create a form using AI from a prompt.

### Configuring Connectors

In order to use the Create from AI template you will need to configure at least one AI connector in WordPress such as Anthropic, Google or OpenAI.

To do this:

Click on Settings > Connectors from the WordPress administration menu.

Click the Install button for Anthropic, Google and/or OpenAI and enter your API keys.

Click Save.

WordPress will show Connected when the provider is successfully connected.

## Using the Template

Once you have completed the step above a new Create from AI template will appear in the WS Form Add Form admin page.

Simply hover over the template and click Use Template. Describe the form you would like to create in the Create with AI modal and then click the Create button.

## Example Prompts

## Create Random Values

URL: https://wsform.com/knowledgebase/create-random-values/

WS Form has two functions that can be used to create random numbers and string.

WS Form has two functions that can be used to create random numbers and string.

Note: These functions use standard PHP and JavaScript random number generators, do not generate cryptographically secure values, and therefore should not be used for cryptographic purposes.

## Random Numbers

The parse variable used to create a random number is:

#random_number(min, max)

## Demo

## Random Strings

The parse variable used to create a random string is:

#random_string(length, characters)

Examples:

## Create Select, Checkbox, and Radio Cascading Lookups

URL: https://wsform.com/knowledgebase/cascade-select-and-radio-fields/

Cascading select and radio fields allows you to create choices that change based on a previous selection.

Cascading select, checkbox and radio fields allow you to create dynamic lookups that change based upon the value of another field on your WordPress form. For example, you could create a vehicle make and model lookup using this feature.

In the example below, you can see how the selection of a vehicle make filters the vehicle model options. Likewise selecting a vehicle model filters the vehicle year options.

## Demo

[ws_form id="13607"]

Select, checkbox and radio fields are configured using a data grid. Data grids are much like a spreadsheet and allow you to easily manage select options, checkboxes or radios. You can even use data sources to rapidly build data grids.

The diagram below illustrates how the example above works for the Make and Model fields.

Cascading works as follows:

Choose a Filter Value. This is the field on your form that WS Form will use to filter your options by. In the example above we choose the Make radio field as the filter value. This will have the value Toyota, Ford or Honda.

Choose a Filter Column. This is the column you want to filter values by in your data grid. So, if Toyota was selected in the Make radio field, then this data grid would be filtered to only show the rows where the Make column is equal to Toyota. The values in this field should precisely match the values in your Filter Column.

If your filter column contains comma separated values, you can check the Filter Column - Comma Separate setting. This will tell WS Form that you wish to treat each comma separated value as individual values to check against.

WS Form automatically renders the select field using the filtered options.

You can also daisy chain cascaded select and radio fields as in the example above.

## Enabling Cascade

To enable cascading on a field:

Click the settings icon on a select, checkbox or radio field to open the settings sidebar.

Click the Options, Checkboxes or Radios tab to view the data grid for that field.

Check the Cascade checkbox.

Select the Filter Column. This is the column in your data grid you want to filter.

Select the Filter Value. This is a select or radio field on your form you want to filter by.

For larger datasets using select fields, you may wish to enable the Use AJAX option to improve form performance.

Click Save & Close.

 

## Creating a Form

URL: https://wsform.com/knowledgebase/creating-a-form/

How to create a new form using WS Form. Create forms from a template or start from scratch with a blank form.

To create a form:

Click on WS Form in the WordPress administration menu.

Click Add New.

You will then have the option of creating a blank form or starting with one of the built-in templates.

The template forms enable you to build a form in a single click! You can edit any of the template forms as much as you like using the layout editor.

If you have installed an integration that comes with templates, you can click on the tab for that integration and select a template. For example the User Management template lets you create, register, login, and change password templates. Integrations that integrate with third-party systems, such as MailChimp, enable you to create forms from a mailing list in a single click that are fully integrated and ready to go.

## Creating a Light / Dark Form Theme

URL: https://wsform.com/knowledgebase/creating-a-light-dark-form-theme/

The WS Form Styler can create alternative color schemes for your WordPress forms such as a light / dark theme.

The WS Form Styler can create alternative color schemes for your WordPress forms. The most popular application for alternative color schemes is to build a light / dark theme.

Dark and light themes can improve accessibility by enhancing readability, reducing visual strain, accommodating diverse visual needs, and aligning with user preferences for a more inclusive and customizable experience. Of course, the effectiveness of alternative themes depends on the colors you choose. We encourage you to choose high contrast colors throughout to improve accessibility.

The WS Form alternative color scheme could, however, be used to switch to any other color scheme you wish. For example you could offer a monochromatic, higher contrast or larger font scheme.

This tutorial focusses on providing a light / dark theme for your website.

## Specifying Your Site Color Scheme

In order for WS Form to deliver the correct color scheme you should configure whether your website has a light or dark color scheme. To do this:

Click on Settings from the WS Form admin menu.

Click on the Styler tab.

Choose Light or Dark for the Color Scheme setting.

Click Save at the bottom of the settings page.

By choosing Light, WS Form will show the Base style if the users preferred color scheme is Light.

By choose Dark, WS Form will show the Base style if the users preferred color scheme is Dark.

If the alternative color scheme is not enable on a style, it will always use the Base style.

If you would like WS Form to attempt to automatically detect the preferred color scheme of your website visitors, check the Auto Color Scheme setting. You will need this to be enabled for testing your alternative color scheme.

## Enabling Alternative Color Themes

Each style can have a single or dual color scheme. By default all new styles have a single color scheme. To enable the alternative color scheme on a style:

Edit the style from the Styles admin page, or click Style at the top of the layout editor.

Click the Settings  icon at the top of the Styler sidebar.

Check Enable Alt Color Scheme.

Click the Save icon at the top of the Styler.

## Modifying Alternative Colors

When the alternative color scheme is enabled, a scheme selector will appear at the top of the Styler sidebar.

There are three buttons:

Base - This is the base scheme that loads by default. Clicking this will show only Base colors in the settings hierarchy.

Alt - This is the alternative scheme that loads if WS Form determines it should be shown. Clicking this will show only Alternative colors in the settings hierarchy.

Both - This will show both Base and Alternative colors in the settings hierarchy.

## Picking Alternative Colors

When editing style colors in Alt or Both scheme mode, WS Form provides two helpers for picking alternative colors.

### Suggest an Alternative Color

WS Form can automatically suggest an alternative color. To do this, click the Magic Wand  icon.

### Use an Alternative Color Shade

WS Form will also suggest various shades of your base color in the color picker in the swatches. Simply click a swatch to use that color.

## Testing Alternative Color Schemes

To test your alternative color scheme:

Mac: Go to Apple menu → System Settings → Appearance → Choose Light, Dark, or Auto.

Windows: Open Settings (Windows + I) → Personalization → Colors → Choose Light, Dark, or Custom.

## How WS Form Renders Alternative Schemes

When WS Form is using an alternative color scheme, the following class is added to the HTML element:

wsft-styler-scheme-alt

## CSS Variables Reference

URL: https://wsform.com/knowledgebase/css-variables-reference/

A full browsable reference of all of the WS Form CSS variables.

## Browse

Below is a comprehensive, browsable reference of all WS Form CSS variables. Simply click the copy icon to copy any variable name or default value. Additionally, you can copy variable names directly from the Styler by clicking its copy icon.

## Download

Download a CSV or JSON file of the WS Form CSS variables:

CSV (Base Only)

CSV (Full)

JSON (Base Only)

JSON (Full)

## Custom Button

URL: https://wsform.com/knowledgebase/custom/

Custom buttons enable you to add any additional to the buttons to the form for use with conditional logic or any custom javascript you add to your web page.

The Custom button enables you to add any additional buttons to the form for use with conditional logic or any custom javascript you add to your web page.

## Demo

## Adding a Custom Button

To learn how to add, edit, clone, move, resize, offset, or delete a custom button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the custom button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the custom button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Custom Project Development

URL: https://wsform.com/knowledgebase/custom-project-development/

If you require help with a more complex project involving WS Form you may want to work with an experienced web developer to assist you.

If you require help with a more complex project involving WS Form you may want to work with an experienced web developer to assist you.

We've teamed up with Codeable who can provide with you a broad range of web development related service.

## What is Codeable?

Simply put, Codeable is a platform that connects you with vetted WordPress freelance developers who can complete projects of all sizes with guaranteed quality. They have a thorough application process to ensure that you are matched with experts specifically qualified for your project.

## Starting a Project with Codeable

To start a project with Codeable:

Go to Codeable

Click Start a Project

Click Submit a Project

Complete the project details

Codeable charge between $80 - $120 per hour depending on the services provided.

## Custom Server-Side Form Validation

URL: https://wsform.com/knowledgebase/custom-server-side-form-validation/

WS Form allows you to perform your own server-side validation of submitted fields values.

WS Form allows you to perform your own server-side validation of submitted fields values.

Please refer to the wsf_submit_field_validate WordPress filter hook knowledge base article for a full description and examples of how to do this.

## Customize Submission CSV Exports

URL: https://wsform.com/knowledgebase/customize-submission-csv-exports/

Choose which columns to include when exporting submissions to CSV and arrange them in the order you need.

When exporting submissions to CSV, WS Form enables you to choose which columns are included and arrange them in the order you need.

Your column selection and order are saved for each form and WordPress user, so they are automatically restored the next time you export submissions from that form.

## Export Submissions To CSV

To export submissions:

Go to WS Form → Submissions.

Choose one of the following export methods:

Click Export CSV at the top of the submissions page to export submissions matching your current filters.

Click Export on an individual submission row to export that submission.

Select submissions, choose Export CSV from Bulk Actions, and apply the bulk action to export the selected submissions.

Choose the columns you want to include in the Export CSV modal.

Arrange the selected columns in the order you want them to appear in the CSV.

Click Export CSV.

## Choosing Columns

The Export CSV modal enables you to choose which columns to include in the CSV export.

Columns are divided between two lists:

Available – Columns that are not currently included in the export.

Selected – Columns that will be included in the export, shown in their export order.

To add or remove columns, click one or more items to highlight them, then use the arrow buttons between the lists. You can also use the add all and remove all buttons to move all columns at once.

Double-click a column to quickly move it between Available and Selected.

At least one column must be selected. If the Selected list is empty, an inline message is shown and the export will not begin.

## Reordering Columns

The order of columns in the Selected list determines their order in the downloaded CSV.

Drag columns up or down using the drag handle to change their order. This can be useful when preparing CSV files for reporting or importing into another application that expects columns in a particular order.

Selected columns also show a category label, such as Submission or Form Fields, to help identify where each column originates.

## Searching For Columns

Use Search available… or Search selected… to quickly find columns. This is particularly useful for forms with a large number of fields.

A count is shown for each list so you can see how many columns are available and selected.

## Column Groups

Columns in the Available list are organized into groups to make them easier to find. Depending on the form and your WS Form edition, these can include:

Submission – Submission information such as the submission ID, date, and status.

Form Fields – Fields included on the form.

E-Commerce – E-commerce submission data available with WS Form PRO.

Tracking – Tracking information available with WS Form PRO.

Custom – Additional columns added through filters or other customizations.

Form field columns show the field label followed by the Field ID, for example Email (ID: 123). This makes it easier to distinguish between fields with similar labels.

Click a group heading to select all columns in that group. Double-click a group heading to move the entire group between Available and Selected.

The Selected list is displayed as a flat list, allowing columns from different groups to be arranged in any order.

## Export Filters

Choosing CSV columns does not change which submissions are exported. The export continues to respect the submissions currently being viewed or selected.

This includes filters such as date range, keyword searches, submission status such as spam or trash, and selected submission IDs when using a bulk export.

Column selection controls the information included for each exported submission, while your submission filters control which submissions are included.

## Saving Column Preferences

When you click Export CSV, your selected columns and their order are saved automatically.

Preferences are saved separately for each WordPress user and each form. This allows different users to maintain their own export configuration, while also allowing different column configurations for different forms.

If fields or other columns are added later, they become available in the Available list. Your existing saved selection and column order are retained, and the new columns can be added when needed.

## Downloading The CSV

When you are ready to export, click Export CSV. The CSV contains the selected columns in the order shown in the Selected list.

For larger exports, WS Form builds the CSV in steps and displays a progress indicator while the export is being prepared. The CSV is downloaded when the export is complete.

Click Cancel to close the modal without exporting.

## Developer Notes

The wsf_submit_export_csv_header and wsf_submit_export_csv_row filter hooks receive the full CSV header and row data.

Column selection is applied after these hooks have run. Custom columns added through filters can therefore be made available for selection alongside standard WS Form columns.

## Customize the Visual Editor Toolbar

URL: https://wsform.com/knowledgebase/customize-the-visual-editor-toolbar/

Learn how to customize the visual editor toolbar in WS Form on Text Area fields.

The Text Area field can be configured to use the TinyMCE visual editor by changing the Type setting to Visual Editor. Two versions of the visual editor can then be chosen:

Full

Compact

## Default Toolbars

The Full toolbar looks as follows:

The Compact toolbar looks as follows:

## Filter Hooks

Both the Full and Compact toolbars can be customized using WordPress filter hooks.

Each toolbar is configured using a string containing the name of each button. The pipe | character is used to create separators in the toolbar. A complete list of the available buttons can be found on the TinyMCE website.

Some buttons and features require plugins which can also be configured using hooks.

The filter hooks are as follows:

### Full Toolbar

Hook Name
Default Value

wsf_tinymce_toolbar1_full
formatselect bold italic underline strikethrough | bullist numlist | alignleft aligncenter alignright alignjustify | link unlink | wp_adv

wsf_tinymce_toolbar2_full
forecolor | pastetext | hr | removeformat charmap | outdent indent blockquote | wp_more | undo redo | fullscreen

wsf_tinymce_toolbar3_full
Blank

wsf_tinymce_toolbar4_full
Blank

wsf_tinymce_plugins_full
charmap colorpicker hr lists media paste tabfocus textcolor fullscreen wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview

### Compact Toolbar

Hook Name
Default Value

wsf_tinymce_toolbar1_compact
bold italic underline strikethrough | bullist numlist | alignleft aligncenter alignright alignjustify | link unlink | pastetext | undo redo | fullscreen

wsf_tinymce_toolbar2_compact
Blank

wsf_tinymce_toolbar3_compact
Blank

wsf_tinymce_toolbar4_compact
Blank

wsf_tinymce_plugins_compact
lists media tabfocus fullscreen paste wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview

### Sample Code

An example for the Full toolbar, implementing a change to the second toolbar that removes the fullscreen button is given below.

// Add filter
add_filter( 'wsf_tinymce_toolbar2_full', 'wsf_tinymce_toolbar2_full_function' );

// Filter function
function wsf_tinymce_toolbar2_full_function( $toolbar ) {

 // Create a toolbar string
 $toolbar = 'forecolor | pastetext | hr | removeformat charmap | outdent indent blockquote | wp_more | undo redo';

 // Return the toolbar string
 return $toolbar;
}

 

 

## Daily, Weekly or Monthly Form Statistics Reports

URL: https://wsform.com/knowledgebase/report-form-statistics/

The form statistics report sends a daily, weekly or monthly email containing your form views, saves, submits and conversion rates.

The form statistics report sends a daily, weekly or monthly email containing your form views, saves, submits and conversion analytics.

To use this features, statistics gathering must be enabled. Learn more about enabling statistics.

The report has the following columns:

Form
The label of the form.

Views
How many times the form was shown on your website.

Saves
How many times the form was saved (This column is hidden if no saves occurred on your website).

Submits
How many times the form was submitted.

Conv.
The conversion rate (Percentage of submits to views).

## How to Enable the Form Statistics Report

To enable this email report:

Click on WS Form > Settings in the WordPress admin menu to view the Global Settings.

Click the Reporting tab.

Click the Enable checkbox setting.

Click Save.

## Settings

The report can be configured using the settings described below.

### Enable

If checked, WS Form will schedule the report according your chosen settings. Uncheck this to stop reports from being sent.

### Published Form

If checked, WS Form will only include published forms in the report.

### Frequency

Choose how often you would like to receive the report. The options are:

Daily (You can also choose the day of the week for this option)

Weekly

Monthy

### Email To

Reports will be sent to the Administration Email Address configured in the General WordPress Settings admin page. You can override this by entering an alternative email address in this field. If you want to send the report to multiple recipients you can separate email addresses by spaces in this setting.

The Send Test button can be used to send a sample report to the configured email addresses. Be sure to click Save before clicking the Send Test button to ensure your latest settings are used.

### Email Subject

The default subject line is: WS Form - Form Statistics

You can use this setting to change the subject line of the email.

## Data Encryption

URL: https://wsform.com/knowledgebase/data-encryption/

WS Form PRO can encrypt your form submissions. Submission meta data is encrypted and decrypted seamlessly without any need for additional coding.

Disclaimer: We accept no responsibility for any data loss occurring as a result of using this feature. Losing, changing or deleting the encryption key will result in your submission data being permanently unreadable. Please refer to our Terms of Use for further information.

WS Form PRO can encrypt your form submissions. It features:

HKDF-SHA256 keys

AES-256-CTR encryption

Submission meta data is encrypted and decrypted seamlessly without any need for additional coding. Files uploaded to server (File upload and signature fields) are not encrypted.

## Requirements

PHP 5.6+

OpenSSL (Enabled by default in PHP 5.6+)

## Enabling Data Encryption

To enable data encryption:

Ensure your website is secured using SSL. Read more.

Click Settings from the WordPress administration menu.

Click on the Data tab.

Add the provided code to your wp-config.php file. We recommend adding this code just below the Authentication Unique Keys and Salts section of the file. Always ensure the file permissions of your wp-config.php file are secure. If you are unfamiliar with this file we recommend that you read Editing wp-config.php first. The key provided on the data tab will change each time it is loaded, but you can copy it at any point for use in your wp-config.php file. You must use the provided key as it is specifically formatted to be used with the php-encryption library.

Once you have installed the code, refresh the settings page and WS Form PRO will show that the key has been correctly installed. Note that WS Form will NOT show this same key again if you remove the key from wp-config.php so you may wish to keep a copy of this key in a separate secure location.

Enable data encryption by checking the Enable Data Encryption setting.

Click Save to save the settings.

Only submissions made after the point at which data encryption is enabled will be encrypted.

DO NOT CHANGE OR REMOVE THE KEY ONCE YOU HAVE INSTALLED IT. DOING SO WILL RENDER ENCRYPTED SUBMISSIONS UNREADABLE.

THE KEY PROVIDED BY WS FORM IN THE SETTINGS PAGE IS ONLY GENERATED ONCE. PLEASE ENSURE YOU DO NOT LOSE THIS KEY AND KEEP IT IN A SECURE PLACE. ENCRYPTED DATA AND KEYS CANNOT BE RECOVERED IF THE KEY IS LOST.

FILE UPLOADS AND SIGNATURES ARE NOT ENCRYPTED.

## Data Considerations

Data exported from WS Form PRO to a CSV file is not encrypted.

Action such as Webhook or any other third party integration will not send encrypted data.

Emails sent from WS Form PRO are sent using the standard wp_mail function and the data is therefore unencrypted. It is your responsibility to secure your email communication if you plan on sending email acknowledgements.

Files uploaded to server (File upload and signature fields) are not encrypted.

## Performance Considerations

Additional CPU time is required for encrypting and decrypting form submissions.

Additional database storage space is required for each encrypted submitted field.

Duplicate field value lookups cannot be used with encryption enabled.

The encryption system uses the popular php-encryption library developed by Taylor Hornby and Scott Arciszewski as well as numerous open-source contributors.

## Data Erasure Request Action

URL: https://wsform.com/knowledgebase/data-erasure-request/

WordPress has a Data Erasure Request feature that is seamlessly integrated with WS Form.

GDPR requires you provide users with a method of deleting their data from your records. WordPress has a Data Erasure Request feature that is seamlessly integrated with WS Form.

To create a data erasure request form:

Click Add New from the WS Form administration menu.

Click the GDPR tab at the top.

Click the Data Erasure Request template.

Click Publish when the form is created.

Add the form to your website.

For more information about GDPR, click here.

## Manually Creating a Data Erasure Request Form

You can also manually create a Data Erasure Request form. You will need a form that has an Email field on it. To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Data Erasure Request from the Action pulldown.

Select the Email field on your form for the Email Field setting.

Click Save at the bottom.

 

## Data Export Request Action

URL: https://wsform.com/knowledgebase/data-export-request/

WordPress has a Data Export Request feature that is seamlessly integrated with WS Form.

GDPR requires you provide users with a method of requesting their data from your records. WordPress has a Data Export Request feature that is seamlessly integrated with WS Form.

To create a data export request form:

Click Add New from the WS Form administration menu.

Click the GDPR tab at the top.

Click the Data Export Request template.

Click Publish when the form is created.

Add the form to your website.

For more information about GDPR, click here.

## Manually Creating a Data Export Request Form

You can also manually create a Data Export Request form. You will need a form that has an Email field on it. To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Data Export Request from the Action pulldown.

Select the Email field on your form for the Email Field setting.

Click Save at the bottom.

 

## Data Grid Column Mapping

URL: https://wsform.com/knowledgebase/data-grid-column-mapping/

Column mapping allows you to map different columns of your data grid to different parts of your field.

Data grids allow you to set up the options shown in Select, Checkbox and Radio fields.

To access the data grid, field click the settings icon on a field.

On a select field you access the data grid by clicking the Options tab. On a checkbox field it is called Checkboxes and on a radio field the tab is called Radios.

An example of a data grid would be a list of countries or states. A more advanced data grid might be a table containing country abbreviations, full names, and ISO codes.

## What is Column Mapping?

Column mapping allows you to map different columns of your data grid to different parts of your field.

Let's take a Select field for example:

Select fields contain options. Each option has a Value that is saved when the form is submitted and a Label that is shown to the user when viewing the form.

To determine which column of the data grid is mapped to the Value of an option and which column is used for the Label of an option, you use the Column Mapping settings. These settings are found in the Options tab when editing the field, immediately below the data grid, as shown in the screenshot below:

In its simplest form, a data grid can contain a single column and you would map that single column to all of the column mapping settings.

In a more advanced data grid you can use additional columns and map those columns to different column mapping settings. For example, you could add a Value column and map that to the value column mapping as is shown in the example above.

## Column Mapping Settings

The column mapping settings are described below:

### Labels Mapping

The Labels mapping setting determines which column of your data grid is used for the label of each option, i.e. what the user sees when choosing an option.

### Values Mapping

The Values mapping setting determines which column of your data grid is used for the value of each option, i.e. what value is saved when the form is submitted.

Values should be unique for each option.

### Action Variables Mapping

The Action Variables mapping determines which column to use if you reference a field in an action. For example, you might put:

#field(1)

... in a Send Email action. In the screenshot above we have mapped the Label column to Action Variables so the label of the option chosen by the user would appear in the email.

### Price Mapping

E-Commerce fields have an addition price mapping setting. This is used to determine which column in your data grid contains the price for that option.

Enter values without a currency symbol, e.g.

123.45

### WooCommerce Cart Mapping

The WooCommerce Cart mapping will only show if you have the WooCommerce Product Integrations extension installed. It determines which column to use when a field is shown in the WooCommerce cart.

## Adding Additional Columns to Your Data Grid

To add an additional column to your data grid, click the + icon at the top:

Once the column is added you can immediately name it and start to enter data.

## Other Data Grid Features

WS Form offers the most comprehensive tools for configuring your Select, Checkbox and Radio fields using data grids.

Other features of data grids include:

Data Sources - Load data from a variety of sources including Presets and data from Post and User data.

Import / Export CSV files - Bulk import and export CSV files to/from your data grid.

Checked, Disabled, Visibility toggling.

Auto Optgroup - Create optgroups automatically by choosing a column in your data grid.

## Using #field With Delimiter and Column Parameters

The #field variable allows you to extract the value of a field and place it elsewhere on your form or in an action.

#field can be used to dynamically access other columns of your data grid by providing additional parameters.

Learn more: Using #field With Delimiter and Column Parameters

## Data Grid CSV Import and Export

URL: https://wsform.com/knowledgebase/data-grid-csv-import-and-export/

Learn how to import and export WS Form data grids using CSV files, including multi-column layouts, grouped options, and system column settings.

In WS Form, Select, Checkbox, and Radio fields use a Data Grid to define choices. You can export that grid to a CSV file, edit it in a spreadsheet, and import it again, or build a CSV from scratch and import it.

### Where Import and Export Appear

Export CSV downloads a file with the current grid (all groups in one file).

Import CSV replaces the data grid using the file you choose.

You can also drag and drop a .csv file onto the data grid area to import it.

## Simple list of values (one column)

The minimum useful CSV is a header row naming your column, then one row per option.

Example:

Label
Apple
Banana
Cherry

After import, the grid has one column and three rows. You do not have to include system columns (below) unless you need them.

## Multi-Column Grids

Add more header names for each column you need (for example label, stored value, price). Each data row must have the same number of cells as your headers (aside from optional system columns—see below).

Example:

Label,Value,Price
Apple,apple,1.00
Banana,banana,1.50

Column names in the first row become the column labels in the builder. Your field’s settings (masks, value column, etc.) still control how those columns are used on the form.

Learn more: Data Grid Column Mapping

## System Columns (optional)

WS Form recognizes special column names (usually case-insensitive). They are not added as normal data columns; they set row behavior.

Column
Purpose

wsf_id
Numeric row ID. If omitted or duplicate, new IDs are assigned on import.

wsf_default
Use on to select this row by default.

wsf_required
Use on to mark the row as required where applicable.

wsf_disabled
Use on to disable the row.

wsf_hidden
Use on to hide the row.

wsf_group
Text label for the group/tab this row belongs to. See “Multiple groups” below.

A typical export puts system columns first, then your custom columns, for example:

wsf_id,wsf_default,wsf_required,wsf_disabled,wsf_hidden,wsf_group,Label,Value
1,on,,,Fruits,Apple,apple
2,,,on,,Fruits,Banana,banana
3,,,,on,Fruits,Cherry,cherry
4,,on,,,Fruits,Orange,orange
5,,,,,Fruits,Grape,grape
6,on,,,,Vegetables,Carrot,carrot
7,,,,,Vegetables,Broccoli,broccoli
8,,,on,,Vegetables,Spinach,spinach
9,,,,on,Vegetables,Onion,onion
10,,on,,,Vegetables,Potato,potato

## Multiple Groups

Data grids can have more than one group. Exports include every group in a single CSV.

The wsf_group column holds the group label for each row.

On import, each distinct wsf_group value becomes a group; first time a label appears in the file sets its order among tabs.

If wsf_group is missing from the file, the whole file imports as one group. The group label is derived from the file name (unless the import supplies a group label another way).

If the column exists but a cell is empty, that row is placed in a shared default group (labeled for translation as “Default” in the interface).

Workflow: export once, edit all tabs in one spreadsheet, save as CSV, import (or drag the file onto the grid) to restore multiple tabs in one step.

Learn more: How to Create Select Optgroups Using Data Grids

## Export File Name

CSV downloads use a fixed, generic file name: ws-form-data-grid-export.csv so exports are easy to spot and do not depend on which group was active.

## Tips

Prefer UTF-8 when saving from Excel or Google Sheets.

Keep the header row; the importer uses it to map columns and detect wsf_* fields.

After import, check the builder: column mappings and field-specific options may still need to match your columns.

Back up or export before large imports so you can revert by re-importing an earlier file.

After importing ensure your column mapping settings are correct.

## Data Grid Presets

URL: https://wsform.com/knowledgebase/data-grid-presets/

Quickly populate field data grids using built-in WS Form presets for countries, currencies, colors, industries, languages, and many other commonly used dataset…

WS Form includes a powerful collection of Data Grid Presets that enable you to quickly populate Select, Checkbox, Radio, and other choice-based form fields with pre-built option lists.

These presets help you build forms faster by eliminating the need to manually enter common datasets into a data grid. Popular presets include countries, currencies, credit card types, industries, languages, priorities, yes/no options, and many other commonly used form choices.

Data Grid Presets are ideal for contact forms, surveys, applications, registrations, payment forms, and any workflow that requires standardized dropdown, checkbox, or radio button options.

All presets are available through the Preset data source option within supported WS Form data grids.

## How to Use a Data Grid Preset in WS Form

Edit a Select, Checkbox, or Radio field in the WS Form form editor.

Open the appropriate data grid tab:

Options for Select fields

Checkboxes for Checkbox fields

Radios for Radio fields

Locate the Data Source setting at the top of the data grid.

Select Preset as the data source.

Choose a preset from the available list.

Click Get Data to automatically import the preset data.

Review the imported rows and configure column mapping if required.

Click Save & Close.

## Available Data Grid Presets

The following Data Grid Presets are included with WS Form:

## Data Grids

URL: https://wsform.com/knowledgebase/data-grids/

WS Form data grids make entering a list of information quick and easy. Data grids work in much the same way as a spreadsheet and provide a powerful way of mana…

Data grids allow you to set up the options shown in Select, Checkbox and Radio fields.

To access the data grid, field click the settings icon on a field.

On a select field you access the data grid by clicking the Options tab. On a checkbox field it is called Checkboxes and on a radio field the tab is called Radios.

An example of a data grid would be a list of countries or states. A more advanced data grid might be a table containing country abbreviations, full names, and ISO codes.

A data grid for a checkbox and the corresponding output is shown below:

Data grids can be easily populated by:

Manually entering data in a spreadsheet like interface.

Using one of our many presets (e.g. Country and state lists).

Pulling data from external data sources such as Posts, Users, Terms or even Advanced Custom Fields.

## Editing a Data Grid

To access the data grid, first click the settings icon on a Select, Checkbox or Radio field. You'll then find the data grid under:

Options tab for Select fields

Checkboxes tab for Checkbox fields

Radios tab for Radio fields

Tip: Click the expand icon (top right) to make the data grid editor the full width of the page.

The data grid editor is made up of the following components:

### Data Source

At the top of the data grid is the Data Source setting. When this is set to Off you can manually edit the data grid much like you would a spreadsheet.

Data sources allow you to pull data into your data grid automatically. You can import preset lists such as country or state names. You can also import data from Post, User, Term and from third party plugins such as Advanced Custom Fields.

### Groups

Data grids can have one or many groups. Groups are much like a sheet in a spreadsheet. Groups are used, for example, to group pulldown options into logical sets.

If your data grid only needs one logical list of data, e.g. a list of states or countries, you can stick to just one group. Note that some types of data grids are restricted to one group.

To add a group, click the add icon.

To delete a group, click the delete icon, while hovering over the group tab.

To rename a group, click on the settings icon, then enter a new label for the group.

You can also reorder groups by clicking and dragging them.

All groups have the same columns.

### Columns

Data grid columns in a data grid enable you to introduce new dimensions to your data. For example if you needed to store a state abbreviation in your form submission but display the full state name in your form to the website visitor, you would use two columns: State Abbreviation and State Full Name. You would then select the State Abbreviation as the value and the State Full Name as the label.

To add a column, click the add icon at the top right of the data grid table.

To delete a column, click the delete icon while hovering over the column name.

To rename a column, double click on the column heading, then enter a new label for the column.

## Rows

Each data grid record is represented as a row in the data grid table.

To add a row, click the add icon at the bottom right of the data grid table.

To delete a row, click the delete icon in the rightmost column of the row you wish to delete.

## Data

To edit the data in a data grid, simply click on a cell in a particular column and row and edit the value, much like you would in a spreadsheet. Pressing Return or clicking away from the cell will save it.

You can add HTML to cells too.

## Inserting Images

When you hover over a cell, the Insert Image icon will appear. Click on the icon to open the WordPress Select image modal. Select an image and then click Use this image. WS Form will then insert the HTML for that image in your cell.

## Row Settings

Each row will have various settings you can enable or disable. These settings are shown on the rightmost side of the data grid row.

Hover over the squares to see the available options. Different types of field will offer one of the four settings.

 Selected This is the default selected row for the field type. For example this might be the default option that is shown in a select pulldown. If no rows are selected, the top row will be selected by default. Some field types allow you to select multiple selected rows by default.

 Required Checkboxes and radios only. This will set the row to required. This means that the website visitor must check or select that row in order for the field to be valid. This is useful, for example, when you want to have a privacy policy or terms of use checkbox.

 Disabled This will disable a row. For a select pulldown, this will typically show the row in light gray. For checkboxes and radio buttons, the input will be grayed out. Website visitors will be unable to select that row if the disabled setting is enabled.

 Hidden This setting lets you hide a row completely from the form. This is useful if you want to temporarily hide a row and then show it at a later date.

## Bulk Actions

As well as deleting and changing settings at a row level, you can also bulk change or delete rows using the bulk action tool.

Select the rows you want to affect by checking the boxes in the leftmost column of the data grid. This will activate the bulk actions pulldown from which you can choose:

Set default

Set not default

Set required (Checkboxes and radios only)

Set not required (Checkboxes and radios only)

Set disabled

Set not disabled

Set hidden

Set not hidden

Delete

Click Apply to apply the bulk action.

## Rows Per Page

You can select how many rows are shown per page using this option. Select a number from the pulldown, then click the Apply button.

## Settings

The settings icon opens up further settings for the current group you are on.

### Label

Use this to edit the label of the group you are currently editing.

### Wrap in Optgroup (Select Fields)

For select fields you can wrap the options created from your data grid in an optgroup. An optgroup enables you to add groups of options in a pulldown. An example of using this might be to split countries into continents. If this is enabled, you have the option of disabling an entire optgroup much like you could an individual row.

### Auto Group By

This powerful feature enables you to automatically create data grid groups by selecting a particular column of your data grid.

Below we use the example of counties and continents to demonstrate this:

Assume you had two columns. The first column is called Continents. The second column is Countries. The first column would contain repetitions of the continents for each row containing a country in that continent.

By selecting Continents under the Auto Group By pulldown, WS Form will split up the rows into separate groups. Each group will contain the countries for each continent. You can then enable the Wrap in Optgroup feature to create an easy-to-use select pulldown that is logically grouped into continents.

## Export

You can export any of the groups by clicking the Export icon. This will download the current group in CSV format. The CSV file also contains columns for the row settings (see above).

## Import

You can import any CSV file into a data grid. This is useful for importing data such as a country or state list.

To import a CSV file, either click the Import icon or drag a CSV file into the data grid area. When you drag the file into the data grid area a blue box will appear with a dashed outline. Release the file into that area and the CSV import will being.

Note that when you import a file, all data in that data grid will be replaced with the CSV you import.

For sample CSV files that can be imported into a data grid, click here.

## Column Mapping

Depending on the field type you are editing, you will typically find a series of pulldowns below the data grid editor that enable you to select which column to use for a particular element of that field.

For example select pulldowns have a label and value. The label is what is shown to the website visitor. The value is what is ultimately stored in the form submission. You can set the label and value to the same column if you wish, or choose two different columns for the value and label.

Learn more: Data Grid Column Mapping

## Data Sources

URL: https://wsform.com/knowledgebase/data-sources/

WS Form data sources allow you to pull data from elsewhere into data grids for select, checkbox and radio fields.

Data sources are used to automatically populate Select, Checkbox and Radio fields as well as any other fields that support data lists (e.g. text fields).

### Demo

Examples of using data sources include:

Populating a select field with U.S. states.

Populating checkboxes that represent post tags or categories.

Populating radio buttons for selecting a user.

Populating a select field with options from an ACF, Meta Box, Pods or Toolset choice field.

Populating a select field with data returned from a PHP filter hook.

You'll find the data source option at top of all field data grids.

By default, the data source will be Off. The Off setting allows you to manually edit the data grid to control which items appear in your field.

Here's how to use a data source:

## 1. Select Data Source

Click the settings icon of the field you want to use a data source with.

Click on the right most tab in the sidebar (e.g. for a Select field this is called Options)

Use the Data Source setting to select a data source.

The following data sources can be selected:

Preset
Choose from over 25 categorized data sources such as a list of countries or US states.

Posts
List posts, pages or any other custom post types.

Terms
List terms from any taxonomy, also referred to as categories and tags in WordPress.

Users
List users filtered by role.

WordPress Filter Hook (Learn More)
Populate data grids using your own custom PHP code.

ACF Field Options (Advanced Custom Fields plugin)
Pull choices from ACF fields such as select and checkbox fields.

Meta Box Field Options (Meta Box plugin)
Pull choices from Meta Box fields such as select and checkbox fields.

Pods Field Options (Pods plugin)
Pull choices from Pods relation fields.

Toolset Field Options (Toolset plugin)
Pull choices from Tools relation fields.

Once you have selected a data source, the settings for that data source will be displayed.

## 2. Configure The Data Source

Each data source has its own settings. The Preset data source simply requires that you choose a preset. Other data sources such as Post have many more options that allow you to control and filter the data retrieved.

## 3. Get Data

Once you have configured the data source, you need to retrieve the data. To do this simply click on the Get Data button.

Once the data is retrieved it will be displayed in a preview data grid:

In the above example, we retrieved a list of countries using the Preset data source. Because this data is static, WS Form will change the Data Source dropdown to Off and then allows you to edit the data grid. Other data sources such as Post or Term are not editable because they update dynamically according to the posts or terms you have created in WordPress.

WS Form updates data sources in real-time. This means that if you create a select field that lists all users, it will keep that list up to date with all the users you have in your WordPress admin. Likewise if you create a field that lists all of your posts, it will keep that list up to date with all the posts you create.

It is possible to make any data source static and no-longer update automatically by choosing Off as the Data Source . Note that when Off is selected, the data grid will not update automatically if the original source data is changed.

## 4. Column Mapping (Optional)

Once you are happy with the data you have retrieved you should ensure your column mapping is correct. The column mapping settings are shown underneath the data grid.

There are three column mappings to consider:

Labels
Choose which column is used as the label shown to the user on the form.

Values
Choose which column is used as the value stored when a choice is made by the user.

Action Variables
Choose which column is used for displaying a users choice in email notifications and other integrations or actions.

By default, WS Form will use the first column for each of these settings.

Each time you retrieve new data you should ensure the column mappings are correct.

## 5. Save

Click Save & Close (or Save if you wish to make further edits) to save your data source settings.

## 6. Preview

Click the Preview button at the top of the layout editor to preview the form and test the field contain your data source settings.

## Data Sources: Google Sheets

URL: https://wsform.com/knowledgebase/data-sources-google-sheets/

The Google Sheets integration includes a data source that can be used to feed sheet data into Select, Checkbox and Radio fields.

The Google Sheets integration includes a data source that can be used to feed sheet data into Select, Checkbox and Radio fields.

An example use case for this feature would be populating the options shown in a select field from a sheet in Google Sheets. When the sheet rows are changed, the options in your field will also change automatically and are kept synchronized on you WordPress form.

## Creating a Google Sheet

The setup of a Google Sheet for use with a WS Form data source is very simple. The first row contains the column headings and the rest of the rows below that contain the data. An example sheet would look as follows:

Value
Label

option1
Option 1

option2
Option 2

option3
Option 3

option4
Option 4

option5
Option 5

option6
Option 6

There is no strict layout requirement other than the first row being headings. The WS Form column mapping system allows you to use virtually any sheet layout.

## Creating a Google Sheets Data Source

To create a Google Sheets data source for a Select, Checkbox or Radio field:

Edit the field.

For a Select field, click the Options tab. For a Checkbox field, click the Checkboxes tab. For a Radio field, click the Radios tab.

Choose Google Sheets from the Data Source setting.

Choose the file you want to load data from in the File setting.

Choose the sheet you want to load data from in the Sheet setting.

The update frequency determines how often WS Form should retrieve the data from the source. This defaults to Once Hourly but you can change this to Real-Time or a different increment of time. When previewing a form, real-time data is always used.

Click Get Data to do a test retrieval of the data from the sheet. The data will then appear below in a data grid.

## Column Mapping

Column mapping allows you to map different columns of your data grid to different parts of your field.

In the example above we would want to map the Value column to the Values mapping and the Label column to the Labels and Action Variables mapping.

## Setting Row Attributes

Depending on the field type, the following heading labels can be used to set row attributes:

Heading
Attribute
Field Types
Example

wsf_default
Default
Select, Checkbox, Radio
For a Select field, the option would be selected

wsf_required
Required
Checkbox, Radio
For a Checkbox field, the checkbox would be required

wsf_disabled
Disabled
Select, Checkbox, Radio
For a Select field, the option would disabled

wsf_hidden
Hidden
Select, Checkbox, Radio
For a Select field, the option would be excluded

An example Google Sheet using these headings for a Select field would be:

Value
Label
wsf_default
wsf_disabled

option1
Option 1
Yes

option2
Option 2

option3
Option 3

Yes

option4
Option 4

option5
Option 5

option6
Option 6

To enable an attribute you can use any of these cell values:

Yes / yes

On / on

True / true

1

 

## Data Sources: WordPress Filter Hook

URL: https://wsform.com/knowledgebase/data-source-wordpress-filter-hook/

The WordPress Filter Hook data source allows you to dynamically populate a data grids with your own data for fields such as Select, Checkboxes and Radios.

The WordPress Filter Hook data source allows you to dynamically populate data grids with your own data for fields such as Select, Checkboxes and Radios. It can also be used to populate data lists for fields such a Text, Email and URL. This done by writing custom PHP code.

Examples of ways in which you could populate a data grid using this data source include:

Querying a MySQL database

Dynamically reading data from a CSV or XML file

Complex WP_Query calls

The possibilities are endless!

## What are WordPress Filter Hooks?

WordPress Filter Hooks give you the ability to change data during the execution of WordPress Core, plugins, and themes. Callback functions for Filter Hooks accept a variable, modify it, and return it. Filters Hooks expect to have something returned back to them.

## Adding the Data Source to a Field

To add a data source to a field:

Click the settings icon of the field you want to use a data source with.

Click on the right most tab in the sidebar (e.g. for a Select field this is called Options)

Use the Data Source setting to select the WordPress Filter Hook data source.

Enter the name of our filter hook.

## Creating The Filter

First we are going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

You can learn more about this function by clicking here.

The tag we will use is a WS Form filter called:

wsf_test_data_source_hook

The second parameter provides WordPress with the callback function through which the form validation parameters will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function. In the case of the WordPress Filter Hook, 3 parameters are passed.

The complete statement looks something like this:

add_filter( 'wsf_test_data_source_hook', 'wsf_test_data_source_hook_callback', 10, 3 );

You would typically add this code to your WordPress themes functions.php, and preferably in a child theme to avoid it getting deleted if you update your theme.

## Creating The Callback Function

This callback function is called automatically by WS Form when the data grid is populated.

Three parameters are passed to the callback function:

$data_grid - This array contains the data grid itself. It defines the columns, groups and rows of data for the data grid.

$field_id - This is the field ID on your form that is being populated. You can use this to ensure the data grid you are populating relates to the appropriate field.

$form_object - This is the entire form object should you need to reference it.

Here is an example of the callback function:

// My callback function for tag wsf_test_data_source_hook
function wsf_test_data_source_hook_callback( $data_grid, $field_id, $form_object ) {

 // Check field ID
 if( $field_id !== 123 ) { return $data_grid; }

 // Build new data grid here
 // ...

 // Return the data grid back to the filter
 return $data_grid;
}

This example does the following:

Checks that the field ID equals 123. You would replace this with the field ID you wish to populate.

A new data grid array is built.

The data grid is returned to the filter.

## A Full Example

A full example showing the format of the $data_grid array is shown below:

// Add a filter for WordPress Filter Hook data source to use
add_filter( 'wsf_test_data_source_hook', 'wsf_test_data_source_hook_callback', 10, 3 );

// My callback function for tag wsf_test_data_source_hook
function wsf_test_data_source_hook_callback( $data_grid, $field_id, $form_object ) {

 // Check field ID
 if( $field_id !== 48136) { return $data_grid; }

 // Build new data grid

 // Define columns
 $data_grid[ 'columns' ] = array(

 // Column 1
 array( 'label' => __( 'Value' ) ),

 // Column 2
 array( 'label' => __( 'Label' ) )

 // Other columns ...
 );

 // Define first group
 $data_grid[ 'groups' ] = array(

 // Group 1
 array(

 // Label for first group
 'label' => __('My First Group'),

 // Setting mask_group to 'on' will do the following:
 // Select fields: Wraps the rows in an optgroup tag
 // Checkbox and Radio fields: Wraps the rows in a fieldset tag
 'mask_group' => '',

 // Define rows in first group
 'rows' => array(

 // Row 1
 array(

 // Set as default row
 'default' => true,

 // Set required (Checkbox fields only)
 'required' => false,

 // Set disabled
 'disabled' => false,

 // Set hidden
 'hidden' => false,

 // Column data
 'data' => array(

 // Column 1
 'value_1',

 // Column 2
 __( 'Label 1' )
 )
 ),

 // Row 2
 array(

 // Column data
 'data' => array(

 // Column 1
 'value_2',

 // Column 2
 __( 'Label 2' )
 )
 ),

 // Row 3
 array(

 // Column data
 'data' => array(

 // Column 1
 'value_3',

 // Column 2
 __( 'Label 3' )
 )
 )

 // Other rows ...
 )
 )

 // Other groups ...
 );

 return $data_grid;
}

You can use any PHP code you wish to populate the data grid.

## Retrieving Your Data

To test your PHP script, click the Get Data button. If an error occurs, WS Form will show an alert in the layout editor. If the data is successfully retrieved it will be shown in a data grid. This allows you to proceed to column mapping.

The Get Data button is only required for retrieving data to test your PHP script output and/or column mapping. Data is automatically retrieved when the select field is shown on your website.

If your PHP code relies on the $post global variable, note that when the Get Data button is clicked, $post won't be available. This is because the request is coming from a WordPress admin page rather than a page or post on your website. If your code relies on obtaining a post ID, then you should check if the $post global variable is available, and if not perhaps set the post ID to a test ID you can use for the purpose of testing your code.

// Test post ID for "Get Data" requests from the admin sidebar
$post_id_test = 123;

// Set post ID
$post_id = ( empty( $post->ID ) ? $post_id_test : $post->ID );

## Column Mapping

If your returned data contains multiple columns of data, you can use column mapping to determine which columns are used for the value and labels of Select, Checkbox and Radio fields. The column mapping settings are shown underneath the data grid.

There are three column mappings to consider:

Labels
Choose which column is used as the label shown to the user on the form.

Values
Choose which column is used as the value stored when a choice is made by the user.

Action Variables
Choose which column is used for displaying a users choice in email notifications and other integrations or actions.

By default, WS Form will use the first column for each of these settings.

Each time you retrieve new data you should ensure the column mappings are correct.

## Database Tables

URL: https://wsform.com/knowledgebase/ws-form-database-tables/

This article lists the database tables used by WS Form LITE and PRO.

Modifying database records yourself using MySQL is done at your own risk.

We are unable to provide support for any changes or imports made to these tables.

Always create a backup of your database before making changes.

WS Form LITE and PRO use the following database tables.

Table Name
Description

[table prefix]wsf_form
Forms

[table prefix]wsf_form_meta
Form Metadata

[table prefix]wsf_form_stat
Form Statistics

[table prefix]wsf_group
Tabs

[table prefix]wsf_group_meta
Tab Metadata

[table prefix]wsf_section
Sections

[table prefix]wsf_section_meta
Section Metadata

[table prefix]wsf_field
Fields

[table prefix]wsf_field_meta
Field Metadata

[table prefix]wsf_style
Styles

[table prefix]wsf_style_meta
Style Metadata

[table prefix]wsf_submit
Submissions

[table prefix]wsf_submit_meta
Submission Metadata

[table prefix]wsf_submit_note
Submission Notes

The default WordPress table prefix is wp_.

Settings data is saved in the wp_options table using the meta key ws_form.

## Date Formats

URL: https://wsform.com/knowledgebase/date-formats/

Date formatting in WS Form follows the same conventions used when formatting PHP dates.

Date formatting in WS Form follows the same conventions used when formatting PHP dates. For a list of available formatting string options, see the PHP date manual page.

Variables that use date formatting strings are as follows:

#field_date_format(field_id, "formatting string")

#post_date_custom("formatting string")

#server_date_custom("formatting string")

#blog_date_custom("formatting string")

#client_date_custom("formatting string")

For example:

#server_date_custom("m/d/Y H:i:s")

## Date/Time Field

URL: https://wsform.com/knowledgebase/datetime/

The Date/Time picker field creates a date and time selection popup. This field is useful for setting specific dates and times such as an event's start-and-end…

The Date/Time field creates an input that lets the website visitor choose one of the following types:

Date

Time

Date/Time

Week

Month

## Demo

## Adding a Date/Time Field

To learn how to add, edit, clone, move, resize, offset, or delete a date/time field, please click here.

For a cheat sheet on some of the most popular ways of configuring the date/time field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Type

Choose from one of the follow types for the date/time field:

Date

Date/Time

Month

Time

Week

See demo above for examples of each of these types.

### Date Format

Select the date format that will be used by the jQuery date picker when a date is selected. The available formats are:

Format
Example Output

Default
Uses the WordPress date format

F, j Y
January 20, 2030

Y-m-d
2030-01-20

m/d/Y
01/20/2030

d/m/Y
20/01/2030

If you have the jQuery date picker disabled in Settings, the date format will be ignored.

### Time Format

Select the time format that will be used by the jQuery date picker when a time is selected. The available formats are:

Format
Example Output

Default
Uses the WordPress time format

g:i a
10:20 pm

g:i A
10:20 PM

H:i
22:20

If you have the jQuery date picker disabled in Settings, the time format will be ignored.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Inline

If checked, the date / time picker will always be shown without the need of clicking on an associated input field. See demo above.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #server_date_custom("Y-m-d") to insert the current server date.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the date/time field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the earliest date/time that can entered into the field. You should enter a date in the format: yyyy-mm-dd (where yyyy = 4 digit year, mm = 2 digit month, dd = 2 digit day). For example:

2020-01-01

You can also enter a minimum date which is the current date plus or minus a certain number of days. This is done by using the date 1970-01-01 and then adding days to it. For example:

+1970-01-05

... this would set the minimum date to be the current date plus 4 days.

-1970-01-05

... this would set the minimum date to be the current date minus 4 days.

#### Maximum

This is the latest date/time that can be entered into the field. You should enter a date in the format: yyyy-mm-dd (where yyyy = 4 digit year, mm = 2 digit month, dd = 2 digit day). For example:

2020-01-01

You can also enter a maximum date which is the current date plus or minus a certain number of days. For example:

+1970-01-05

... this would set the maximum date to be the current date plus 4 days.

-1970-01-05

... this would set the maximum date to be the current date minus 4 days.

#### Start Year

Set the start year for the year selector.

#### End Year

Set the end year for the year selector.

#### Disabled Week Days

Select which days to disable.

Click the Add  icon to add a new day.

Choose a day.

Repeat this for each day you wish to disable.

Click Save.

#### Disabled Dates

Select which dates to disable.

Click the Add  icon to add a new date.

Enter a date in the format: yyyy-mm-dd.

Repeat this for each date you wish to disable.

Click Save.

#### Enabled Dates

Select which dates to enable.

Click the Add  icon to add a new date.

Enter a date in the format: yyyy-mm-dd.

Repeat this for each date you wish to enable.

Click Save.

#### Time Step (For Date / Time and Time Types)

If your date / time picker has a time picker, this setting determines the increment of times shown in minutes. This defaults to 15 minutes. Set it 60 to only show hours.

#### Step

The step setting lets you set the interval between the date type chosen that will be valid. For example if the type is Month and the step is 2,  every second month in the calendar can be selected.

#### Input Mask

Input masks help the user with the input by ensuring a predefined format. This can be useful for fields such as dates, numerics and phone numbers.

Example input masks can be selected by clicking the hamburger icon .

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element's value is checked against. This field is useful in, for example, forcing a website visitor to enter a phone number or date in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Debug Console - Testing and Debugging Forms

URL: https://wsform.com/knowledgebase/debug-console/

Learn how to use the WS Form debug console to rapidly test and debug forms.

The debug console enables rapid testing and debugging of WordPress forms created with WS Form PRO when viewing a form.

It has a populate feature that automatically completes the fields on your form with appropriate data and, in most cases, will enable you to submit a test form in a single click!

The debug console features a wealth of information about your form, including performance data on how quickly it was rendered in the browser and how long a submission took on the server.

It is also the place to find useful logs and error messages about your form.

## Enabling the Debug Console

If you let us know you are a developer when you completed the welcome steps after installing the plugin, the debug tool will already be enabled.

If the debug tool is disabled and you want to enable it:

Click WS Form in the Wordpress administration menu.

Click Settings.

Click the Basic tab at the top of the page.

Look for the Debug Console pull-down menu and select Show always if you always want to show the debug console on the front of your website, or Administrators only if you only want the debug console to appear if you are signed in as an administrator.

Click Save to save your changes.

The Show always option is useful during the development of a website, but remember to switch this off prior to go live of a new website.

The Administrators only option is the best option to use if you want to see the debug tool whenever you are signed into Wordpress as an administrator.

## Features of the Debug Console

### Resizing the Debug Console

The debug console can be resized by clicking and dragging the top bar. Adjust the debug console to your desired height and then release. You can also reset the height by clicking the + icon at the top right of the debug console, as well as minimizing the debug console by clicking the - icon.

### Instances

WS Form allows you to have multiple instances of the same or different forms on the same web page. This is useful if, for example, you want a newsletter form to appear in the header and footer of your website.

The instances of forms on a particular website are shown at the top of the debug console. Simply click an instance name to view information about that particular instance.

Each instance has its own independent set of tools and logs. To access the different features simply click the sub tabs found under the instance tabs. The different features are titled Tools, Log and Errors.

### Tools

The tools tab provides a variety of buttons along the top to help with testing a form instance as well as technical information about the form instance below that.

The tools are as follows:

#### Populate

By clicking the Populate button, WS Form will run through each of the fields on your form and attempt to complete them with random data that would qualify the form as validated. Each time you click the Populate button, the form will be re-populated with different data.

Note that some fields, such as the reCAPTCHA field, cannot be automatically populated and you will be required to complete them manually.

#### Submit

Click Submit to submit your form. WS Form will validate the form and, if validated, will submit your form and run your form actions.

#### Populate & Submit

As the title suggests, this populates the form with sample data and then submits the form in a single click.

#### Save

This performs the same action as the Save button.

#### Reload

This button will reload the form completely and set it up as if the page had just loaded.

#### Reset

This button resets the form fields to their initial state, including any default values.

#### Clear

This button will clear the form fields, regardless of their initial default values.

#### Identify

If you have a page with multiple instances of a form, clicking this will highlight the form on the page so that you can identify which form the debug instance tab relates to.

#### Edit

This will open the form builder for the form instance in a new browser tab.

#### Submissions

This will open the submissions page for the form instance in a new browser tab.

### Logs

The  logs tab provides useful information as events occur in your tab. Different types of log are color coded to make identifying certain types of log easier. You can consider anything in the Logs tab a successful event. The following types of event are logged here:

Spam protection (e.g. Honeypot)

Duplicate protection (e.g. Disabling the submit button on submit)

Conditional logic

Actions

Google Analytics

Tracking

JQuery events

Form rendering

### Errors

Any server side errors that occur are captured here. This is useful for debugging errors such as email send issues or API connection issues with third parties such as MailChimp or ConstantContact if your key is incorrect.

## Deduplicating Form Submissions

URL: https://wsform.com/knowledgebase/deduplicating-form-submissions/

If a duplicate value is submitted into a field you can configure it to show a validation error.

WS Form allows you to prevent a form submission if a duplicate value is entered into a field on your form.

If a duplicate value is submitted into a field and the form is submitted, a deduplicate validation error will appear on the field. The message can be fully customized.

## Supported Field Types

The following field types support deduplication of data:

Text

Text Area

Number

Phone

Email

URL

Date/Time

Range Slider

Color

Rating

Search

## Deduplication Time Periods

Deduplication can also be assessed over the following time periods:

All Time

Current Day

Past Hour

Past Day

Past Week

Past Month

Past Year

## Configuring a Field for Deduplication

To configure a field for deduplication:

Click the Settings icon on a field to access the settings sidebar.

Click the Advanced tab.

Scroll down to the Duplication section and check the No Submission Duplicates setting.

Choose a timeframe using the Within setting.

Enter a custom message if you wish. The message will appear on the field as a validation message if a duplicate is found within the timeframe chosen.

Click Save.

## Disable the Virtual Keyboard on Mobile Devices for Date/Time Fields

URL: https://wsform.com/knowledgebase/how-to-disable-the-virtual-keyboard-on-mobile-devices-for-date-time-fields/

When using date/time field on mobile devices, the virtual keyboard can make interacting with the calendar distracting. Learn how to disable the virtual keyboar…

When using date/time field on mobile devices, the virtual keyboard that appears when you tap the date field can make interacting with the calendar distracting.

WS Form includes a Disable Virtual Keyboard setting on the date/time field. When checked, the mobile browser will be instructed to not show a virtual keyboard when the date/time picker is clicked.

## Demo (Mobile Only)

## How to Disable the Virtual Keyboard

To disable the virtual keyboard, first click on the settings icon on the date/time field.

Next check the Disable Virtual Keyboard option, then click Save & Close.

## Compatibility

This feature adds an attribute of inputmode="none" to the date/time input.

Learn more on caniuse.com about the cross browser compatibility of this setting.

## Alternative Method

WS Form also offers an inline date/time picker. Simply check the Inline setting when editing a date/time field.

## Display Checkboxes or Radios in Columns

URL: https://wsform.com/knowledgebase/display-checkboxes-or-radios-in-columns/

It is possible to use the grid orientation setting in checkbox and radio fields to display checkboxes or radios in a grid format.

It is possible to use the grid orientation setting in checkbox and radio fields to display checkboxes or radios in a grid format.

WS Form form layouts typically work with a 12 column grid (Learn more about responsive layouts). In addition to the grid, we also support different layouts for different breakpoints. A breakpoint represents a device screen width such as a mobile device, tablet, laptop or desktop computer.

WS Form supports different checkbox or radio grid configurations for each breakpoint. This means you can have a single column layout on mobile and a multi column layout on larger screen sizes, making the layout fully responsive.

## Demo

If you are on a computer, drag your web browser width to view the following responsive demo.

## Tutorial

To add columns to a checkbox or radio field (this includes e-commerce price checkbox and price radio fields):

Click the field settings icon. This will open up the field settings sidebar.

Under the Layout section of the sidebar is the Orientation setting. Select Grid.

After selecting Grid, the breakpoints for the current framework will be shown. For each breakpoint you can configure a column width. The full width will result in a single column format. The 1/2 with will result in a two column format, and so on. If you choose a column width on the smallest breakpoint, the larger breakpoints will inherit that same width unless you manually override that with a different value. An example configuration is shown below:

The Optimize button will enable if WS Form can help with improving the efficiency of the breakpoint configuration. Simply click on Optimize and WS Form will automatically reconfigure the widths. If you want to reset all of the widths and start over with a new configuration, click Reset.

Click Save and then click Preview to try your grid configuration.

## Display WordPress Form Submissions with DataKit

URL: https://wsform.com/knowledgebase/datakit/

DataKit is a PHP SDK that allows you to easily display WS Form submissions on the front-end of your website.

DataViews is a WordPress component that provides an API to render datasets using different types of layouts (table, grid, list, etc.). DataViews is included with WordPress.

DataKit is a PHP SDK that allows you to easily create DataViews from a variety of data sources, including WS Form.

## Demo

[dataview id="ws-form-datakit-dataview-test"]

## Tutorial

The DataKit plugin includes a WS Form data source which can be used to create DataViews that show WS Form submissions from any of your forms. Registering a DataView is achieved with some simple PHP code that can be added to functions.php or a code snippet plugin.

This tutorial explains how the above demo is achieved.

### Install DataKit

To learn how to install the DataKit plugin, please refer to https://docs.datakit.org/.

### Create Table Data Source

First create an instance of the WSFormDataSource class. In this example we create an instance for form ID 123. Change 123 to match your form ID.

// Create table data source
use DataKitPluginDataWSFormDataSource;

$dk_table_data_source = new WSFormDataSource( 123 );

### Create Table Fields

Next we configure which fields we want to display in the data view. DataKit provides a variety of different field types. In this example we are going to display an image field for a WS Form File Upload field and text fields for the name, email and phone fields.

// Create table fields
use DataKitDataViewsFieldImageField;
use DataKitDataViewsFieldTextField;

$dk_table_fields = array(

 // File Upload (ImageField)
 ImageField::create( 'field_1', 'Photo' )->not_sortable()->alt( 'My Image' )->size(50),

 // First Name (TextField)
 TextField::create( 'field_2', 'First Name' )->sortable()->always_visible(),

 // Last Name (TextField)
 TextField::create( 'field_3', 'Last Name' )->sortable()->always_visible(),

 // Email (TextField)
 TextField::create( 'field_4', 'Email' )->sortable(),

 // Phone (TextField)
 TextField::create( 'field_5', 'Phone' )->sortable(),
);

You can also include other submission meta data by changing the first parameter in the create method, for example:

id

date_added

date_updated

status

status_full

duration

tracking_remote_ip (Any tracking enabled is available as a meta key)

For security reasons, user data is not exposed publicly.

### Create Table Data View

Next we create the table data view by using the table method of the DataView class. In this example, we are using the paginate method to set the rows per page to 5.

// Create table data view
use DataKitDataViewsDataViewDataView;

$dk_table_data_view = DataView::table(

 // Table ID
 'ws-form-dataview',

 // Table data source
 $dk_table_data_source,

 // Table fields
 $dk_table_fields,

)->paginate(5);

### Register Table Data View

Next, we register the table data view. This needs to occur when the WordPress init action runs.

// Register table data view
add_action( 'datakit/loaded', function() use ( $dk_table_data_view ) {

 do_action( 'datakit/dataview/register', $dk_table_data_view );
} );

### Add Shortcode to Page

Once the table data view has been registered it can then be embedded into any page using the dataview shortcode.

&lsqb;dataview id="ws-form-dataview"&rsqb;

## Tips

When using File Upload fields you should choose a public File Handler setting such as Media Library, otherwise the images won't render in the DataView.

## Further Reading

DataKit

DataKit Documentations

DataViews Component

## Divi 4 Visual Builder Module (Legacy)

URL: https://wsform.com/knowledgebase/divi-visual-builder-module/

If you use Divi for your WordPress website, you can use the WS Form PRO module to easily add forms to your website.

This module is maintained for Divi 4 compatibility. Divi 5 users should use the WS Form Divi 5 module instead.

If you use Divi for your WordPress website, you can use the WS Form PRO module to easily add forms to your website. The module is ready to use a soon as you have installed WS Form PRO, no additional plugins are required.

To use the module, simple click + and select the WS Form module when editing a page in Divi.

Then select your form from the pulldown list and that’s it!

For more information about Divi, click here. Divi is a plugin developed by Elegant Themes.

The Divi module was introduced in version 1.4.0 of WS Form PRO.

## Divi 5 Visual Builder Module

URL: https://wsform.com/knowledgebase/divi-5-visual-builder-module/

Add powerful, customizable forms to your Divi 5 website instantly using the native WS Form PRO module, with no additional plugins required.

If you use Divi 5 for your WordPress website, you can use the WS Form PRO module to easily add powerful, fully customizable forms directly within the Divi builder. The module is ready to use as soon as you install WS Form PRO, so there are no additional plugins, integrations, or setup steps required.

This makes WS Form one of the fastest ways to add professional forms to a Divi website. Whether you are creating contact forms, lead generation forms, surveys, registration forms, or multi-step workflows, everything can be managed directly inside Divi while taking advantage of the full WS Form feature set.

The WS Form Divi module is designed to feel completely native inside the Divi 5 builder. Once installed, it behaves just like any other Divi module, allowing you to quickly insert forms anywhere in your layout.

Because WS Form is built with performance and flexibility in mind, it integrates smoothly with Divi’s visual editing experience. You can design complex forms in WS Form and simply drop them into any Divi section, row, or layout without needing to copy shortcodes or manually configure embeds.

To use the module, simply click + and select the WS Form module when editing a page in Divi.

Once the module is added to your layout, you can select your form from the pulldown list and that’s it. The selected form will instantly render within your page layout.

This simple workflow means you can:

Build and manage forms centrally in WS Form

Insert them anywhere in your Divi layouts

Update forms without editing the page layout again

Reuse forms across multiple pages

WS Form also supports advanced capabilities that make it especially useful for Divi websites, including conditional logic, calculations, multi-step forms, integrations, spam protection, and detailed form analytics. These features allow you to go far beyond basic contact forms and create interactive, high-converting form experiences directly inside Divi.

For developers and designers working with Divi 5, this integration keeps your workflow efficient. Forms remain modular and maintainable while still being fully compatible with the visual builder.

For more information about Divi, click here. Divi is a plugin developed by Elegant Themes.

The Divi 5 module was introduced in version 1.10.80 of WS Form PRO.

## Divider Field

URL: https://wsform.com/knowledgebase/divider/

The divider is used to introduce a horizontal rule to your form. It is useful for separating areas of your form to make it easier to read.

The Divider field is used to introduce a horizontal rule to your form. It is useful for separating areas of your form to make it easier to read.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

### Label

The label for a divider is solely used to identify the divider in the administration system. It is unlikely you will change the label. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

## Advanced

### Styles

Use the Styles settings to change the design of the divider.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Breakpoints

This feature is available in WS Form PRO.

The breakpoint settings define the width of a field and also what the offset of (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## dotdigital Integration

URL: https://wsform.com/knowledgebase/dotdigital/

The dotdigital integration lets you add contacts to dotdigital, pull contact data, and create new forms from your address books.

The dotdigital integration lets you push new contacts using an action, pull contact data into WordPress using the WS Form PRO autocomplete feature, and create new forms from your lists in a single click on the add form page.

The dotdigital integration requires WS Form PRO.

Tip: If you require a dotdigital account you can learn more here. Westguard Email is our very own edition of dotdigital.

## Installation

The dotdigital plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the dotdigital plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the dotdigital tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to dotdigital

In order to use the integration, you need to obtain an API email and password from dotdigital. It's a simple process.

### Obtaining an API Email and Password

Click on the User Settings icon on the bottom right of the screen and then click Access.

2. Click on the API Users tab and click New User.

3. Click Create A Key.

4. You will be provided with an API email. Enter a password and then click Save.

### Entering the API Email and Password

Click WS Form in the WordPress administration menu.

Click Settings.

Click the dotdigital tab at the top of the page.

Enter your API email and password.

Click the Save button.

## Creating a Form for dotdigital

### Automatically

WS Form can create a form for any of our dotdigital lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a dotdigital form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the dotdigital tab at the top of the page.

Click on any of your dotdigital lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the dotdigital tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to dotdigital when a user saves or submits their form.

To add a dotdigital action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a dotdigital List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The dotdigital action settings are as follows:

#### When Should This Action Run?

You can choose to run the dotdigital action when the form is saved, submitted, or both.

#### dotdigital Address Book

Choose the dotdigital Address Book you would like contacts to be added to. If you have created a new address book since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Status

Select the contact subscriber status you would like new contacts added as. Choose from:

Subscribe to Address Book (API Info)

Unsubscribe from Address Book (API Info)

Resubscribe to Address Book (API Info)

Create (API Info)

Suppress (API Info)

Unsuppress (API Info)

#### Email Type

Select the email type you would like to sign up contacts for. We recommend leaving this as HTML..

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in dotdigital. For example you would want to map your Email field to the Email field in dotdigital.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding dotdigital field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using dotdigital

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in dotdigital.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose dotdigital from the Action To Populate From pull down.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the dotdigital fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a dotdigital template the field mappings will automatically be created for you.

## Drip Integration

URL: https://wsform.com/knowledgebase/drip/

The Drip integration lets you add, update, and delete people and subscribers, pull people data, and create new forms from your custom fields and tags.

The Drip integration lets you add, update, and delete people and subscribers using an action, pull people data using the WS Form autocomplete feature, and create new forms from your custom fields and tags in a single click on the add form page.

## Installation

The Drip plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Drip plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Drip tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Drip

In order to use the integration, you need to connect it to Drip. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Drip tab at the top of the page.

Click Connect and follow the onscreen prompts.

If you do not have a Drip account, you can create a new account here.

## Creating a Form for Drip

### Automatically

WS Form can create a form for any of your Drip lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Drip form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Drip tab at the top of the page.

Click on any of your Drip campaigns (or click People to add a person but not subscribe them to a campaign) to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Drip tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Drip when a user saves or submits their form.

To add an Drip action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Drip List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Drip action settings are as follows:

#### When Should This Action Run?

You can choose to run the Drip action when the form is saved, submitted, or both.

#### Drip Campaign

Choose the Drip Campaign you would like contacts to be added to. If you have created a new campaign since viewing this screen, you can click the refresh icon to retrieve the new list.

If you choose People, the person completing the form will not be subscribed to a campaign and will only be added to your People in Drip.

#### Method

Select the method you would like to process for this action. Choose from:

Create or update

Remove from campaign(s). (If you chose People as your Drip Campaign, the person will be unsubscribed from all campaigns)

Unsubscribe (This will unsubscribe the person from all campaigns)

Delete

#### Double Opt-In

If checked, the person will be required to double opt-in to be added to a campaign.

This only appears if you have chosen a campaign (i.e., you did not choose People).

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Drip. For example, you would want to map your Email field to the Email field in Drip.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Drip field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Drip field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to a source attribute in Drip, or perhaps set a transaction attribute ID to the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the middle column, select the corresponding Drip attribute.

In the right column, select whether you want to update, merge, or ignore duplicates.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to tags in Drip.

To map a field:

Click the Add  icon at the bottom right of the interest mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Interest mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

If you use the automatic method above, WS Form PRO will automatically build interest mapping options for you.

## Populate Forms Using Drip

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Drip.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Drip from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Drip fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Drip template, the field mappings will automatically be created for you. You can also map tags.

## Dropbox Integration

URL: https://wsform.com/knowledgebase/dropbox/

The Dropbox integration allows you to push file uploads directly to a connected Dropbox account.

The Dropbox integration allows you to configure file fields to upload directly to a connected Dropbox account. You can choose which path to upload the files to and can easily access the files from the submissions page.

The integration creates a new file handler to WS Form called Dropbox.

## Installation

The Dropbox integration is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Dropbox integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Dropbox tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Dropbox

In order to use the integration, you need to connect it to Dropbox. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Dropbox tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Dropbox account, you can create a new account here.

## How to Configure File Fields for Dropbox

To configure a file field to push its uploads to Dropbox:

Click the settings icon on the file field.

In the basic tab change the File Handler setting to Dropbox.

Optionally, change the upload path.

The upload path defaults to:

/Apps/WS Form/#form_id/#submit_hash/#field_id/

You can use WS Form variables in this path to make it dynamic. The default value ensures each form, submission and field on the form is given its own folder in Dropbox to minimize the chance of files being overwritten. Bear in mind that each file field can be configured with the Multiple setting to be able to upload more than one file.

Some variables you might find helpful for this path are:

Variable
Description

#field_id
The ID of the file field.

#form_id
Returns the ID of the form.

#submit_hash
The unique hash of the submission.

#submit_id
The unique identifier of the submission.

## Accessing Dropbox Uploads

To access the files that are uploaded to Dropbox, you can click on the file upload icons in submissions as you would any other file upload. The files are, of course, also accessible from within your Dropbox folder.

## Duplicate / Copy Field Values With #text

URL: https://wsform.com/knowledgebase/duplicate-copy-field-values-with-text/

The #text(...) variable is used to duplicate the value of field(s) in real-time.

The #text(...) variable is used to duplicate the value of field(s) in real-time.

## Examples

Example
Output

#text(#field(1))
Field 1 Content

#field_label(1): #text(#field(1))
Field 1 Label: Field 1 Content

#field_label(1): #text(#field(1) #field(2))
Field 1 Label: Field 1 Content Field 2 Content

## Demo

[ws_form id="13642"]

## Usage

#text can be used in the following field settings:

Values (Put #text in the Default Value field setting)

Help Text

Labels

Placeholders

An example of how to configure a text field with ID 2 to duplicate the value of field ID 1 is shown below:

## Dynamic Label, Placeholder and Help Text With #text

URL: https://wsform.com/knowledgebase/dynamic-label-placeholder-and-help-text-with-text/

The #text variable can be used in the 'Label' and 'Help Text' settings of fields to create dynamic labels and help text.

The #text variable in WS Form can be used to dynamically copy text from one field to another in the default value setting. It can also be used in the Label, Placeholder and Help Text settings of a field too to allow for dynamic label, placeholder and help text on a field.

## Demo

## Field Configuration

To achieve this, the following is entered into the Label, Placeholder or Help Text setting:

#text(#field(123))

... where 123 is the source field ID you want to copy the value from. This can be any text based field such as a text or hidden field.

Example field configurations are shown below:

## Dynamically Set a Select Field Value Using a Query Variable

URL: https://wsform.com/knowledgebase/dynamically-set-a-select-field-value-using-a-query-variable/

You can use conditional logic to dynamically set the value of a select field from a query variable.

You can use conditional logic to dynamically set the value of a select field from a query variable.

NOTE: Certain query variables are reserved by WordPress and will cause a redirect or 404 error. Please refer to the list of reserved query variables here.

For example, you might have a select field with the following values and labels:

Note that there are two columns:

Label - Shown to the user completing the form

Value - This is the select option value and is how we will reference that row

An example URL that could be used to set the select field might be:

https://mysite.com/my-form/?option=2

In this URL, we have a query variable with a name of option and a value of 2.

To use this query variable, you can use conditional logic as follows:

Notice the use of the WS Form variable in the THEN action:

#query_var("option")

This sets the selected row with a value that matches the query variable name option.

## E-Commerce

URL: https://wsform.com/knowledgebase/introduction-e-commerce/

WS Form PRO includes a powerful collection of e-commerce field types that enable you to create a variety of forms for selling products or services.

WS Form PRO includes a powerful collection of e-commerce field types that enable you to create a variety of forms for selling products or services.

You can optionally extend your e-commerce form with payment methods such as PayPal, Stripe Elements or Authorize.Net to enable you to take payment online.

Furthermore, you can even integrate e-commerce fields with WooCommerce products to allow for price customization. Learn more.

### Demo

An example e-commerce form is show below:

## E-Commerce Field Types

The following e-commerce field types exist:

Price (Invite a web user to enter a price, or fix the price by making the field read only)

Price Select (The web user selects a single product from a select dropdown)

Price Checkbox (The web user selects one or more products using checkboxes)

Price Radio (The web user selects a single product using radio buttons)

Price Range (The web user selects a price using a range slider)

Quantity (Multiply the value of any of the above price fields by a quantity)

Price Subtotal (Show the price x quantity)

Cart Detail (Add cart level pricing such as the subtotal, shipping or discounts)

Cart Total (Show the overall cart total)

WS Form e-commerce forms are completely flexible, which means you add just a payment button, or combine it with a price field, or a price field and a quantity field---the choice is yours. There is no fixed layout, and you are free to combine any e-commerce fields you wish. WS Form works out the calculations for you.

## Adding Payment Methods

You can add payment methods to your form for the following processors:

Stripe Elements

PayPal

Authorize.Net

## Changing Currency Settings

Currency settings for WS Form are set in Global Settings under the E-Commerce tab.

Keywords: ecommerce

## Elementor Widget

URL: https://wsform.com/knowledgebase/elementor-widget/

If you use Elementor for your WordPress website, you can use the WS Form PRO widget to easily add forms to your website.

If you use Elementor for your WordPress website, you can use the WS Form PRO widget to easily add forms to your website. The widget is ready to use as soon as you have installed WS Form PRO, no additional plugins are required.

To use the widget, drag the WS Form PRO widget from the Elements tab to your page.

Then select your form from the pulldown list and that’s it!

For more information about Elementor, click here.

The Elementor widget was introduced in version 1.4.64 of WS Form PRO.

## Email Address Validation

URL: https://wsform.com/knowledgebase/email-address-validation/

It is possible to validate a users email address by sending them a validation link.

It is possible to verify a users email address by sending them a validation link. When they click the validation link in an email they are returned to the form and the submission is verified. You can then use conditional logic to change the appearance or behavior of the form. This method can also be used as a form of double opt-in.

## Demo

## Template

WS Form comes with a template that can be used to build an email validation form. This can be found as follows:

Click Add New in the WordPress admin menu under WS Form.

Click the Demo tab.

Click the Email Validation template.

## How It Works

This process works as follows:

The user completes, at minimum, an Email field on your form and clicks a Save button to validate. The Validate Before Saving setting is enabled on the Save button to ensure the email field is completed.

WS Form sends the user an email containing a validation link. The link is inserted into the email using the #submit_url variable.

The user clicks the validation link and is returned to the same form. This validates the submission.

The submission is now in a validated state and conditional logic can be used to change the appearance of the form or immediately submit the form, or run any other conditions you wish.

The submission is given a spam value of zero which is indicated by a green dot on the submissions page.

## Conditional Logic

To determine whether or not a form submission has been validated by a user clicking on the link in the email, you can add conditional logic. An example IF condition for this is shown below which shows the form if the submission is not validated, and submits the form immediately if the submission is validated:

Additional keywords: verification, verify, verified

## Email Field

URL: https://wsform.com/knowledgebase/email/

The email field lets your website visitor enter email address(es).

The Email field lets your website visitor enter an email address(es). By using the url field, mobile users will be presented with a keyboard optimized for entering email addresses. This keyboard type prominently features the at ("@"), period (".") and space characters.

## Demo

## Adding an Email Field

To learn how to add, edit, clone, move, resize, offset, or delete an email field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Email Address.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be mail@example.com.

WS Form variables can be entered into this field.

### Multiple

The multiple property sets or returns whether an email field should accept multiple values/emails on form submission. When set to true, it specifies that the user is allowed to enter more than one value/email in the email field.  Separate each email with a comma in the email field, such as mail@example.com, mail2@example.com, or mail3@example.com.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as mail@example.com for a email field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the email field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum Character Length

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

#### Maximum Character Length

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element’s value is checked against. This field is useful in, for example, forcing a website visitor to enter an email address in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Allow or Deny

This feature allows you to allow or deny email addresses. You can enter specific email addresses or enter wildcard addresses to, for example, block all email addresses from a particular domain name.

#### Method

Choose Allow to only allow the email address(es) you enter. Choose Deny to deny any email address(es) you enter.

#### Email Addresses

Click the + icon to add an email address.  Use the * character to enter wildcard values. For example:

*@wsform.com
This would allow or deny an email address for the wsform.com domain name.

*.com
This would allow or deny any email address having the .com TLD.

#### Message

If an email address is rejected, this message will be shown as invalid feedback on the field itself. You can change this message by entering your own in this setting.

### Transform

#### Transform

The transform setting can be used to force the case of the characters that are entered in the field. For example, choosing Uppercase will convert any lowercase characters entered into the field to uppercase. There are four transform options:

Uppercase

Lowercase

Capitalize

Sentence

To see examples of how the transform options work, you can learn more by reading our Transform Strings knowledge base article.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. For more information about using WS Form data grids, click here. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

## Email Field Validation

URL: https://wsform.com/knowledgebase/email-field-validation/

Learn how WS Form validates email fields using HTML5 and RFC 5322, and how to require a top-level domain.

WS Form uses HTML5 input types to provide built-in validation for common field types, including email addresses. When you add an Email field to your form, it automatically uses HTML5 email validation based on the official specification: RFC 5322.

## What Is Valid According to RFC 5322?

RFC 5322 allows a wide range of valid email address formats. For example, the following address is considered valid:

user@localhost

someone@somewhere

While these may not be common in everyday use, they are still valid according to the specification.

This format is technically valid and may be used in internal networks, but it is not recommended for most websites.

## How to Require a TLD in an Email Address

If you want to require users to enter a complete email address including a top level domain (TLD), such as test@example.com, you can add a pattern attribute to the field.

.+@.+..{2,}

This pattern ensures that:

The email has valid characters before and after the @ symbol

A period and a valid top-level domain (like .com or .org) are included

The TLD is at least two characters long

## How to Add This Pattern in WS Form

To add this pattern to an Email field:

Click the settings icon on the field.

Click the Advanced tab.

In the Pattern setting enter: .+@.+..{2,}

Click Save & Close.

Publish the form if necessary.

## Demo

## Additional Resources

Preventing Form Spam

How to Block Form Submissions by Domain Name

Spam Check with Clearout

 

## Email Notifications Not Working

URL: https://wsform.com/knowledgebase/email-notifications-not-working/

WS Form sends emails using a built-in function provided by WordPress called wp_mail. This is the same function used by other WordPress form plugins. Sending em…

WS Form sends emails using a built-in function provided by WordPress called wp_mail. This is the same function used by other WordPress form plugins.

If you are experiencing problems sending email notification, this article suggests ways to correct that problem.

## Error Messages

If you are receiving a specific error message, the following knowledge base articles will help:

"Error sending email" Error

"Could not instantiate mail function" Error

## SMTP Plugins & Services

We recommend using an SMTP plugin and service. These plugins improve email deliverability by sending your emails via an SMTP server as opposed to directly from your server.

The default wp_mail() function in WordPress relies on the PHP mail() function, which sends email directly from your web server. This method is often unreliable because many hosting providers block or limit outgoing mail, and messages sent this way are more likely to be flagged as spam. Additionally, wp_mail() provides limited error handling and logging, making it difficult to troubleshoot failures. Using an SMTP plugin ensures your emails are authenticated, logged, and sent through a trusted mail server, greatly improving reliability and deliverability.

Configuring SMTP for WordPress for Reliable Email Deliverability

## Recommended Send Email Settings

When sending email acknowledgements using the Send Email action, we recommend using the following settings for optimal reliability.

### From Email Address

Default: #blog_admin_email

The From Email Address setting should be a valid email address that is authorized to send emails.

Refer to your hosting or SMTP provider about which email address you should use. For example, Amazon SES users would use a verified email address or domain name.

Do not send emails from the email address entered on the form, e.g. by using #field(123).

If you want to have replies to email acknowledgements go to a different email address, use the Reply To setting (See below).

### From Display Name

Default: #blog_name

This can be anything you wish and should be something that easily identifies the entity sending the email.

If you are using an SMTP plugin that does not support display names then we recommend keeping this blank.

### To Email Address

Default: #blog_admin_email

This is the email address you want the email acknowledgement to go to. It can be any valid email address(es) you wish.

If the email is being sent to the person completing the form you can use the #field(123) variable to insert their email address (where 123 is the ID of the email field on the form). Ensure that the variable in syntactically correct.

### To Display Name

Default: #blog_name

This can be anything you wish and should be something that relates to the identity of the recipient (e.g. their name).

If you are using an SMTP plugin that does not support display names then we recommend keeping this blank.

If the email is being sent to the person completing the form you can use the #field(123) variable to insert their name (where 123 is the ID of the text field on the form containing their full name, first name or last name).

### Reply To (Optional)

Default: Blank

If you want to have replies to emails acknowledgements go to a different email address, use the Reply To setting. For example if you have an email field on your form with an ID of 123, you could enter: #field(123)

## Error Messages

If you are receiving the error message Could not instantiate mail function, please refer to this knowledge base article:

Error Could not instantiate mail function When Sending Emails

## From / To Email Addresses

Sending test emails from and to the same email address will sometimes result in the email not reaching its intended recipient. It will often end up in a spam folder and sometimes the email will be deleted altogether.

## Check Your Spam Folder

Don't forget to check your spam folder when testing. Many email systems are very sensitive and may inadvertently put your email in the spam folder. Consider whitelisting your From Email Address to ensure email notifications are received.

## Publish Your Form

If you have made changes to your Send Email action, ensure you have published your form.

## Submissions

WS Form stores all submissions in a database if you have a Save Submission action on your form. If you have any email deliverability issues you can check the submissions page for a complete list of all forms that have been completed.

## Related Articles

Email Settings

Send Email Action

 

## Enable and Disable Dates and Times Using PHP

URL: https://wsform.com/knowledgebase/enable-and-disable-dates-and-times-using-php/

This tutorial provides code samples for disabling and enabling dates and times in Date / Time fields.

You can disable and enable dates and times in Date / Time fields using the 'Disabled Dates', 'Enabled Dates' and 'Enabled Times' settings. These settings are available on the following Date / Time field types:

Date

Date / Time

Time

It is possible to dynamically set disabled and enabled dates and times using PHP.

Example code for doing this can be found below.

## Disabled Dates

In this example we disable two dates for form ID 123 and date/time field ID 321. Disabled dates are entered in the format yyyy-mm-dd.

<?php

 // My function for filter wsf_pre_render_123
 function my_pre_render_123( $form ) {

 // Get field ID: 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the disabled dates
 $field->meta->disabled_dates = array(

 array( 'disabled_dates_date' => '2025-03-01' ),
 array( 'disabled_dates_date' => '2025-03-03' )
 );

 // Return the form
 return $form;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

## Enabled Dates

In this example we enable two dates for form ID 123 and date/time field ID 321. Enabled dates are entered in the format yyyy-mm-dd.

<?php

 // My function for filter wsf_pre_render_123
 function my_pre_render_123( $form ) {

 // Get field ID: 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the enabled dates
 $field->meta->enabled_dates = array(

 array( 'enabled_dates_date' => '2025-03-01' ),
 array( 'enabled_dates_date' => '2025-03-03' )
 );

 // Return the form
 return $form;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

## Minimum and Maximum Dates

In this example we set the minimum and maximum date for form ID 123 and date/time field ID 321. Dates are entered in the format yyyy-mm-dd.

<?php

 // My function for filter wsf_pre_render_123
 function my_pre_render_123( $form ) {

 // Get field ID: 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the minimum and maximum dates
 $field->meta->min_date = '2025-03-01';
 $field->meta->max_date = '2025-03-15';

 // Return the form
 return $form;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

## Enabled Times

In this example we enable two times for form ID 123 and date/time field ID 321. Enabled times are entered in the format hh:mm:ss.

<?php

 // My function for filter wsf_pre_render_123
 function my_pre_render_123( $form ) {

 // Get field ID: 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the enabled times
 $field->meta->enabled_times = array(

 array('enabled_times_time' => '15:00:00'),
 array('enabled_times_time' => '16:00:00')
 );

 // Return the form
 return $form;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

## Minimum and Maximum Times

In this example we set the minimum and maximum time date/time field ID 321 on form ID 123. Times are entered in the format hh:mm:ss.

<?php

 // My function for filter wsf_pre_render_123
 function my_pre_render_123( $form ) {

 // Get field ID: 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the minimum and maximum times
 $field->meta->min_time = '13:00:00';
 $field->meta->max_time = '18:00:00';

 // Return the form
 return $form;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

## Engine Awesome Integration

URL: https://wsform.com/knowledgebase/engine-awesome-add-on/

The Engine Awesome integration lets you push new records to objects using a WS Form action.

The Engine Awesome integration lets you push new records to objects using an action and create new forms from your Engine Awesome objects in a single click on the add form page.

An example use of this integration would be to add sales inquiries as Contacts and Companies in Engine Awesome.

## Demo

The Engine Awesome integration can be used to add multiple objects by using multiple Engine Awesome actions.

Download Contacts & Companies Form Demo

In this demo, WS Form creates a Company object first. It then creates a Contact object and links it to the Company by using the #engine_awesome_object_id WS Form variable. That variable holds the ID of the Company object, and WS Form places it into the Company field on the Contact object.

## Installation

The Engine Awesome plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Engine Awesome plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Engine Awesome tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Engine Awesome

In order to use the integration, you need to connect it to Engine Awesome. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Engine Awesome tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Engine Awesome account, you can start with one of their application templates.

### Working Objects

After connecting Engine Awesome, you can select the objects you want to work with on the settings page. Custom objects you create in Engine Awesome are also included in this list. When the plugin is first installed, we select the most common objects for you such as Contact, Companies and Activities.

To add or change the objects you want to work with, choose the objects from the select list on the Engine Awesome settings page.

To select more than one object:

On a Mac, hold the Command key and click the object names

On a PC, hold the CTRL key and click the object names

Click Save after you have made any changes.

## Creating a Form for Engine Awesome

### Automatically

WS Form can create a form for any of your Engine Awesome objects in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Engine Awesome form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Engine Awesome tab at the top of the page.

Click on any of your working Engine Awesome objects.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your object does not appear, click the refresh icon in the Engine Awesome tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a Engine Awesome object when a user saves or submits their form.

To add a Engine Awesome action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Engine Awesome from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Engine Awesome action settings are as follows:

#### When Should This Action Run?

You can choose to run the Engine Awesome action when the form is saved, submitted, or both.

#### Object ID

Select the working Engine Awesome object you would like to push data to. Leave blank to create a new record.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Update Existing Records

Check this setting if you want to update existing records.

#### Find Existing Records By

Choose which Engine Awesome field to find existing records by, e.g. Email.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Engine Awesome. For example you would want to map your Email field to the Email field in Engine Awesome.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the leftcolumn, select your form field.

In the right column, select the corresponding Engine Awesome field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Engine Awesome field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to the source field in the Lead object in Engine Awesome.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left column, enter a value or a WS Form variable.

In the right column, select the corresponding Engine Awesome field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Variables

When the integration creates or finds a duplicate object, the object ID can be used in subsequent Engine Awesome actions by using the following variables:

Variable
Description

#engine_awesome_object_id
ID of the last object created.

#engine_awesome_object_id_first
ID of the first object created.

#engine_awesome_object_id_
ID of the object created by index. Starts at 1.

This means that you can associate other objects with a previously created object (e.g. an opportunity related to a contact).

## Troubleshooting

If the connection between your website and Engine Awesome stops working, click Disconnect then Connect to reconnect.

If any submissions to do not make it to Engine Awesome because of a technical error, you can resend them:

Go to Submissions.

Find and view the submission that did not push to Engine Awesome.

Scroll down to the action section.

Click the Re-run Action icon.

## Error: 400 Bad Request

URL: https://wsform.com/knowledgebase/400-bad-request/

A 400 error will typically occur if the client (i.e. your browser) makes a bad request to the server.

A 400 error will typically occur if the client (i.e. your browser) makes a bad request to the server. This could be a malformed request or sometimes a request that the server cannot or will not handle. 400 errors are not caused by WS Form.

Here are some common causes and solutions for a 400 error.

## Cookies & Caching

If your web browser cookies and/or cache become corrupt or invalid it could cause this error.

A simple way of checking for this is to open your WordPress website in incognito mode and see if that remedies the problem. If it does, we recommend clearing your browsers cookies and cache.

It is also possible that caching plugins and/or server caching could be causing this issue, so try temporarily disabling any caching in place to see if this remedies the situation.

## Large Uploads

Servers are typically configured with upper limits on the size of requests that can be uploaded to it. Having a file upload field on your form can greatly increase the size of the request when the form is submitted. If this exceeds the configured limits, a 400 error will occur. Check with your hosting provider as to the max limits set in place.

## Anti-Virus Software

Client side software such anti-virus software (e.g. BitDefender Antivirus) that manipulates requests from your web browser before they reach the server can cause 400 errors too. Double check your settings in that software to make sure it is not causing malformed requests to occur.

## Error: 401 Unauthorized

URL: https://wsform.com/knowledgebase/401-unauthorized/

A 401 unauthorized error message indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.

A 401 unauthorized error message indicates that the request has not been applied because it lacks valid authentication credentials for the target resource. There are various reasons this might happen and some of the most common reasons are listed below.

## WordPress Plugins

Some WordPress plugins have an option to disable the WordPress REST API. Modern form plugins such as WS Form use the WordPress REST API for the administering your form but also for form submissions. In fact many other WordPress features such as the block editor and blog post comments use this feature too. It provides you with a stable and secure means by which to accept form submissions. You should therefore ensure that the WordPress REST API is not disabled or blocked.

Plugins which block the WordPress REST API will typically return the following message:

{"code":"rest_forbidden","message":"Sorry, you are not allowed to do that.","data":{"status":401}}

Some WordPress security plugins may also accidentally block access to certain URLs. Check if your security plugin has blocked any paths that might be used by WS Form. Temporarily disabling your security plugin may help isolate the issue to that particular plugin. The WordPress REST API starts with the following path:

/wp-json/

The WS Form API path starts with:

/wp-json/ws-form/v1/

## Password Protected Pages

Make sure that you have no password protected makes incorrectly, otherwise accessing those pages without a password will result in a 401 error. In particular, WS Form uses the WordPress REST API therefore you should ensure access to pages under:

/wp-json/

... are accessible without a password unless absolutely necessary.

## NONCE Error

If you have page caching enabled and it is incorrectly configured it might cause form editing or submissions to fail. Systems that cache web pages such as Cloudflare, Cloudfront and also WordPress plugins that provide page caching can cause this error to occur if they are not configured correctly.

The reason for this may be a WordPress feature called a NONCE (Number used ONCE). A nonce is a unique code that is sent to your web server whenever your form talks to WordPress in the background. Their intended purpose is to ensure that data sent to your website is from a valid source and they helps prevent unauthorized access to your website.

WS Form and other popular plugins use this feature to secure your website.

NONCE values are valid for 12 hours, after which any subsequent use of that value will result in an error.

If the page cache timeout setting is set to a value that is too long, an expired nonce may continue appear in web pages and this will result in this error.

To ensure your WordPress website is able to handle nonce values properly, we recommend that any page caching is set to 10 hours OR LESS. In the majority of cases, a page cache duration of 1 hour or less is sufficient.

Please refer to your caching plugin, CDN or other caching mechanism about checking changing this setting.

For more information about nonces, please visit: https://developer.wordpress.org/plugins/security/nonces/

 

## Error: 403 Forbidden

URL: https://wsform.com/knowledgebase/403-forbidden/

A 403 Forbidden error message while editing your form may be the result of your hosting provider using mod_security.

WS Form uses the WordPress REST API for saving and submitting forms. This is the same API that is used by the WordPress admin, blog commenting and many other popular plugins. It is the preferred choice for providing a secure method of posting data to a WordPress website.

If you get a 403 Forbidden error when editing or using a form, it means that you do not have permission to perform that API request. This may be due to a security issue or, more commonly, a page caching misconfiguration on your server.

Here are some things you can check:

## Page Caching Misconfiguration

If you have page caching enabled and it is incorrectly configured it might cause form editing or submissions to fail. Systems that cache web pages such as Cloudflare, Cloudfront and also WordPress plugins that provide page caching can cause this error to occur if they are not configured correctly.

One possible reason for this may be a WordPress feature called a 'NONCE' (Number used ONCE). A NONCE is a unique code that is sent to your web server whenever your form talks to WordPress in the background. Their intended purpose is to ensure that data sent to your website is from a valid source and they helps prevent unauthorized access to your website.

WS Form will use a NONCE of forms under the following conditions:

If the 'Enable NONCE' setting is checked in Global Settings (Advanced tab). This setting is disabled by default.

If a user is logged in.

If the NONCE is cached for too long, it becomes stale and WordPress will issue a 403 error when a form is submitted. This is not a WS Form error. The error comes from WordPress when it receives the POST request from your form. Many modern plugins and WordPress features use NONCEs to protect websites.

Nonce values are valid for 12 hours, after which any subsequent use of that value will result in an error.

If the page cache timeout setting is set to a value that is too long, an expired NONCE may continue appear in web pages and this will result in this error when a form is saved or submitted.

To ensure your WordPress website is able to handle NONCE values properly, we recommend that any pages containing a form are cached for 10 hours OR LESS. In the majority of cases, a page cache duration of 1 hour or less is sufficient.

Please refer to your caching plugin, CDN or other caching mechanism about checking changing this setting. Ensure that both server-side and browser caching is correctly configured.

For reference, the NONCE actions used by WS Form are:

wp_rest

wsf_post

For more information about nonces, please visit: https://developer.wordpress.org/plugins/security/nonces/

## LiteSpeed

If your hosting is using LiteSpeed, please ensure that ESI (Edge Side Includes) is enabled.

Enable ESI at a server level

Enable ESI at a plugin level

## mod_security

Check if you have mod_security running on your server. mod_security is an open-source web-based firewall application supported by different web servers. LiteSpeed web server, for example, has mod_security enabled by default.

WS Form has been tested with the following mod_security rulesets:

OWASP

Comodo WAF

An incorrectly configured mod_security application can cause WS Form and other popular plugins to not work correctly.

403 forbidden errors can be caused by mod_security mistaking API requests made by WS Form as potential threats. In fact, even saving posts or pages containing certain words can trigger mod_security to prevent that request.

If you experience this we would recommend discussing this issue with your hosting provider and asking them to reconfigure mod_security such that it is not misinterpreting requests as threats. Whitelisting your own IP is one option.

Another option is to whitelist requests made by WS Form. All of our API requests contain the following base path:

/wp-json/ws-form/v1/

If reconfiguration is not an option, you also have the option of disabling mod_security by adding the following code to your .htaccess file. Do so at your own risk. This syntax may vary depending on the web server that your hosting provider uses.

<IfModule mod_security.c>
 SecFilterEngine Off
 SecFilterScanPOST Off
</IfModule>

More information on Stack Overflow.

## Firewalls

A misconfigured firewall can also cause WordPress API calls to fail and result in a 403 error. Check with your firewall software provider to confirm it is correctly configured.

### Cloudflare

Under some circumstances Cloudflare managed rulesets might produce a false positive and block legitimate form requests. In this case you might wish to allow requests containing the following path:

/wp-json/ws-form/v1/

For further assistance, please contact your hosting, firewall or cache provider.

## Error: 404 Not Found

URL: https://wsform.com/knowledgebase/404-not-found/

This article can help if you are receiving a 404 error when editing or submitting a form.

A 404 Not Found error message indicates that the server was unable to find the requested resource. However, in some cases a 404 error message may be returned if WordPress or the server is not configured correctly to allow access to the WordPress REST API.

WS Form and even some core WordPress features rely on the WordPress REST API and therefore it should not be disabled.

If you receive a 404 error message when editing or submitting a form you may receive an error that includes a path such as:

/wp-json/ws-form/v1/form/1/put/

Here are some things you can check:

## WordPress Security Plugins

Ensure that any security plugins are not inadvertently restricting access to the REST API. Some security plugins offer options to disable the REST API so you should ensure this setting is not in use.

## Firewalls

If you're using a server level firewall such as ModSecurity, verify that it is configured to allow access to the REST API endpoints.

## Permalink Settings

Ensure your WordPress Permalink settings are set to Post name and not Plain.

## Error Logs

If the above suggestions do not correct the problem, we would recommend checking your error logs for further clues. Consider reaching out to your hosting provider who may be able to provide a further insight into the cause of the 404 error message.

## Whitelist the WS Form Rest API Endpoints

If you need to whitelist the REST API endpoints for WS Form, you can whitelist requests including the following path:

/wp-json/ws-form/v1/

## Error: 500 Internal Server Error

URL: https://wsform.com/knowledgebase/500-internal-server-error/

If you’re seeing a 500 Internal Server Error after submitting a form, this article will help you identify the issue.

If you’re seeing a 500 Internal Server Error after submitting a form, it means something has gone wrong on the server. The server may or may not provide an error message.

## What is a 500 Error?

A 500 error is a general server-side error. It means the server tried to process a request but encountered an unexpected condition that prevented it from completing it. The problem could stem from PHP code, plugin conflicts, server configuration, or even low server resources.

## Common Causes of 500 Errors

PHP errors (e.g. syntax issues, calling undefined functions)

Fatal plugin or theme conflicts

Server resource limits (memory, execution time, etc.)

Corrupted .htaccess file (especially on Apache servers)

Misconfigured permissions

Missing or outdated PHP extensions

## How to Troubleshoot a 500 Server Error

### Check the WS Form Debug Console

If you're working with WS Form, enable the Debug Console in the plugin settings:

Go to WS Form > Settings from the WordPress admin menu.

In the Basic Tab, set Debug Console to Administrators only.

Click Save.

Then preview your form. If an error occurs, the Error tab in the debug console may give you more information, especially if the issue is coming from a specific action like Send Email or Run WordPress Hook.

### Enable WP_DEBUG Logging

Turn on debugging in WordPress to reveal PHP errors:

Open your site's wp-config.php file.

Add or modify the following lines:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Reproduce the error, then check the log file at /wp-content/debug.log.

Look for fatal errors or uncaught exceptions that occurred during form processing.

## Check your Hosting PHP Error Log

Most hosting environments keep a PHP error log that records issues like fatal errors, syntax problems, or missing dependencies. You can usually access this log through your hosting control panel, or via FTP/SFTP under a directory like /logs or /var/logs. Review the log entries around the time the error occurred. Look for lines marked FATAL ERROR, UNCAUGHT EXCEPTION, or anything referencing a plugin or theme file. These entries often pinpoint the exact line of code or file causing the 500 error. If you're not sure how to locate the error log, your hosting provider's support team should be able to assist.

## Use the Browser Inspector

Your browser’s built-in developer tools can help you quickly identify if a 500 error is occurring during a form submission. To get started, open the browser inspector by pressing F12 or right-clicking anywhere on the page and selecting Inspect. Then navigate to the Network tab.

Submit the form again while the Network tab is open. Look for a request that returns a 500 status code—this indicates a server-side error. Click on that request to view more details, then open the Response sub-tab. If the server returned any error output (such as a PHP fatal error or exception), it will appear here.

This step is especially helpful when errors aren't visibly displayed on the page, or when the response is partially masked by the server. It provides a direct look at what the server sent back to the browser and can offer clues for troubleshooting.

## Fixing the Issue

Once you've identified the error, possible solutions may include:

Fixing or rolling back custom code

Disabling the plugin or theme causing the error

Increasing memory_limit or max_execution_time in php.ini

Restoring a previous version of your .htaccess file

Reinstalling missing PHP modules (e.g. curl, json, mbstring)

If the issue is tied to a WS Form action (like a webhook or integration), double-check the action’s configuration and API credentials.

## Error: Could not instantiate mail function

URL: https://wsform.com/knowledgebase/error-could-not-instantiate-mail-function/

The “Could not instantiate mail function” message appears when WordPress fails to send an email. This article explains the causes and provides solutions.

The error message "Could not instantiate mail function" comes from a piece of software called PHPMailer. It occurs when PHP’s native mail() function fails to start the mail process, usually due to a server configuration issue.

Most hosting providers discourage using PHP’s built-in mail() function because it is unreliable and often blocked for spam prevention. Instead, they recommend sending email through an authenticated SMTP server or external mail service.

This issue is not caused by WS Form.

This article explains common causes and how to fix them.

## Set Up an SMTP Server

The most reliable way to send email from WordPress is to use an SMTP (Simple Mail Transfer Protocol) server instead of PHP’s built-in mail() function. SMTP uses authentication and secure connections, which improves deliverability and avoids the "Could not instantiate mail function" error.

Solution: Install an SMTP plugin. Then connect it to a trusted email provider. Most plugins include setup wizards that guide you through entering SMTP credentials and testing the connection.

Reputable SMTP providers include:

Postmark (WordPress plugin)

Mailgun (WordPress plugin)

SendGrid

Amazon SES

Once SMTP is configured, WS Form and other plugins that use WordPress’s email functions will automatically send mail through the new connection.

Configuring SMTP for WordPress for Reliable Email Deliverability

## Invalid Email Address

Make sure your Send Email action settings are correct:

Use valid From and To email addresses.

The From address should use a verified domain that matches your website or SMTP provider.

Avoid using the same email address for both From and To.

By default, WS Form sends emails to:

#blog_admin_email – The Administration Email Address in WordPress > Settings > General

#blog_name – The Site Title in WordPress > Settings > General

You can override these in the Send Email action.

## SMTP Plugin Does Not Support Display Names

WS Form supports display names in email addresses (e.g., Joe Bloggs <joe.bloggs@emailtmp.com>), as allowed by RFC 2822.

However, some SMTP plugins do not support this format and may cause emails to fail.

Solution: Try clearing the Display Name settings in the Send Email action and try sending again.

## Invalid Subject Line

Some mail servers reject subject lines with special characters or excessive length.

Best practices:

Use only alphanumeric characters.

Keep the subject between 10–60 characters.

## Running a Local Server (e.g. WAMP)

Local development servers often do not have a mail server installed, so PHP cannot send emails.

Solution: Use an SMTP plugin with an external SMTP provider when developing locally.

## SMTP Provider Quotas

Some SMTP providers impose daily or hourly send limits. If these are exceeded, email delivery will fail.

Solution: Log in to your SMTP provider’s dashboard to check your quota and usage statistics.

## Plugin Conflict

Some plugins that modify email headers or behavior can cause conflicts.

Solution:

Deactivate all plugins except WS Form.

Test email sending.

Reactivate plugins one at a time, testing after each.

Once you identify the conflicting plugin, check its settings or contact its support team for help. If possible, disable only its email-related functionality or replace it with an alternative.

## Outdated or Incompatible PHP Version

Older PHP versions may be incompatible with newer WordPress or plugin code used for sending emails.

Solution: Make sure you’re using a supported PHP version (WordPress recommends PHP 8.1 or higher). You can check your version under Tools > Site Health > Info > Server.

## Summary

This error usually means your server isn’t configured to send email using PHP. The most reliable solution is to install an SMTP plugin and configure it with a trusted email provider such as Gmail, SendGrid, Amazon SES, or Mailgun.

SMTP connections are authenticated, more secure, and provide better deliverability than PHP’s mail() function.

If the issue persists, contact your hosting provider to verify mail capabilities or request SMTP credentials.

## Related Articles

Email Notifications Not Working

Email Settings

Send Email Action

## Error: Error sending email

URL: https://wsform.com/knowledgebase/error-error-sending-email/

The “Error sending email” message appears when WordPress fails to send an email. This article explains the causes and provides solutions.

If you see this message after submitting a form, it means the website tried to send an email but something went wrong and no clear reason was provided.

This isn't a problem with WS Form or the form itself. It's usually caused by an issue with the website's email setup. A common cause is an email plugin (like SMTP) that isn't working properly but also isn't showing a helpful error message.

This article outlines possible causes and solutions for resolving this issue.

## SMTP Plugin Silently Failed

If you are using an SMTP plugin it is possible it failed but did not report an error message.

Some SMTP plugins override wp_mail() but fail to fire the wp_mail_failed action when an error occurs, preventing WS Form from detecting what went wrong.

Solution: Check your SMTP plugin to see if it has a logging feature you can use to identify the error. If no logging is available, try using a different SMTP plugin with full error handling support.

Check that you are sending emails using an email address that has been validated / verified by your SMTP provider.

## SMTP Plugin Does Not Support Display Names

WS Form supports display names in email addresses (e.g., Joe Bloggs <joe.bloggs@emailtmp.com>), as allowed by RFC 2822.

However, some SMTP plugins do not support this format and may cause emails to fail.

Solution: Try clearing the Display Name settings in the Send Email action and try sending again.

## PHP mail() Function Silently Failed

If you're not using an SMTP plugin, WordPress relies on PHP’s native mail() function. If this function fails without triggering wp_mail_failed, WS Form cannot log a detailed error.

Solution: Install an SMTP plugin to bypass PHP mail() and ensure email delivery is logged and traceable.

## Invalid Send Email Action Settings

Malformed or missing email fields in your WS Form Send Email action can cause wp_mail() to fail.

Solution:

Ensure all email addresses are valid

Set a valid subject line and email body

## Local Development Server

Local web servers (such as WAMP, MAMP, or LocalWP) typically don’t have a mail server configured, so wp_mail() fails silently.

Solution: Use an SMTP plugin with credentials from a real email service provider.

## Plugin Conflict

Another plugin may be interfering with the email process or blocking errors from being reported.

Solution:

Deactivate all plugins except WS Form

Test your form

Reactivate plugins one at a time to identify the source of the conflict

## Outdated or Incompatible PHP Version

Older versions of PHP may not handle email operations correctly or may be missing required extensions.

Solution: Upgrade your server to a supported PHP version (e.g., PHP 8.1 or higher).

## No Error Logging Available

Because wp_mail_failed was not fired, WordPress provided no additional error details to WS Form.

Solution: Enable WordPress debug logging by adding the following to your wp-config.php file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

Then check the /wp-content/debug.log file for any email-related messages after submitting your form.

## Summary

The "Error sending email" message means WordPress’ wp_mail() function returned false without providing an explanation. This usually indicates a misconfigured email setup or an incompatible plugin.

The most reliable solution is to use an SMTP plugin with a verified email provider and ensure your Send Email action settings are correct. If the issue persists, test your server’s email capabilities independently or contact your hosting provider for assistance.

## Related Articles

Email Notifications Not Working

Email Settings

Send Email Action

## Error: Invalid Token Format

URL: https://wsform.com/knowledgebase/invalid-token-format-error/

If you receive the error "Invalid Token Format" when submitting a form, it is likely being caused by a third party plugin.

If you receive the error "Invalid Token Format" when submitting a form, it is likely being caused by a third party plugin that uses the Google API, such as the WP Gmail SMTP plugin.

This error is not caused by WS Form and we would recommend contacting the support team of the plugin causing the error.

## Error: INVALID_SESSION_ID - Session expired or invalid

URL: https://wsform.com/knowledgebase/error-invalid_session_id-session-expired-or-invalid/

Learn how to fix a broken Salesforce connection in WS Form by reconnecting your account and resolving common authentication issues.

If you encounter this error when submitting a form that uses the Salesforce integration, it usually means the connection to Salesforce is no longer valid and needs to be re-established.

This can happen for a few reasons, such as when the connected Salesforce user has:

Changed their password

Had their password expire

Been deleted, frozen, or deactivated

Been affected by Salesforce login or security policies

In some cases, the issue may also be caused by a temporary network error on your hosting provider that prevents the OAuth token from refreshing properly.

You can also check the Salesforce Status Page to determine if there are any issues with the Salesforce API.

## Recommended Salesforce User Configuration

For the most reliable operation, we recommend creating a dedicated Salesforce user account exclusively for the WS Form integration. Avoid using a personal user account that is also used for day-to-day administration.

We recommend the following configuration:

Use a dedicated Salesforce user for WS Form.

Configure the user's password so that it does not expire, if permitted by your organization's security policy.

Avoid changing the integration user's password unless necessary.

Ensure the user is not subject to login hour restrictions.

Ensure the user is not subject to IP restrictions that could prevent API access.

Ensure the user account remains active and is not frozen or deactivated.

## Reconnect to Salesforce

To reconnect to Salesforce:

Navigate to WS Form > Settings > Salesforce.

If the status shows Connected, click Disconnect.

Click Connect and follow the on-screen instructions to reconnect.

Re-select any Objects or Flows you are using.

Click Save.

## Re-Run Failed API Requests

If any submissions did not make it to Salesforce because of this error, you can re-run requests as follows:

Go to Submissions.

Find and view the submission that did not push to Salesforce.

Scroll down to the Actions section.

Click the Run Again icon.

## Error: json key is missing the client_id field

URL: https://wsform.com/knowledgebase/google-sheets-disconnects/

How to reconnect to Google Sheets if the connection fails.

The Google Sheets integration uses oAuth to connect to Google and will automatically keep the connection alive. oAuth provides an efficient way of establishing and maintaining a secure connection to Google.

Although unusual, the Google Sheets integration may present an error because the oAuth connection to Google has dropped.

You may see this error: json key is missing the client_id field

## Potential Reasons for Google Sheets Disconnecting

Your connection to Google Sheets might be dropping due to one of the following reasons:

Same credentials used on multiple sites (e.g. Staging / Development sites)
OAuth only allows one site to be connected with a specific set of credentials. If more than one site uses the same credentials, they will interfere with each other and cause a disconnect. Only connect one site per credential set. Check that you don't have a staging / development site that is causing this.

Network issues
A persistent network error between your website and Google’s servers can break the connection.

Password changes
If the Google account password was changed, the connection may be lost and will need to be reauthorized.

## How to Reconnect Google Sheets

To reconnect Google Sheets, please follow these steps:

In WordPress, click on Settings from the WS Form admin menu.

Click the Google Sheets tab.

Click on the Disconnect button (if visible).

Click the Sign in with Google button to reconnect to Google Sheets.

Follow the online prompts to re-connect WS Form to Google Sheets ensuring you allow the required permissions.

If problems persist, try the above reconnection steps again ensuring that Google prompts for permissions.

Also ensure that you are running the latest version of the WS Form Google Sheets integration.

## Reset App Permissions (Optional)

If the above steps don’t resolve the issue, you may need to remove the WS Form app from your Google account:

Go to: https://myaccount.google.com/permissions

In the Third-party apps with account access section, click on WS Form (If it is not present, skip to the next set of instructions).

Click Remove Access.

Reconnect WS Form to your Google account using the steps above.

## Enable Email Error Notifications

It is possible to receive email notifications if the connection fails in future. To do this please follow these instructions:

Send Submissions Error Email Notifications

## Error: Unable to move file to destination

URL: https://wsform.com/knowledgebase/error-unable-to-move-file-to-destination/

Learn why WS Form may show the “Unable to move file to destination” error and how to fix common file permission issues that cause it.

When a file is uploaded and processed, WS Form moves the uploaded file from its temporary source path to a final destination. That destination depends on the file handler you have selected, such as WS Form Private, WS Form Public, or the WordPress Media Library.

If you encounter the error Unable to move file to destination, it means WS Form was not able to move the uploaded file from the temporary location to the intended destination directory.

Below are the most common reasons why this can occur and how to resolve them.

## File Permissions

When WS Form moves a file, two steps are performed:

The file is copied from the source path to the destination path.

The original source file is deleted.

These actions use the WordPress WP_FileSystem move method. For the process to work correctly, both the source and destination paths must allow your web server to read, write, and remove files as needed.

### Source Path

The source path for uploaded files depends on your hosting environment. It is typically one of the following:

The upload_tmp_dir value set in php.ini (if configured)

Your system temporary directory, such as /tmp on Linux servers

Confirm that the web server user has read and write permissions for this directory. Without the correct access, WS Form cannot retrieve or remove the temporary upload file.

### Destination Path

The destination path is determined by the File Handler selected in your WS Form settings. Common paths include:

WS Form Private: /wp-content/uploads/ws-form/<form_id>/ WS Form Public: /wp-content/uploads/ws-form/<form_id>/ Media Library: /wp-content/uploads/<year>/<month>/

The web server must have write permissions for whichever directory applies. If the server cannot write to the destination directory, the file move process will fail.

## Etch

URL: https://wsform.com/knowledgebase/etch/

Learn how to add a WS Form form to a page using Etch.

Etch is a modern visual development platform that lets you build scalable, maintainable, and accessible WordPress sites through a fully visual workflow without compromising capability.

To add a form in Etch you can simply use the WS Form shortcode anywhere in your page markup.

## Getting the Shortcode

There are a couple of ways to get the WS Form shortcode.

### Form Layout Editor

When editing a form:

Click on the Form Settings  icon.

At the top of the sidebar, click the shortcode to copy it.

### Forms List

Click on WS Form > Forms in the WordPress admin.

Click on the shortcode in the forms list to copy it.

## Learn More

To learn more about the WS Form shortcode:

The WS Form Shortcode

## Styling Forms

Styling forms is carried out in WS Form itself.

Styles

Styler

## Extract Select, Checkbox & Radio Labels

URL: https://wsform.com/knowledgebase/extract-select-checkbox-radio-labels/

WS Form PRO has various variables that can be used to extract the chosen text from a select, checkbox or radio.

Select, checkbox and radio fields consist of two key components:

Value

Label

The values are what are sent to the web server when a form is submitted. These values appear in email acknowledgements or are sent to third party integrations you might have with WS Form PRO.

The label is what is shown to the user completing your form to help them make a decision about which select, checkbox or radio to choose.

Sometimes it can be useful to be able to extract the label of a chosen select, checkbox or radio for use in another field. For example, you might want to show the text value of a select field elsewhere in your form instead of an ID number.

WS Form PRO has various variables that can be used to extract the chosen label from a select, checkbox or radio. Furthermore if multiple select options or checkboxes are chosen, WS Form PRO will delimit those values.

Here is a demo of those variables:

## Demo

## Conditional Logic

In the demo above, conditional logic is used to detect when a select, checkbox or radio is changed. When a change occurs, the value of the text fields is set to the label value of the corresponding field. An example of this conditional logic is shown below:

 

## Fathom Analytics Events Action

URL: https://wsform.com/knowledgebase/fathom-analytics-events/

If you are using Fathom Analytics on your website you can use WS Form to fire off events when a form is submitted.

Fathom Analytics is a privacy-focused website analytics tool. It's designed as an alternative to more traditional analytics services like Google Analytics, with a strong emphasis on user privacy and data protection.

If you are using Fathom Analytics on your website you can use WS Form to fire off events when a form is submitted. This is done by adding a Conversion Tracking acton to your form.

To add a Conversion Tracking action:

Click the Actions icon at the top of the layout editor. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select Conversion Tracking from the Action pulldown. A series of settings will appear.

In the Type setting choose Fathom Analytics.

In the Event Name setting enter an event name. Learn more about acceptable event names.

Optionally enter a Cents value for the event. 100 = $1.

Optionally enter a Site ID to associate the event with.

Click Save & Close.

Your form will now fire a Fathom Analytics event when the form is submitted.

## Fields

URL: https://wsform.com/knowledgebase/fields/

All of the available fields can be found in the toolbox sidebar. To add a field to your form, simply click and drag a field from the toolbox to a section of yo…

## Adding Fields

All of the available field types can be found in the Build sidebar. the Build sidebar is shown on the right of the page when you first start to edit a form, or it can be accessed at any time by clicking the Build icon in the main toolbar.

To add a field to your form, simply click and drag a field from the Build to a section of your form. As you drag the field across to a section, you will notice the field changes into a box and placeholders will appear showing you where you can drop the field. You can place a field at any point in a section.

Once you have dropped the field into the form, you can immediately start typing a label for it. To save the field label, you can either type Enter or click somewhere on the page away from the field.

## The Anatomy of a Field

## Cloning Fields

To clone a field:

Click the field settings icon

Click the clone  icon

A cloned version of the field will then appear. It will inherit the width, offset, and settings of the field you cloned.

## Deleting Fields

To delete a field:

Click the field settings icon

Click the delete  icon

The field will then be deleted. If you delete a field in error, you can always click the undo  icon or use the undo tool in the Build on the right-hand side of the page.

## Moving Fields

You can move a field around the form by clicking and dragging the field to a new position within the same section or a different section.

You can also move fields between tabs. Click and drag the field over a tab. Then simply drag the field into a section of the tab you selected.

## Resizing Fields

You can resize fields to be 1-12 columns wide by clicking the resize icon on the right side of a field.

For developers it is possible to adjust the number of columns used from the main Settings page under the Advanced menu. Click here to learn more.

## Offsetting Fields

Offsetting a field will move it inward from the left side of the screen. This is useful if you want to right align or center a field in a form.

You can offset fields by 1-11 columns wide by clicking the offset  icon on the left side of a field.

Note that fields that are as wide as the form itself cannot be offset.

## Changing Field Settings

To access the field settings, click the field settings icon. The field settings toolbar will then appear on the right of the page.

Most field settings are split into Basic and Advanced. The basic tab allows you to change all of the key features you are likely to need on a simple form. The advanced tab provides greater control over the field.

Field settings specific to each field  can be found by clicking on a field type on our Field Type page.

## Renaming Field Labels

To rename the label of a field, you have two options:

You can double click the label of the field, enter a new field, and then type Enter or click somewhere on the page away from the field.

Click the field settings icon to open the field settings toolbar. Change the label at the top of the toolbar and then click the Save button at the bottom of the toolbar.

## File Upload Accept Parameters

URL: https://wsform.com/knowledgebase/file-upload-accept-parameters/

How to use the accept attribute in file upload fields to determine which file MIME types or extensions can be chosen.

When adding a file upload field to a form, developers often need to specify which file types should be accepted. This is particularly useful for improving user experience and ensuring security by restricting uploads to only the necessary file formats.

## The Accept Attribute

In HTML, the <input> element for file uploads supports the accept attribute, which allows developers to define the types of files users can select. The accept attribute can take various arguments based on MIME types, file extensions, or specific categories.

For example:

image/png, image/jpeg In this example, only PNG and JPEG images will be selectable when users browse for files to upload.

## Setting the Accept Attribute in WS Form

In WS Form, the accept attribute is set in the File Upload field settings in the Advanced tab.

## Accept Argument Formats

The accept attribute can take three types of arguments:

### 1. File Extensions

You can use file extensions using a dot (.) followed by the extension. This is probably the easiest way of restricting the types of files that can be uploaded.

For example:

.jpg, .png, .gif In this example, the file upload field would restrict the file selection to JPEG, PNG, and GIF image files.

.doc, .docx, .xls, .xlsx

In this example, the file upload field would restrict the file selection to Microsoft Word and Microsoft Excel files.

### 2. MIME Types

MIME (Multipurpose Internet Mail Extensions) types specify the format of a file. Common MIME types include:

Images: image/png, image/jpeg, image/gif

Audio: audio/mpeg, audio/wav

Video: video/mp4, video/webm

PDF: application/pdf

Microsoft Word (.doc) application/msword

Microsoft Word (.docx) application/vnd.openxmlformats-officedocument.wordprocessingml.document

For example:

application/pdf

In this example, the file upload field would restrict the file selection to PDF files.

Learn more: Common MIME Types

### 3. Wildcard MIME Types

Wildcard MIME type selection can also be used, allowing any format of a particular media type.

For example:

image/* allows all image formats.

audio/* allows all audio formats.

video/* allows all video formats.

## Combining Multiple Accept Arguments

You can specify multiple accept arguments by separating them with commas.

For example:

image/jpeg, image/png, .pdf This allows users to select JPEG or PNG images, as well as PDF documents.

## File Upload Field

URL: https://wsform.com/knowledgebase/file/

The file upload field lets the user choose one or more files from their device storage to be uploaded.

The File Upload field lets the user choose one or more files from their device to be uploaded with the form when it is submitted. When the form is submitted file uploads can be saved to submissions, attached to emails or mapped to integrations where supported.

## Demo

## Adding a File Upload Field

To learn how to add, edit, clone, move, resize, offset, or delete a file upload field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Type

There are two types of file upload field:

Default

DropzoneJS

The DropzoneJS type has various performance advantages. Images are uploaded immediately when using the DropdownJS type whereas the default type uploads when the form is submitted. This can reduce the time it takes to submit a form. For images, the DropzoneJS type performs image resizing, format and quality changes in the browser as opposed to the server which can reduce file upload times.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Multiple

If this setting is enabled, the website visitor will be able to choose more than one file to upload.

### Placeholder (DropzoneJS type only)

The placeholder setting is used to configure the text that shown in the DropzoneJS field prior to any files being added, in this case the user is prompted to drop files in the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables or even an SVG can be entered into this field.

The following example adds text and an upload icon:

<p>Drop files here to upload.</p><svg height="48" width="48" viewBox="0 0 16 16"><path fill="#767676" d="M14.1 10.9c0-0.2 0-0.4 0-0.6 0-2.4-1.9-4.3-4.2-4.3-0.3 0-0.6 0-0.9 0.1v-2.1h2l-3-4-3 4h2v1.5c-0.4-0.2-0.9-0.3-1.3-0.3-1.6 0-2.9 1.2-2.9 2.8 0 0.3 0.1 0.6 0.2 0.9-1.6 0.2-3 1.8-3 3.5 0 1.9 1.5 3.6 3.3 3.6h10.3c1.4 0 2.4-1.4 2.4-2.6s-0.8-2.2-1.9-2.5zM13.6 15h-10.3c-1.2 0-2.3-1.2-2.3-2.5s1.1-2.5 2.3-2.5c0.1 0 0.3 0 0.4 0l1.3 0.3-0.8-1.2c-0.2-0.3-0.4-0.7-0.4-1.1 0-1 0.8-1.8 1.8-1.8 0.5 0 1 0.2 1.3 0.6v3.2h2v-2.8c0.3-0.1 0.6-0.1 0.9-0.1 1.8 0 3.2 1.5 3.2 3.3 0 0.3 0 0.6-0.1 0.9l-0.2 0.6h0.8c0.7 0 1.4 0.7 1.4 1.5 0.1 0.7-0.5 1.6-1.3 1.6z"></path></svg>

### Directory (Regular type only)

If this setting is enabled, the website visitor will be able to choose from an entire directory with file contents (and any subdirectories) when uploading a file.

### Capture

The capture setting is used to tell mobile devices whether or not to capture an image when the file field is tapped / clicked on. The available options are:

Setting
Description

Off
The device will not capture a file. Instead the user is prompted to select a file.

On
The device will capture a file using the default camera.

User Facing Camera
The device will capture a file using the front facing camera.

Environment Facing Camera
The device will capture a file using the environment (rear) facing camera, if available.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### File Handler

File handlers in WS Form determine the final destination of uploaded files when the form is submitted. You can specify different destinations for each file field on your form. This means you could have one field that saves files to a public location, and another that saves to a private location.

### Save To

Use this setting to determine the final destination of the uploads files for this field when the form is submitted.

Save To
Public
Media Library
Description

WS Form (Private)
No
No
This is the default handler. This handler saves file uploads in a protected hash format. These uploads are only accessible from within the WordPress admin.

WS Form (Public)
Yes
No
This handler saves file uploads in a format that can be accessed publicly.

Media Library
Yes
Yes
This handler saves file uploads to the WordPress Media Library.

WS Form also has file handlers for:

Amazon S3

DropBox

Google Drive

### Saved File Name

By default WS Form will save files using their uploaded file name.

The Saved File Name setting allows you to specify a custom file name mask for the saved file. The mask can include the following variables as well as WS Form variables, e.g. #field(123).

Variable
Description

#file_basename
Original file name (e.g. file.jpg).

#file_filename
File name without extension (e.g. file).

#file_extension
File name extension (e.g. jpg).

#file_index
File upload index (e.g. 1). If you have enabled the Multiple setting, this will return the file index. If the Multiple setting is enabled and you exclude #file_index, WS Form will append this to your mask automatically.

Other commonly used variables in file name masks include:

Variable
Description

#field(123)
Returns the value of a field submitted in the form. Change 123 to match the ID of your field.

#submit_id
Returns the submission ID (Requires a Save Submission action)

File names are sanitized prior to files being saved for security reasons.

### Example Masks

Single File Upload: custom-#submit_id-#file_filename.#file_extension

Multiple File Upload: custom-#submit_id-#file_filename-#file_index.#file_extension

### Use WordPress Upload Path (DropzoneJS type only)

By default, files uploaded using DropzoneJS will be saved to the path:

uploads/ws-form/#form_id/dropzonejs/#field_id/#file_name

This is done to ensure scratch files (i.e. files that are uploaded prior the form being submitted) do not clog up your normal uploads path. Files are retained in this path after they are committed to the Media Library.

If you would prefer for scratch and submitted files to be added to the normal WordPress uploads path, check this box. This path is normally:

uploads/#year/#month/#file_name

Note that this path is subject to change if WordPress admin settings are changed or a filter hook is used.

The upload path can also be controlled with the WS Form wsf_dropzonejs_upload_path filter hook.

## Preview

The file preview feature allows you to show a preview of the selected file underneath the field.

### Enable (Default type only)

Check this setting to enable the preview feature.

### Orientation

Previews can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the previews to appear in.

If you select grid, you can set a width for each preview at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you enable the multiple upload setting and upload more than one file.

We recommend using and configuring the grid setting.

### Image Optimization

For the default type, image optimization is performed on the server. For the DropzoneJS type, image optimization occurs prior to the image being uploaded.

#### Max Width (Pixels)

The maximum width in pixels the saved file should be. Leave blank for no change.

#### Max Height (Pixels)

The maximum height in pixels the saved file should be. Leave blank for no change.

#### Crop

If checked, images will be cropped to the maximum dimensions above using center positions.

#### Quality

Sets image compression quality on a 1-100 scale. Leave blank for no change.

#### File Format

The file format image uploads should be saved as.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the file upload field.

#### Label Position

There are five options you can choose from for positioning your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the Form Settings advanced tab. For new forms, this will be the Top positioning.

Note that when using some frameworks, some label positions may not be available.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Minimum Files

Use this setting to specify the minimum number of files the user has to upload. Note that the Multiple option needs to be checked if this value is greater than 1.

#### Maximum Files

Use this setting to specify the maximum number of files the user can upload. Note that the Multiple option needs to be checked if this value is greater than 1.

#### Minimum File Size (MB)

Use this setting to specify the minimum size in megabytes file uploads should be.

#### Maximum File Size (MB)

Use this setting to specify the maximum size in megabytes file uploads can be.

#### Timeout (ms) (DropzoneJS type only)

The timeout for the XHR requests in milliseconds. Leave blank for 30 seconds.

#### Accepted File Types(s)

You can limit the types of files that can be uploaded by specifying one or more MIME types or file extensions in this field. Multiple types should be separated by commas.

MIME type example: application/pdf,image/jpeg

File extension example: .pdf,.jpg (Note that periods must be included)

This would limit the file uploads to PDF documents or JPG images.

For a list of common MIME types check out Common MIME Types on MDN Web Docs.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities. If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

### Image Restrictions

Image restrictions enable you to define what can or cannot be uploaded to the field if the file is an image.

#### Minimum Width (Pixels)

Enter the minimum width in pixels the image has to be.

#### Maximum Width (Pixels)

Enter the minimum width in pixels the image has to be.

#### Minimum Height (Pixels)

Enter the minimum height in pixels the image has to be.

#### Maximum Height (Pixels)

Enter the maximum height in pixels the image has to be.

#### Required Aspect Ratio

Enter the aspect ratio the image has to be in. It should be entered in the format x:y.

Example aspect ratios are:

1:1

16:9

4:3

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## File Upload Issues

URL: https://wsform.com/knowledgebase/file-upload-issues/

Learn how to diagnose file upload issues cause by client and server misconfiguration.

## Upload Errors

If you are getting an error when uploading files it is likely due to a server-side misconfiguration.

You should check the following when you get this error:

### Server-Side Errors

We recommend checking your PHP and web server error logs for any issues. A server-side error will cause an error to be displayed in the DropzoneJS file upload component.

You can use your browser inspector to check for server errors. Open your browser inspector and then look in the console and/or network tab.

### Server-Side Settings

You may need to contact your hosting provider to confirm these settings are sufficient for your form upload requirements.

#### PHP Settings

Setting
Description

max_execution_timeout
Ensure this setting is large enough to support the time it takes the maximum allowed file size to your server. Learn more

post_max_size
Ensure this setting is large enough to accept the size of file being uploaded to your server. Learn more

upload_max_filesize
Ensure this setting is large enough to accept the size of file being uploaded to your server. Learn more

## DropzoneJS Timeouts

The DropzoneJS component has a default timeout of 30 seconds. If files are taking longer than 30 seconds to upload you will need to increase this value to something suitable. To do this:

Click the settings icon on the file field.

Click the Advanced tab.

Adjust the Timeout (ms) setting to suit.

## Slow File Uploads

The time it takes for a file to upload depends on various factors, including:

The size of the file.
Larger files take longer to upload.

The speed of your internet connection.
The slower your internet connection, the longer files take to upload.

The bandwidth available to your hosting.
The slower the bandwidth, the longer files take to upload.

The amount of traffic between you and your server.
The busier your website, the less available bandwidth and the longer it will take for files to upload.

Typically on an internet connections, and in particular when using cellular data, the upload speed will be significantly slower that your download speed and this too can make uploads appear to be slow.

Slow upload speeds are not caused by WS Form. WS Form will upload files using all available bandwidth to it. Speed test all hops between your device and your hosting provider to determine where any bottlenecks might exist.

 

## File Uploads Appear as Code in Email

URL: https://wsform.com/knowledgebase/file-uploads-appear-as-code-in-email/

If your email is interpreting file uploads as jumble of letters (also know as Base64 encoding), you will need to disable inline images in emails.

If your email is interpreting file uploads as jumble of letters (also know as Base64 encoding), you will need to disable inline images in emails. This only happens in some email readers. Mac Mail, for example, does not have this issue and shows inline images correctly.

An example of this in GMail is shown below:

 

To stop inline images in emails:

Click on Settings in the WordPress admin menu under WS Form.

Click on the Variables tab.

Uncheck Show File Preview.

Click Save.

WS Form will then stop embedding the images in the email itself. Next you just need to tell WS Form to include that upload as an email attachment as opposed to adding it inline. To do that:

Click on the Actions icon when editing your form.

Click on the gear icon next to Send email.

Scroll down to Attachments and click the  icon to add your file upload field as an attachment.

Click Save.

You will now find that the file upload is included as an attachment as opposed to being added inline in the email.

## Filter Disposable Email Addresses

URL: https://wsform.com/knowledgebase/filter-disposable-email-addresses/

Reject form submissions from unwanted email addresses using this WS Form filter.

The WS Form wsf_action_email_email_validate filter can be used to analyze and reject unwanted email addresses from form submissions.

## The Filter

The wsf_action_email_email_validate filter is supplied with four parameters:

$valid - True by default. Return this value in your function if the email validates.

$email - The email address being validated.

$form_id - The form ID the email address belongs to.

$field_id - The field ID the email address was entered into (This will be false for emails checked in actions).

Your filter hook function can return one of the following return values

True - The email address is valid, no action will be taken by WS Form.

False - WS Form will show a standard error message indicating the email address is invalid.

String - WS Form will show the string you provide to indicate the email address is invalid.

## Sample Code

This code would typically be added to your themes functions.php file, preferably in a child theme.

// Add filter for disposable email addresses
add_filter( 'wsf_action_email_email_validate', 'wsf_action_email_email_validate_disposable_domains', 10, 4 );

// Hook function for wsf_action_email_email_validate filter
function wsf_action_email_email_validate_disposable_domains( $valid, $email, $form_id, $field_id ) {

 if( filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {

 // Split email address by @
 $email_array = explode( '@', $email );

 // Extract domain
 $domain = array_pop( $email_array );
 
 // Check if domain exists in list of disposable domains
 if( in_array( $domain, wsf_disposable_domains() ) ) {

 // Return an invalid feedback message to be shown on the field
 return __( 'The email address provided cannot be used' );
 }
 }

 return $valid;
}

// Array of disposable domains
function wsf_disposable_domains() {

 return array(

 '0-180.com',
 '0-30-24.com',
 '0-420.com',
 '0-900.com',
 '0-aa.com',
 '0-mail.com',
 '0-z.xyz'

 // Add other domains here ...
 );
}

 

## Find the ID of a Field

URL: https://wsform.com/knowledgebase/find-the-id-of-a-field/

WS Form uses field IDs for variables, here's how to find them.

WS Form uses field IDs for variables such as:

#field(123)

In the example above, the field ID would be 123 and this would output the value of that field.

## Enabling Field IDs

If you kept it simple while setting up WS Form, field IDs are switched off. To make field IDs visible:

Click on Settings under WS Form in the WordPress admin menu (on the left).

Click the Advanced tab.

Check Field IDs

Click Save

## Field ID Locations

Field IDs can be found:

In the field (Shown next to the field type and underneath the label).

When you hover over a field.

At the top of the field settings sidebar. The field settings sidebar is shown when you click the settings icon on a field.

 

## FluentCRM Integration

URL: https://wsform.com/knowledgebase/fluentcrm/

This integration lets you subscribe and unsubscribe FluentCRM contacts using a WordPress form created in WS Form.

This integration lets you subscribe and unsubscribe FluentCRM contacts using a WordPress form created in WS Form. You can create new forms from your FluentCRM lists in a single click from the add form page. You can also pre-populate forms with data from FluentCRM.

## Installation

The FluentCRM plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the FluentCRM plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the FluentCRM tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for FluentCRM

### Automatically

WS Form can create a form for any of your FluentCRM objects in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately. All FluentCRM field types are supported as well as tagging.

To create a FluentCRM form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the FluentCRM tab at the top of the page.

Click on a list (or choose No List if you do not wish to assign contacts to a list).

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the FluentCRM tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a FluentCRM object when a user saves or submits their form.

To add a FluentCRM action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to FluentCRM from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The FluentCRM action settings are as follows:

#### When Should This Action Run?

You can choose to run the FluentCRM action when the form is saved, submitted, or both.

#### FluentCRM List

Select which list the contact should be subscribed to.

#### Status

Choose the status of the contact that will be used when it is added to FluentCRM.

If you want to enable Double Opt-In you should set the status to Pending.

#### Send Double Opt-In Email

If the Status setting is set to Pending, you can send a double opt-in email if this setting is checked.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relates to the corresponding attributes in FluentCRM. For example you would want to map your email form field to the email attribute in FluentCRM. WS Form supports mapping to normal, category and transactional attributes.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding FluentCRM attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a FluentCRM field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to a source attribute in FluentCRM, or perhaps set a transaction attribute ID to the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding FluentCRM attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tags are labels you create to help organize your contacts. You can add any number of tags to a contact. Tags are added by choosing a field on your form such as a checkbox field.

To add a tag:

Click the Add  icon at the bottom of the Tag Mapping setting.

Choose the WS Form field containing the tags.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tags

You can use this setting to always add a tag to a contact. To add a tag:

Click the Add  icon at the bottom of the Tags setting.

Enter the name of the tag, e.g. My Tag.

Repeat this process for each tag you want to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Duplicate Handling

Use this setting to determine what to do if a duplicate email address is found in FluentCRM. The available options are:

Update contact

Do not contact update

Show error messsage

#### Duplicate Error Message

If a duplicate email address is found in FluentCRM, you can customize the error message shown if Show error message has been selected for the Duplicate Handling setting.

## Populate Forms Using FluentCRM

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in FluentCRM.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose FluentCRM from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the FluentCRM attribute to your form fields.

Click Save at the bottom.

Note that if you created your form using a FluentCRM template the field mappings will automatically be created for you.

## Form Abandonment - Saving Partial Form Submissions

URL: https://wsform.com/knowledgebase/form-abandonment-saving-partial-form-submissions/

Learn how to automatically save partially completed forms in case a visitor abandons a form.

Sometimes visitors to your website may abandon a form part way through, leaving a partial entry. WS Form provides complete flexibility over how and when to save partially completed forms so that you can capture key fields without the need for a fully submitted form. This is achieved by using Conditional Logic.

Conditional logic allows you to create smart forms. WS Form has an extensive library of conditions that can be used to detect behavior on your form that can then trigger other actions such as saving progress.

For the purpose of this tutorial, we're going to create some simple conditional logic that will do the following:

Check if an email field has been changed.

If true, save the form.

Creating this logic is easy!

Create a simple form that contains at least one email field. As a tip, keep the email field early in your form so that there is more chance of it being completed.

Click the Conditional Logic  icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add icon.

Name your condition Form Abandonment.

Complete the conditional logic as follows:

IF [Your Email Field] On change

THEN Form Save

Click Save & Close.

Click Preview to try the form.

You will now notice that when you change the email field, a submission will be saved. The form save action acts in exactly the same way as the Save field which can be used to create a save and continue feature on your form.

Saved forms appear in your Submissions page with a status of In Progress.

If you have the WS Form Debug Console open you'll see the conditional logic in action.

The other advantage of using this method, is that if a visitor returns back to the page their partially completed form will be pre-populated for them.

Use this same method to trigger a form save on any other event you wish, e.g., if a tab is clicked or if a phone field is changed.

## Form Settings

URL: https://wsform.com/knowledgebase/form-settings/

To access the form settings, click the settings icon in the top toolbar when editing a form. This contains the following tabs: Basic, Advanced, and Auto Popula…

You can use the form settings to:

Change the name of your form

Change how your form behaves when it is submitted

Apply custom CSS classes to form elements

Change spam protection settings

Track visitors

Hide tabs

Control tab validation

... and more!

To access the form settings, click the settings icon at the top of the layout editor.

The form settings sidebar will then appear. You can edit any of the settings in each of these tabs and then click the Save & Close or Save button. If you do not want to save your changes, you can click the Cancel button.

The form settings tabs are:

## Basic

### Form

#### Label

This is the label (title) of your form. As well as entering a label into this field, you can also edit the label at the top of the page. You should enter an easy-to-understand label for your form, for example, Contact Us or Appointment Request. This label is used to identify your form in WordPress and can also be added to the top of your form for website visitors to see using the Show Label setting.

#### Show Label

If enabled the label will be shown at the top of your form for website visitors to see. If you do not want the label to appear, uncheck this box.

#### Enable Form Submit On Enter

Allow the form to be submitted if someone types Enter/Return. Not advised for e-commerce forms.

#### Lock Save & Submit Buttons

A common issue with forms is that sometimes website visitors will double click a submit button. On a conventional form, this can often cause duplicate submissions to be processed.

WS Form comes with built-in duplicate protection. When this setting is enabled, it will disable the save & submit buttons once they have been clicked to prevent duplication from happening. We recommend leaving this setting enabled.

#### Unlock Save & Submit Buttons

When this setting is enabled, it will enable the save & submit buttons once the form has been successfully submitted or saved. It will also enable the button if a form error occurs. We recommend leaving this setting enabled.

#### Reset Form After Submit

When enabled WS Form will reset the form after it is successfully submitted so that any data in the fields is removed. We recommend keeping this setting enabled.

An example of when you would want to disable this setting might be if someone is doing repeated data entry into a form and only changing part of the submission each time.

#### Custom Form Action

If you do not want WS Form to process your form, enter a custom form action URL to post the form data to in this setting. WS Form will still perform client side validation before posting the data to the URL you have entered. Actions will not fire if a custom form action is entered.

If you do not have a custom form endpoint, leave this field blank.

### Tabs

#### Remember Last Tab Clicked

If enabled WS Form will store the last tab a website visitor has clicked in a cookie on their browser. This makes navigating a complex form easier if they return to the form at a later date to complete it. This is particularly helpful if you have added a Save button to a form, which will save the current form so that it can be retrieved later.

#### Tab Validation

Tab validation prevents users from progressing to the next tab unless the current tab is validated. Check this setting to enable this feature.

#### Show Invalid Fields

If a tab contains invalid fields and the user attempts to progress to the next tab, WS Form will show invalid feedback. If you have the Focus Invalid Fields setting enabled (See below) it will also focus on the first field that is invalid.

#### Hide Tabs

Check this setting to hide the tabs but retain tab functionality (e.g. Next Tab button).

### Fields

#### Invalid Feedback Text

If a required field is empty when the form is validated, invalid feedback text will shown.

The default invalid feedback text is: This field is required.

You can change the invalid feedback by changing this setting. You can also override invalid feedback text at a field level too.

The following WS Form variables can be used in this setting:

VariableDescription

#labelThe field label.

#label_lowercaseThe field label lowercase.

#### Focus Invalid Fields

If this setting is enabled, WS Form will focus on the first invalid field it finds when a form is submitted. This is a convenience feature that makes it easier for a website visitor to locate issues within their data entry.

### Errors

#### Show Server Side Error Messages

Shows error messages if a server side error occurs when a form is submitted.

#### Type

There are five different types of error message:

Success (Green)

Information (Blue)

Warning (Orange)

Danger (Red)

None

#### Position

You can choose to position error messages to show before or after your form. For large forms we would recommend enabling Scroll To Top if you choose before positioning, so that the message is seen by the user.

#### Clear Other Messages

If enabled any other messages on the screen will be cleared first.

#### Scroll To Top

If enabled the browser will scroll to the top of the page when the error message is shown. Choose from None, Instant, or Smooth.

#### Scroll Offset (Pixels)

Number of pixels to offset the final scroll position by. Useful for sticky headers. For example, if your header is 100 pixels tall, enter 100 into this setting. This setting appears if Scroll To Top is set to Instant or Smooth.

#### Scroll Duration (ms)

Duration of the smooth scroll in milliseconds. This setting appears if Scroll To Top is set to Smooth.

#### Hide Form When Shown

If enabled the form will be hidden when the error message is shown.

#### Show Duration (ms)

Use this field to enter how long the error message is shown before the next action fires. The value entered should be in milliseconds (1 second = 1000 milliseconds). If you enter a value in this field, the following two options are also available.

#### Hide Message After Duration

If enabled the error message will be hidden after the Show Duration (ms) has elapsed.

#### Show Form After Duration

If enabled the form will be shown after the Show Duration (ms) has elapsed. This setting appears if Hide Form When Shown is enabled.

## Styling

### Form

#### Style

Choose which style to use for this form. This setting appears when the WS Form styler is enabled. Learn more about the styler.

#### Breakpoint Queries

Choose whether column breakpoints respond to the browser width or the form width. This setting appears when using the WS Form framework.

Browser Width (@media) — Breakpoints respond to the browser / viewport width.

Form Width (@container) — Breakpoints respond to the form width. Useful for forms in sidebars, modals, or other narrow containers.

### Fields

#### Default Label Position

When WS Form is installed, labels are positioned at the top of a field. You can change this setting to set label positioning to be one of the following options:

Top

Left

Right

Bottom

Note that some frameworks do not support all of these label positions.

Changing this setting will affect all fields that have their label position set to Default.

#### Default Label Width (Columns)

If the label position of a field is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns. By default labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

#### Default Help Position

When WS Form is installed, help text is positioned below each field. You can change this setting to set the help positioning to be one of the following options:

Top

Bottom

Changing this setting will affect all fields that have their help position set to Default.

### Required Fields

#### Show Required HTML

When this is enabled, WS Form will output a small Required caption next to the label of any fields that are set as Required. If this is disabled, the captions will not be rendered.

#### Custom Required HTML

You can change the Required caption to anything you wish using this setting.

For example you could change it to: <small>Required</small>

### Classes

#### Form Wrapper

To add a class to the actual form element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Tabs Wrapper

To add a class to the tabs wrapper, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Tab Content Wrapper

To add a class to the content wrapper of all tabs, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Section Wrapper

To add a class to all sections, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Field Wrapper

To add a class to all field wrappers, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Field

To add a class to all fields, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Heading HTML Masks

#### Form

If you have enabled label rendering (see above), then the label will be shown at the top of the form. For developers this will be rendered in an h2 wrapper. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <h3>#label</h3>

#### Tab

If you have enabled label rendering of a tab, then the label will be shown at the top of each tab. For developers this will be rendered in an h3 wrapper. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <h4>#label</h4>

#### Section

If you have enabled label rendering of a section, then the label will be shown at the top of each section. For developers this will be rendered in a legend wrapper. A legend is used because this label is added within a fieldset. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <legend><em>#label</em></legend>

## Populate

The Populate tab will appear if you have any actions that provide support for this feature. Auto populate pulls data from an external source and makes that data available for setting the default value of fields.

### Populate Using Action

#### Enable

If checked, WS Form will populate the form with data from an action.

To use this feature, check Enable, then select the action you want to pull data from. Follow the on-screen prompts for setting up populate mapping and then click the Save button at the bottom.

## Spam Protection

Forms created by WS Form are inherently less likely to be prone to spam. This is because they are generated on the fly in a website visitor's browser when a page loads and are often not even seen by spam bots. In addition to this, we offer a variety of additional spam protection measures.

### IP Throttling

The IP Throttling setting allow you to only allow submissions from an IP address to be submitted one or more times. In order to use this feature your form will need:

Remote IP Address tracking enabled. Learn more about form tracking.

A Save Submission action.

#### Enable

When checked, limit by IP submission count will be enabled.

#### Maximum Count

This defines the maximum number of submissions that will be accepted from the same IP address for the given Duration setting.

#### Duration

This setting is used in conjunction with the Maximum Count setting to determine how many submissions will be accepted from the same IP address.

#### Limit Reached Message

The message to show if the limit is reached. Leave blank if you want nothing to show.

#### Message Style

You can wrap the message in a styled box, or you can select None to output the message as is.

### IP Blocklist

The IP Blocklist setting allows you to specify IP addresses you want to block for this form. In order to use this feature your form will need Remote IP Address tracking enabled.

#### Enable

When checked, limit by IP blocklist will be enabled.

#### IP Addresses

To add an IP address to block:

Click the Add icon.

Enter an IPv4 or IPv6 address.

Repeat this for each IP address you want to add.

You can also bulk specify IP address by using the wsf_submit_limit_ips WordPress filter hook.

#### Blocked Message

The message to show if an IP address match occurs. Leave blank if you want nothing to show.

#### Message Style

You can wrap the message in a styled box, or you can select None to output the message as is.

### Keyword Blocklist

The Keyword Blocklist setting allows you to specify keywords that will checked against when the form is submitted. If a keyword is found the form will be invalidated and invalid feedback will be shown on the invalid field.

The keyword matching is case-insensitive, meaning it doesn’t matter whether the word is in uppercase or lowercase.

To avoid false positives, the system performs whole word matching only. For example, if “ass” is a blocked keyword, it will not trigger on safe words like “class” or “passionate.” This helps ensure that valid submissions aren’t mistakenly flagged.

If you need more control with keyword matching, consider using the wsf_submit_field_validate filter hook.

#### Enable

When checked, limit by keyword blocklist will be enabled.

#### Keywords

To add a keyword to block:

Click the Add icon.

Enter a keyword.

Repeat this for each keyword you want to add.

You can also bulk specify keywords by using the wsf_submit_limit_keywords WordPress filter hook.

#### Invalid Feedback Message

The invalid feedback message to show on a field if it contains a blocked keyword. Leave blank if you want to show the default invalid feedback for that field.

### Honeypot

Honeypot spam protection works by adding a hidden field on your form that is intended to fool spam bots into thinking they need to complete that field. If completed the email is rejected.

If you enable this setting, WS Form will automatically add Honeypot protection to your form. There is nothing else you need to do!

### Akismet

Akismet provides WordPress with the ability to check comments and form submissions against their global database of spam. WS Form PRO is fully integrated with the popular Akismet spam check plugin and provides a convenient and effective way of tackling form submissions containing spam content.

### AbuseIPDB

AbuseIPDB checks the visitor’s IP address against a global database of reported abusive IPs. This section appears when AbuseIPDB support is available in WS Form.

### Settings

#### Spam Threshold

If your form is configured to check for spam (e.g. AbuseIPDB, Akismet or reCAPTCHA V3), each submission will be given a score between 0 (Not spam) and 100 (Blatant spam). Use this setting to determine the minimum score that will move a submission into the spam folder.

## Tracking

The tracking tab contains features related to tracking your visitors. These are disabled by default to respect privacy regulations.

### Google Events

This feature is only available in WS Form PRO.

WS Form can fire events at Google Tag Manager and Google Analytics levels. Learn More.

Note that WS Form PRO does not install any Google tags for you. You should do that with an additional plugin or embed it in your theme code.

#### Enable

When checked, event firing will be enabled.

#### Form

Enable this to fire an event when a form is submitted.

#### Tabs

Enable this to fire an event when a tab is clicked. One event is fired per tab per form session.

#### Fields

Enable this to fire an event when a user interacts with a field. One event is fired per field per form session.

### Tracking

When a form is saved or submitted, WS Form can store a wealth of tracking information along with that form to help you gain a better understanding of your audience.

The available tracking settings can be found here.

## Geo

This feature is only available in WS Form PRO.

#### Enable

If checked, WS Form will perform a client-side geolocation lookup by IP and will map the results to any fields configured below.

#### Geolocation Mapping

Map geolocation elements (such as city, region, country, latitude/longitude, and more) to fields in your form.

## Limit

This feature is only available in WS Form PRO.

### By Submission Count

#### Limit by Submission Count

Check this setting to enable the limit by submission count features.

#### Maximum Count

Enter the maximum number of submissions permitted. After this limit is reached the Limit Reached Message will be displayed, or the form will simply be hidden if the Limit Reached Message is empty.

#### Per Logged In User

If enabled, the maximum count is limited per logged in user.

#### Duration

The duration setting allows you to determine over which period the maximum count will be counted. If this is set to All Time, the form will keep displaying until the maximum count is exhausted. If you choose a time duration setting, the submission count will be throttled to the maximum count within the chosen time duration.

#### Limit Reached Message

Enter the message you would like to display when the maximum count limit is reached. If you leave this blank, the form will be hidden when the limit is reached.

#### Message Style

You can wrap the message in a styled box, or you can select None to output the message as is.

### By Schedule

The By Schedule options allow you to determine a start and end date for when the form is shown on your website.

Note that scheduling is ignored if you are previewing a form. To test this feature you should test the form on a public facing page.

#### Schedule Start

Enable this setting to set a scheduled start date/time for your form.

#### Start Date/Time

The date and time from which the form should become available.

#### Before Message

Enter the message you would like to display if the start date has not yet been reached.

#### Before Message Style

You can wrap the message in a styled box, or you can select None to output the message as is.

#### Schedule End

Enable this setting to set a scheduled end date/time for your form.

#### End Date/Time

The date and time after which the form should no longer be available.

#### After Message

Enter the message you would like to display if the end date has passed.

#### After Message Style

You can wrap the message in a styled box, or you can select None to output the message as is.

### By User

The By User options allow you to choose which user status can access the form.

#### User Status

Choose from one of the options to determine who can access the form:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

#### Type

Style of message to use if the user does not meet the user status condition. Choose from None, Success, Information, Warning, or Danger.

#### Message

Message shown if the user does not meet the user status condition. Leave blank to hide the form.

## Loader

This feature is only available in WS Form PRO.

If enabled, a loader will be shown when certain form events trigger. It can also be shown via conditional logic. Learn more about loaders.

#### Enable

Check this setting to enable the form loader.

### Sprite

#### Type

Choose the type of loader sprite to show, or select Custom HTML to provide your own markup.

#### Custom HTML

Enter custom HTML for the loader sprite. This setting appears if Type is set to Custom HTML.

#### Size (Pixels)

The size of the loader sprite in pixels.

#### Color

The color of the loader sprite.

#### Opacity

The opacity of the loader sprite.

#### Accent Color

The accent color used by some loader sprite types.

#### Accent Opacity

The opacity of the accent color.

#### Border Width (Pixels)

The border width of the loader sprite in pixels.

#### Always Visible

If checked, WS Form will attempt to keep the loader sprite always visible. This feature is useful for very long forms.

### Text

#### Visible

If enabled, text will be shown beneath the loader sprite.

#### Text

Text shown beneath the sprite. We recommend using a phrase suitable for accessibility readers.

### Overlay

#### Color

The color of the loader overlay.

#### Opacity

The opacity of the loader overlay.

#### Cursor

The cursor style shown while the loader is visible.

### Timing

#### Animation Duration

How long one animation cycle of the loader sprite takes.

#### Fade-in Duration

How long the loader takes to fade in.

#### Fade-out Duration

How long the loader takes to fade out.

### Events

Choose which events show the loader. Each enabled event can also have a delay.

#### Submit

Show the loader when the form is submitted.

#### Save

Show the loader when the form is saved.

#### Action

Show the loader when an action runs.

#### Render

Show the loader when the form is rendered.

#### Geolocate

Show the loader when geolocation is running.

## Conversational

This feature is only available in WS Form PRO.

#### Enable

If checked, this form will be made available in a conversational format.

#### Preview

Preview the conversational version of your form.

### Styling

#### Style

Choose which style to use for the conversational form. This setting appears when the WS Form styler is enabled.

### Permalink

#### URL Slug

The last part of the conversational form URL.

### Navigation

#### Enable

Show the navigation bar at the bottom of the page.

#### Progress Help

Help text to show alongside the navigation progress bar. You can use #progress_percent to inject the current progress percentage.

#### Scroll Duration (ms)

Duration in milliseconds for scrolling between sections.

## Translation

This tab will appear if you have a supported translation plugin installed (for example Polylang).

## Woo

This tab will appear if you have the WS Form PRO Product Integrations extension for WooCommerce installed.

## Form Validation

URL: https://wsform.com/knowledgebase/form-validation/

WS Form provides extensive options for managing form validation.

By default, form validation occurs when a Submit button is clicked (or Add To Cart if you are using the WooCommerce integration).

WS Form also provides extensive options for managing form validation as described below.

### Tab Validation

Tab validation prevents users from progressing to the next tab unless the current tab is validated.

To enable this feature:

Click the Form Settings icon at the top of the layout editor.

Scroll down to the Tabs section.

Check the Tab Validation setting.

Click Save.

### Tab Validation - Show Invalid Fields

Tab validation can also be configured to show invalid fields when a Next Tab button is clicked. If invalid fields are found the user will be shown invalid feedback and the form will not progress to the next tab.

To enable this feature:

Click the Form Settings icon at the top of the layout editor.

Scroll down to the Tabs section.

Check the Show Invalid Fields setting.

Click Save.

## Inline Validation

Inline validation allows you to immediately show invalid feedback on a field if it is invalid. WS Form does this by adding the following class at a section or field level:

wsft-validated

While you can add this class yourself (e.g. with class settings or conditional logic) WS Form also has settings for enabling this.

### Inline Validation - Fields

Click the field settings  icon.

Click the Advanced tab.

Change the Inline Validation setting under Validation. Choose Always to always show invalid feedback when a field is invalidated. Choose On Field Change or Blur to show invalid feedback when a field is changed or blurred (loses focus).

Click Save.

### Inline Validation - Sections

You can enable inline validation of all fields in a section as follows:

Click the section settings  icon.

Click the Advanced tab.

Change the Inline Validation setting under Validation. Choose Always to always show invalid feedback when a field within the section is invalidated. Choose On Field Change or Blur to show invalid feedback when a field within the section is changed or blurred (loses focus).

Click Save.

## Check Validation with Conditional Logic

You can add conditional logic IF conditions based upon whether a form, tab, section or field is validated. To do this:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the add + icon.

In the IF condition, select Form or a tab, section or field.

Select Validated or Not Validated.

Complete your THEN and/or ELSE statements.

Click Save

## Changing Invalid Feedback Text

When a form is validated, any fields that do not validate will show invalid feedback text below that field. You can change the invalid feedback text that is shown as follows:

Click the settings icon on the form field.

Click the Basic tab in the sidebar.

Scroll down to the Validation section.

Enter text into the Invalid Feedback Text setting.

Click Save.

## Form Won't Update on Front-End

URL: https://wsform.com/knowledgebase/form-wont-update-on-front-end/

Addressing form update issues on your website's front-end, covering potential causes like unpublished changes and page caching.

If your form isn't reflecting updates made in the layout editor on the front-end, consider the following possibilities:

## Publish Your Form

WS Form allows you to make edits to your form without impacting the front-end of your site. Changes are not pushed to the front-end until the Publish button is clicked. Therefore if you are not seeing changes on the front-end of your site it is possible you have not published your form.

Click the Publish button to publish your form.

Learn more: Publishing Forms

## Page Caching

Page caching may cause the illusion of a form failing to update on the front-end. This caching can manifest across various layers, such as:

Content Delivery Networks (e.g., Cloudflare, Amazon Cloudfront)

Hosting (e.g., Object Cache, Opcode Cache)

Web browser

Following modifications to your site's content, including forms, it's imperative to clear any related caches. Depending on your hosting provider, you might need to seek guidance on clearing the caching mechanisms implemented for your website.

## Hidden Content

Ensure any new content you have added has not been hidden. Check the Hidden setting in the Basic tab of fields. Also ensure you have not hidden content using Conditional Logic.

Learn more: How Hidden Fields Work

## Formatting Numbers Using #number_format

URL: https://wsform.com/knowledgebase/formatting-numbers/

Numbers can be formatted in WS Form using the #number_format variable.

Numbers can be formatted in WS Form using the #number_format variable.

#number_format can be used on your form (e.g. in the default value of field) and also in actions (e.g. the Send Email action).

## Demo

## Syntax

The syntax of the #number_format variable is as follows:

#number_format(number, decimals, decimal separator, thousands separator)

The parameters are as follow:

Parameter
Example
Description

number
#field(123) or 12345.6789
The input number.

decimals
2
Sets the number of decimal digits.

decimal_separator
.
Sets the separator for the decimal point.

thousands_separator
,
Sets the thousands separator.

## Examples

These examples use a field with ID 123 that has a value of 123456.789.

Example
Description

#number_format(#field(123))
123,457

#number_format(#field(123), 2)
123,456.79

#number_format(#field(123), 2, ",", ".")
123.456,79

#number_format(#field(123), 0, ".", " ")
123 456

#number_format(#field(123), 0, ".", " ") kr
123 456 kr

For currency formatting we recommend using #ecommerce_price(#field(123)) which automatically outputs a price according to your e-commerce currency settings in WS Form or WooCommerce.

## Dynamically Updating with #text

If you want a number to change dynamically if the number parameter changes, you can wrap the variable in #text. For example:

#text(#number_format(#field(123), 2))

This would output the value of field ID 123 to two decimal places, keeping it update if field ID 123 changes.

## Foundation Framework

URL: https://wsform.com/knowledgebase/building-wordpress-forms-for-foundation/

WS Form can output HTML markup that is native to the Foundation framework

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Many popular WordPress themes use Foundation.

If your WordPress theme uses the Foundation framework, WS Form can output forms that contain  HTML markup that is native to that framework. This means that WS Form physically changes the HTML so that your form dovetails seamlessly into your theme.

In addition to output native markup, WS Form will also change the breakpoint selector to match the available breakpoints in Foundation. This feature is only available in WS Form PRO.

All of the available WS Form field types are fully compatible with Foundation.

## Demo

To view a demo of a WS Form outputting a form for the Foundation framework, click here.

## Supported Versions

WS Form supports the following versions of Foundation:

Foundation 6.4+

Foundation 6.0-6.3.1

Foundation 5.x

## Configuring WS Form to Use Foundation Framework

### Automatic

When you first install WS Form, it will scan your theme files and if Foundation is detected it will automatically output your form using Foundation markup.

### Manual

To manually select Foundation as your framework:

Click on WS Form in the WordPress administration menu.

Click on 'Settings'.

Click on the Advanced tab.

Select 'Foundation' under the 'Framework' dropdown.

Click Save.

## Sample Output

An example of the HTML output for a tel field is shown below (includes some additional markup required by WS Form).

<div class="small-6 medium-3 cell" id="wsft-1-field-wrapper-7" data-id="7" data-type="tel">
 <label id="wsft-1-label-7" for="wsft-1-field-7">
 Phone
 <input type="tel" id="wsft-1-field-7" name="field_7" aria-labelledby="wsft-1-label-7" aria-describedby="wsft-1-invalid-feedback-7">
 <span id="wsft-1-invalid-feedback-7" data-form-error-for="wsft-1-field-7" class="form-error" role="alert">Please provide a valid phone number.</span>
 </label>
</div>

## Freshdesk Integration

URL: https://wsform.com/knowledgebase/freshdesk/

The Freshdesk integration allows you to create custom support ticket forms on your website that are pushed to your Freshdesk account.

The Freshdesk integration allows you to create custom support ticket forms on your website that are pushed to your Freshdesk account.

## Installation

The Freshdesk plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Freshdesk plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Freshdesk tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Freshdesk

In order to use the integration, you need to connect it to Freshdesk. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Freshdesk tab at the top of the page.

Enter your Freshdesk subdomain (e.g. my-company). How to find your subdomain.

Enter your Freshdesk API. How to find your API key.

If you do not have a Freshdesk account, you can create a new account here.

## Creating a Form for Freshdesk

### Automatically

The Freshdesk integration can automatically create a form for submitting a ticket.

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Freshdesk tab at the top of the page.

Choose New Ticket to create a generic form or choose one of your Freshdesk forms.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Freshdesk when a user saves or submits their form.

To add a Freshdesk action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Freshdesk List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Freshdesk action settings are as follows:

#### When Should This Action Run?

You can choose to run the Freshdesk action when the form is saved, submitted, or both.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Freshdesk. For example you would want to map your Email field to the Email field in Freshdesk.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Freshdesk field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

You can also add custom key/value mappings that are sent to your endpoint.

To add custom mapping:

Click the Add  icon at the bottom right of the meta mapping section.

Select your form field.

In the left-hand column, enter a custom value.

In the right-hand column, choose a Freshdesk field.

Repeat this process for each custom map.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to the tags in Freshdesk.

To map a field:

Click the Add  icon at the bottom right of the tag mapping section.

Select your form field (We recommend using a check box field).

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

#### Attachments

You can also attach files to Freshdesk tickets. To do this you just need to add at least one file upload field on your form.

To map your file upload field to Freshdesk:

Click the Add  icon at the bottom right of the attachments section.

Select your file upload field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Variables

The Freshdesk integration introduces additional variables that you can use in actions such as messages and emails.

## FunnelKit Integration

URL: https://wsform.com/knowledgebase/funnelkit/

The FunnelKit integration lets you use WS Form to push form submission data to FunnelKit for use in automations.

The FunnelKit integration lets you use WS Form to push form submission data to FunnelKit. The FunnelKit integration requires WS Form PRO.

You can learn more about FunnelKit WordPress plugin by clicking here.

### Installation

The WS Form PRO FunnelKit integration plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the WS Form FunnelKit integration plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the FunnelKit tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

### Using a Form with FunnelKit

To push form submission data to FunnelKit you need to add a Add to FunnelKit action.

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open.

Click the Add  icon to add a new action.

Select Add to FunnelKit from the action pulldown.

Optionally choose when the action should run. By default the action will run when the form is submitted.

Optionally choose an opt-in field. You can use this to make the action run only when an opt-in checkbox is checked.

That's it! Your form can now be used to trigger FunnelKit automations.

## Create an Automation

To create an automation that is triggered by a form:

Create a new Automation in FunnelKit.

Click Select Trigger.

Select Forms then WS Form > Form Submits.

Choose the form you want to trigger an automation from (The form must include an Add to FunnelKit action, see above). Map the basic contact fields.

You can also add an Update Fields action if you want to set additional fields by using WS Form merge fields. To do this click + and then choose Action, then choose Automations > Update Fields.

 

## GDPR Compliance for Forms in WordPress With WS Form

URL: https://wsform.com/knowledgebase/gdpr-compliance-for-forms-in-wordpress-with-ws-form/

Learn what GDPR is and explore WS Form features that can help with consent, data minimization, encryption, retention, and personal data requests.

The GDPR, or General Data Protection Regulation, is a data protection law that governs how personal data is collected, processed, stored, and protected. It applies to organizations that process the personal data of people in the European Union (EU) and European Economic Area (EEA), and has been in effect since May 25, 2018.

Personal data can include information such as:

Basic identity information, such as names, addresses, and identification numbers

Online data, such as IP addresses and location data

Racial or ethnic origin

Health and genetic data

Political opinions

Sexual orientation

Further information about GDPR can be found at GDPR.eu.

## GDPR Considerations

Organizations handling personal data may need to consider how that data is collected, processed, stored, protected, and deleted. This can include:

Why personal data is being collected and processed

How consent is obtained when consent is appropriate

What personal data is collected and whether all of it is necessary

How personal data is protected

How long personal data is retained

How requests to access or erase personal data are handled

Your responsibilities depend on factors such as what data you collect, why you collect it, where your organization and users are located, and how the data is processed. You should seek appropriate legal advice when determining your privacy and data protection obligations.

## GDPR Features in WS Form

WS Form includes features that can help you implement your organization's privacy and data protection policies. These include collecting consent, presenting legal notices, controlling the personal data you collect and store, protecting stored submission data, managing submission retention, and handling personal data export and erasure requests.

### Consent Checkboxes

If your privacy process calls for explicit consent, you can add a consent checkbox to your form and customize the text to explain what the user is consenting to.

You can add a consent checkbox to a form as follows:

Drag and drop a Checkbox field to your form. For example, you might position this immediately above the submit button.

In the sidebar, click the Checkboxes tab.

Replace Checkbox 1 with appropriate consent text. For example, I consent to #blog_name storing my submitted information so they can respond to my inquiry. The #blog_name variable is replaced with the name of your website.

Delete the Checkbox 2 and Checkbox 3 rows if they are not required.

Click the Save button.

### Legal Notices

The Legal field can be used to display a privacy policy, terms and conditions, disclaimer, or other legal notice directly in your form.

You can enter your own legal notice or use Termageddon as the source. The field can also be set as required. When required, the visitor must scroll to the bottom of the legal notice before the field will validate.

This can be useful when you want to present information about how personal data will be collected, processed, or stored as part of completing a form.

### Tracking

WS Form can collect tracking information associated with a submission. Individual tracking features can be enabled or disabled on a per-form basis, giving you control over the information your forms collect.

This includes controls for information such as IP addresses, geolocation, referrer information, and duration tracking. You can leave tracking features disabled when you do not need that information.

By default, new forms do not track any data from users. All tracking settings are opt-in.

### CaptchaFox

WS Form supports CaptchaFox for protecting forms against spam and automated submissions. CaptchaFox describes its service as privacy-first and GDPR-compliant, with data processed and stored exclusively in EU data centers.

CaptchaFox also states that it does not build advertising profiles or sell user data, and that a Data Processing Agreement (DPA) is available.

### Choose Fields to Save

The Save Submission action includes a Fields To Save setting that lets you control which submitted fields are stored in the database.

You can include or exclude specific fields from saved submissions. This allows a field to be used while processing a form without retaining its value in the WS Form submission database.

For example, if a sensitive value is needed by an action but does not need to be retained afterward, you can exclude that field from the saved submission.

### Auto Delete Submissions

WS Form can automatically delete saved submissions after a retention period you specify. This can help you implement your organization's data retention policy without having to manually remove old submissions.

To configure automatic deletion:

Edit your form in WS Form.

Open the Actions sidebar.

Select the Save Submission action.

Configure Auto Delete Submissions.

Enter the required retention period in Delete After (Days).

The Auto Delete Submissions setting provides the following options:

Off - Automatic deletion is disabled for new submissions and no expiry date is set.

Move to Trash - After the specified number of days, submissions are moved to trash and can be restored.

Permanently Delete - After the specified number of days, submissions are permanently deleted rather than moved to trash.

Use the option and retention period that are appropriate for your organization's data retention policy.

### Encryption

WS Form PRO can encrypt submission data stored in the database, providing an additional layer of protection for information retained by WS Form.

Submission encryption is configured globally. Once enabled, submission metadata for new submissions is encrypted before it is stored in the database.

File uploads and signatures are not encrypted by this feature. Refer to the Data Encryption knowledge base article for configuration instructions and important considerations before enabling encryption.

### Data Erasure Requests

WS Form integrates with the WordPress Erase Personal Data tools, allowing you to create a form that visitors can use to submit a personal data erasure request.

To create a data erasure request form:

Click Add New from the WS Form administration menu.

Click the GDPR tab.

Click the Data Erasure Request template.

Click Publish when the form is created.

Add the form to your website.

Once submitted, the request can be processed using the WordPress Erase Personal Data tools.

### Data Export Requests

WS Form also integrates with the WordPress Export Personal Data tools, allowing you to create a form that visitors can use to submit a personal data export request.

To create a data export request form:

Click Add New from the WS Form administration menu.

Click the GDPR tab.

Click the Data Export Request template.

Click Publish when the form is created.

Add the form to your website.

Once submitted, the request can be processed using the WordPress Export Personal Data tools.

## Geolocation Lookup by IP

URL: https://wsform.com/knowledgebase/geolocation-lookup-by-ip/

The WS Form Geolocation by IP Lookup setting in Form Settings can be used to populate form fields with approximate geographical information.

The WS Form Geolocation by IP Lookup setting in Form Settings can be used to populate form fields with approximate geographical information.

WS Form makes geolocation requests to third party IP lookup services client-side so that the users IP address does not pass through your web server.

If you opt to use this feature we would recommend updating your privacy policy accordingly.

## Demo

## Enabling Geolocation Lookup by IP

To enable lookups:

Click on the Form Settings icon at the top of the layout editor.

Click on the Geo tab.

Check the Enable Geolocation Lookup by IP setting.

## Configuring Geolocation Lookup by IP

Configuring lookups involves adding mappings from the geographic elements returned to the fields on your form.

To add a mapping:

Click the Add  icon at the bottom right of the Geolocation Mapping setting.

In the left-hand column, select the geographical element, e.g. City.

In the right-hand column, select the form field you would like the geographical element value to be added to.

Repeat this process for each geographical element.

Click the Save button at the bottom of the sidebar to save your changes.

## Choosing Which Geolocation Service to Use

The Geolocation Lookup by IP feature can fetch data from one of two different services:

ipapi.co (Recommended)

ipinfo.io

You choose which service to use in the Advanced tab of the Global Settings admin page. This same service is also used for the Tracking features in WS Form.

We recommend using ipapi.co because:

It provides the most geographical data (Other services may result in elements returning blank values).

It supports HTTPS requests for non-commercial applications.

If you choose a different service from those above, WS Form will default to ipapi.co. The reason for this is because other services do not support making HTTPS requests without a commercial key or token.

## Accuracy

Geolocation lookups based on IP addresses provide approximate location information, but their accuracy varies. Factors like dynamic IP assignments, VPN usage, and data availability can impact precision. While useful for certain purposes, relying solely on IP geolocation for critical decisions or precise location determination is not recommended.

Users accessing your website via a cellular signal are more likely to return inaccurate results whereas land based users will return more accurate results.

The quality of the data returned will also depend on the Geolocation Lookup by IP service you have chosen in Global Settings (Advanced tab).

## GetResponse Integration

URL: https://wsform.com/knowledgebase/getresponse/

The GetResponse integration lets you add subscribers using an action, pull subscriber data, and create new forms from your lists in a single click.

The GetResponse integration lets you add subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

## Installation

The GetResponse plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the GetResponse plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the GetResponse tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to GetResponse

In order to use the integration, you need to connect it to GetResponse. Connecting is easy!

Create an API key in GetResponse. To this, go to: https://app.getresponse.com/api and create an API key for WS Form.

Click WS Form in the WordPress administration menu.

Click Settings.

Click the GetResponse tab at the top of the page.

Enter your GetResponse API key.

Click Save.

If you do not have a GetResponse account, you can create a new account here.

## Creating a Form for GetResponse

### Automatically

WS Form can create a form for any of your GetResponse lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a GetResponse form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the GetResponse tab at the top of the page.

Click on any of your GetResponse lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the GetResponse tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to GetResponse when a user saves or submits their form.

To add a GetResponse action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a GetResponse List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The GetResponse action settings are as follows:

#### When Should This Action Run?

You can choose to run the GetResponse action when the form is saved, submitted, or both.

#### GetResponse List

Choose the GetResponse List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in GetResponse. For example, you would want to map your Email field to the Email field in GetResponse.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding GetResponse field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to tags in GetResponse.

To map a field:

Click the Add  icon at the bottom right of the interest mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Interest mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

If you use the automatic method above, WS Form PRO will automatically build interest mapping options for you.

## Populate Forms Using GetResponse

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in GetResponse.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose GetResponse from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the GetResponse fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a GetResponse template, the field mappings will automatically be created for you. You can also map tags.

## Global Settings

URL: https://wsform.com/knowledgebase/global-settings/

The settings page enables you to configure all of the global settings for WS Form. It is accessed from the WordPress admin menu.

The settings page enables you to configure global settings for WS Form. It is accessed from the WordPress admin menu by navigating to WS Form > Settings.

The settings page is organised into tabs. Some tabs are available only in WS Form PRO or when the corresponding integration is installed.

Click a tab below to view its available settings.

## Basic

The Basic tab contains settings for previews, the form editor, statistics and the WordPress administration area.

### Preview

#### Live

When enabled, changes made to a form are automatically reflected in the preview window.

#### Template

Select the page template WS Form should use when previewing forms.

When set to Automatic, WS Form attempts to find an appropriate template. If a suitable template cannot be found, WS Form uses a basic fallback template.

### Debug

#### Debug Console

Choose when the WS Form Debug Console should be displayed.

The available options allow you to restrict access to appropriate users, such as administrators.

The Debug Console provides information that can help you build, test and troubleshoot forms.

### Layout Editor

#### Column Guidelines

Choose when column guidelines should be displayed while editing forms.

The available options are:

Off - Column guidelines are not shown.

On Resize - Column guidelines are shown when you resize a section or field.

Always - Column guidelines are always shown.

#### Auto Publish

When enabled, changes made in the form editor are automatically published.

When disabled, changes remain unpublished until the form is manually published.

#### Breakpoint Widths

When enabled, the form editor adjusts the form preview width to match the breakpoint selected at the bottom of the editor.

This provides a more accurate representation of how the form may appear at different device widths.

#### HTML Compatibility Helpers

When enabled, compatibility helper links are shown for settings associated with browser support.

These links use data from Can I Use to help developers determine whether particular HTML features are supported by different web browsers.

#### Icon Tooltips

When enabled, tooltips are shown for icons in the form editor.

#### Sidebar Help Text

When enabled, explanatory help text is shown beneath settings in the form editor sidebar.

#### Searchable Sidebar Dropdowns

When enabled, dropdown settings in the form editor sidebar become searchable when they contain 20 or more options.

This makes it easier to locate an option in longer dropdown lists.

### Statistics

#### Disable

When enabled, WS Form stops collecting statistical data about forms, including views, saves and submissions.

#### Include Admin Traffic

When enabled, traffic generated by logged-in administrators is included in form statistics.

Leave this disabled if you do not want administrative testing and previews to affect form statistics.

#### Method

Choose how WS Form should collect form statistics.

The available methods are:

AJAX

AJAX Low Resource

Server Side

The AJAX methods generally provide the most reliable statistics because a request is made each time a form is displayed.

The AJAX Low Resource method uses a lightweight PHP script that requires minimal server resources. The script is located at:

<WS Form Plugin Install Path>/public/add-view.php

Some servers may prevent this script from running because of their security configuration. WS Form automatically disables this option if the script cannot be used.

The Server Side method does not require an additional HTTP request. However, statistics may be less accurate when page caching is enabled because PHP may not execute each time the page is viewed.

### Administration

#### Disable Unread Submission Bubbles

When enabled, unread submission count bubbles are not shown in the WordPress administration area.

#### Disable Toolbar Menu

When enabled, the WS Form menu is not shown in the WordPress admin toolbar.

#### Disable Translation

When enabled, WS Form translations are disabled and the original plugin language strings are used.

## Advanced

The Advanced tab contains settings for performance, JavaScript components, uploads, cookies, Google services, geolocation, tracking links and submission previews.

### Performance

#### Dynamic Enqueuing

When enabled, WS Form dynamically loads only the CSS and JavaScript components required by the functionality and field types used on a form.

This can reduce the amount of front-end code loaded on pages containing forms.

### JavaScript

#### Defer

When enabled, scripts generated by WS Form include the defer attribute.

The defer attribute instructs the browser to delay script execution until the HTML document has been parsed. This can prevent scripts from blocking page rendering, but it may delay the initial rendering of a form.

#### Enqueue in Footer

When enabled, scripts associated with WS Form are enqueued in the website footer.

#### Source

Choose whether shared JavaScript libraries should be loaded locally from your server or from a content delivery network.

Using Local is recommended. Some optimisation plugins may require a different configuration.

#### Date/Time Picker

Choose when WS Form should load its date and time picker component.

The available options include:

Always - Always load the WS Form date and time picker.

If Native Not Available - Load the WS Form picker only when the browser does not provide a native picker.

Never - Do not load the WS Form picker.

#### Color Picker

Choose when WS Form should load its colour picker component.

### File Uploads

#### Maximum File Size (Bytes)

Enter the maximum permitted file upload size in bytes.

WS Form uses the upload limit configured by PHP on your server by default. You can enter a lower value, but the value cannot exceed the server upload limit.

Click Use php.ini Value to restore the value configured by PHP.

#### Maximum Files

Enter the maximum number of files that can be uploaded simultaneously.

WS Form uses the maximum upload count configured by PHP on your server by default. You can enter a lower value, but the value cannot exceed the server limit.

Click Use php.ini Value to restore the value configured by PHP.

### Cookies

#### Cookie Timeout (Seconds)

This setting determines how long session cookies created by WS Form remain valid.

Cookies may be used by save and continue functionality to identify a visitor when they return to a form.

Common values include:

3600 - One hour.

86400 - One day.

604800 - One week.

#### Cookie Prefix

The default cookie prefix is ws_form.

WS Form prefixes its cookies to help prevent conflicts with cookies created by other plugins. Change this setting only when a different prefix is required.

#### Enable Save Cookie

When enabled, WS Form sets a cookie when a form is saved.

This allows a visitor to return to the form on the same device and continue their submission.

### Google

#### API Key

Enter the Google API key used by features such as the Google Address field, Google Map field and Google Routing field.

#### API Version

Choose the Google Places API version used by WS Form.

For Google accounts registered after March 1, 2025, select Places API (New).

### Geolocation Lookup By IP

#### Service

Choose the service WS Form should use for IP-based geolocation lookups.

Available services include:

geoplugin.com

ip-api.com

ipapi.co

ipinfo.io

These services offer different free and commercial plans.

#### geoplugin.com API Key

Enter your geoplugin.com API key if you use a commercial account.

The API key is used for server-side tracking lookups and is not exposed for client-side geolocation requests.

#### ip-api.com API Key

Enter your ip-api.com API key if you use a commercial account.

The API key is used for server-side tracking lookups and is not exposed for client-side geolocation requests.

#### ipapi.co API Key

Enter your ipapi.co API key if you use a commercial account.

The API key is used for server-side tracking lookups and is not exposed for client-side geolocation requests.

#### ipinfo.io API Key

Enter your ipinfo.io API key if you use a commercial account.

The API key is used for server-side tracking lookups and is not exposed for client-side geolocation requests.

### Tracking Links

#### URL Mask - IP Lookup

Enter the URL mask used when linking a tracked IP address to an external lookup service.

The following value is replaced with the IP address:

#value

#### URL Mask - Lat/Lon Lookup

Enter the URL mask used when linking tracked latitude and longitude coordinates to an external mapping service.

The following value is replaced with the latitude and longitude:

#value

### Submissions

#### Enable Edit in Preview

When enabled, the Edit in Preview option is available when viewing submissions.

This allows submissions to be loaded into the form preview for editing.

If a form is resubmitted from the preview, it is processed using conditional logic rather than the original processing path.

## Styling

The Styling tab controls the markup, colour scheme and CSS used by forms.

### Markup

#### Framework

Choose the framework WS Form should use when rendering front-end HTML.

Click Detect to allow WS Form to attempt to detect the framework used by your website.

When a supported framework is selected, WS Form outputs HTML and CSS classes appropriate for that framework.

If you are not using a specific CSS framework, select WS Form.

#### Layout CSS

When enabled, WS Form outputs the CSS responsible for responsive form layout.

Disable this only if your theme or another framework already provides the required layout styles.

#### Style CSS

When enabled, WS Form outputs its built-in visual styles, including colours, typography and form control styling.

Click View Styles to manage the styles used by WS Form.

Disable this setting if all form styling will be provided by your own CSS.

#### Column Count

Choose the number of columns used by the responsive form layout grid.

We recommend leaving this setting at 12 unless your website uses a different grid configuration.

### Scheme

#### Color Scheme

Choose whether your website uses a light or dark colour scheme.

WS Form uses this setting when rendering form controls and other interface elements.

#### Auto Color Scheme

When enabled, WS Form detects the visitor's preferred colour scheme and automatically uses light or dark styling where supported.

### Performance

#### Compile CSS

When enabled, WS Form precompiles its CSS to improve front-end performance.

This setting is recommended for production websites.

#### Inline CSS

When enabled, WS Form outputs generated CSS directly within the page instead of loading a separate stylesheet.

#### CSS Cache Duration

Enter the browser cache duration for generated CSS files.

The value is specified in seconds.

## AI

The AI tab contains settings for AI connectors, the WordPress Abilities API and the WS Form MCP Adapter.

These settings are used by AI features such as Create from AI, the Make AI Request action and authenticated AI clients that connect through the Model Context Protocol.

### AI Connectors

AI connectors allow WS Form to communicate with providers such as Anthropic, Google Gemini and OpenAI.

#### Status

Shows whether AI connectors are currently configured and available.

#### Connectors

Click Connectors to manage the AI connectors installed on your website.

AI connectors are used by the Create from AI template and the Make AI Request action.

### Abilities API

The Abilities API registers WS Form abilities with the WordPress Abilities API so that compatible AI clients can discover them.

#### Include in MCP Discovery

When enabled, WS Form abilities are included during MCP discovery.

This allows compatible AI clients to discover the actions available through WS Form. Authentication and user permissions still apply.

#### Allow Updates

When enabled, authenticated AI clients can create or update forms.

Enable this setting only when you trust the AI clients that connect to your website.

#### Allow Deletes

When enabled, authenticated AI clients can delete forms.

Enable this setting only when you trust the AI clients that connect to your website.

### MCP Adapter

The MCP Adapter registers a dedicated WS Form PRO MCP server endpoint that authenticated AI clients can connect to.

These setting will only appear if the WordPress MCP Adapter is available. You can install the MCP Adapter plugin or rely on a third party plugin that includes these classes such as Novamira.

#### Enable

When enabled, the dedicated WS Form MCP server endpoint is registered.

#### Server URL

The Server URL is the endpoint AI clients use to connect to WS Form.

Click the copy icon next to the URL to copy it to your clipboard.

## E-Commerce

The E-Commerce tab controls global currency formatting and price editing settings.

### Prices

When WooCommerce is active, the price settings are inherited from the WooCommerce store configuration.

Click Edit to open the corresponding WooCommerce settings.

#### Currency

Choose the currency used for prices in forms.

#### Currency Position

Choose whether the currency symbol is displayed to the left or right of the price.

#### Thousand Separator

Enter the character used to separate thousands in prices.

#### Decimal Separator

Enter the character used to separate decimal values in prices.

#### Number of Decimals

Enter the number of decimal places used when displaying prices.

### Submissions

#### Allow Price Field Edits

When enabled, price field values can be edited while viewing or editing a submission.

Changing a price does not recalculate totals or other calculated values in the submission. Any dependent values remain unchanged.

## System

The System tab provides information about your WS Form installation and hosting environment.

The system information is divided into sections that may include:

WS Form

WordPress

PHP

Web Server

Database

If WS Form detects a potential issue, a warning is shown next to the relevant item.

This information can be useful when troubleshooting compatibility, configuration or hosting problems.

## License

The License tab is available when WS Form PRO is installed.

### Version

Shows the installed version of WS Form PRO.

Updates can be managed from the WordPress Plugins page.

### License Key

Enter the license key provided when WS Form PRO was purchased, then click Activate.

### License Status

Shows the current status of the WS Form PRO license.

When the license has been activated successfully, the status is shown as Activated.

## Data

The Data tab contains tools for resetting form statistics, managing data encryption and controlling what happens when WS Form is uninstalled.

### Forms

#### Reset Statistics

Select a form and click Reset to permanently clear its statistical data.

This includes the form statistics used for views, saves, submissions and reporting.

Reset statistics cannot be recovered.

### Encryption

#### Enable Data Encryption

When enabled, WS Form encrypts submission metadata before it is stored in the database.

Data encryption requires an encryption key to be configured in the website's wp-config.php file.

#### Encryption Status

Shows the current data encryption status.

The status indicates whether an encryption key has been found and whether submission metadata is currently being encrypted.

Review any warning shown in this section before enabling data encryption.

### Uninstall

#### Delete Plugin Settings on Uninstall

When enabled, WS Form plugin settings are permanently deleted when the plugin is uninstalled.

This data cannot be recovered.

#### Delete Database Tables on Uninstall

When enabled, the database tables created by WS Form are permanently deleted when the plugin is uninstalled.

This may include forms, submissions and related data. This data cannot be recovered.

## Spam Protection

The Spam Protection tab contains global credentials and security settings used by supported CAPTCHA services and WordPress NONCE validation.

### reCAPTCHA

#### Site Key

Enter the Google reCAPTCHA site key used by reCAPTCHA fields.

This value can be overridden in the settings of an individual field.

#### Secret Key

Enter the Google reCAPTCHA secret key used to validate reCAPTCHA responses.

This value can be overridden in the settings of an individual field.

#### Default reCAPTCHA Type

Choose the default reCAPTCHA type used when a new reCAPTCHA field is added to a form.

The type can be changed in the settings of an individual field.

### hCaptcha

#### Site Key

Enter the hCaptcha site key used by hCaptcha fields.

#### Secret Key

Enter the hCaptcha secret key used to validate hCaptcha responses.

### Turnstile

#### Site Key

Enter the Cloudflare Turnstile site key used by Turnstile fields.

#### Secret Key

Enter the Cloudflare Turnstile secret key used to validate Turnstile responses.

### CaptchaFox

#### Site Key

Enter the CaptchaFox site key used by CaptchaFox fields.

#### Secret Key

Enter the CaptchaFox secret key used to validate CaptchaFox responses.

### NONCE

#### Enable NONCE

When enabled, WS Form adds a WordPress NONCE to form submissions.

WordPress NONCEs help protect forms against unauthorised requests.

NONCE validation is always used when a form is submitted by a logged-in user.

If page caching is enabled, we recommend keeping the combined browser and server cache duration below 10 hours. Longer caching periods may cause expired NONCE values to produce submission errors.

## Reporting

The Reporting tab controls scheduled form statistics emails and form submission error notifications.

### Form Statistics Email

The Form Statistics Email provides a scheduled summary of form views, saves, submissions and conversion rates.

#### Enable

When enabled, WS Form sends the Form Statistics Email according to the configured schedule.

#### Published Forms

When enabled, only published forms are included in the report.

#### Frequency

Choose how often the report should be emailed.

Available options include daily, weekly and monthly reporting.

#### Day to Send

Choose the day of the week on which a weekly report should be sent.

This setting is available when Frequency is set to Weekly.

#### Email To

Enter one or more email addresses that should receive the report.

Separate multiple email addresses with spaces.

Click Send Test to send a test report using the current configuration.

Save any changes before clicking Send Test to ensure the latest settings are used.

#### Email Subject

Enter the subject line used for Form Statistics emails.

### Form Submission Error Email

The Form Submission Error Email notifies recipients when an error occurs while WS Form is processing a submission.

#### Enable

When enabled, WS Form sends email notifications when submission processing errors occur.

#### Frequency

Choose how often error notifications should be sent.

Available options include:

Real-Time

Once Per Minute

Once Per Hour

Once Per Day

#### Email To

Enter one or more email addresses that should receive submission error notifications.

Separate multiple email addresses with spaces.

Click Send Test to send a test email using the current configuration.

#### Email Subject

Enter the subject line used for submission error emails.

## Variables

The Variables tab controls the default output of selected WS Form variables used in email and PDF templates.

### Variable: #email_logo

The #email_logo variable inserts a configured logo into an email or PDF template.

#### Image

Click Select Image to choose the image used by the #email_logo variable.

The selected image can be inserted into templates using:

#email_logo

We recommend removing unnecessary whitespace from the image before uploading it.

#### Size

Choose the WordPress image size used when rendering the logo.

The recommended maximum image dimensions are 400 by 200 pixels.

### Variable: #email_submission

The #email_submission variable outputs the contents of a submission in email and PDF templates.

#### Tab Labels

Choose when tab labels should be included.

The available options are:

Auto - Show the tab label only when the tab contains a non-empty field and Show Label is enabled for the tab.

Yes - Show the tab label when Show Label is enabled for the tab.

No - Never show the tab label.

#### Section Labels

Choose when section labels should be included.

The available options are:

Auto - Show the section label only when the section contains a non-empty field and Show Label is enabled for the section.

Yes - Show the section label when Show Label is enabled for the section.

No - Never show the section label.

#### Field Labels

Choose when field labels should be included.

The available options are:

Auto - Show the field label when the field contains a value and Show Label is enabled.

Yes - Always show the field label.

No - Never show the field label.

#### Static Fields

When enabled, static fields such as Text fields and HTML fields are included in the output unless excluded in the settings of an individual field.

#### Exclude Empty Fields

When enabled, fields without a value are excluded from the generated output.

### Variable: #field

These settings control the default output of file and signature values rendered using the #field variable.

#### Show File Preview

When enabled, previews of uploaded files and signatures are shown where supported.

This setting is compatible with the WS Form (Private), WS Form (Public) and Media Library file handlers.

#### Show File Name and Size

When enabled, the file name and file size are shown for uploaded files and signatures.

This setting is compatible with the WS Form (Private), WS Form (Public) and Media Library file handlers.

If Show File Preview and Show File Name and Size are both disabled, WS Form still displays the file name.

#### Link to Files

When enabled, links are added to uploaded files and signatures.

The Send Email action includes a separate setting that controls whether links are included in email content.

This setting is compatible with the WS Form (Private), WS Form (Public) and Media Library file handlers.

## Google Address Field

URL: https://wsform.com/knowledgebase/google-address/

This Google Address field enables you to autocomplete address fields using the Google Places Autocomplete API.

The Google Address field enables you to autocomplete address fields in WordPress forms.

The countries searched can be restricted and optionally filtered by business addresses. Furthermore the chosen address can also be shown on a WS Form Google Map field.

## Demo

This demo is for the U.S. but the Google Address field can be localized to any country.

## How It Works

When a user enters a partial address, the Google Places API shows suggested addresses. If an address is clicked, the components of the address are populated to other fields on your form. The Google Address field itself becomes Address Line 1 once the address is clicked.

You'll find the country and business address restriction options in the Advanced tab of the field settings under the Restrictions section.

## Setup

The Google Address field requires:

A Google Cloud Project set up with billing enabled. (Create a Google Cloud Project).

The following APIs enabled on the Google Cloud Project (Enabling an API in your Google Cloud Project)

Maps JavaScript API

Places API (New)

Geocoding API

An API key (Create Access Credentials)

To enter your API key into WS Form:

Click Settings from the WS Form admin menu.

Click the Advanced tab.

Enter your API key into the API Key setting under Google.

We recommend choosing Places API (New) and enabling the "Places API (New)" API on your Google Console Project.

Click Save.

Once the key has been added and saved you can add the Google Address field to your form.

## Adding a Google Address Field

To learn how to add, edit, clone, move, resize, offset, or delete a Google Address field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked, the Google Address field must be clicked on by the user.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

### Field Mapping

Use this section to map the Google address components to your form fields.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select the Google address component.

In the right-hand column, select your form field.

Repeat this process for each address field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Google address components can be mapped to the following field types:

Text

Text Area

Select

Google Address

### Google Map

#### Field

Choose the Google Map field to center with the address.

#### Zoom

Optionally enter a zoom level (1-20) used when the google map is centered with the address.

#### Geolocate on Click

If checked, when the map is clicked a geolocate will occur and the field mappings will be reprocessed with the closest address information.

### Geolocate

#### Method

The auto complete setting can be used to automatically attempt to set the address to the users location. To enable this feature, choose one of the geolocation methods:

None (Geolocating is disabled)

Browser (Uses the location provided by the browser. More accurate but user is prompted to allow location sharing).

IP (Less accurate. User is not prompted).

This method uses the Google Maps Geocoder API to convert the users latitude and longitude to an address.

#### On Load

If checked, a geolocate will occur when the Google Address field loads.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the Google Address field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Horizontal Alignment

The horizontal alignment setting allows you to choose how the icons are horizontally aligned. The options are:

Left

Center

Right

Space Around (The space around each icon is the same)

Space Between (The space between each icon is the same)

Space Evenly (The space before, between and after each icon is the same)

#### Height

Enter a height for the Google Map. You can either enter a height in pixels (e.g. 400px) or enter a percentage (e.g. 100% for a square). The percentage value is relative to the width of the map.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Labels

#### Reset

You can use this setting to change the text shown in the reset link. If left blank, it will default to Reset.

### Restrictions

#### Result Type

If selected, the results will be restricted by this type. The available options are:

All (Select this to enable postal code searching)

Addresses

Businesses

Cities

Regions

#### Country Restrictions

Country restrictions allows you to restrict the countries of addresses that are returned in the search results. You can add up to five countries.

To add a country restriction:

Click the Add  icon to add a country row.

Choose a country.

Repeat this for every country you want to restrict the results to.

Click Save to save the country restrictions.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Google Drive Integration

URL: https://wsform.com/knowledgebase/google-drive/

The Google Drive integration allows you to configure file fields to upload directly to a connected Google Drive account.

The Google Drive integration allows you to configure file fields to upload directly to a connected Google Drive account. You can choose which path to upload the files to and can easily access the files from the submissions page.

The integration creates a new file handler to WS Form called Google Drive.

## Installation

The Google Drive integration is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Google Drive integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Google Drive tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Google Drive

In order to use the integration, you need to connect it to Google Drive. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Google Drive tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Google Drive account, you can create a new account here.

## How to Configure File Fields for Google Drive

To configure a file field to push its uploads to Google Drive:

Click the settings icon on the file field.

In the basic tab change the File Handler setting to Google Drive.

Optionally, change the Upload path. The upload path defaults to:/WS Form/#form_id/#submit_hash/#field_id/

You can use WS Form variables in this path to make it dynamic. The default value ensures each form, submission and field on the form is given its own folder in Google Drive to minimize the chance of files being overwritten. Bear in mind that each file field can be configured with the Multiple setting to be able to upload more than one file.

Some variables you might find helpful for this path are:

Variable
Description

#form_id
Returns the ID of the form.

#submit_hash
A unique identifier for the submission.

#field_id
The ID of the file field.

Optionally, specify the Root Folder ID.

The root folder ID defaults to My Drive (blank).

To upload files to a Shared Folder, click on the folder in Google Drive and copy the folder ID from the address bar. For example:

In this example, the Root Folder ID you would enter would be: 14CRFg10wD77EWTCV4ewlm_cbS7tduXoL

To upload files to a Shared Drive, copy the shared drive ID from the URL in the same manner. Shared drive IDs begin with 0A.

## Accessing Google Drive Uploads

To access the files that are uploaded to Google Drive, you can click on the file upload icons in submissions as you would any other file upload. The files are, of course, also accessible from within your Google Drive folder.

## Google Events

URL: https://wsform.com/knowledgebase/google-events/

The WS Form PRO Google Analytics settings let you fire events when a form, tab or field is interacted with.

The Google Events setting enables you to fire events when a form, tab or field is interacted with.

## Enable Google Events

To enable Google Events:

Click the form settings icon at the top of the layout editor.

Click the Tracking tab.

Check the Enable checkbox under Google Events.

Check one or more of the following options:

Form
This will fire an event when a form is saved or submitted.

Tabs
This will fire an event when a tab is clicked on. One event is fired per tab click per form session.

Fields
This will fire an event when a field is interacted with. One event is fired per field per form session.

Note that WS Form PRO does not install the Google tags for you. You should do that with an additional plugin or embed it in your theme code.

### Google Analytics Events

WS Form PRO automatically detects if you have Google Analytics installed and automatically fires events using the code appropriate to your tag version. The following versions of Google Analytics are supported:

gtag.js (Universal and Google Analytics 4)

analytics.js (Deprecated)

ga.js (Deprecated)

The format of each event is shown below:

Event
Data Layer

Submit
event_category: Form - #form_label
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

Save
event_category: Form - #form_label
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

Tab
event_category: Form - #form_label
event_label: #tab_label
wsf_group_id: #group_id
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

Field
event_category: Form - #form_label
event_label: #field_label
wsf_section_id: #section_id
wsf_field_id: #field_id
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

## Form Submit Events

WS Form also fires two other events to ensure compatibility with Google Analytics built-in form functionality:

Event
Data Layer

form_submit
Enhanced Event Measurement
form_id
form_name
form_destination
form_submit_text
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

gtm.formSubmit
gtm.element
gtm.elementId
gtm.elementClasses
gtm.elementUrl
wsf_form_id: #form_id
wsf_form_instance_id: #form_instance_id
wsf_form_label: #form_label_id

## Google Tag Manager

If you are using the latest Google Tag Manager embed code, it will not expose gtag to the data layer. You will need to add the following code to enable this:

<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments)};
</script>

You can learn more about this technique here.

## Custom Events

To fire custom events, see the Conversion Tracking action for more information.

## Google Map Field

URL: https://wsform.com/knowledgebase/google-map/

This Google Map field enables you to add one or more interactive maps to your form.

The Google Map field enables you to add one or more interactive maps to your form. The form user clicks on the map and the latitude and longitude of the map is stored in the submission.

## Demo

## Setup

The Google Map field requires:

A Google Cloud Project set up with billing enabled. (Create a Google Cloud Project).

The following APIs enabled on the Google Cloud Project (Enabling an API in your Google Cloud Project)

Maps JavaScript API

Places API (New)

Geocoding API

An API key (Create Access Credentials)

To enter your key into WS Form:

Click Settings from the WS Form admin menu.

Click the Advanced tab.

Enter your API key into the API Key setting under Google.

Click Save.

Once the key has been added and saved you can add the Google Map field to your form.

## Adding a Google Map Field

To learn how to add, edit, clone, move, resize, offset, or delete a Google Map field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example 'First Name' or 'Email'.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked, the Google Map field must be clicked on by the user.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

### Map

#### Auto Center

The auto center setting can be used to automatically center the map to the users location. To enable this feature, choose one of the geolocation methods:

Browser Geolocation (Uses the location provided by the browser. More accurate but user is prompted to allow location sharing).

IP Geolocation (Less accurate. User is not prompted).

Both methods are processed client-side, no data is passed to the server to provide this functionality.

#### Latitude

Enter the default latitude for the map. This setting is used to position the map but does not set the position set by the user. It must be used in conjunction with the longitude setting.

#### Longitude

Enter the default longitude for the map. This setting is used to position the map but does not set the position set by the user. This setting must be used in conjunction with the latitude setting.

#### Zoom

Enter the default zoom level for the map. If you do not enter a value in this setting, it will be set to 14. This value typically ranges from 1 - 20 but some areas of the world allow for higher zoom levels.

#### Type

There are four different types of map you can choose from:

Road Map

Satellite

Hybrid (A combination of road map and satellite)

Terrain

Use this setting to choose the type of map you want to display.

#### Search Field

It is possible to use a field such as a text field as an address search field. The address search field can be used to enter a zip or full address to find a location on the map. Simply add a text field to your form (e.g. above the map) and then use this setting to select that field.

### Controls

#### Map Type

Enable or disable the map type control on the map.

#### Full Screen

Enable or disable the full screen control on the map.

#### Street View

Enable or disable the street view control on the map.

#### Zoom

Enable or disable the zoom control on the map.

### Marker

The marker indicates where the user has clicked on the map.

#### Icon Title

Enter the title for the marker, e.g. 'Selected location'.

#### Icon URL

Enter a URL or a base 64 encoded data string into this setting to change the marker icon.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a ‘Clear Hidden Fields’ setting enabled. For example, if you have a ‘Send Email‘ action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the 'Styles' settings to change the design of the Google Map field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the 'Top' positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to 'Default Label Width' and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Horizontal Alignment

The horizontal alignment setting allows you to choose how the icons are horizontally aligned. The options are:

Left

Center

Right

Space Around (The space around each icon is the same)

Space Between (The space between each icon is the same)

Space Evenly (The space before, between and after each icon is the same)

#### Height

Enter a height for the Google Map. You can either enter a height in pixels (e.g. 400px) or enter a percentage (e.g. 100% for a square). The percentage value is relative to the width of the map.

#### Map ID

The map ID is used for cloud styling of a map.

Google - Use Map IDs

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Labels

#### Reset

You can use this setting to change the text shown in the reset link. If left blank, it will default to 'Reset'.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose 'Has User Role or Capability', additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Google Routing Field

URL: https://wsform.com/knowledgebase/google-routing/

This Google Routing field enables you to retrieve route information in WordPress forms using the Google Directions Service API and use that data in fields on y…

The Google Routing field enables you to retrieve route information in forms for WordPress. Simply specify two form fields to act as a start and end location and WS Form will automatically make the calculations for you.

The following information can be obtained using this field:

Route distance

Text description

Value (miles, yards, kilometers and meters)

Route duration

Text description

Value (seconds, minutes, hours, days, weeks and years)

Summary (A short description of the route)

Latitude and Longitude of Start and End locations

Furthermore the route can also be shown on a WS Form Google Map field.

The above information is retrieved using the Google Routes API each time the start and end locations are completed and/or changed.

## Demo

## How It Works

When a user enters a start and end location, the Google Routes API will request route information. If a route can be determined, information about the route is populated to fields on your form. The Google Routing field itself can be used to show information or it can be hidden if it is not required.

The Google Routing field can be used in conjunction with Google Address fields for easy choosing of start and end locations, as well as the Google Map field to show the route on a map.

Each Google Routing component can be mapped to one or many fields on your form, giving you complete flexibility over how the data is used.

The output can also be used in conjunction with Conditional Logic, Calculated Fields and E-Commerce Fields.

## Setup

The Google Routing field requires:

A Google Cloud Project set up with billing enabled. (Create a Google Cloud Project).

The following APIs enabled on the Google Cloud Project (Enabling an API in your Google Cloud Project)

Maps JavaScript API

Routes API

An API key (Create Access Credentials)

If you use Google Address fields for the start or end location, make sure the Google Address field is also configured correctly.

To enter your Google API key into WS Form:

Click Settings from the WS Form admin menu.

Click the Advanced tab.

Enter your API key into the API Key setting under Google.

Choose Routes API (New) from the Routing API Version setting.

Click Save.

If your Google API key has API restrictions enabled, make sure Routes API is included in the list of allowed APIs. Enabling Routes API on the Google Cloud Project alone does not give a restricted API key access to it.

If Google Address and Google Map fields are working but routing is not, check that Routes API is enabled and permitted for your API key. Routing uses a separate Google API.

If Routes API is blocked by your API key restrictions, Google may return a 403 API_KEY_SERVICE_BLOCKED error from routes.googleapis.com for ComputeRoutes.

If WS Form debugging is enabled, the following error will be shown:

Google Routing error: Routes API is not enabled for this API key. Enable Routes API in Google Cloud Console and add it to the API key restrictions.

After enabling an API or changing API key restrictions, wait a minute or two and then hard-refresh the page containing the form.

Once the key has been added and saved you can add the Google Routing field to your form.

## Adding a Google Routing Field

To learn how to add, edit, clone, move, resize, offset, or delete a Google Routing field, please click here.

## Templates

A good way of getting familiar with the Google Routing field is to try one of the ready-to-use templates. To use a template:

Click Add Form from the WS Form admin menu.

Choose one of the Google Routing templates: Simple, Map or Full.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

#### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example First Name or Email.

#### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

#### Required

If checked, the Google Address field must be clicked on by the user.

#### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

#### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

### Route

#### Start

Choose a field to use for the start location. You can choose the follow field types:

Google Address

Text

Text Area

Number

Select

Checkbox

Radio

Hidden

When using a Google Address field the user can conveniently enter a partial address and then select a full address from a dropdown list. When both the start and end location are chosen, WS Form will make a request for the route. The Google Address field must be configured as described in the Google Address knowledge base article.

Other field types such as Text and Hidden can be used to allow a user to enter an address manually, or you can enter a fixed address to be used for either the start or end location.

Furthermore, other field types can also be populated with latitude and longitude values. They should be entered in the following format:

28.385233,-81.563873

A combination of Google Address and other field types can also be used.

#### End

Choose a field to use for the end location. See Start above for further details about this setting.

#### Field Mapping

Use this section to map the route components such as distance, duration and summary information to your form fields.

To map a field:

Click the Add icon at the bottom right of the field mapping section.

In the left-hand column, select the routing component.

In the right-hand column, select your form field.

Repeat this process for each address field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Google address components can be mapped to the following field types:

Google Routing (i.e. the this field)

Text

Text Area

Number

Select

Checkbox

Radio

Hidden

#### Travel Mode

Choose which transportation mode to use when calculating the route. The available options are:

Bicycling

Driving (Default)

Transit

Walking

#### Unit System

When mapping text based components (e.g. Distance - Text) this setting determines which unit is used when displaying that text.

#### Avoid Highways

If checked, the routes between origins and destinations will be calculated to avoid highways where possible.

#### Avoid Tolls

If checked, the directions between points will be calculated using non-toll routes, wherever possible.

#### Avoid Ferries

If checked, the routes between origins and destinations will be calculated to avoid ferries where possible.

#### Google Map

Choose the Google Map field to show the route on. Your Google API key will require the Maps JavaScript API enabled on it.

### Accessibility

##### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

#### Exclusions

##### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Hidden Behavior

##### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

### Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the Google Map field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Google Sheets Integration

URL: https://wsform.com/knowledgebase/google-sheets/

The Google Sheets integration lets you push form submissions as new rows in a Google Sheet and create new forms from your Google Sheets in a single click on th…

The Google Sheets integration lets you push form submissions as new rows in a Google Sheet and create new forms from your Google Sheets in a single click on the add form page.

Note: In order to use the Google Sheets integration, you just need at least one sheet that has field headings in the columns of the first row. For example:

## Installation

The Google Sheets plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Google Sheets plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Google Sheets tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Google Sheets

In order to use the integration, you need to connect it to Google Sheets. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Google Sheets tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Google Sheets account, you can create a new account here.

## Creating a Form for Google Sheets

To add a Google Sheets action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Google Sheets from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Google Sheets action settings are as follows:

#### When Should This Action Run?

You can choose to run the Google Sheets action when the form is saved, submitted, or both.

#### Spreadsheet ID

In this setting you will paste the spreadsheet ID. This can be obtained by looking at the URL of you sheet when in Google Sheets. For example, when editing your spreadsheet the URL might look like this:

https://docs.google.com/spreadsheets/d/1W3Gm5truVLbn0PZ8o6n2RrHCSwTMGsuP3cgNSYWcSqQ/edit?gid=0#gid=0

The spreadsheet ID is found after /d/ and /edit so in this example the spreadsheet ID would be:

1W3Gm5truVLbn0PZ8o6n2RrHCSwTMGsuP3cgNSYWcSqQ

Copy and paste this ID into the Spreadsheet ID setting. If the ID is entered correctly, WS Form will retrieve the available sheets and show them in the Sheet setting.

#### Sheet

Choose the Sheet within the Spreadsheet you want to push data to.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding column in Google Sheets. For example you would want to map your Email field to the Email column in Google Sheets.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Google Sheets column heading.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Use URL for File Fields

If checked, mapped file and signature fields will be populated with URLs instead of the file name. This will be added as a =HYPERLINK formula if a single file is uploaded.

#### Custom Mapping

Custom mapping allows you to set a Google Sheets cell to any value you wish, including the use of WS Form variables. For example, you might want to map a lead source to a cell in your sheet.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the center column, select the corresponding Google Sheet column.

In the right-hand column. select the cell format. Note that if you are using Date or Date/Time format you should ensure the date you specify matches the date / time format specified in your WordPress settings.

Repeat this process for each custom mapping you require.

Click the Save button at the bottom of the sidebar to save your changes.

#### Repeater to Rows

This setting allows you to push repeatable section rows as rows in the Google Sheet. Choose which repeater you want to use and WS Form will create a sheet row for each repeater row. Any fields outside of the repeater will be duplicated to each row.

## Groundhogg Integration Integration

URL: https://wsform.com/knowledgebase/groundhogg/

This integration lets you use any form created in WS Form to create and update Groundhogg contacts.

Groundhogg is a marketing automation and CRM plugin for WordPress.

This integration lets you use any form created in WS Form to create and update Groundhogg contacts, as well trigger any funnel using our benchmark.

## Installation

The Groundhogg plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Groundhogg plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Groundhogg tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for Groundhogg

### Automatically

The Groundhogg integration comes with two form templates. These templates can be used to build forms that create new contacts in Groundhogg when submitted.

To create a Groundhogg form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Groundhogg tab at the top of the page.

Click on the basic or advanced form template.

That's it! Your form will be created and is ready to add to your website. You can edit the form like any other form built with WS Form.

You can test the form by clicking Preview or by adding the form to one of your web pages.

When the form is submitted, it will create (or update) a contact in Groundhogg.

### Using the WS Form PRO Benchmark

Groundhogg benchmarks listen for special website events that launch automated workflows in the funnel builder.

When WS Form PRO creates a new contact in Groundhogg, it triggers the WS Form PRO benchmark.

To use the WS Form PRO benchmark:

Create or edit a Groundhogg funnel.

Click + Add Step.

Click WS Form PRO

Select which form you would like the step to run for. Leave this setting blank if you want this step to run for any form.

Select which mode you would like the step to run for. Leave this setting blank if you want this step to run for any mode.

Click Save.

### Manually Configuring a Form

It is also possible to use any form created in WS Form and add an action so that a contact is created in Groundhogg when a user saves or submits their form.

To add a Groundhogg action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Groundhogg from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save & Close button at the bottom to save your changes, or click Cancel to disregard your changes.

The Groundhogg action settings are as follows:

#### When Should This Action Run?

You can choose to run the Groundhogg action when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Opt-In Status

Each contact in Groundhogg has an opt-in status. The available statuses are as follows:

Unconfirmed

Confirmed

Unsubscribed

Subscribed Weekly

Subscribed Monthly

Bounced

Spam

Complained

Use this setting to determine which opt-in status is assigned to the contact.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Groundhogg. For example you would want to map your Email field to the Email field in Groundhogg.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left column, select your form field.

In the right column, select the corresponding Groundhogg field.

Repeat this process for each field on your form.

Click the Save button to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Groundhogg field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source such as the variable #form_label to the source field in the Lead object in Groundhogg.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left column, enter a value and/or a WS Form variable.

In the right column, select the corresponding Groundhogg field.

Repeat this process for each field on your form.

Click the Save button to save your changes.

#### Owner

Use this setting to assign the contact to a particular WordPress user in Groundhogg. This setting is optional.

#### Tag(s)

When a new contact is created, Groundhogg will automatically assign the contact to one or more tags. This setting allows you to add additional tags to a contact. Search for an existing tag or enter a new tag into this field and then type Return to save the tag.

#### Notes

You can add one or more notes to a contact using this setting. To add a note:

Click the Add  icon at the bottom right of the notes section.

Enter a note. You can type plain text and/or a WS Form variable.

Repeat this process for each note you wish to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Attachment Mapping

File and signature fields can be mapped so that they are uploaded as attachments to the post when it is added.

To add a file or signature field as an attachment:

Click the Add  icon at the bottom right of the attachment mapping section.

Select your form field.

Repeat this process for each field on your form that you want to include as an attachment.

Click the Save button to save your changes.

File fields that are marked as multiple will result in multiple attachments if more than one file is uploaded.

### Custom Meta

This setting is used to add custom meta to the contact.

To add a custom meta key-value pair:

Click the Add  icon to add a  row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

## Populate Forms Using Groundhogg

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Groundhogg.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Groundhogg from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu. Contact is the only option here.

Map the Groundhogg fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Groundhogg template the field mappings will automatically be created for you.

## hCaptcha Field

URL: https://wsform.com/knowledgebase/hcaptcha/

This field is used to add an hCaptcha to your form.

This field is used to add an hCaptcha to your form. An hCaptcha detects whether the user of a site is human. Filling out an hCaptcha is similar to filling out a reCAPTCHA.

## Demo

[ws_form id="13667"]

WS Form Pro supports all current versions of hCaptcha, including:

Default

Invisible

## Register Your Website with hCaptcha

In order to use hCaptcha, you first need to create an hCaptcha account.

Sign up

Once you have registered, you will be provided with two keys:

Site key

Secret key

## Submissions Using Enterprise Accounts

When a submission is successfully made on your website and you have an Enterprise hCaptcha on the page, hCaptcha provides a spam score. The spam score is stored against your submissions and is represented as a colored circle on the submissions page. If you hover your mouse cursor over the colored circle, you can see the percentage score WS Form has given a submission in terms of spam scoring. The scoring ranges from 0% (not spam, shown in green) to 100% (blatant spam,  shown in red).

## Adding an hCaptcha Field

To learn how to add, edit, clone, move, resize, offset, or delete a hCaptcha field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### hCaptcha Type

Select the appropriate hCaptcha version from the select pulldown. Depending on which version you choose, you will then be prompted to provide the following information:

### Site Key

Enter the site key provided when you registered your website. You can also enter a global site key to use for all you hCaptcha fields in global settings.

### Secret Key

Enter the secret key provided when you registered your website. You can also enter a global secret key to use for all you hCaptcha fields in global settings.

### Type

You can choose default or invisible for your hCaptcha type.

### Theme

Visible hCaptchas are available in a dark or light theme. Choose a theme that suits your website design.

### Size

As well as the normal-sized reCAPTHCA, a compact version can also be selected.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Localization

#### Language

Choose the desired language for the hCaptcha.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example, if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Help Scout

URL: https://wsform.com/knowledgebase/help-scout/

The Help Scout integration allows you to create custom conversation forms on your website that are pushed to your Help Scout account as conversations. ## Insta…

The Help Scout integration allows you to create custom conversation forms on your website that are pushed to your Help Scout account as conversations.

## Installation

The Help Scout plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Help Scout plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Help Scout tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Help Scout

In order to use the integration, you need to connect it to Help Scout. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Help Scout tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Help Scout account, you can create a new account here.

## Creating a Form for Help Scout

### Automatically

The Help Scout integration comes with form templates that you can use to create a conversation form in a single click. A template is available for each of your Help Scout mailboxes.

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Help Scout tab at the top of the page.

Click on the mailbox you want to create a conversation form for.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website. The template includes fields for first name, last name, email, phone, subject, and message, plus an opt-in checkbox. File upload fields can also be included and mapped as attachments.

### Manually

It is also possible to use any form created in WS Form and add an action so that it creates a Help Scout conversation when a user submits their form.

To add a Help Scout action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Help Scout from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Help Scout action settings are as follows:

#### When Should This Action Run?

You can choose to run the Help Scout action when the form is submitted.

#### Help Scout Mailbox

Select the Help Scout mailbox that new conversations should be created in. Field mapping options are loaded based on the mailbox you choose, including any custom fields configured for that mailbox.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

If the selected opt-in field is not checked when the form is submitted, no data will be pushed to Help Scout.

#### Conversation Status

Choose the status assigned to the new conversation:

Active (default)

Pending

Closed

#### Conversation Type

Choose the type assigned to the new conversation:

Email (default)

Chat

Phone

#### If Existing Customer Found

Help Scout looks up customers by email address. A new conversation is always created. Use this setting to control what happens when a customer with the same email already exists:

Do nothing — Create the conversation without updating the existing customer profile.

Update (default) — Update the customer profile and any mapped Contact or Company properties.

#### Send Auto Reply

Enable this setting to send the mailbox auto reply when the conversation is created.

#### Assign To

Optionally assign the conversation to a Help Scout user. Leave this set to Mailbox default to use the mailbox assignment rules, or choose Unassigned to leave the conversation unassigned.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Help Scout. For example you would want to map your Email field to the Contact: Email field in Help Scout.

Help Scout fields are grouped as follows:

Contact — Customer fields such as first name, last name, email, phone, job title, location, notes, organization, gender, age, website, and any custom contact properties from your Help Scout account.

Conversation — Conversation subject, message body, and any custom fields configured on the selected mailbox.

Company — Organization fields such as name, website, description, location, note, domain, and phone, plus any custom company properties. Company updates only apply if the customer is linked to an organization in Help Scout.

The following fields are required for a conversation to be created:

Contact: Email

Conversation: Subject

Conversation: Message

If you map Contact: Full Name instead of separate first and last name fields, WS Form will split the name into first and last name automatically.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Help Scout field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Help Scout field to any value you wish, including the use of WS Form variables. For example you might want to map a license key to a custom contact property or conversation field in Help Scout.

To add a custom mapping:

Click the Add  icon at the bottom right of the custom mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Help Scout field.

Repeat this process for each custom mapping.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to the tags in Help Scout. The selected values from those fields are added as tags on the conversation.

To map a field:

Click the Add  icon at the bottom right of the tag mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

#### Tags

Use this setting to add one or more static tags to the conversation. WS Form variables can be used in each tag value.

To add a tag:

Click the Add  icon at the bottom right of the tags section.

Enter the tag value or a WS Form variable.

Repeat this process for each tag you want to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Internal Note

Optionally add an internal note as a second thread on the conversation. Internal notes are only visible to your Help Scout team. WS Form variables can be used in this setting.

#### Attachments

You can also attach files and signatures to Help Scout conversations. To do this you just need to add at least one file upload or signature field to your form.

To map your file upload field to Help Scout:

Click the Add  icon at the bottom right of the attachments section.

Select your file upload field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Variables

The Help Scout integration introduces additional variables that you can use in actions such as messages and emails.

## Hidden Field

URL: https://wsform.com/knowledgebase/hidden/

The hidden field lets a form include data that cannot be seen or modified by users when a form is submitted.

The Hidden field lets a form include data that cannot be seen or modified by users when a form is submitted.

## Adding a Hidden Field

To learn how to add, edit, clone, move, or delete a hidden field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

### Label

The label for a hidden field is solely used to identify the hidden field in the administration system. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, IP Address.

### Default Value

The default value setting is used to populate the field with some default content. Default values are stored when the form is saved or submitted. An example default value could be #tracking_remote_ip to insert a user's IP address into a hidden field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

## Advanced

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

## HighLevel Integration

URL: https://wsform.com/knowledgebase/highlevel/

The WS Form HighLevel integration connects WordPress forms to HighLevel, letting you create forms and push records to objects.

The HighLevel integration has been discontinued in favor of the new LeadConnector integration. Since HighLevel operates under a gray-label system, this integration is now listed under LeadConnector rather than under the HighLevel name and is a completely new integration.

LeadConnector website

## Upgrade to LeadConnector

While the HighLevel integration will continue to function, we now recommend upgrading to the LeadConnector integration, as the HighLevel version will no longer receive updates and will eventually be discontinued.

To upgrade to LeadConnector, please follow these steps:

Download the LeadConnector integration.

Install and activate the new LeadConnector integration.

Go to WS Form > Settings > LeadConnector.

Click Connect and follow the on-screen instructions.

Choose the objects you want to work with (these should match your previous HighLevel settings).

For each form integrated with HighLevel:

Create a new Add to LeadConnector action.

Copy the settings from your old Add to HighLevel action to the new Add to LeadConnector action.

Disable the old Add to HighLevel action (do not delete it until you’ve confirmed everything works).

Click Save & Close.

Click Preview to test the form and confirm it works correctly.

Click Publish to finalize your changes.

Once you have migrated to the new white label LeadConnector version, you can uninstall and deactivate the old HighLevel integration.

## HIPAA and WS Form

URL: https://wsform.com/knowledgebase/hipaa-and-ws-form/

HIPAA compliance depends on your hosting, data handling, and implementation. Ensure your entire environment meets required privacy and security standards.

## Is WS Form HIPAA Compliant?

WS Form is not HIPAA certified and does not specifically claim HIPAA compliance. Ensuring HIPAA compliance requires a combination of secure infrastructure, proper data handling procedures, and administrative safeguards that extend beyond the scope of any single plugin.

As such, it is the responsibility of the developer or site owner to ensure that all aspects of their form implementation — including hosting, data transmission, storage, and access controls — meet the requirements of the Health Insurance Portability and Accountability Act (HIPAA).

## Understanding HIPAA Requirements

HIPAA is a U.S. federal law that protects the privacy and security of individuals' health information. If your forms collect or handle electronic protected health information (ePHI), compliance involves:

Hosting your website on a HIPAA-compliant server

Using secure (encrypted) transmission and storage methods

Implementing proper access controls and audit logs

Maintaining appropriate administrative policies and agreements, such as Business Associate Agreements (BAAs)

## WS Form and HIPAA

While WS Form includes many features that support secure and flexible form building, it is not specifically designed to meet HIPAA requirements. We do not offer HIPAA-specific documentation or features, nor do we enter into BAAs.

We are unable to provide support for HIPAA related inquries.

## Final Note

If your project requires HIPAA compliance, we strongly recommend consulting with a legal or compliance expert to evaluate your complete environment and processes. WS Form can be a part of a secure solution, but compliance is ultimately determined by how and where your forms are implemented.

## Honeypot

URL: https://wsform.com/knowledgebase/honeypot/

Learn how Honeypot spam protection helps detect automated spam submissions and how to enable it in WS Form.

Honeypot spam protection is a simple way to help block automated spam submissions on forms for WordPress. It works silently in the background, so legitimate website visitors do not need to complete a CAPTCHA or any additional verification.

WS Form includes built-in honeypot spam protection. Once enabled, WS Form automatically adds the honeypot to your form and checks it when a submission is processed.

## What Is Honeypot Spam Protection?

Honeypot spam protection is a technique used to identify automated spam bots submitting forms.

It works by adding a hidden field to your form. Legitimate website visitors do not see or complete this field, but spam bots often attempt to complete every field they find.

When a form is submitted, WS Form checks the honeypot field server-side. If the field has been completed, WS Form identifies the submission as automated spam and rejects it.

This makes honeypot protection a useful way to reduce automated form spam without adding an extra step for legitimate website visitors.

## How To Enable Honeypot Spam Protection

Honeypot spam protection is built into WS Form and can be enabled individually for each form.

To enable honeypot protection:

Edit the form you want to protect.

Open Form Settings.

Select Spam Protection.

Enable Honeypot.

Save the form.

That's it! WS Form automatically adds honeypot protection to the form. You do not need to manually add a hidden field or configure any additional settings.

## Does Honeypot Protection Affect Website Visitors?

No. The honeypot field is hidden from legitimate website visitors and does not require them to complete any additional steps.

The honeypot is checked server-side when WS Form processes the submission. For legitimate visitors, the form continues to work normally.

## Using Honeypot With Other Spam Protection

Honeypot protection can be used alongside other WS Form spam protection features.

Different spam protection methods detect or prevent spam in different ways. Honeypot protection specifically helps identify bots that attempt to complete hidden form fields, while other methods can provide additional protection against different types of automated or unwanted submissions.

Combining honeypot protection with other spam protection features can provide broader protection against unwanted submissions on forms for WordPress.

## Hostinger Reach Integration

URL: https://wsform.com/knowledgebase/hostinger-reach/

The Hostinger Reach integration lets you connect WS Form to Hostinger Reach to quickly create forms or push new contacts.

The Hostinger Reach integration lets you add and update contacts in Hostinger Reach from forms created with WS Form. You can map form fields to Hostinger Reach contact fields, assign tags, set a subscription status, and optionally require users to opt in before their information is sent.

WS Form can also automatically create a form configured for Hostinger Reach from the Add Form page.

## Installation

The Hostinger Reach add-on is installed in the same way as installing the WS Form PRO plugin.

Once installed, you will need to activate the license for the add-on. When you purchase the Hostinger Reach add-on, you will be given a license key. If you have lost your license key, click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Integrations tab.

Click Hostinger Reach.

Enter your license key in the Add-on License Key setting.

Click the Activate button.

If your license key fails to activate, ensure you are using the license key for the Hostinger Reach add-on and not your WS Form PRO license key.

## Connecting To Hostinger Reach

To use the integration, WS Form needs a Hostinger API token and a Hostinger Reach profile.

To connect WS Form to Hostinger Reach:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Integrations tab.

Click Hostinger Reach.

Enter your Hostinger API token in the Hostinger API Token setting. If you do not have an API token, create one in Hostinger.

Choose the Hostinger Reach profile you want to use from the Hostinger Reach Profile setting.

Click Save.

If your Hostinger account only has one Reach profile, WS Form will automatically select it where possible.

The selected profile determines which contact fields and tags are available when configuring the Hostinger Reach action.

If you do not have a Hostinger account, you can create a new account here.

## Creating A Form For Hostinger Reach

### Automatically

WS Form can automatically create a form configured to add contacts to Hostinger Reach. The form includes the available Hostinger Reach contact fields, an opt-in checkbox, and a pre-configured Hostinger Reach action.

To create a Hostinger Reach form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Hostinger Reach tab at the top of the page.

Click Contact.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to customize and add to your website.

The generated form includes standard Hostinger Reach contact fields such as email, name, surname, phone, and note. Custom contact fields configured in your selected Hostinger Reach profile can also be added to the form.

If you make changes to your contact fields in Hostinger Reach, use the refresh option when configuring field mapping to retrieve the latest fields.

### Manually

You can use any form created in WS Form and add a Hostinger Reach action so that contact information is sent to Hostinger Reach when the form is saved or submitted.

To add a Hostinger Reach action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add icon to add a new action.

Select Add to Hostinger Reach from the Action pulldown. The Hostinger Reach settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Hostinger Reach action settings are described below.

#### When Should This Action Run?

Choose when the Hostinger Reach action should run. The action can run when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting if you want the Hostinger Reach action to run only when the user has opted in.

Select a Checkbox, Select, or Radio field from your form. A checkbox with a single unchecked choice is recommended for a typical email marketing opt-in.

If an Opt-In Field is selected and the user does not provide an opt-in value, the Hostinger Reach action will not run.

For consent-based email marketing, ensure your implementation meets the privacy and consent requirements that apply to your website and users. Learn more in our GDPR guide.

#### Status

Choose the subscription status to use for the contact.

Available options are:

Subscribed

Unsubscribed

The default setting is Subscribed.

#### Field Mapping

Field mapping tells WS Form which fields on your form correspond to fields in Hostinger Reach.

Hostinger Reach includes the following standard contact fields:

Email

Name

Surname

Phone

Note

Custom contact fields configured in your selected Hostinger Reach profile are also available for field mapping.

The Email field must be mapped. WS Form uses the email address to identify the contact in Hostinger Reach. If the contact does not already exist, a new contact is created. If a contact with that email address already exists, the existing contact is updated.

To map a field:

Click the Add icon at the bottom right of the Field Mapping section.

In the left-hand column, select the WS Form field.

In the right-hand column, select the corresponding Hostinger Reach field.

Repeat this process for each field you want to send to Hostinger Reach.

Click the Save button at the bottom of the sidebar to save your changes.

WS Form will attempt to automatically map compatible fields where possible.

If you have added or changed custom fields in Hostinger Reach, click the refresh icon in the Field Mapping section to retrieve the latest fields.

##### Phone Numbers

Phone numbers sent to Hostinger Reach must use the E.164 international telephone number format. For example:

+14155552671

When WS Form automatically creates a Hostinger Reach form, the Phone field is configured to use and validate the E.164 format.

#### Tag Mapping

The Tag Mapping setting lets you dynamically assign Hostinger Reach tags according to values selected or entered on the form.

Use a Checkbox, Select, or Radio field for tag mapping.

The values associated with the field choices should contain either the Hostinger Reach tag UUID or the name of an existing Hostinger Reach tag.

Multiple values are supported, allowing more than one tag to be assigned to a contact.

This is useful when you want the tags assigned to a contact to depend on the choices they make on the form.

#### Tags

The Tags setting lets you assign one or more existing Hostinger Reach tags to every contact processed by this action.

Click the Add icon and choose a Hostinger Reach tag.

Repeat this process to assign additional tags.

If you have created or changed tags in Hostinger Reach, click the refresh icon to retrieve the latest tags.

You can use Tags and Tag Mapping together. Tags configured under Tags are always assigned, while Tag Mapping can assign additional tags according to values on the form.

#### Note

Enter an optional note to add to the Hostinger Reach contact.

You can use WS Form variables in this setting.

By default, the note is set to:

#blog_name: #form_label

Hostinger Reach notes have a maximum length of 75 characters. If the resulting note exceeds this length, WS Form will truncate it before sending it to Hostinger Reach.

If the Note contact field is mapped under Field Mapping, the mapped field value is used instead of the value entered in the Note setting.

## Adding And Updating Contacts

The Hostinger Reach integration uses the mapped email address to determine whether a contact already exists.

If the email address does not exist in the selected Hostinger Reach profile, WS Form creates a new contact.

If the email address already exists, WS Form updates the existing contact with the mapped information.

This means the same Hostinger Reach action can be used for both new and existing contacts without requiring separate actions.

Tags configured by the action can also be assigned to the contact when the action runs.

## How Hidden Fields Work

URL: https://wsform.com/knowledgebase/how-hidden-fields-work/

There are several ways of hiding form field values in WS Form. Learn how to hide form field values and how hidden field behave.

Sometimes in a WordPress form you will want to hide a field value. There can be many reasons for this, including:

Hiding a field that contains a value that doesn't need to be seen by the user, e.g. a tracking value.

Hiding a field based on the answer of another field on the form, e.g. Show an "Other" option for a Select field.

Hiding fields contained within a tab or a section.

Fundamentally there are two different ways of hiding field values:

Use the Hidden field type.

Hide a different field type (e.g. a Text field) using the Hidden setting or by using Conditional Logic.

## The Hidden Field Type

If you have a form field value that should never be seen by the end user, you should use a Hidden field. You can find the Hidden field type in the Advanced grouping in the Build, or use the search feature at the top of the Build to search for it.

The hidden field type is different from other hiding other field

Learn more:

The WS Form Hidden Field type.

<input type="hidden"> MDN web docs

## Hiding Other Field Types

For fields other than the Hidden type (e.g. Text), you can use the Hidden field setting to hide the field on the form.

An example use case of using the Hidden setting would be to hide an "Other" text field for a Select field.

The default behavior of a field that has been hidden, is that it will not be included in actions such as Send Email. You can override this behavior by checking the Always Include in Actions setting (See below).

When a field is hidden, WS Form will automatically make the field no longer required. Also any other restrictions such as min and max setting are ignored. This ensures the fields are no longer validated when the form is submitted.

## Using Conditional Logic to Hide & Show Fields

Any field types (other than the Hidden field type) can be hidden and shown using conditional logic. You can hide and show the field itself, the section the field is in or the tab the field is in.

When hiding a section, all fields within that section will be hidden.

When hiding a tab, all sections within that tab and their fields will be hidden.

An example condition that hides a field is shown below.

The default behavior of a field that has been hidden using conditional logic, is that it will not be included in actions such as Send Email. You can override this behavior by checking the Always Include in Actions setting (See below).

## Including Fields That Have Been Hidden in Actions

Fields can be hidden by using the Hidden field settings or by using Conditional Logic.

By default when a form is submitted and actions such as Send Email run, WS Form will exclude any fields that have been hidden. The same applies to any fields in a hidden tab or hidden section.

You can override this behavior by using the Always Include in Actions setting on a field. To apply this setting:

Click on the field settings icon.

In the Basic tab, go to the Hidden Behavior setting.

Check the Always Include in Actions setting.

Click Save & Close.

Once checked, the field value will always be included when the form is submitted and WS Form processes the form actions, regardless of whether the field is hidden or visible.

## How to Add a Handling Fee to an E-Commerce Form

URL: https://wsform.com/knowledgebase/how-to-add-a-handling-fee-to-an-e-commerce-form/

This tutorial explains how to set up a handling fee to an e-commerce form.

The form below demonstrates how to set up a handling fee for an e-commerce form.

 

## How to Add Help Text to Forms

URL: https://wsform.com/knowledgebase/how-to-add-help-text-to-forms/

By providing clear and concise instructions or explanations, help text enhances the overall user experience.

By providing clear and concise instructions or explanations, help text enhances the overall user experience. It streamlines the form-filling process, reduces errors, and ensures data accuracy. Moreover, it promotes accessibility, making the form accessible to a wider range of users. Help text also contributes to transparency and trust, as users appreciate the guidance and are more likely to engage positively with the form. Ultimately, it's a practical way to improve user satisfaction, reduce support inquiries, and increase the likelihood of successful form submissions, making it a worthwhile addition to any web form.

For accessibility reasons we recommend writing clear, concise help text as opposed to using tooltips which can present usability difficulties to some users. We also recommend using the field label or help text over the placeholder setting for improved accessibility.

There are various you can add help text to a form which are explained below.

## Field Help Text

Help text can be added directly to fields and can be positioned at the top or bottom of the field itself. Help text can also be made dynamic.

### How to Add Help Text to a Field

Click the field settings   icon. The field settings will appear in the sidebar.

In the Basic tab, enter help text for the field. HTML is supported in this field, e.g. to add link. WS Form variables, including #calc and #text are also supported in help text. Furthermore, some field types have specific variables, e.g. #word_count on a text field.

Click Save & Close.

### How to Change the Position of Help Text on a Field

Click the field settings   icon. The field settings will appear in the sidebar.

In the Advanced tab, select a Help Position. Choose from Top or Bottom.

Click Save & Close.

The help text position can also be set throughout the form by changing the Default Help Position setting in the Style tab of Form Settings. Set the Help Position setting on fields to Default to use the default help position.

## Form Help Text

Help text can also be added at a form level to help describe what the form is for or perhaps to described a section of fields.

Field types that can be used to add help text include:

Message

Text Editor

HTML

 

## How to Add Icons to Form Fields

URL: https://wsform.com/knowledgebase/how-to-add-icons-to-form-fields/

Learn how to add icons to WS Form fields using Font Awesome, Dashicons, inline SVG, images, or custom HTML with Prefix, Suffix, button labels, and option label…

WS Form is compatible with Font Awesome, Dashicons, inline SVG, images, and any other icon markup your website supports.

WS Form does not include a dedicated icon picker, and that's intentional. Instead of limiting you to a fixed icon set, WS Form lets you add standard HTML into existing builder settings. This means you can use the icon library or markup that best suits your site.

If you use Font Awesome or Dashicons, make sure that library is enqueued by your theme or another plugin on the front end.

## Demo

## Text-Like Inputs

Text-like fields such as Text, Email, URL, Phone, Password, and Number support Prefix and Suffix settings in the Basic tab.

To add an icon:

Click the settings icon on the field.

In the Basic tab, add your icon HTML directly into Prefix or Suffix setting.

Click Save & Close.

Example using Font Awesome:

<i class="fa-solid fa-envelope" aria-hidden="true"></i>

Example using Dashicons:

<span class="dashicons dashicons-email" aria-hidden="true"></span>

A Prefix or Suffix containing only an icon is valid.

Prefix and Suffix use WS Form's built-in input group styling. If you want the icon positioned inside the input border instead, see the Custom CSS section below.

Learn more: Create a Field Prefix or Suffix

## Checkbox and Radio Labels

Checkbox and Radio fields support HTML in their option labels.

To add an icon:

Click the settings icon on the field.

Click the Checkboxes or Radios tab.

Add your icon HTML directly to the column you have mapped for Labels.

Adjust the ARIA Label setting to be text only.

Click Save & Close.

Example:

<i class="fa-solid fa-star" aria-hidden="true"></i> Premium

This works with standard checkbox and radio layouts, but it is especially useful when using Button-style options.

For Button-style checkboxes, see Style Checkboxes.

For Button-style radios, see Style Radios.

## Buttons

Button fields support HTML in the Label setting.

This applies to button field types such as Save and Reset, as well as other WS Form button fields.

To add an icon:

Click the settings icon on the field.

In the Basic tab, add your icon HTML directly into the Label setting.

Adjust the ARIA Label setting to be text only.

Click Save & Close.

Example:

<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> Send

You can place the icon before or after the button text.

## Icon Markup Examples

### Font Awesome

<i class="fa-solid fa-envelope" aria-hidden="true"></i>

### Dashicons

<span class="dashicons dashicons-warning" aria-hidden="true"></span>

### Inline SVG

Inline SVG works without loading a separate icon library.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> <path d="..."/> </svg>

### Image

<img src="/path/to/icon.svg" alt="" aria-hidden="true" style="height:1em;width:1em;">

Using 1em helps the icon match the size of the surrounding text.

## Loading Icon Libraries

WS Form does not enqueue Font Awesome or Dashicons for you.

If your icons do not appear, check whether the icon library is loaded on the front end of your site.

### Enqueue Font Awesome

The recommended way to load Font Awesome is to follow the installation instructions provided by Font Awesome.

If you are already loading Font Awesome through your theme or another plugin, you do not need to load it again.

### Enqueue Dashicons

Dashicons are included with WordPress, but many themes do not load them on the front end.

Add this to your theme's functions.php file or code snippet plugin:

add_action('wp_enqueue_scripts', function() {
 wp_enqueue_style('dashicons');
});

## Accessibility

Decorative icons should include: aria-hidden="true"

Decorative images should also use an empty alt attribute: alt=""

Do not rely on an icon alone to communicate important information. Use visible text where the meaning is important.

Ensure the ARIA Label setting is text only and does not include the icon markup.

## How to Add Timestamps to Google Sheets

URL: https://wsform.com/knowledgebase/how-to-add-timestamps-to-google-sheets/

Learn how to automatically add submission dates or timestamps to Google Sheets

If you are using the Google Sheets integration to send submissions to a sheet, you may want to include a date or timestamp with each entry. This helps with tracking, filtering, and reporting on form activity directly in your spreadsheet.

WS Form makes this easy using variables. You can add a submission date to your Google Sheet without needing to add any extra fields to your WordPress form.

Follow these steps to learn how:

## Add a Submission Date Column in Google Sheets

Start by opening the Google Sheet connected to your form. Add a new column where you want the submission date or timestamp to appear. For example, name the column Submission Date. This will be the target column for your form data.

## Configure a Custom Mapping in WS Form

In WordPress, open your form in the WS Form layout editor and then following these steps:

Click the Actions icon at the top of the layout editor. The Actions sidebar will open.

Open the existing Add to Google Sheets action (or create a new one).

In the Custom Mapping setting, click the Refresh icon,

Click the Add  icon to add a custom mapping row.

In the Meta Value column, insert the current date by using the following variable: #blog_date

In the Google Sheets Column column, choose the Submission Date column.

In the Format column, choose Date.

Click Save & Close.

Publish the form if necessary.

## Test the Form

Now test your form and the Submission Date column in your Google Sheet should now contain a date when a new submission is submitted.

## Alternative Date / Time Formats

To insert the current date and time in a custom format, you can use #blog_date_custom, for example:

#blog_date_custom("m/d/Y H:i:s")

If you choose a format containing a date and time you should choose Date/Time for the Format.

Date formatting in WS Form follows the same conventions used when formatting PHP dates. For a list of available formatting string options, see the PHP date manual page.

Other variables that can be used in custom mapping are as follows:

#blog_date_custom("formatting string") #post_date_custom("formatting string") #server_date_custom("formatting string")

For example:

#server_date_custom("m/d/Y H:i:s")

These dynamic variables are processed at the time the form is submitted, so your date or timestamp will always reflect the exact submission time.

## How To Add Tooltips to Checkboxes and Radios

URL: https://wsform.com/knowledgebase/how-to-add-tooltips-to-checkboxes-and-radios/

If you are using the WS Form framework you can use the following HTML to add Tooltips to Checkboxes and Radios.

If you are using the WS Form framework you can use the following HTML to add Tooltips to Checkboxes and Radios.

## Demos

## Tutorial

You can enter tooltip HTML into the label column of checkbox and radio data grids.

Basic HTML Markup:

Label <span tabindex="0" data-wsft-tooltip=""></span>

The tabindex="0" attribute ensures that the user will be able to tab to the tooltip to activate it.

The text that displays inside of the tooltip is entered inside of the data-wsft-tooltip attribute.

Any icon you wish to use can be entered inside of the span element.

## Example

Label <span tabindex="0" data-wsft-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><svg height="16" width="16" viewBox="0 0 16 16"><path fill="#skin_color_information" d="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM8.9 13h-2v-2h2v2zM11 8.1c-0.4 0.4-0.8 0.6-1.2 0.7-0.6 0.4-0.8 0.2-0.8 1.2h-2c0-2 1.2-2.6 2-3 0.3-0.1 0.5-0.2 0.7-0.4 0.1-0.1 0.3-0.3 0.1-0.7-0.2-0.5-0.8-1-1.7-1-1.4 0-1.6 1.2-1.7 1.5l-2-0.3c0.1-1.1 1-3.2 3.6-3.2 1.6 0 3 0.9 3.6 2.2 0.4 1.1 0.2 2.2-0.6 3z"></path></svg></span>

## How to Allow Form Submissions by Domain Name

URL: https://wsform.com/knowledgebase/how-to-allow-form-submissions-by-domain-name/

In WS Form, you can easily allow WordPress form submissions based on the domain of the email address entered.

In WS Form, you can easily allow WordPress form submissions based on the domain of the email address entered.

There are two ways of doing this:

Using the Allow or Deny setting in Email fields.

Use a filter hook.

Each method is explained in more detail below.

## Using the Allow or Deny Setting in Email Fields

This method doesn't require any coding and provides a method of either allowing or denying specific email addresses or email address patterns.

Here's how to set that up:

Edit the settings of an Email field by clicking the icon.

Click on the Advanced tab.

Under Allow or Deny, set Method to Allow.

Click the add icon to add an email address you want to allow.

Click Save & Close.

If you want to allow a specific email address, simply enter it into the Email Address setting.

If you want to allow all email addresses of a certain domain, use the format: *@domain.com

## Using a Filter Hook

For more complex needs, such as allowing a large list of domains, the wsf_action_email_email_validate filter hook is ideal. This hook allows you to analyze and approve email addresses during form submissions.

The wsf_action_email_email_validate filter is supplied with four parameters:

$valid - True by default. Return this value in your function if the email validates.

$email - The email address being validated.

$form_id - The form ID the email address belongs to.

$field_id - The field ID the email address was entered into (This will be false for emails checked in actions).

Your filter hook function can return one of the following return values:

True - The email address is valid, no action will be taken by WS Form.

False - WS Form will show a standard error message indicating the email address is invalid.

String - WS Form will show the string you provide to indicate the email address is invalid.

### Sample Code

This example shows how to create a filter hook function that allows only specific domains. You can easily adapt this code to allow any other domains you wish. This code would typically be added to your theme's functions.php file, preferably in a child theme.

// Add filter for allowing only specific email addresses
add_filter( 'wsf_action_email_email_validate', 'wsf_action_email_email_validate_allowed_domains', 10, 4 );

// Hook function for wsf_action_email_email_validate filter
function wsf_action_email_email_validate_allowed_domains( $valid, $email, $form_id, $field_id ) {

 if( filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {

 // Split email address by @
 $email_array = explode( '@', $email );

 // Extract domain
 $domain = array_pop( $email_array );
 
 // Check if domain exists in list of allowed domains
 if( !in_array( $domain, wsf_allowed_domains() ) ) {

 // Return an invalid feedback message to be shown on the field
 return __( 'The email address provided is not from an allowed domain' );
 }
 }

 return $valid;
}

// Array of allowed domains
function wsf_allowed_domains() {

 return array(

 'example.com',
 'company.com',
 'trusted.com'

 // Add other domains here ...
 );
}

## How to Block Form Submissions by Domain Name

URL: https://wsform.com/knowledgebase/how-to-block-form-submissions-by-domain-name/

In WS Form, you can easily prevent WordPress form submissions based on the domain of the email address entered.

In WS Form, you can easily prevent WordPress form submissions based on the domain of the email address entered.

There are two ways of doing this:

Using the Allow or Deny setting in Email fields.

Use a filter hook.

Each method is explained in more detail below.

## Using the Allow or Deny Setting in Email Fields

This method doesn't require any coding and provides a method of either allowing or denying specific email addresses or email address patterns.

Here's how to set that up:

Edit the settings of an Email field by clicking the  icon.

Click on the Advanced tab.

Under Allow or Deny, set Method to Deny.

Click the add icon to add an email address you want to block.

Click Save & Close.

If you want to block a specific email address, simply enter it into the Email Address setting.

If you want to block all email address of a certain domain, use the format: *@domain.com

## Using a Filter Hook

For more complex needs, such as blocking a large list of domains, the wsf_action_email_email_validate filter hook is ideal. This hook allows you to analyze and reject unwanted email addresses during form submissions.

The wsf_action_email_email_validate filter is supplied with four parameters:

$valid - True by default. Return this value in your function if the email validates.

$email - The email address being validated.

$form_id - The form ID the email address belongs to.

$field_id - The field ID the email address was entered into (This will be false for emails checked in actions).

Your filter hook function can return one of the following return values

True - The email address is valid, no action will be taken by WS Form.

False - WS Form will show a standard error message indicating the email address is invalid.

String - WS Form will show the string you provide to indicate the email address is invalid.

### Sample Code

This example shows how to create a filter hook function that blocks disposable domains. You can easily adapt this code to block any other domains you wish. This code would typically be added to your themes functions.php file, preferably in a child theme.

// Add filter for disposable email addresses
add_filter( 'wsf_action_email_email_validate', 'wsf_action_email_email_validate_disposable_domains', 10, 4 );

// Hook function for wsf_action_email_email_validate filter
function wsf_action_email_email_validate_disposable_domains( $valid, $email, $form_id, $field_id ) {

 if( filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {

 // Split email address by @
 $email_array = explode( '@', $email );

 // Extract domain
 $domain = array_pop( $email_array );
 
 // Check if domain exists in list of disposable domains
 if( in_array( $domain, wsf_disposable_domains() ) ) {

 // Return an invalid feedback message to be shown on the field
 return __( 'The email address provided cannot be used' );
 }
 }

 return $valid;
}

// Array of disposable domains
function wsf_disposable_domains() {

 return array(

 '0-180.com',
 '0-30-24.com',
 '0-420.com',
 '0-900.com',
 '0-aa.com',
 '0-mail.com',
 '0-z.xyz'

 // Add other domains here ...
 );
}

 

## How to Block Form Submissions by IP

URL: https://wsform.com/knowledgebase/how-to-block-form-submissions-by-ip/

WS Form gives you multiple ways to block form submissions by IP address. This can be useful for preventing spam.

WS Form gives you multiple ways to block form submissions by IP address. This can be useful for preventing spam.

IP address blocking occurs when the form is rendered. If a blocked IP is detected, WS Form will not render the form and will optionally show a message.

Note that IP address blocking is not processed when previewing a form.

## Methods

There are two methods of blocking IP addresses:

IP Blocklist Setting (In Form Settings > Spam)

wsf_submit_block_ips Filter Hook

## IP Blocklist Setting

Each form can have its own IP blocklist. If a blocked IP address is detected when the form is loaded, WS Form will prevent the form from rendering. Optionally, you can display a custom message instead.

### Enable IP Blocklist

To enable the IP blocklist feature:

Click the Form Settings  icon at the top of the layout editor.

Click the Spam tab.

Check the Enable setting under IP Blocklist.

### Add IP Addresses

Click the Add  icon under the IP Addresses setting.

Enter an IPv4 or IPv6 IP address.

Repeat this for each IP address you want to add.

### Optional - Blocked Message

If a blocked IP address is detected, can also show a message to the end user. Simply enter your own text in the Blocked Message setting. If you leave this setting blank WS Form will not render the form and not show a message.

## wsf_submit_block_ips Filter Hook

The wsf_submit_block_ips filter hook enables you to specify an array of blocked IP addresses that are checked when a form is submitted. WS Form will check the users IP address when the form is rendered. If a blocked IP address is found the form won't be rendered and an optional message will be shown.

By default this filter hook applies to all forms.

An example of using hook as as follows:

// Callback function for the wsf_submit_block_ips filter hook
function my_hook_function( $ips, $form, $submit ) {
 
 // IPs to block
 $ips[] = '192.0.2.0';
 $ips[] = '2001:db8::';

 // Return value
 return $ips;
}

// Add a callback function for the wsf_submit_block_ips filter hook
add_filter( 'wsf_submit_block_ips', 'my_hook_function', 10, 3 );

## Related Hooks

wsf_submit_block_ips

wsf_submit_block_ips_message

wsf_submit_block_ips_message_type

## How to Block Form Submissions by Keyword

URL: https://wsform.com/knowledgebase/how-to-block-form-submissions-by-keyword/

WS Form gives you multiple ways to block keywords from being submitted through a form.

WS Form gives you multiple ways to block keywords from being submitted through a form. This can be useful for preventing spam, enforcing content standards, or restricting specific terms.

The keyword matching is case-insensitive, meaning it doesn't matter whether the word is in uppercase or lowercase.

To avoid false positives, WS Form performs whole word matching only. For example, if “art” is a blocked keyword, it will not trigger on safe words like “partial” or “startled.” This helps ensure that valid submissions aren't mistakenly flagged.

## Methods

There are two methods of blocking keywords:

Keyword Blocklist Setting (In Form Settings > Spam)

wsf_submit_block_keywords Filter Hook

Keyword Blocklist integration

## Keyword Blocklist Setting

Each form can have an independent keyword blocklist. If a keyword is found when the form is submitted, WS Form will invalidate the field containing the keyword and show an invalid feedback message. You can either use the default invalid feedback message on the field or specify a custom message.

### Enable Keyword Blocklist

To enable the keyword blocklist feature:

Click the Form Settings  icon at the top of the layout editor.

Click the Spam tab.

Check the Enable setting under Keyword Blocklist.

### Add Keywords

Click the Add  icon under the Keywords setting.

Enter a keyword. Keywords can also contain phrases.

Repeat this for each keyword you want to add.

### Optional - Set Invalid Feedback Message

If a blocked keyword is found in a submitted field, WS Form will display an error message next to that field. By default, it shows the field’s standard invalid feedback message.

To customize this message, simply enter your own text in the Invalid Feedback Message setting.

## wsf_submit_block_keywords Filter Hook

The wsf_submit_block_keywords WordPress filter hook enables you to specify an array of blocked keywords that are checked when a form is submitted. WS Form will check all string based input again the blocked keyword array. If a blocked keyword is found, invalid feedback will be shown on the field.

By default this filter hook applies to all forms.

An example of using hook as as follows:

// Callback function for the wsf_submit_block_keywords filter hook
function my_hook_function( $keywords, $form, $submit ) {
 
 // Keywords to block
 $keywords[] = 'ranking';
 $keywords[] = 'seo';

 // Return value
 return $keywords;
}

// Add a callback function for the wsf_submit_block_keywords filter hook
add_filter( 'wsf_submit_block_keywords', 'my_hook_function', 10, 3 );

If you need more control with keyword matching, consider using the wsf_submit_field_validate filter hook.

### Related Hooks

wsf_submit_block_keywords

wsf_submit_block_keywords_message

## Keyword Blocklist Integration

The Keyword Blocklist integration for WS Form makes it effortless to block unwanted spam by scanning form submissions for over 1,300 high-signal keywords across categories like Adult, Finance, SEO, and more. It’s incredibly easy to use. Simply toggle the categories you want to enable, and WS Form takes care of the rest. With built-in defaults for the most common spam types and full control over which categories are active, you can fine-tune protection without writing a single line of code.

The Keyword Blocklist integration is available FREE for WS Form PRO users.

## How to Block Form Submissions by User Agent

URL: https://wsform.com/knowledgebase/how-to-block-form-submissions-by-user-agent/

This tutorial shows how to block submissions by user agent.

It is possible to block WordPress form submissions by a particular user agent by using the wsf_submit_field_validate filter hook.

An example filter hook function is shown below. This function will run for all forms on your form when they are submitted.

// My validation function
function wsf_submit_block_user_agent( $field_error_action_array, $field_id, $field_value, $section_repeatable_index, $post_mode, $submit ) {

 // Only process validation if the form is submitted and not saved
 if ( $post_mode !== 'submit' ) {
 return $field_error_action_array;
 }

 // User agents to block
 $user_agents_to_block = array(

 'Linux aarch64'
 );

 // Check if $_SERVER and the User-Agent header exist
 if (
 isset( $_SERVER ) &&
 isset( $_SERVER[ 'HTTP_USER_AGENT' ] )
 ) {
 // Get user agent
 $user_agent = $_SERVER[ 'HTTP_USER_AGENT' ];

 // Check user agents to block
 foreach( $user_agents_to_block as $user_agent_block ) {

 // Check if user agent is present in the User-Agent string
 if ( stripos( $user_agent, $user_agent_block ) !== false ) {

 // Send a 403 Forbidden response and exit
 header( 'HTTP/1.1 403 Forbidden' );
 exit;
 }
 }
 }

 // Return $field_error_action_array to WS Form
 return $field_error_action_array;
}

// Add a callback function for the wsf_submit_block_agent filter hook
add_filter( 'wsf_submit_field_validate', 'wsf_submit_block_user_agent', 10, 6 );

 

## How to Change Email Notification Settings

URL: https://wsform.com/knowledgebase/email-configuration/

When a form is saved or submitted, WS Form can send one or more emails acknowledging the form submission.

When a form is saved or submitted, WS Form can send one or more emails. You can change who an email is sent to by changing the To and From email addresses in the Send Email action settings.

To change your email settings:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page. You will see a list of actions configured for your form.

Click the settings icon for the Send Email action.

If you would like to make the sidebar wider to make it easier to read, you can click the expand icon. To contract the sidebar back to the original size, click the contract button.

This will show the following email settings:

## From

Each email has a From email address and a display name. You can change this to any email address and display name you wish. You will notice that by default it uses #blog_admin_email and #blog_name for these values. WS Form converts these variables  to the WordPress General Settings email address and site title respectively.

You could also set this to the value of one of your fields. For example, if you have an email field with an ID of 123, you could enter:

#field(123)

... into the From Email Address setting and WS Form will put the email address entered in the form as the from email address.

Some email platforms require that emails are sent from a registered / validated email address. In that case, we would recommend using the Reply To setting to enter the email address (or #field(123) variable) into. That way when you reply to an email acknowledgement it will prompt your email software to send the email to the Reply To address as opposed to the registered / validated email address.

## To

You can add any number of To email addresses for the email. Typically this will be to you or perhaps to the website visitor to acknowledge their inquiry. To add a To email address:

Click the Add  icon.

Enter the email address.

Optionally enter a display name for the email address (e.g. Your name).

You can enter straight text or use a WS Form variable in this field. For more information about WS Form variables, click here.

By default, WS Form uses #blog_admin_email and#blog_name which will enter the email address and the name of your website you have configured in the WordPress Settings > General page.

Tip: Some email clients do not like emails that are sent to and from the same email address. We would recommend changing the from email address to something like do.not.reply@yourdomain.com to ensure these are different. Also some email gateways require you to register sender email addresses before you can use them. Ensure you have registered all from addresses if that is the case.

## How to Change the GDPR Checkbox Text

URL: https://wsform.com/knowledgebase/how-to-change-the-gdpr-checkbox-text/

This tutorial walks you through changing the default GDPR checkbox label in WS Form step by step.

Most WS Form templates already include a GDPR checkbox. By default, the checkbox label says:

I consent to #blog_name storing my submitted information so they can respond to my inquiry

The variable #blog_name is automatically replaced with your site’s title.

If you’d like to change the label on this checkbox, follow these steps:

Hover over the GDPR checkbox field and click the Settings icon.

In the sidebar, click the Checkboxes tab. This will display a data grid showing all of the checkboxes in this field, in this case a single row for the GDPR consent checkbox.

In the data grid, find the Label column and replace the text with whatever you’d like the checkbox to say.
Tip: You can still use WS Form variables here, such as #blog_name to keep the site title dynamic.

Click Save & Close at the bottom of the sidebar.

When you’re ready to make your changes live, click Publish.

## How to Change Which Style a Form Uses

URL: https://wsform.com/knowledgebase/how-to-change-which-style-a-form-uses/

This tutorial explains how to choose which style a form uses.

By default, all new forms are assigned to the Default style. You can also choose a specific style for a form as follows:

Click the Form Settings  icon at the top of the layout editor.

Click the Styling tab.

Choose a style from the Style setting.

Click Save & Close.

Click Publish if you want to publish the change immediately.

## How to Change WordPress Login Error Messages

URL: https://wsform.com/knowledgebase/how-to-change-wordpress-login-error-messages/

By leveraging gettext, you can tailor the login error messages to better fit your site's tone, provide more detailed information, or translate messages into di…

If you're looking to customize the error messages displayed during the user login process in WordPress, a powerful tool at your disposal is the gettext WordPress filter hook. This hook allows for the interception and modification of text output by WordPress, including error messages, before they're shown to the user. By leveraging gettext, you can tailor the login error messages to better fit your site's tone, provide more detailed information, or translate messages into different languages.

An example of using this filter hook with the WS Form User Management login template is shown below:

function my_gettext_hook_function( $translated_text, $text, $domain ) {

 if ('ws-form-user' === $domain) {

 switch ( $text ) {

 case 'Incorrect password.':

 $translated_text = 'The password entered is incorrect. Please try again.';
 break;

 case 'Invalid email address.':

 $translated_text = 'The email address entered is incorrect. Please try again.';
 break;
 }
 }

 return $translated_text;
}

add_filter( 'gettext', 'my_gettext_hook_function', 20, 3 );

Error messages generated by WS Form under the ws-form-user domain for login include:

Empty password.

Empty username.

Incorrect password.

Invalid email address.

Invalid username.

The WS Form User Management integration allows you to create custom WordPress forms for user login.

## How to Change WordPress Registration Error Messages

URL: https://wsform.com/knowledgebase/how-to-change-wordpress-registration-error-messages/

By leveraging gettext, you can tailor the registration error messages to better fit your site's tone, provide more detailed information, or translate messages…

If you're looking to customize the error messages displayed during the user registration process in WordPress, a powerful tool at your disposal is the gettext WordPress filter hook. This hook allows for the interception and modification of text output by WordPress, including error messages, before they're shown to the user. By leveraging gettext, you can tailor the registration error messages to better fit your site's tone, provide more detailed information, or translate messages into different languages.

An example of using this filter hook is shown below:

function my_gettext_hook_function( $translated_text, $text, $domain ) {

 if ('default' === $domain) {

 switch ( $text ) {

 case 'Sorry, that email address is already used!':

 $translated_text = 'That email is already registered. Please try another.';
 break;

 case 'Cannot create a user with an empty login name.':

 $translated_text = 'The username is empty.';
 break;
 }
 }

 return $translated_text;
}

add_filter( 'gettext', 'my_gettext_hook_function', 20, 3 );

Error messages returned from the wp_insert_user function include:

Cannot create a user with an empty login name.

Nicename may not be longer than 50 characters

Not enough data to create this user.

Sorry, that email address is already used!

Sorry, that username already exists!

Sorry, that username is not allowed.

User URL may not be longer than 100 characters.

Username may not be longer than 60 characters.

Other error messages generated by WS Form under the ws-form-user domain for registration include:

Password not specified.

Passwords do not match.

The WS Form User Management integration allows you to create custom WordPress forms for user registration.

## How to Change Your Payment Method when Renewing

URL: https://wsform.com/knowledgebase/how-to-change-your-payment-method-when-renewing/

It is possible to change your payment method when renewing your license. You should do this prior to the license renewal date.

It is possible to change your payment method when renewing your license. You should do this prior to the license renewal date.

To change your payment method when renewing, please follow these steps:

Choose the same edition you currently own using one of these links:

Personal Edition

Freelance Edition

Agency Edition

On the checkout page click the link to renew your license key:

Important: Enter your existing license key.

If you have a Personal license, enter the license key for WS Form PRO.

If you have a Freelance or Agency license, enter the license key for that edition rather than the key for WS Form PRO itself.

Choose your new payment method and checkout.

## How to Create Select Optgroups Using Data Grids

URL: https://wsform.com/knowledgebase/how-to-create-select-optgroups-using-data-grids/

Learn how to create optgroups in WS Form Select fields using Data Grid Groups.

WS Form data grids support groups, making it easy to create <optgroup> labels in Select fields. This is useful when you want to organize large option lists into categories such as countries by region, products by type, or services by department.

In this tutorial, you’ll learn how to use the Data Grid feature to create grouped Select field options in WS Form.

## What Are Optgroups?

Optgroups are labeled groups of options inside a Select field.

Example:

<select>
 <optgroup label="Fruits">
 <option>Apple</option>
 <option>Orange</option>
 <option>Tomato</option>
 </optgroup>

 <optgroup label="Vegetables">
 <option>Carrot</option>
 <option>Broccoli</option>
 <option>Spinach</option>
 </optgroup>
</select>

In WS Form, optgroups are created using Data Grid Groups.

## Step 1: Add a Select Field

First, add a Select field to your form.

Edit your form.

Drag a Select field onto the canvas.

Click the field settings icon.

Click the Options tab.

You’ll now see the data grid editor.

## Step 2: Create Groups

Groups in a WS Form data grid become optgroup labels in the Select field.

To add groups:

Click the Add Group  icon.

Click the Settings icon on the group tab.

Check the Wrap in Optgroup setting.

Use the Label setting to rename the Optgroup.

## Step 3: Add Rows to Each Group

Each row becomes an option within that optgroup.

Click the Add Row  icon.

Enter a label for that row.

Repeat this for each row you want in that Optgroup.

## Step 4: Save and Preview

Click Save & Close, then preview your form.

Your Select field will now render grouped options automatically.

## Tips

### Expand the Data Grid Editor

Click the expand icon in the top-right corner of the data grid editor to work in full-width mode.

### Reorder Groups

You can click and drag the group tabs to change the order in which optgroups appear.

## Related Articles

Data Grids

Data Grid Column Mapping

 

## How To Create Submission Notes with PHP

URL: https://wsform.com/knowledgebase/how-to-create-submission-notes-with-php/

Learn how to add, retrieve, and manage submission notes in WS Form using PHP helper functions.

Submission notes provide a simple way to store additional information against a submission in WS Form. Notes appear in the Submissions admin sidebar and can be used to record actions, integration results, audit information, or other developer-defined data.

WS Form provides two PHP helper functions for working with submission notes:

wsf_submit_note_add() to create a note

wsf_submit_notes_get() to retrieve notes for a submission

These helper functions are available when WS Form is active. You will need a known submission ID, such as one obtained from wsf_submit_get_object() or from an action that provides $submit->id.

## Add A Note

Use wsf_submit_note_add() to add a note to a submission.

### Function

wsf_submit_note_add(
 $submit_id,
 $content = '',
 $meta = array(),
 $user_id = 0,
 $user_name = '',
 $locked = false
);

### Parameters

Parameter
Type
Description

$submit_id
int
Submission ID.

$content
string
Note text.

$meta
array
Optional note meta. Supports values (label/value pairs) and buttons (action links). See Meta Data below.

$user_id
int
WordPress user ID. If greater than 0, that user's display name is used and $user_name is ignored.

$user_name
string
Label used when $user_id is 0, such as the name of a custom integration or system.

$locked
bool
If true, the note cannot be edited or deleted in the admin. Defaults to false.

### Return Value

Returns the newly created note ID as an integer.

### Add A Note For The Current User

The following example adds a note attributed to the currently logged-in WordPress user.

$note_id = wsf_submit_note_add(
 123,
 'Customer record successfully updated.',
 array(),
 get_current_user_id()
);

### Add A Note With Meta Values

Use the values key in $meta to store label/value pairs shown with the note.

$meta = array(

 'values' => array(

 'CRM ID' => 'C-48291',
 'Status' => 'Success',
 'Response Time' => '245 ms'
 )
);

$note_id = wsf_submit_note_add(
 123,
 'CRM synchronization completed.',
 $meta,
 get_current_user_id()
);

### Add A Note With Buttons

Use the buttons key in $meta to add action links below the note meta values in the admin. Buttons are display-only; they cannot be added or edited from the Submissions UI.

$meta = array(

 'values' => array(

 'Status' => 'Completed',
 'Amount' => '$49.00'
 ),

 'buttons' => array(

 array(

 'url' => admin_url( 'admin.php?page=my-plugin-history&submit_id=123' ),
 'label' => 'View history',
 'type' => 'primary',
 'target' => '_blank'
 ),

 array(

 'url' => admin_url( 'admin.php?page=my-plugin-settings' ),
 'label' => 'Settings',
 'type' => 'secondary'
 )
 )
);

$note_id = wsf_submit_note_add(
 123,
 'Conversion tracked for this submission.',
 $meta,
 0,
 'My Custom Integration',
 true
);

Each button supports the following keys:

Key
Required
Description

url
Yes
Button URL. Absolute URLs and relative admin URLs are supported.

label
Yes
Button text.

type
No
primary (default) or secondary.

target
No
If set, used as the link target attribute (for example _blank). When target is _blank, WS Form also adds rel="noopener noreferrer".

### Add A Locked System Note

Use a locked note when recording audit information or system events that should not be modified.

$meta = array(

 'values' => array(

 'Export ID' => 'EXP-10428'
 )
);

$note_id = wsf_submit_note_add(
 123,
 'Order exported to external system.',
 $meta,
 0,
 'My Custom Integration',
 true
);

In this example:

$user_id is set to 0.

$user_name is used as the note author.

$locked is set to true, preventing the note from being edited or deleted in the admin.

## Get Notes

Use wsf_submit_notes_get() to retrieve all notes associated with a submission.

### Function

wsf_submit_notes_get( $submit_id );

### Parameters

Parameter
Type
Description

$submit_id
int
Submission ID.

### Return Value

Returns an array of note objects in oldest-first order.

Each note object includes the following properties:

Property
Description

id
Note ID.

submit_id
Submission ID associated with the note.

user_id
WordPress user ID associated with the note.

user_name
Custom author label. This is empty when user_id is greater than 0.

user_display_name
Display name for the note author.

date_added
Date and time the note was added, stored in MySQL GMT format.

date_added_wp
Date and time the note was added, localized using the WordPress date and time settings.

date_updated
Date and time the note was last updated.

date_updated_wp
Localized date and time the note was last updated.

content
Note text.

meta
Note meta object containing values and buttons.

locked
Whether the note is locked against editing and deletion.

### Loop Through Submission Notes

The following example retrieves the notes for a submission and outputs the note content and any associated meta values.

$notes = wsf_submit_notes_get( 123 );

foreach ( $notes as $note ) {

 echo '<h3>' . esc_html( $note->content ) . '</h3>';

 $values = (
 isset( $note->meta['values'] ) &&
 is_array( $note->meta['values'] )
 ) ? $note->meta['values'] : array();

 if ( ! empty( $values ) ) {

 echo '<ul>';

 foreach ( $values as $key => $value ) {

 echo '<li>';
 echo esc_html( $key ) . ': ' . esc_html( $value );
 echo '</li>';
 }

 echo '</ul>';
 }
}

## Meta Data

The $meta parameter is a PHP array with two optional keys: values and buttons.

$meta = array(

 'values' => array(

 'Status' => 'Completed',
 'Reference' => 'ABC-12345',
 'Duration' => '180 ms'
 ),

 'buttons' => array(

 array(

 'url' => admin_url( 'admin.php?page=my-plugin-history' ),
 'label' => 'View history',
 'type' => 'primary'
 )
 )
);

Values are displayed as label/value rows alongside the note in the Submissions admin sidebar.

Buttons are displayed below the values as action links. They are useful for linking to related admin screens, such as conversion history or external records.

Meta values are useful for storing structured information such as:

Integration reference IDs

Processing statuses

Response times

External record IDs

Workflow results

The $meta value must be passed as a PHP array.

## Locked Notes

By default, submission notes can be edited or deleted from the Submissions admin.

Set the $locked parameter to true to create an immutable note that cannot be edited or deleted in the admin.

Locked notes are useful for:

Audit trails

Integration logs

System-generated events

Compliance records

Debugging information that should not be changed

Buttons on locked notes remain clickable in the admin.

## Common Use Cases

Submission notes can be used in themes, custom plugins, actions, and other PHP integrations.

Common uses include:

Adding a note after a submission has been processed.

Recording CRM or third-party integration results.

Storing reference IDs returned by external services.

Recording workflow or validation events.

Adding buttons that link to related admin pages or external records.

Building custom admin tools that add context to submissions.

Creating immutable system or audit notes.

Because notes are attached directly to the submission, they provide a convenient way to keep developer and integration information alongside the original submission record.

## How To Delete Submission Records Using MySQL

URL: https://wsform.com/knowledgebase/how-to-delete-submission-records-using-mysql/

Learn how to delete all submission records for a form using MySQL.

Modifying database records yourself using MySQL is done at your own risk.

We are not responsible for any data loss as a result of the use of any SQL on this page.

We are unable to provide support for this method of deleting records.

Submission data deleted using this method cannot be recovered.

Always create a backup of your database before making changes.

## Tables

WS Form submissions are stored in the following database tables:

[table prefix]wsf_submit

[table prefix]wsf_submit_meta

The default table prefix is wp_ but you should check your table prefix before proceeding.

## Example SQL

The example SQL below can be used to bulk delete submission records in WS Form. This example assumes your table prefixes are 'wp_'. You should double check your table prefix before running this SQL.

/* Delete submission records */
DELETE FROM wp_wsf_submit WHERE form_id = 123 AND date_added < '2021-06-23 18:57:37';

/* Delete orphaned submit meta records */
DELETE wp_wsf_submit_meta FROM wp_wsf_submit_meta LEFT OUTER JOIN wp_wsf_submit ON wp_wsf_submit_meta.parent_id = wp_wsf_submit.id WHERE wp_wsf_submit.id IS NULL;

In this example there are two WHERE conditions you should change:

form_id = 123
Change this to match the form ID you wish to delete submissions from.

date_added < '2021-06-23 18:57:37'
This determines the date up to which submissions are deleted. You can also omit this part of the clause if you wish to delete ALL submissions.

## Resetting the Submit ID

Once you have deleted the submission records you can reset the submit ID back to 1 by using the following SQL:

ALTER TABLE wp_wsf_submit AUTO_INCREMENT = 1

## Resetting Form Statistics

If you wish to reset the statistics for a form, this can be done under Global Settings in the Data tab.

Note that form statistics only increment when a form is viewed publicly. Previewing a form does not impact statistics.

## How to Download a PDF Invoice

URL: https://wsform.com/knowledgebase/how-to-download-a-pdf-invoice/

Learn how to download a PDF invoice for your records.

Thank you for purchasing WS Form PRO and/or one of our integrations. We appreciate your business.

In order to download a PDF invoice of your order, please follow these instructions:

Click on My Account on https://wsform.com

Click on Purchase History

Click on Download Invoice to download a PDF invoice

## Adding Your Address and Tax ID

If you require the invoice to include additional business details such as your address and tax ID, you can click Update Details on the invoice.

## How to Enable File Previews in Emails and PDF Templates

URL: https://wsform.com/knowledgebase/how-to-enable-file-previews-in-emails-and-pdf-templates/

Learn to enable and disable file previews and information.

WS Form will, by default, display both a preview and file information when a file is shown in an email or PDF document.

If you are not seeing a preview image or perhaps wish to hide the file information, you can change these settings.

Click on WS Form in the WordPress admin menu.

Click on Settings.

Click on the Variables tab.

Under the #field section you will find the following two settings:

##### Show Image Previews

If checked, file and signature previews will be shown. Compatible with the WS Form (Private), WS Form (Public) and Media Library file handlers.

##### Show File Name and Size

If checked, file and signature file names and sizes will be shown. Compatible with the WS Form (Private), WS Form (Public) and Media Library file handlers.

Note that if Show Image Previews and Show File Name and Size are both disable, WS Form will show the file name.

## How to Extract First and Last Names from a Full Name

URL: https://wsform.com/knowledgebase/extract-first-and-last-names-from-a-full-name/

Extract first, middle, last name, prefix, and suffix from a full name field using WS Form variables.

WS Form PRO includes powerful variables that let you extract individual components from a full name. You can get the first name, middle name, last name, prefix, and suffix from a single text field without asking users to enter those parts separately. For example, this could be useful if you want to ask the user to enter their first name but want to push name components separately to an integration.

## Demo

## Variables

In these examples you would replace 123 with the ID of your full name field.

Variable
Client-Side Example
Action Example (e.g. Field Mapping)

Prefix
#text(#name_prefix(#field(123)))
#name_prefix(#field(123))

First Name
#text(#name_first(#field(123)))
#name_first(#field(123))

Middle Name
#text(#name_middle(#field(123)))
#name_middle(#field(123))

Last Name
#text(#name_last(#field(123)))
#name_last(#field(123))

Suffix
#text(#name_suffix(#field(123)))
#name_suffix(#field(123))

These variables will attempt to remove common prefixes and suffixes and return just the clean components.

The #text in the client-side examples ensures the variables are kept up to date automatically as the full name is changed. #text is not needed when using #name_ variables in action settings.

Learn more: Duplicate / Copy Field Values With #text

## Use Cases

Personalizing Email Templates
Add the first name to your email subject or greeting using: Hello #name_first(#field(123))

Third-Party Integrations
Map extracted name parts to individual fields in a CRM, email platform, or spreadsheet.

Storing Hidden Fields
You can store these values in hidden fields if you need them for backend use or submission exports.

## Notes

Only one prefix and one suffix will be returned per name.

Middle names can include multiple words (e.g. "Marie Claire").

These variables are case-insensitive and handle common name formats.

## How to Fix Zapier Not Retrieving Submissions

URL: https://wsform.com/knowledgebase/how-to-fix-zapier-not-retrieving-submissions/

This article outlines solutions to some common reasons Zapier may be unable to retrieve form submissions from your website.

This article outlines solutions to some common reasons Zapier may be unable to retrieve form submissions from your website.

Incorrect API Credentials

Ensure that the API is properly configured and that Zapier is using the correct API key. The Zapier Integration knowledge base article explains how to correctly configure Zapier to connect to WS Form. Ensure the API URL and API Key are entered correctly.

## Blocked or Cached WordPress REST API Requests

In order for the Zapier requests to work, the WordPress REST API must be enabled, accessible and not cached. Requests to the WS Form Zapier integration begin with:

/wp-json/ws-form/v1/action/zapier/

Ensure that any requests including this path are whitelisted from any blocking or caching set up on your website. Check security plugins as well as restrictions imposed at a hosting level.

## Free Tier Zapier Accounts

If you are using a free tier account, Zapier may throttle the rate at which new submissions are handled. This can mean there is a delay from the moment the submissions occurs to when Zapier processes that data. Upgrading to a paid tier will reduce any imposed throttling.

## Error Messages

### Cannot read properties of undefined (reading 'data')

You can try opening this URL in your browser (using the API URL and API Key from WS Form > Settings > Zapier):

https://yoursite.com/wp-json/ws-form/v1/action/zapier/test/?api_key=YOUR_API_KEY

You should see something like in the response:

{"error":false,"data":{"api_key":"…","connection_label":"Your Site Name"}}

If you see anything before or after this it suggests that third party software (e.g. a plugin) may be breaking the response data. 

## Diagnosing Connection Problems

If you're experiencing issues, it's helpful to check the Zapier task history for error messages, which can provide more detailed insights into what might be going wrong.

## How To Format Dates Using #field_date_format

URL: https://wsform.com/knowledgebase/how-to-format-dates-using-field_date_format/

The #field_date_format variable allows you to format the value of Date/Time fields using PHP date formatting conventions.

The #field_date_format variable allows you to format the value of Date/Time fields using PHP date formatting conventions.

The syntax is as follows:

#field_date_format(field_id, "format")

Example of using this variable are shown below:

[ws_form id="13780"]

## How to Get the Post ID after Creating a Post

URL: https://wsform.com/knowledgebase/how-to-get-the-post-id-after-creating-a-post/

This tutorial explains how to obtain and use the ID of a post created using the Post Management integration.

The WS Form Post Management integration is a great tool for creating new posts in WordPress. Once a post has been created, you may want to obtain the post ID that was created so that you can use it elsewhere such as a redirect, WordPress hook or perhaps sending it to a third party integration.

## The WS Form #post_id Variable

After a post is created, you can use #post_id in subsequent actions to obtain the new post ID.

For example, you could use it in the custom mapping of the Google Sheets action:

Custom mapping settings exist in most third party integrations.

You could also add it directly to the content of a Show Message action:

## The $submit Object post_id Property

When a new post is created, the post ID is also added to the $submit object as a post_id property.

When using the Run WordPress Hook action, you can access the newly created post ID using:

$submit->post_id

An example hook function using this might be:

// Filter function
function wsf_filter_function( $form, $submit ) {

 // Get post ID
 $post_id = $submit->post_id;

 // Add term to post 
 wp_set_post_terms( $post_id, 'my-term', 'my-taxonomy', true );
}

// Add filter
add_filter( 'wsf_filter_tag', 'wsf_filter_function', 10, 2 );

 

## How to Make a Custom Button Launch a Phone Call

URL: https://wsform.com/knowledgebase/how-to-make-a-custom-button-launch-a-phone-call/

Custom buttons in WS Form can be configured to perform a variety of actions using conditional logic, including launching a phone call.

Custom buttons in WS Form can be configured to perform a variety of actions using conditional logic, including launching a phone call.

## Tutorial

In this tutorial, we'll set up a custom button that initiates a phone call when clicked.

Add the Custom Button to the form.

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add  icon to add a new condition.

Give the condition a name, e.g. 'Button Click'

Configure the condition as follows:

IF [Button] [Clicked]

THEN [Form] [Run JavaScript]

In the JavaScript code editor, enter:

Change the telephone number to whichever number you want the button to call. You should use an international format with no spaces or formatting, e.g. +15551231234

location.href='tel:+15551231234';

Click Save & Close

Preview the form to test your button.

## How to Make a Custom Button Redirect to a Page

URL: https://wsform.com/knowledgebase/how-to-make-a-custom-button-redirect-to-a-page/

This tutorial explains how to make a button redirect to a URL when it is clicked.

Custom buttons in WS Form can be configured to do anything you wish using conditional logic.

## Demo

## Tutorial

In this tutorial we'll configure a custom button to redirect to another page when it is clicked.

Add the Custom Button to the form.

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add  icon to add a new condition.

Give the condition a name, e.g. 'Button Click'

Configure the condition as follows:

IF [Button] [Clicked]

THEN [Form] [Run JavaScript]

In the JavaScript code editor, enter:

Change the web address to whichever URL you want the button to redirect to.

location.href='https://wsform.com';

Click Save & Close

Preview the form to test your button.

## How To Make Checkboxes Required

URL: https://wsform.com/knowledgebase/how-to-make-checkboxes-required/

This tutorial explains the various ways of making Checkboxes required in WS Form.

A checkbox in a WordPress web form is an input element that allows users to select one or more options from a set of choices. Checkboxes are commonly used when multiple selections are permitted. Checkboxes should not be confused with radio fields which only allow one selection to be chosen.

There are various ways of making Checkboxes required in WS Form.

## Demo

## Setting Individual Checkboxes As Required

To set set an individual checkbox as required:

Click the Settings  icon on the checkbox field.

Click the Checkboxes tab.

Click the Required icon in the data grid on the row(s) you want to be required.

Click Save & Close at the bottom of the sidebar.

Click Publish if you want to make the changes live.

## Setting a Minimum or Maximum Checked Count

It is possible to choose a minimum or maximum number of checkboxes that must be checked in order to validate the field.

To do this:

Click the Settings  icon on the checkbox field.

Click the Advanced tab.

Scroll down to the Restrictions settings.

Set the Minimum Checked and/or Maximum Checked setting.

## Inline Validation

By default, Required, Minimum Checked and Maximum Checked settings are validated when the form is submitted.

You can also show if a checkbox is validated:

Always

On field change / blur

To do this:

Click the Settings  icon on the checkbox field.

Click the Advanced tab.

Scroll down to the Validation settings.

In the Inline Validation setting:

Choose Always to always show invalid feedback when a field is invalidated.

Choose On Field Change or Blur to show invalid feedback when a field is changed or blurred (loses focus).

## Conditional Logic

For more advanced applications, you can also check if a checkbox has been checked by using conditional logic. A simple example of this is shown below.

In this example, a checkbox row is monitored to see if it is not checked. If it is not checked, custom validity is set on the field which sets the invalid feedback shown to the user. If the checkbox is checked, the custom validity is set to blank which essentially removes the invalidity on the checkbox.

## How to Populate a Field with a New Post ID

URL: https://wsform.com/knowledgebase/how-to-populate-a-field-with-a-new-post-id/

How to populate a form field with a newly created post ID.

When creating a new post using the Post Management integration, you might want to populate a field on your form with the new post ID. This can be achieved by adding a Run WordPress Hook action to your form that calls a simple PHP script. The PHP script returns the new post ID using the field_value return action.

## Run WordPress Hook Action

The Run WordPress Hook action would be configured as follows:

Type: Filter Hook Tag: set_post_id (This can be changed to any hook tag name) Priority: After other actions

## PHP Script

An example PHP script is shown below. In this example, you would change the field_id parameter to be ID of the field you want to populate with the post ID.

add_filter( 'set_post_id', 'set_post_id_hook_function', 10, 2 );

function set_post_id_hook_function( $form, $submit ) {

 // Get post ID
 $post_id = isset( $submit->post_id ) ? $submit->post_id : 0;

 return empty( $post_id ) ? $submit : array(

 // If post ID set, set the hidden field value
 array(

 'action' => 'field_value',
 'field_id' => 123,
 'value' => $post_id,
 )
 );
}

 

## How to Reload the Page Using an Action

URL: https://wsform.com/knowledgebase/how-to-reload-the-page-using-an-action/

Reloading a page is easy to do using some simple JavaScript and the Run JavaScript action or with conditional logic.

Reload or refreshing a page can be useful if, for example, you are using a form to edit a post and the form is on the post itself. Reloading a page is easy to do using some simple JavaScript. The JavaScript is as follows:

location.reload();

## Using the Run JavaScript Action

The Run JavaScript action can be used to run the reload method. To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select JavaScript from the Action pulldown.

Is the JavaScript setting, enter location.reload();.

Click Save & Close.

Publish your form.

Now when the form is submitted, the page will reload.

Note that reloading and redirecting a web page may prevent other JavaScript on the page from running, e.g. analytics events.

## Using Conditional Logic

JavaScript can also be run using conditional logic. For example you could run JavaScript with a custom button is clicked. To do this:

Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add  icon to add a new condition.

When editing THEN, choose Form > Run JavaScript.

Enter location.reload();.

Click Save & Close.

Publish your form.

In the above example the page would be reloaded each time the custom button is clicked. Clicking the button would clear any data entered into the form at that point.

## Bypassing The Browser Cache

Should you encounter an issue where the page content does not reload correctly, it may be due to the browser cache retrieving a cached version of the page. To address this, you can ensure a fresh reload by setting the forceGet parameter to true in the reload method, as demonstrated below:

location.reload(true);

 

## How to Request a Refund

URL: https://wsform.com/knowledgebase/how-to-request-a-refund/

How to request a refund if you are within the 14 day money back guarantee period.

Our 14 day money back guarantee starts from the date you opened an account with WS Form.

If you are within the 14 day money back guarantee period and you find that WS Form PRO is not a good fit for your project you can request a full refund for your purchase.

If you are outside the 14 day period, or you have renewed a license, you cannot get a refund, but you can cancel your subscription to stop any future renewal payments.

All subscriptions renew automatically on an annual basis. We send several renewal reminder emails prior to the renewal date. Subscriptions can be cancelled at any time. Per our terms of use, subscription renewals are not eligible for refunds.

## Can We Help?

If there is any manner in which our support team can provide assistance, or if there are particular features you'd like to see in WS Form, please feel free to inform us via our Support page. We'll be delighted to help!

## How to Request a Refund

If you are within the 14 day money back guarantee period (14 days from opening an account with WS Form), please use our Contact Us form to request a refund. Please provide:

The WS Form order number.

Any license keys purchased.

The email address you used when making the original purchase.

Confirmation that all activated copies of WS Form PRO and/or integrations have been deactivated and uninstalled.

Refunds may take up to 7-10 business days to process.

Please note that all of our premium plugin files are digitally signed.

## How to Cancel a Subscription

To cancel a subscription, visit your Subscriptions page and then click 'Cancel'. Once a subscription is cancelled you will still be eligible for software updates and product support up to the original renewal period.

 

## How To Run Condition Logic on Form Render

URL: https://wsform.com/knowledgebase/how-to-run-condition-logic-on-form-render/

To run any conditional actions when a form is rendered, you can use the Form > Rendered combination.

In WS Form, conditional logic is used to provide interactivity to a form. WS Form goes beyond conventional conditional logic by allowing advanced functionality such as adding field classes, setting dynamic values and resetting an entire form.

Conditional logic actions run when the outcome of an IF condition is true (THEN) or false (ELSE). The IF condition can be triggered by events on the form such as if a field changes, but it can also be triggered by form level events such as when the form is rendered.

To run any conditional actions when a form is rendered, you can use the Form > Rendered combination in the IF condition as shown in the screenshot below.

As an example, here is how to reset the form session ID and reset the form when the form is rendered:

## How to Scroll To Top When Changing Tabs

URL: https://wsform.com/knowledgebase/how-to-scroll-to-top-when-changing-tabs/

The Scroll To Top setting on Next Tab and Previous Tab fields allows you to scroll to the top of the form when the button is clicked.

For an enhanced user experience in navigating long, multi-step forms with tabs, consider implementing an automatic scroll feature that moves the user to the top of the form whenever they switch tabs. This eliminates the need for manual scrolling, streamlining the transition between sections of the form. Achieving this functionality is straightforward with WS Form!

The Next Tab and Previous Tab fields have a Scroll To Top setting that can be used to scroll the page up when they are clicked.

There are three Scroll To Top settings:

## None

No scroll occurs when the button is clicked.

## Instant

When Instant is selected, the scroll will be immediate. You can set on offset in pixels should you need to adjust the scroll amount.

## Smooth

When smooth is selected, the scroll with take place over the Duration (ms) setting. This defaults to 400ms but can be adjusted as necessary. You can set on offset in pixels should you need to adjust the scroll amount.

## How to Set a 'Reply To' When Sending Emails

URL: https://wsform.com/knowledgebase/how-to-set-a-reply-to-when-sending-emails/

When sending an email, the 'Reply To' setting allows you to specify the email address to which recipients will reply.

When sending an email, the Reply To (reply-to) setting allows you to specify the email address to which recipients will reply. By default, email replies are sent back to the From email address. However, if a different email address is specified in the Reply To setting, recipients will send their replies to that address instead. This can be useful in situations where the sender wants responses to go to a different person or team, or to a different email account altogether. It can also be useful if you are sending emails via an SMTP plugin that requires a specific, authorized email address to be used as the From and you want replies to be sent elsewhere.

To set the Reply To setting for a Send Email action:

Click on the Actions icon at the top of the layout editor.

Click on the Settings icon to the right of a Send Email action. 

Enter your reply to email address in the Reply To setting.

Click Save & Close

## How to Set Fields Based on the Referring Page

URL: https://wsform.com/knowledgebase/how-to-set-fields-based-on-the-referring-page/

Make your forms smarter with WS Form by automatically setting default values based on the page your visitors came from using referrer tracking or query string…

Ever wanted your forms to feel a little smarter? For example, imagine linking to the same form from your Pricing page, your Features page, and your Contact page and having the form automatically adjust its default values depending on where the visitor came from. With WS Form, you can do exactly that.

In this tutorial, we’ll walk through two simple methods to make it happen: using the Referring URL and using a Query String Parameter.

## Demo

## By Referring URL

A referrer is the URL of the webpage that a visitor came from before arriving at the current page.

You can populate a field with the referrer (e.g. a Hidden field) and then use conditional logic to check what the referrer contains.

### 1. Enable Referrer Tracking

Click on the Form Settings icon.

Click on the Tracking tab.

Check Tracking > Referrer.

Click Save & Close.

The variable #tracking_referrer can now be used in your form.

### 2. Add a Hidden Field

The referrer variable #tracking_referrer can now be used in your form. Let's add that to a hidden field.

Add a Hidden field to your form.

Edit the Hidden field.

In the Label setting, enter: Referrer

In the Default Value setting, enter: #tracking_referrer

Click Save & Close.

### 3. Add Conditional Logic

You can now use conditional logic to check the referrer, for example if the user came from the page:

https://mysite.com/pricing/

You could preselect the "I need an estimate" option in a Select field:

IF [Referrer] [Contains] "pricing" THEN [Interested In] [Select Row] [I need an estimate]

## By Query String Parameter

A query string parameter is extra information in a page URL after a ? (and separated by & if there are multiple). You can use these parameters to pass context between pages.

### 1. Add a Query String to Your Link

For example, when linking from your pricing page to the inquiry form:

https://mysite.com/inquiry/?r=pricing

Then you could extract the value of the "r" query string parameter using:

#query_var("r")

### 2. Add a Hidden Field

Add a Hidden field to your form.

Edit the Hidden field.

In the Label setting, enter: Query String Parameter Value

In the Default Value setting, enter: #query_var("r")

Click Save & Close.

### 3. Add Conditional Logic

Just like with the referrer method, you can use conditional logic. For example:

IF [Query String Parameter Value] [Contains] "pricing" THEN [Interested In] [Select Row] [I need an estimate]

## How To Set Up Google Enhanced Conversions For Google Tag Manager

URL: https://wsform.com/knowledgebase/how-to-set-up-google-enhanced-conversions-for-google-tag-manager/

This tutorial describes how to configure the Conversion Tracking action for use with the Google Tag Manager to provide Google Enhanced Conversion variables in…

Google Enhanced Conversions is a feature within Google Ads designed to improve the accuracy of conversion tracking. It supplements existing conversion tags by sending hashed (anonymized) first-party customer data (such as email addresses, names, home addresses, and phone numbers) from your website to Google. This additional data allows Google to better match your conversions to ads, leading to more accurate conversion tracking and reporting.

This tutorial describes how to configure the Conversion Tracking action for use with the Google Tag Manager to provide Google Enhanced Conversion variables in the data layer.

## Creating The Conversion Tracking Action

When editing your form, click the Actions  icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select Conversion Tracking from the Action pulldown. A series of settings will appear. The minimum settings should be as follows:

Form Submitted: Checked
This means WS Form will run the action when the form is submitted.

Type: Google Tag Manager (Data Layer)
In this tutorial we are using Google Tag Manager to trigger a conversion from data layer values.

Data Layer Variables:

In the above example 123 would be the ID of the email field on the form. Note the use of dot notation (user_data.email) that enables you to create nested objects in the data layer.

Key
Value

event
conversion

user_data.email
#hash_sha256(#field(123))

The finished Conversion Tracking event would look as follows:

## Adding Additional Customer Data

At a minimum, Google Enhanced Conversions require the SHA256 hashed version of the user email. You could extend this with additional hashed data, for example:

Key
Value

user_data.phone_number
#hash_sha256(#field(2))

user_data.address.first_name
#hash_sha256(#field(3))

user_data.address.last_name
#hash_sha256(#field(4))

user_data.address.street
#hash_sha256(#field(5))

user_data.address.city
#hash_sha256(#field(6))

user_data.address.state
#hash_sha256(#field(7))

user_data.address.zip
#hash_sha256(#field(8))

## Testing the Conversion Tracking Action

We recommend using the Google Tag Assistant to check that the data layer contains the customer data you have specified. Google Tag Assistant is a free Chrome extension that helps users verify the proper installation of various Google tags.

An example Google Tag Assistant session summary is shown below. You can see how WS Form has SHA256 hashed the field data prior to adding it to the data layer.

## How To Swap Two Form Input Values

URL: https://wsform.com/knowledgebase/how-to-swap-two-form-input-values/

In this tutorial, we will create a button in WS Form that swaps the values between two number fields using a hidden field and conditional logic.

In this tutorial, we will create a button in WS Form that swaps two WordPress form number input values using a hidden field and conditional logic. This method avoids custom JavaScript by leveraging the powerful features of WS Form.

## Demo

## Tutorial

### Create a New Form

In your WordPress dashboard, navigate to WS Form > Add New.

Choose the Blank template.

Add two Number fields to the form. Label these fields (e.g., Width and Height).

Add a Hidden field. Drag and drop a hidden field onto your form. This field will temporarily hold one of the values during the swap. We'll label it Swap Temporary Value.

Add a Custom Button. We'll use the custom button to initiate the swap. We'll label it Swap.

## Configure Conditional Logic

Now, we'll set up conditional logic to perform the swap when the button is clicked.

Click on the Conditional Logic icon at the top of the layout editor.

Create a new condition by clicking the + icon. We'll label the condition Swap Values.

In the IF condition, we add [Custom Button] [Clicked]

In the THEN statement will contain three actions:

Set the Swap Temporary Value hidden field to the Width value. We use the WS Form #field variable to insert the value of the Width value.

 Set the Width value to the Length value.

Set the Length value to the Swap Temporary Value hidden field.

Click Save & Close.

## How to Track Google Ads GCLID Using WS Form

URL: https://wsform.com/knowledgebase/how-to-track-google-ads-gclid-using-ws-form/

This tutorial explains how to store the Google Click Identifier (GCLID) for each submission.

The gclid (Google Click Identifier) is a unique tracking parameter automatically appended to URLs by Google Ads when auto-tagging is enabled. It serves as a key component for tracking user interactions with ads, helping advertisers link clicks on their ads to specific campaigns, ad groups, and keywords in Google Ads. By capturing and analyzing the gclid in your WordPress form, you can measure the effectiveness of their campaigns, track conversions, and optimize performance. It's especially useful for integrating Google Ads data with analytics platforms like Google Analytics or CRM systems.

The gclid is added to URLs as a query string parameter. For example:

https://example.com/form-page?gclid=test123

It is possible to capture and store the gclid to each form submission, provided the gclid query string parameter is present in the URL of the page that your form is present on.

To do this:

Add a Hidden field to your form.

Edit the Hidden field by clicking the Settings  icon on the field itself.

In the Default Value setting enter: #query_var("gclid")

Click Save & Close.

Click Publish if you want to make the changes live immediately.

The gclid query string parameter will now be stored in the hidden field for each submission provided it is present in the query string.

If you want to use the gclid value in an integration (e.g. in a Custom Mapping), you can reference the hidden field by using:

#field(123)

... where 123 is the ID of the hidden field.

## How to Use Query Strings with Conditional Logic

URL: https://wsform.com/knowledgebase/how-to-use-query-strings-with-conditional-logic/

Learn how to capture query string parameters in a hidden field and use them to drive conditional logic in your form.

This tutorial explains how to use a query string parameter in WS Form and apply conditional logic based on its value.

This is useful when you want your form to behave differently depending on how a user arrived on the page. For example, showing specific sections, fields, messages, or use of actions based on a URL parameter.

## Add a Hidden Field

To begin, add a Hidden field to your form.

Open your form in the layout editor

Click or drag a Hidden field onto the form

This field will store the value of your query string parameter.

## Set the Default Value Using a Query Variable

In the Hidden field settings, enter the following:

#query_var("parameter")

Replace "parameter" with the name of your query string parameter.

### Example

If your URL is:

https://mysite.com/my-form/?source=google

Then your Default Value should be:

#query_var("source")

This will store the value google in the Hidden field.

## Create Your Conditional Logic

Click the Conditional Logic  icon at the top of the layout editor. The Conditional Logic sidebar will open.

Click the Add icon  icon to add a new condition.

You can now use the Hidden field in your logic rules. For example:
IF [Hidden Field] [Equals] google THEN ...

## How to Use WooCommerce Variation Variables

URL: https://wsform.com/knowledgebase/how-to-use-woocommerce-variation-variables/

Learn how to use WooCommerce Variation Variables in WS Form to dynamically react to selected product variations, attributes, pricing, and stock status.

WooCommerce Variation Variables enable your WS Form forms to react dynamically to the customer's selected WooCommerce product variation.

For example, if you sell a t-shirt with Size and Color attributes, you can use these variables to show or hide fields, populate hidden fields, display variation-specific information, or perform conditional logic based on the selected variation.

These variables update live as the customer interacts with the WooCommerce variation selectors, making it easy to build dynamic, variation-aware forms directly on your product pages.

## Demo

View the WooCommerce Variation Variables demo to see these variables updating live as product variations are selected. The demo shows variation IDs, SKUs, prices, stock status, and attribute values updating in real time as different variation combinations are chosen.

## Requirements

WooCommerce WS Form PRO Product Integrations version 1.2.8 or later.

WS Form PRO version 1.11.10 or later.

If you are using an older version of WS Form PRO, these variables will not be available.

These are client-side parse variables. They update live in the browser as the customer selects or changes a product variation and are intended for use within forms displayed on WooCommerce product pages.

They also support multiple variable-product forms on the same page. Each form tracks its own selected variation independently.

## Available Variables

Variable
Example Output
Notes

#woocommerce_variation_post_id
123
Returns the post ID of the selected variation. Empty until a complete variation has been selected.

#woocommerce_variation_sku
small-green
Returns the SKU of the selected variation. Empty until a complete variation has been selected.

#woocommerce_variation_price
12.34
Returns the variation price as a raw numeric value with no currency formatting.

#woocommerce_variation_in_stock
yes or no
Returns whether the selected variation is currently in stock.

#woocommerce_variation_attribute("attribute")
Green
Returns the selected value of the specified variation attribute.

## Keeping Values Up to Date

Because these variables are client-side and update dynamically as the customer changes their variation selection, they should be wrapped in #calc or #text when used in fields so that they continue to refresh automatically.

Use #calc() when you need the value as a number. For example:

#calc(#woocommerce_variation_post_id)

This returns the current variation post ID and automatically updates whenever the customer changes their variation selection.

Use #text() when you want to display a live text value to the customer.

#text(#woocommerce_variation_sku)

To display a formatted variation price using your store currency settings:

#text(#ecommerce_price(#woocommerce_variation_price))

This formats the variation price using your WooCommerce currency settings and updates automatically whenever the variation changes.

In simple terms, #calc() and #text() are what make these values refresh automatically as the shopper changes their variation selection.

Learn more:

Calculated Fields

## Using the Variables

### Conditional Logic

Variation variables can be used in Conditional Logic by selecting Variable as the condition object.

Example: Show an engraving section when the variation post ID is 123

### Default Values

You can use variation variables in a field's Default Value setting.

This is useful when storing variation information with a form submission.

Store the variation post ID

#calc(#woocommerce_variation_post_id)

Store the variation SKU

#text(#woocommerce_variation_sku)

Common use cases include:

Hidden fields that store the variation ID.

Hidden fields that store the variation SKU.

Text fields that display variation-specific information.

### Text Editor and HTML Fields

Variation variables can also be used in Text Editor and HTML fields to display live information to shoppers.

Display the selected SKU

You selected SKU: #text(#woocommerce_variation_sku)

Display the selected variation price

Price: #text(#ecommerce_price(#woocommerce_variation_price))

Display the selected color attribute

Selected Color: #text(#woocommerce_variation_attribute("pa_color"))

These values automatically update whenever the customer changes their variation selection.

## Tips & Troubleshooting

Variation ID, SKU, price, and stock variables remain empty until all required variation attributes have been selected.

The #woocommerce_variation_attribute("attribute") variable updates immediately when its corresponding attribute dropdown changes.

Use #calc() or #text() when you need values to refresh automatically as the variation changes. This is not necessary in conditional logic.

Use #ecommerce_price() to format variation prices using your WooCommerce currency settings.

Using WooCommerce Variation Variables allows your forms to react intelligently to the customer's product selection, enabling more personalized experiences, smarter conditional logic, and richer WooCommerce product forms.

## HTML Field

URL: https://wsform.com/knowledgebase/html/

The HTML field is be used to output raw HTML on your form. HTML is entered using the standard Wordpress HTML editor.

The HTML field is used to output raw HTML on your form. HTML is entered using the standard WordPress HTML editor.

## Adding an HTML Field

To learn how to add, edit, clone, move, resize, offset, or delete an HTML field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

The label is used solely for identifying the text editor field when editing your form. The label is not shown to the website visitor.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### HTML

Enter the text you want to display into this WordPress visual editor.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the HTML field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## HTML Form Attributes

URL: https://wsform.com/knowledgebase/html-form-attributes/

This article explains how instances work and how form and field attributes are configured in WS Form.

WS Form is a WordPress form plugin that supports features such as:

Multiple forms per page, including multiple instances of the same form.

Conditional logic

Repeatable sections

Calculated fields

...and more!

WS Form automatically assigns IDs to forms and fields to ensure all IDs are unique and to ensure that all functionality provided by the plugin works as intended.

Additionally, WS Form automatically adds custom data attributes and classes to all fields for the purpose of referencing different form elements with CSS and JavaScript.

This article explains how instances work and how form and field attributes are configured in WS Form.

Need help styling forms with custom CSS? Check out our Styling Forms with CSS article.

If you require additional assistance understanding form attributes, please see our Custom Project Development article.

## Contents

Instances

Form Attributes

Field Wrapper Attributes

Field Attributes

## Instances

Each form on a page is assigned an instance. The first form to render on the page is given an instance of 1. The second instance of a form is given an instance of 2, so on and so forth. By using instances, WS Form is able to render the same form multiple times on a page. For example, you might have a newsletter sign up at the top and bottom of a page.

## Form Attributes

A simplified example of a form element generated by WS Form is as follows (we've removed some attributes for clarity):

<form id="ws-form-1" class="wsft-form" data-id="123" data-instance-id="1">

Lets run through each of these attributes in turn. Choose a tab to learn more.

### id

The DOM element ID of a form is stored in an attribute called:

id

An example of this attribute is as follows:

id="ws-form-1"

The format of this attribute is follows:

id="ws-form-<instance_id>"

So, the first form rendered on a page (first instance) would have an ID of:

ws-form-1

You could reference this in CSS and JavaScript by using a selector such as:

#ws-form-1

#### Changing Form IDs

If you only have one instance of a form on a page, the ID of the form can be changed. For example, the form shortcode can have an element_id attribute added to it. The WordPress block can also be configured to use a different element ID. Other site builder elements also support the ability to change the ID in a setting if necessary.

We generally recommend leaving WS Form to handle these IDs.

### class

The form class is stored in an attribute called:

class

An example of this attribute is:

class="wsft-form"

All forms have a class of:

wsft-form

You could be reference this in CSS and JavaScript by using a selector such as:

.wsft-form

#### Adding Form Wrapper Classes

You can add custom form wrapper classes in the Form Settings > Styling > Classes > Form Wrapper setting.

### data-id

The actual form ID (i.e. the database ID of the form) is stored in a data attribute called:

data-id

An example of this attribute is:

data-id="123"

You could reference this in CSS and JavaScript by using a selector such as:

[data-id="123"]

... or a more specific example:

.wsft-form[data-id="123"]

### data-instance-id

The instance of a form is stored in an attribute called:

data-instance-id

An example of this attribute is:

data-instance-id="1"

You could reference this in CSS and JavaScript by using a selector such as:

[data-instance-id="1"]

... or a more specific example:

.wsft-form[data-instance-id="1"]

## Field Wrapper Attributes

Most fields in WS Form are contained within a wrapper. The wrapper provides the ability to style a field, as well as grouping elements such as checkbox or radio fields.

A simplified example of a field wrapper element generated by WS Form is as follows (we've removed some attributes for clarity):

<div id="wsft-1-field-wrapper-123" class="wsft-field-wrapper" data-id="123" data-type="checkbox">

Lets run through each of these attributes in turn. Choose a tab to learn more.

### id

The DOM element ID of a field wrapper is stored in an attribute called:

id

And example of this attribute is:

id="wsft-1-field-wrapper-123"

The format of a field wrapper ID is as follows:

wsft-<instance_id>-field-wrapper-<field_id>

So, the first form rendered on a page (first instance), for field ID 5 would have an ID of:

wsft-1-field-wrapper-5

You could be reference this in CSS and JavaScript by using a selector such as:

#wsft-1-field-wrapper-5

### class

The field wrapper class is stored in an attribute called:

class

An example of this attribute is:

class="wsft-field-wrapper"

All fields have a class of:

wsft-field-wrapper

You could be reference this in CSS and JavaScript by using a selector such as:

.wsft-field-wrapper

... or a more specific example:

.wsft-form .wsft-field-wrapper

#### Adding Field Wrapper Classes

You can add additional wrapper classes to a field in the Field Settings > Advanced > Classes > Field Wrapper setting.

#### Adding Field Wrapper Classes for All Fields

You can add additional wrapper classes to all fields in the Form Settings > Styling > Classes > Field Wrapper setting.

### data-id

The actual field ID (i.e. the database ID of the field) is stored in a data attribute called:

data-id

An example of this attribute for field ID 123 is:

data-id="123"

You could reference this in CSS and JavaScript by using a selector such as:

[data-id="123"]

... or a more specific example:

.wsft-form .wsft-field-wrapper[data-id="123"]

### data-type

The field type of a field is stored in an attribute called

data-type

An example of this attribute for a checkbox field is:

data-type="checkbox"

You could reference all checkbox fields in CSS and JavaScript by using a selector such as:

[data-type="checkbox"]

... or a more specific example:

.wsft-form .wsft-field-wrapper[data-type="checkbox"]

## Field Attributes

A simplified example of a field element generated by WS Form is as follows (we've removed some attributes for clarity):

<input type="text" id="wsft-1-field-123" class="wsft-field" name="field_123">

Lets run through each of these attributes in turn. Choose a tab to learn more.

### id

The DOM element ID of a field is stored in an attribute called:

id

And example of this attribute is:

id="wsft-1-wrapper-123"

The format of a field wrapper ID is as follows:

wsft-<instance_id>-field-<field_id>

So, the first form rendered on a page (first instance), for field ID 5 would have an ID of:

wsft-1-field-5

You could be reference this in CSS and JavaScript by using a selector such as:

#wsft-1-field-5

### class

The field class is stored in an attribute called:

class

An example of this attribute is:

class="wsft-field"

All fields have a class of:

wsft-field

You could be reference this in CSS and JavaScript by using a selector such as:

.wsft-field

... or a more specific example:

.wsft-form .wsft-field-wrapper .wsft-field

#### Adding Field Classes

You can add additional wrapper classes to a field in the Field Settings > Advanced > Classes > Field setting.

#### Adding Field Classes for All Fields

You can add additional classes to all fields in the Form Settings > Styling > Classes > Field setting.

### name

The name attribute is used to reference the value of a field after submitting the form. The field name is stored in a data attribute called:

name

An example of this attribute for field ID 123 is:

name="field_123"

You could reference this in CSS and JavaScript by using a selector such as:

[name="field_123"]

... or a more specific example:

.wsft-form .wsft-field-wrapper .wsft-field[name="field_123"]

## HubSpot Integration

URL: https://wsform.com/knowledgebase/hubspot/

The HubSpot integration lets you push new leads using an action and create new forms from your HubSpot forms in a single click on the add form page.

The HubSpot integration lets you push form submissions to the following HubSpot endpoints using a WS Form action:

Companies

Contacts

Deals

It also allows you to create new forms automatically from your HubSpot forms in a single click on the Add Form page.

Form submissions from WS Form are not sent to HubSpot forms, they are sent directly to contact, company or deal objects to provide greater flexibility.

## Installation

The HubSpot plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the HubSpot plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the HubSpot tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to HubSpot

In order to use the integration, you need to connect it to HubSpot. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the HubSpot tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a HubSpot account, you can create a new account here.

## Considerations When Using HubSpot's Own Plugin

If you also have HubSpot's own plugin installed, ensure that it is configured not to collect data from non-HubSpot forms. To do this:

### In HubSpot

Go to Forms.

Click the Non-HubSpot Forms tab.

Set Collect data from website forms to Off.

### In the HubSpot Plugin

Go to Forms.

Set Sync all forms on your website to HubSpot to Off.

This will ensure that only HubSpot forms are handled by the HubSpot plugin.

## Creating a Form for HubSpot

### Automatically

WS Form can create a form for any of your HubSpot forms in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

For help with creating a form in HubSpot, click here.

To create a HubSpot form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the HubSpot tab at the top of the page.

Click on any of your HubSpot forms.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the HubSpot tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a HubSpot form when a user saves or submits their form.

To add a HubSpot action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to HubSpot from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The HubSpot action settings are as follows:

#### When Should This Action Run?

You can choose to run the HubSpot action when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Subscriptions

The subscriptions setting allows you to subscribe contacts to one or more subscriptions. Click the Add  icon to add a new subscription.

HubSpot: Set up email subscription types

For each subscription you should complete the following fields:

##### Subscription

Choose a subscription from the select field. You click the refresh icon at the top of the Subscriptions setting to update this list from Hubspot if necessary.

##### Legal Basis

Choose the legal basis for subscribing the contact to the chosen subscription.

##### Explanation

Enter an explanation for the chosen legal basis.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in HubSpot. For example you would want to map your Email field to the Email field in HubSpot.

Tip: You should map an email field to the HubSpot contact email field at a minimum.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding HubSpot field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a HubSpot field to any value you wish, including the use of WS Form variables. For example, you might want to map a lead source to a contact lead source field in HubSpot.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding HubSpot field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Deal Owner ID

If your field mapping includes a deal record, you can choose the owner of the deal using this setting.

#### File Upload Path

If you have mapped any file or signature fields to HubSpot, WS Form will upload those files for you to the path in this setting. The default value is:

/ws-form/#form_id

You can enter your own path here and use WS Form variables as part of this path, e.g.

/ws-form/#form_id/#submit_id

## Setting the "Legal Basis for Processing Contact's Data" Field

The Legal Basis for Processing Contact's Data field can be set by mapping a field or custom value to it. When doing so the following values should be mapped:

Value (This is the value you should map)
Label

Legitimate interest – prospect/lead
Legitimate interest - Lead

Legitimate interest – existing customer
Legitimate interest - Customer

Legitimate interest - other
Legitimate interest - other

Performance of a contract
Performance of a contract

Freely given consent from contact
Freely given consent from contact

Not applicable
Not applicable

You can map multiple values by mapping a field such as a checkbox in Field Mapping, or in Custom Mapping you can separate multiple values by using a semi-colon, for example:

Legitimate interest – prospect/lead;Legitimate interest – existing customer

## Variables

When the integration creates a contact, company or deal, the following variables can be used:

Variable
Description

#hubspot_contact_id
ID of the last contact created.

#hubspot_company_id
ID of the last company created.

#hubspot_deal_id
ID of the last deal created.

These variables can be used in subsequent actions.

## Icons Field

URL: https://wsform.com/knowledgebase/section_icons/

The icons field is used to add icons to repeatable sections to enable you to add, remove and move rows.

The Icons field is used to add icons to repeatable sections. The icons provide the following functionality to a repeatable section:

Add
Add a new row to the repeatable section

Remove
Remove a row from the repeatable section

Move Up
Move up one row

Move Down
Move down one row

Drag
Drag and drop the row to a new position

Reset
Reset the row to the default state

Clear
Clear the row

## Demo

A demo of the icon functionality and available styles is given below. Try clicking the icons to see this field in action:

## Overview

When a form section is set to be repeatable, WS Form will automatically add an icons field to it if one does not already exist.

The icons field can be placed within the section it will control, or in a different section to control it remotely. If the icons field is placed outside of the section it will control, only the Add and Remove functionality will be available.

## Adding an Icon Field

To learn how to add, edit, clone, move, resize, offset, or delete an icons field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the icons field in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Repeatable Section

Use this setting to choose which repeatable section the icons will control. If you add an icons field to an existing repeatable section, it will automatically be assigned to that section.

### Icons

The icons setting is used to choose which icons are shown in the field.

To add an icon:

Click the Add  icon at the bottom right of the icons repeater.

In the left column, select the icon type.

In the right column, enter the ARIA label (accessibility).

Repeat this process for each icon.

Click the Save button at the bottom of the sidebar to save your changes.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

The ARIA label column enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the custom button.

#### Vertical Alignment

The vertical alignment setting allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Horizontal Alignment

The horizontal alignment setting allows you to choose how the icons are horizontally aligned. The options are:

Left

Center

Right

Space Around (The space around each icon is the same)

Space Between (The space between each icon is the same)

Space Evenly (The space before, between and after each icon is the same)

#### Icon

Use this setting to choose which style of icon to display:

Circle (Default)

Circle - Solid

Square

Square - Solid

Text

Custom

If Custom is chosen, you can enter your own HTML for each icon. The ARIA Label is automatically wrapped around your HTML.

#### Size (Pixels)

Enter the size in pixels of the icon (does not apply to text or custom icon styles).

#### Active Color

Select the color to use if the icon is active.

#### Disabled Color

Select the color to use if the icon is disabled. Icons are disabled when they cannot be used in a particular row, for example, the Move Up icon is disabled in the first row.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## iContact Integration

URL: https://wsform.com/knowledgebase/icontact/

The iContact integration lets you push form submissions as new subscribed contacts to iContact.

The iContact integration lets you push new contacts using an action, pull contact data into WordPress using the WS Form PRO autocomplete feature, and create new forms from your lists in a single click on the add form page.

The iContact integration requires WS Form PRO.

## Installation

The iContact plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the iContact plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the iContact tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to iContact

In order to use the integration, you need to obtain an API ID, username and password from iContact. It's a simple process. If you do not have an iContact account, click here.

### Obtaining an API ID, Username and Password

Click on your name at the top right of the page, then click Settings and Billing.

2. Click on iContact Integrations.

3. Click Create for Custom API Integrations.

4. Complete the form using these suggested field values:

App Name: WS Form
App Description: WS Form iContact Integration

5. Take a note of the API ID, Username and Password. Click Save Changes

### Entering the API Email and Password

Click WS Form in the WordPress administration menu.

Click Settings.

Click the iContact tab at the top of the page.

Enter your API ID, username and password.

Click the Save button.

## Creating a Form for iContact

### Automatically

WS Form can create a form for any of our iContact lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a iContact form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the iContact tab at the top of the page.

Click on any of your iContact lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the iContact tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to iContact when a user saves or submits their form.

To add a iContact action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a iContact List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The iContact action settings are as follows:

#### When Should This Action Run?

You can choose to run the iContact action when the form is saved, submitted, or both.

#### iContact List

Choose the iContact List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Contact Status

Select the contact status you would like new contacts added as. Choose from:

Normal

Bounced

Do not contact

Pending

Invitable

Deleted

Select the subscriber status you would like new contacts added as. Choose from:

Normal

Pending

Unsubscribed

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in iContact. For example you would want to map your Email field to the Email field in iContact.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding iContact field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using iContact

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in iContact.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose iContact from the Action To Populate From pull down.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the iContact fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a iContact template the field mappings will automatically be created for you.

## if ... endif Variables

URL: https://wsform.com/knowledgebase/if-endif/

The #if and #endif variables are used to conditionally include content.

The #if and #endif variables are used to conditionally include content. They can be used to show or hide content in a variety of locations such as the 'Send Email' action, 'Show Message' action, conditional logic (e.g. when setting a field value or message content) or even in field mappings to external APIs.

## Demo

## Syntax

The basic syntax of an #if(...) statement is shown below.

#if(expression)
content
#endif

The expression is evaluated to its boolean value. If the expression evaluates to true, WS Form will output the content, and if it evaluates to false, WS Form will ignore it.

The parts of the expression must be separated by spaces.

An example #if(...) statement is shown below:

#if(#field(123))
<label>First Name</label>
<span>#field(123)</span>
#endif

In this example, the WS Form checks to see if field ID 123 contains any data. If it does, the label and span are output. If the field is blank, the label and span are not output.

## Operators

Operators can be included in #if(...) statements to compare one value with another. The available operators are:

Operator
Description
Example

None
Is Not Blank
#if(#field(123))Show this#endif

==
Equals
#if(#field(123) == "this value")Show this#endif

!=
Does Not Equal
#if(#field(123) != "this value")Show this#endif

<
Less Than
#if(#field(123) < 456)Show this#endif

>
Greater Than
#if(#field(123) > 456)Show this#endif

<=
Less Than Or Equal To
#if(#field(123) <= 456)Show this#endif

>=
Greater Than Or Equal To
#if(#field(123) >= 456)Show this#endif

*=
Contains
#if(#field(123) *= "this value")Show this#endif

!*=
Does Not Contains
#if(#field(123) !*= "this value")Show this#endif

^=
Starts With
#if(#field(123) ^= "this value")Show this#endif

!^=
Does Not Start With
#if(#field(123) !^= "this value")Show this#endif

$=
Ends With
#if(#field(123) $= "this value")Show this#endif

!$=
Does Not End With
#if(#field(123) !$= "this value")Show this#endif

If you do not specify an operator, WS Form will check that the input is not blank. If it is blank, it will return false, if it is not blank, it will return true.

## Multiple Conditions

You can use multiple conditions in an #if(...) statement, separated by && (AND) or || (OR) operators. For example:

#if(#field(1) == "Checkbox 1" && #field(2) == "Checkbox 2")Show this#endif

## Compared Values

The values entered for comparison can be a string, e.g. "this value" or any valid WS Form variable, e.g. #field(123).

## Using #if ... #endif in Conditional Logic

#if(...) conditions can be used on your form as well as in action such sending emails or showing a message.

Conditional logic can be used reassess #if(...) conditions when the content of a compared value changes. An example of this conditional logic is shown below.

## Examples

### Conditional Styling

<span style="color:#if(#field(123) == "Green")#00ff00#endif#if(#field(123) == "Red")#ff0000#endif">Style this text</span>

### Show Text Depending on Submission Status

#if(#submit_status == "draft")In Progress#endif
#if(#submit_status == "publish")Submitted#endif

### Check Query Variable utm_source

#if(#query_var("utm_source") == "Twitter")Source is Twitter#endif
#if(#query_var("utm_source") == "Google Ads")Source is Google Ads#endif

### Check Field Containing Age

#if(#field(123) < 21)Aged under 21#endif

 

## Images are Not Showing in Emails

URL: https://wsform.com/knowledgebase/images-are-not-showing-in-emails/

There are two reason why images might not be showing in your email.

Here are some reasons why images from fields might not be showing in your email.

## Embed Images Setting

If this setting is disabled, images from fields are not embedded in your email.  To enable this setting:

Click on Settings in the WS Form admin menu.

Click on the Variables tab.

Check the Show File Preview setting.

## Base64 Encoded Images

Some image uploads are protected and therefore do not have a public URL. For example, if you are using the WS Form (Private) file handler, we will base64 encode images in emails and PDF's.

This avoids the use of a public URL but some email readers (e.g. GMail) will strip these types of images from emails.

For File Upload fields, if you want images to show consistently, consider using the Media Library file handler setting.

## Email Client Removing Images

Some email clients will remove images. Ensure loading of external images is enabled in your email client.

## Import / Export

URL: https://wsform.com/knowledgebase/import-export/

WS Form allows you to import and export forms, sections & data grids for backing up or transferring data between websites.

WS Form allows you to import and export forms for backing up or transferring forms between websites. You can also export data such as select options, checkboxes and radios as well as importing CSV files into data grids which is useful for entering large volumes of data.

## Form Export

To export your form, click the export icon at the top of the layout editor. This will download a JSON file to your computer that you can later use to import the form.

You can use this feature to create backups of your form as well as transferring forms between different websites.

## Form Import

To import a form, either click the import icon at the top of the layout editor and select a JSON file, or you can simply drag the JSON file into the form builder area. When you drag the file a blue box will appear with a dashed outline, release the file into it and after confirming you wish to continue, the import will begin. Using this method will replace the existing form.

You can also drag forms into the Form list.

Note that when you import a file, field IDs will change. WS Form will automatically amend any field IDs used in settings, conditional logic and actions.

## Section Library

If you want to import parts of a form into another, you can use the section library.

## Data Grid Import / Export

## Increase and Decrease Numeric Values with Buttons

URL: https://wsform.com/knowledgebase/increase-and-decrease-numeric-values-with-buttons/

You can use WS Form conditional logic to increase and decrease the value of numeric fields in a WordPress form.

You can use WS Form conditional logic to increase and decrease the value of numeric fields in a WordPress form.

## Demo

## Tutorial

In this tutorial, we'll add a number field to a form and then create plus and minus buttons that will increase and decrease the value of that number field.

First we add the fields to the form:

We add a number field and two custom buttons either side of that. You can position the buttons wherever you would like on the form.

Next we need to add some conditional logic that will increase or decrease the number field when a custom button is clicked.

The conditional logic for + custom button is shown below.

This condition adds an event handler to the + custom button. When a click event occurs, the value in the number field is incremented by 1. You can increment by any step you wish and even increase the field by the value of another field by using WS Form variables, e.g. #field(123).

We add a similar condition to the form for the - custom button that uses the Decrease value by condition action.

The final form is shown below.

## Limiting Numeric Values

You can you use the Minimum and Maximum settings on numeric based fields to limit the maximum and minimum permissible values that conditional logic can increase or decrease a value by. To do this:

Edit the field.

Click on the Advanced tab.

Enter a value in the Minimum and/or Maximum setting.

Click Save.

## Field Types

The following field types have the Increase value by and Decrease value by conditional actions:

Cart Detail

Hidden

Meter

Number

Price

Price Range

Quantity

Range Slider

Rating

## Input Masks

URL: https://wsform.com/knowledgebase/input-masks/

Input masks help website users with the input of a field by ensuring it is entered in a predefined format.

Input masks help website users with the input of a field by ensuring it is entered in a predefined format. This can be useful for phone numbers, zip codes etc.

The input masks feature is available for Text, Phone, Text Area and Password fields.

To enter an input mask:

Click the settings icon on a field.

Click on the Advanced tab.

Enter your input mask into the Input Mask setting.

Click the Save button at the bottom of the page.

## Input Mask Format

You can use the following characters to enter an input mask:

a Alphabetical (a-z or A-Z) A Uppercase only alphabetical (A-Z) 9 Numeric (0-9) * Alphanumeric (a-z, A-Z or 0-9) & Uppercase alphanumeric (A-Z or 0-9) [...] Use brackets to encase optional parts of a mask

So for example, to force someone to enter a phone number in a US format, you would enter:

(999) 999-9999

## Validating Input Masks

In addition to regular validation such as checking if a field is required, you can also validate mask input prior to the form being submitted. To do this, check the Input Mask Validation setting.

## Example Input Masks

File
Description

(999) 999-9999
US format phone number

99999
5 character zip code

99999[-9999]
5 character zip code with optional 4 characters at end

99/99
Short date

99/99/9999
Long date

## Insert Cookie Values into Fields

URL: https://wsform.com/knowledgebase/insert-cookie-values-into-fields/

You can insert the value of a cookie into a field using the #cookie_get variable.

You can insert the value of a cookie into a field using the following variable:

#cookie_get("name")

For example, if you have a cookie called "UTM_Campaign", you would use:

#cookie_get("UTM_Campaign")

If you want to load that value into a hidden field, you would add this variable to the Default Value of the hidden field, as shown below:

This variable can also be used in actions, e.g. Send Email or custom mapping.

See also:

Insert Local Storage Values into Fields

Insert Session Storage Values into Fields

## Insert Local Storage Values into Fields

URL: https://wsform.com/knowledgebase/insert-local-storage-values-into-fields/

You can insert the value of a local storage value into a field using the #local_storage_get variable.

You can insert the value of a local storage variable key a field using the following variable:

#local_storage_get("name")

For example, if you have a key called "my_key", you would use:

#local_storage_get("my_key")

If you want to load that value into a hidden field, you would add this variable to the Default Value of the hidden field, as shown below:

See also:

Insert Session Storage Values into Fields

Insert Cookie Values into Fields

## Insert Session Storage Values into Fields

URL: https://wsform.com/knowledgebase/insert-session-storage-values-into-fields/

You can insert the value of a session storage value into a field using the #session_storage_get variable.

You can insert the value of a session storage variable key a field using the following variable:

#session_storage_get("name")

For example, if you have a key called "my_key", you would use:

#session_storage_get("my_key")

If you want to load that value into a hidden field, you would add this variable to the Default Value of the hidden field, as shown below:

See also:

Insert Local Storage Values into Fields

Insert Cookie Values into Fields

## Installation

URL: https://wsform.com/knowledgebase/installation/

Learn how to install and activate the WS Form plugin in WordPress.

This article describes how to obtain and install and activate WS Form and integration plugins.

## Obtaining Your Software

When you order WS Form you will receive an email confirmation with links to the software you purchased. If you do not receive this email or you need to download the software again:

Login to wsform.com.

Click on My Account (Top right).

Click on Downloads.

Click to download your required zip file(s).

There are two ways of installing the WS Form plugin:

WordPress Admin

File Transfer

## WordPress Admin Installation

The easiest way to install the plugin is to upload the ZIP file provided when you made your purchase.

To install the plugin:

Click Plugins from the WordPress administration menu on the left side of your screen.

Click Add New at the top of your screen.

Click Upload Plugin at the top of your screen.

Choose the ZIP file of the plugin from your computer and click Install Now.

Click Activate to activate WS Form.

If the ZIP file extracts after it downloads, please re-zip the file and ensure it has a zip extension. The filename for should be:

ws-form.zip for the free version

ws-form-pro.zip for the PRO version.

For integrations the extension will also be .zip

## File Transfer Installation

If your WordPress installation does not support the Add New option (for example, FTP might be disabled), you can manually upload the unzipped plugin folder to:

/wp-content/plugins/

## WS Form Welcome Screen

When you activate WS Form you will be presented with the welcome screen.

The welcome screen asks a series of quick questions to get you started. Answer each of the questions, and WS Form will ensure the settings are configured to suit your experience level and also the theme you are using on your website.

## Additional Help

Learn more about licensing your software

Learn more about managing plugins

## Installation Troubleshooting

URL: https://wsform.com/knowledgebase/installation-troubleshooting/

WS Form is designed to work with without requiring any additional software or configuration to WordPress.

WS Form is designed to work with without requiring any additional software or configuration to WordPress.

If your WordPress hosting is not configured properly, you might receive the error message Whoops! Something went wrong. when you first use the plugin.

This occurs when WS Form is unable to access the WordPress REST API system. This will not only cause problems with WS Form but may cause other plugins or WordPress features to fail.

Here are some reasons for this error:

## Permalinks Incorrectly Configured

Your WordPress permalinks may not be configured correctly.

A first step would be to flush your permalink settings. To do this:

Click on Settings in the WordPress admin menu.

Click on Permalinks.

Click Save Changes at the bottom of the page.

For more information, please refer to the WordPress Permalinks help page for more information.

WS Form supports ugly and pretty style permalinks.

## Error Caused by Theme or Another Plugin

If your theme or another plugin is causing a PHP error it could prevent the WordPress REST API from working correctly. Check your server error log to see if any errors are occurring.

## Hosting Security Settings

Some hosting providers include security software that is designed to protect your website from hackers. Whilst this is definitely a good thing, sometimes that software can be incorrectly configured and cause requests to the WordPress API to fail.

Read our 403 Forbidden Error Message knowledge base article to learn more.

## REST API Restricted to Authenticated Users or Disabled

You may have a plugin installed that is restricting or disabling access to the WordPress REST API such as:

Disable REST API - You should whitelist the ws-form/v1 namespace in Settings for this plugin.

Clearfy - Set Remove REST API Links to Off in the Performance tab.

WS Form uses the namespace ws-form/v1. You should ensure this namespace is whitelisted for the WordPress REST API if your blocking plugin allows this.

## .htaccess File Misconfigured

Make sure that your .htaccess file is working correctly.

Read the WordPress htaccess help page for more information.

## Web Server Misconfigured

Make sure your web server is configured properly and that it is not serving the default web server welcome page (e.g. Apache welcome page) when you trying to access your front page.

Refer to the WordPress installation help page for more information.

If you are still experiencing problems, please contact our support team.

## InstaWP Integration

URL: https://wsform.com/knowledgebase/instawp/

With the InstaWP integration, you can launch WordPress sites using forms made in WS Form.

InstaWP is a toolkit for WordPress development that lets you create WordPress websites instantly, without the need for setup time. These websites are standard WordPress sites where you can easily add plugins, themes, and content. You also have the capability to access, preview, and customize your WordPress website according to your preferences.

With the InstaWP integration, you can launch WordPress sites using forms made in WS Form. This feature significantly improves the user experience when gathering the necessary information to build a site. Moreover, it opens up various integration possibilities and gives you the option to completely personalize email notifications and messages for new site creations.

## Tutorial

https://www.youtube.com/watch?v=PX7kN5Jckvc

## Demo

[ws_form id="13742"]

## Use Cases

The integration allows you to:

Create WordPress sites generated from specific or selected InstaWP templates.

Create 'From Scratch' WordPress sites using InstaWP configurations or by manually specify the WordPress and PHP version.

## Installation

The InstaWP plugin is free to download. Click here to download the integration.

The InstaWP plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the InstaWP plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the InstaWP tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Create an InstaWP Account

If you don't already have an account, register on InstaWP.

You can use coupon code WSFORM20 to get 20% off all annual plans!

## Create an InstaWP API Token

To create an API token:

Click on your Account Icon at the top of the InstaWP admin page, then click My Account.

Click API Tokens.

Enter a token name such as WS Form.

Ensure the read-write setting is checked.

Click Create to create the token.

Copy the provided API token to your clipboard.

## Connect WS Form to InstaWP

Connecting WS Form to InstaWP is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the InstaWP tab at the top of the page.

Enter your InstaWP API token. You can find this on the InstaWP API Tokens page.

Click Save Changes.

## Form Templates

The following form templates are included with the InstaWP integration. To access these templates, click on Add New in the WS Form admin and then click the InstaWP tab.

Site Templates

Template Selector

From Scratch

## Creating a Form Integrated With InstaWP

### Automatically

WS Form can create a form for an InstaWP endpoint in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a InstaWP form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the InstaWP tab at the top of the page.

Click on an InstaWP template to create a form. Note that if you have more than one team, the templates shown will reflect the InstaWP templates associated with the current team you are using in the InstaWP admin.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

### Manually

It is also possible to use any form created in WS Form and add an action so that you can make requests to create InstaWP sites.

#### Add an InstaWP Action

When editing your form, click the Actions  icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Create InstaWP Site from the Action pulldown.

Click Save & Close.

The OpenAI action settings depend on the Method selected.

### Template

If you choose an InstaWP Template or the Template Selector method, the following settings will appear.

#### Template Selector Field

This setting will only appear if the Template Selector method is chosen. Choose a field on your form to use for selecting a template. You can use the InstaWP Templates data source on a Select, Checkbox or Radio field to populate the field with the available templates in your account.

#### Is Shared

If checked, InstaWP will create a shared site. Share sites have the following properties:

A site name will be automatically generated, you cannot specify a custom site name.

The site cannot be set as reserved.

#### Opt-In Field

Optionally, choose a field on your form to act as an opt-in. If the user opts-in, the create site from template API request to InstaWP will be marked as has_subscribed.

#### Field Mapping

Use this setting to map the email field on your form to the InstaWP email field.

#### Site Name

If the Shared setting has been disabled, then you can optionally enter a custom site name. Site names can contain the following characters:

a-z

A-Z

0-9

Hyphen (-)

#### Is Reserved

If the Shared setting has been disabled, then you can use this setting to mark a site as Reserved.

#### Wait Until Site Created

If checked, WS Form will not run any further actions until InstaWP indicates that the site has been fully created. This ensure if a user clicks on the link to the site that it is fully installed and configured.

If you would rather just allow InstaWP to email the credentials to the user when the site is completed you can disable this setting.

#### Wait Timeout (Seconds)

Enter the duration in seconds that WS Form will wait for to determine if a site has been completed. This setting defaults to 120 seconds.

### From Scratch

#### Site Name

You can optionally enter a custom site name. Site names can contain the following characters:

a-z

A-Z

0-9

Hyphen (-)

If a site name is omitted, InstaWP will automatically generate a site name.

#### Configuration

You can choose an InstaWP configuration to determine the settings used for the newly created site. If this setting is not used you can manually set the WordPress and PHP versions.

#### WordPress Version

If you are not using an InstaWP configuration, use this setting to manually select the WordPress version that will be installed on the site.

#### PHP Version

If you are not using an InstaWP configuration, use this setting to manually select the PHP version that will be use on the site.

#### Team

If you have teams, you can use this setting to determine which team the site should be added to.

## Variables

The InstaWP integration adds the following variable that can be used in actions:

## Introduction

URL: https://wsform.com/knowledgebase/video-introduction/

Watch this brief video to learn more about the key features of WS Form PRO.

Watch this brief video to learn more about the key features of WS Form PRO.

https://www.youtube.com/watch?v=J6rNHUH3lHw

## Javascript Events

URL: https://wsform.com/knowledgebase/javascript-events/

WS Form fires a number of different events during the lifecycle of a form. You can use these to run your own javascript when the event fires.

WS Form fires a number of different events during the lifecycle of a form. You can use these to run your own javascript when the event fires.

All WS Form events are passed the following parameters:

event - Event object

form_object - The form object (Form configuration).

form_id - The form ID.

instance_id - The instance ID of the form on the page. This is an integer that begins with 1. To learn more about instances, click here.

form_el - The form element jQuery object

form_canvas_el - The form canvas element jQuery object

When using the WS Form WooCommerce extension, form_el will refer to the WooCommerce product form and form_canvas_el will refer to the form injected by WS Form.

Example of using the WS Form JavaScript are:

$(document).on('wsft-submit-before-ajax', function(event, form_object, form_id, instance_id, form_el, form_canvas_el) {

 // Debug
 console.log('Event type: ' + event.type + ' fired.');
 console.log('Form ID: ' + form_id);
 console.log('Instance ID: ' + instance_id);

 // Get FormData object from form element
 var form_data = new FormData(form_el[0]);
});

... where wsft-submit-before-ajax is the event type. In this example, the wsft-submit-before-ajax event fires immediately before we push the form data to our server side API.

Another example showing how to handle a lock event on the form. The form is locked when the form submit button is clicked to help prevent double clicks.

$(document).on('wsft-lock', function(event, form_object, form_id, instance_id) {

 alert('Form ID ' + form_id + ' was locked!');
});

## Events

The JavaScript events fired by WS Form at a document level are chronologically listed below:

Name
Description
Trigger

Rendered
This fires when a form has finished rendering.
wsft-rendered

Tab Clicked
This fires when a tab is clicked or is moved to using conditional logic.
wsft-tab-clicked

Submit Before
This fires prior to the form being submitted (when submit button is clicked).
wsft-submit-before

Save Before
This fires prior to the form being saved (when save button is clicked).
wsft-save-before

Validation Before
This fires prior to the form being validated.
wsft-validate-before

Validation After
This fires when form validation has finished.
wsft-validate-after

Validation Success on Submit
This fires when validation was successful on submit.
wsft-submit-validate-success

Validation Success on Save
This fires when validation was successful on save.
wsft-save-validate-success

Validation Fail on Submit
This fires when validation failed on submit.
wsft-submit-validate-fail

Validation Fail on Save
This fires when validation failed on save.
wsft-save-validate-fail

Submit
This fires when the form data is about to be processed for submission.
wsft-submit

Save
This fires when the form data is about to be processed for saving.
wsft-save

Lock
This fires when the form is locked, just prior to the data being posted on a submit or save.
wsft-lock

Submit Ajax Before
This fires just before the form data is submitted to the WS Form server side API after the Submit button is clicked.
wsft-submit-before-ajax

Save Ajax Before
This fires just before the form data is submitted to the WS Form server side API after the Save button is clicked.
wsft-save-before-ajax

Complete
This fires when the form submit or save is completed.
wsft-complete

Submit Complete
This fires when the form submit is completed.
wsft-submit-complete

Save Complete
This fires when the form save is completed.
wsft-save-complete

Success
This fires when the form submit or save is successful.
wsft-success

Submit Success
This fires when the form submit is successful.
wsft-submit-success

Save Success
This fires when the form save is successful.
wsft-save-success

Error
This fires when the form submit or save encounters an error.
wsft-error

Submit Error
This fires when the form submit encounters an error.
wsft-submit-error

Save Error
This fires when the form save encounters an error.
wsft-save-error

Actions Start
This fires when the form actions start to run on the client side.
wsft-actions-start

Actions Finish
This fires when the form actions finish on the client side.
wsft-actions-finish

Unlock
This fires when the form is unlocked.
wsft-unlock

Reset Before
This fires when a form reset starts (when reset button is clicked).
wsft-reset-before

Reset Complete
This fires when a form reset completes.
wsft-reset-complete

Clear Before
This fires when a form clear starts (when clear button is clicked).
wsft-clear-before

Clear Complete
This fires when a form clear completes.
wsft-clear-complete

## Keyword Blocklist Integration

URL: https://wsform.com/knowledgebase/keyword-blocklist-add-on/

The Keyword Blocklist integration includes over 1,300 categorized keywords designed to help block spam submissions.

The Keyword Blocklist integration includes over 1,300 categorized keywords designed to help block spam submissions. Keywords are grouped into the following categories:

Adult (On by default)

Crypto

Finance

Gambling

Legal

Pharmaceutical

Profanity (On by default)

Sales

SEO

URL Shorteners

Each category can be independently enabled or disabled to suit your needs.

## Installation

The WS Form Keyword Blocklist plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Keyword Blocklist plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Keyword Blocklist tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Keyword Blocklist Settings

The keyword blocklist integration is enabled by default. The Adult and Profanity lists are also enabled by default. To change the Keyword Blocklist Settings:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Keyword Blocklist tab at the top of the page.

Adjust the settings to suit your preferences.

Click Save Changes.

## Settings

### Enable

When checked, WS Form will check form submissions against the enable lists. If this setting is not check, none of the lists will be used.

### Lists

Toggle individual categories such as SEO or Finance to activate or deactivate them independently.

## Adding Additional Keywords

Additional keywords to clock can be added using the following features:

How to Block Form Submissions by Keyword

wsf_submit_block_keywords filter hook

## How to Identify the Triggered Keyword

The Keyword Blocklist integration normally marks a field as required when its content matches a blocked keyword, rather than revealing which keyword triggered the block. This is intentional and helps prevent spambots from identifying which keywords are being filtered.

If you need to test your keyword blocklist configuration, follow these steps:

Go to Form Settings.

Click the Spam tab.

Enable Keyword Blocklist.

In the Invalid Feedback Message setting, enter: Keyword blocked: #keyword

Click Save.

Publish or update your form if necessary.

When a blocked keyword is detected, the field will display an error message similar to:

Keyword blocked: blocked word

This allows you to quickly identify which keyword triggered the block while testing your form.

Once testing is complete, remember to remove #keyword from the Invalid Feedback Message setting to avoid exposing blocked keywords to users.

## Klaviyo Integration

URL: https://wsform.com/knowledgebase/klaviyo/

The Klaviyo integration lets you use WS Form to create forms that subscribe profiles in Klaviyo. You can create forms for Klaviyo lists in a single click!

The Klaviyo integration lets you use WS Form to create forms that subscribe profiles in Klaviyo. You can create forms for Klaviyo lists in a single click!

The Klaviyo integration requires WS Form PRO.

## Installation

The WS Form PRO Klaviyo integration plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the WS Form Klaviyo integration plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Klaviyo tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for Klaviyo

### Automatically

WS Form can create a form for any of your Klaviyo lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Klaviyo form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Klaviyo tab at the top of the page.

Click on any of your Klaviyo lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Klaviyo tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Klaviyo when a user saves or submits their form.

To add a Klaviyo action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Klaviyo List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Klaviyo action settings are as follows:

#### When Should This Action Run?

You can choose to run the Klaviyo action when the form is saved, submitted, or both.

#### Klaviyo List

Choose the Klaviyo list you would like profiles to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Source

Enter the source you would like to be added to each profile that is added to your Klaviyo list.

#### Email Opt-In Field

Use this setting to select which of your fields to act as the email opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### SMS Opt-In Field

Use this setting to select which of your fields to act as the SMS opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

You should have at least one Email or SMS opt-in field. Note that to use the SMS opt-in field you must first have SMS enabled on your account. Learn more.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Klaviyo. For example you would want to map your Email field to the Email field in Klaviyo.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Klaviyo field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Properties

Custom properties allow you to add key value pairs to a profile.

To add a key value pair:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a key name.

In the right-hand column, enter a value. WS Form variables are support, for example: #field(123).

Repeat this process for each key value pair you wish to add to a profile.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Klaviyo

As well as pushing form data with this integration, you can also retrieve profile data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a profile in Klaviyo.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Klaviyo from the Action To Populate From pull down.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Klaviyo fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Klaviyo template the field mappings will automatically be created for you.

## Laposta Integration

URL: https://wsform.com/knowledgebase/laposta/

The Laposta integration lets you push new subscribers using an action and create new forms from your lists in a single click on the add form page.

The Laposta integration lets you push new subscribers using an action and create new forms from your lists in a single click on the add form page.

## Installation

The Laposta plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Laposta plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Laposta tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Laposta

In order to use the integration, you need to connect it to Laposta. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Laposta tab at the top of the page.

Enter your API key.

If you do not have a Laposta account, you can create a new account here.

## Creating a Form for Laposta

### Automatically

WS Form can create a form for any of our Laposta lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Laposta form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Laposta tab at the top of the page.

Click on any of your Laposta lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Laposta tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Laposta when a user saves or submits their form.

To add a Laposta action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Laposta List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Laposta action settings are as follows:

#### When Should This Action Run?

You can choose to run the Laposta action when the form is saved, submitted, or both.

#### Laposta List

Choose the Laposta List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding custom fields in Laposta. For example you would want to map your Email field to the Email field in Laposta.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Laposta field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Laposta field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source (e.g. #blog_name) to the source field in CleverReach.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Laposta field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Laposta

As well as pushing form data with this integration, you can also retrieve subscriber data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Laposta.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Laposta from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Laposta fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Laposta template, the field mappings will automatically be created for you.

## LeadConnector Integration

URL: https://wsform.com/knowledgebase/leadconnector/

The LeadConnector integration connects WordPress with LeadConnector to sync form submissions and instantly create LeadConnector objects.

The LeadConnector integration seamlessly integrates WordPress with LeadConnector, allowing you to push new form submissions to LeadConnector objects using form actions or instantly generate WordPress forms from your LeadConnector objects with a single click. For example, you can automatically capture sales inquiries as new Contacts and Opportunities in LeadConnector.

Limitations The LeadConnector API V2 is currently unable to support:

Custom field population for Company (business) records.

Signature custom fields.

Textbox List custom fields.

external-tracking.js
Do not use this integration in conjunction with the LeadConnector external-tracking.js script. This script is not only a tracking script, it also adds object records and will result in duplicate record errors. Instead, use this integration in isolation. You can use the WS Form tracking features to map tracking data to LeadConnector.

## Demo

Use this download link to download a full example of creating a contact, company and opportunity from a single form.

Download Demo

## Installation

The LeadConnector plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the LeadConnector plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the LeadConnector tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to LeadConnector

In order to use the integration, you need to connect it to LeadConnector. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the LeadConnector tab at the top of the page.

Click Connect and follow the onscreen prompts

### Working Objects

Because of the number of objects in LeadConnector, you select the objects you want to work with on the settings page. Custom objects you create in LeadConnector are also included in this list. When the plugin is first installed, we select the most common objects for you such as Contacts, Companies and Opportunities.

To add or change the objects you want to work with, choose the objects from the select list on the LeadConnector settings page.

To select more than one object:

On a Mac, hold the Command key and click the object names

On a PC, hold the CTRL key and click the object names

Click Save after you have made any changes.

## Creating a Form for LeadConnector

### Automatically

WS Form can create a form for any of your LeadConnector objects in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a LeadConnector form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the LeadConnector tab at the top of the page.

Click on any of your working LeadConnector objects.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your object does not appear, click the refresh icon in the LeadConnector tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a LeadConnector object when a user saves or submits their form.

To add a LeadConnector action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add icon to add a new action.

Select Add to LeadConnector from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The LeadConnector action settings are as follows:

#### When Should This Action Run?

You can choose to run the LeadConnector action when the form is saved, submitted, or both.

#### Object

Select the working LeadConnector object you would like to push data to.

#### Object ID

Leave blank to create a new object record. Enter an object ID to update a particular record ID.

#### Opt-In Email (Optional)

Shown only for the Contact object.

Use this setting to select which of your fields to act as the email opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

If the checkbox on the form is checked by the user, the DND (Do Not Disturb) for Email setting in LeadConnector will be unchecked.

#### Opt-In Text Messages (Optional)

Shown only for the Contact object.

Use this setting to select which of your fields to act as the Text Messages opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

If the checkbox on the form is checked by the user, the DND (Do Not Disturb) for Text Messages setting in LeadConnector will be unchecked.

#### Opt-In Text Calls & Voicemails (Optional)

Shown only for the Contact object.

Use this setting to select which of your fields to act as the Calls & Voicemails opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

If the checkbox on the form is checked by the user, the DND (Do Not Disturb) for Calls & Voicemails setting in LeadConnector will be unchecked.

#### Contact ID

Shown only for Opportunity objects.

Use this setting to associate the opportunity with a contact. Enter the contact record ID. WS Form variables can be used in this field.

By default this is set to:

#leadconnector_contact_id

This assumes that you have another "Add to LeadConnector" action prior that creates a Contact object record. The #leadconnector_contact_id variable will contain the record ID of the previously created contact.

#### Pipeline: Stage

Shown only for Opportunity objects.

Use this setting to choose which pipeline and stage the opportunity will be added to.

#### Status

Shown only for Opportunity objects.

Use this setting to choose the initial status for an opportunity.

#### Monetary Value

Shown only for Opportunity objects.

Use this setting to choose the monetary value for an opportunity. WS Form variables can be used in this field, for example:

#ecommerce_cart_total

#### Source

Shown only for Contact and Opportunity objects.

The source setting is used to provide a text string describing the source for a contact or opportunity. This defaults to:

#blog_name: #form_label

You can change this to anything you wish and it can include WS Form variables.

#### Assigned User ID (Optional)

Shown only for Contact, Opportunity and custom objects.

This setting is used to assign a contact or opportunity to a LeadConnector user. Enter the User ID into this setting.

To obtain a user ID in LeadConnector:

Ensure you are in Agency View.

Click Settings.

Click Team.

Copy the User ID from a user (In the Email column).

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in LeadConnector. For example you would want to map your Email field to the Email field in LeadConnector.

To map a field:

Click the Add  icon at the bottom right of the Field Mapping setting.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding LeadConnector field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a LeadConnector field to any value you wish, including the use of WS Form variables. For example you might want to map a tracking variable to a custom field in LeadConnector.

To add a custom mapping:

Click the Add  icon at the bottom right of the Custom Mapping setting.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding LeadConnector field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Find Duplicates By

Shown only for Contact, Opportunity and custom objects.

The LeadConnector integration can detect duplicates by any of your object fields. When a duplicate is found, you can opt to either update the object using the newly submitted data, or do nothing. Use this setting to choose which LeadConnector field to deduplicate by. This field must be mapped in order for deduplication to work correctly.

#### If Duplicate Found

If a duplicate record is found, it will carry out the method selected here.

Update - Will update the record.

Ignore - Will not update the record.

#### Tags

Shown only for Contact objects.

LeadConnector allows you to tag contacts with lowercase tag names. WS Form variables can be used in tag names.

To add a tag:

Click the Add  icon at the bottom right of the Tags setting.

Enter your tag name, e.g. website form.

Repeat this process for each tag you wish to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Relationships

When a company, contact, opportunity, or custom object is created you can create relationships in LeadConnector that can be used to associate one object with another. Examples of associations in LeadConnector include:

Companies to Contacts

Opportunities to Contacts

To create a relationship:

Click the Add  icon at the bottom right of the Relationship setting.

In the Association column, choose the association you want to create.

In the ID From column, enter the record ID you want to use for the left side of the association.

In the ID To column, enter the record ID you want to use for the right side of the association.

Repeat this process for each relationship you want to create.

Click the Save button at the bottom of the sidebar to save your changes.

The ID From and ID To settings can include WS Form variables (see below).

## Variables

When the integration creates or finds a duplicate object, the object ID can be used in subsequent LeadConnector actions by using the following variables:

 

Variable
Description

#leadconnector_contact_id
ID of the last contact created.

#leadconnector_company_id
ID of the last company created.

#leadconnector_opportunity_id
ID of the last opportunity created.

#leadconnector_object_id
ID of the last record created (including custom objects).

#leadconnector_object_id_first
ID of the first record created (including custom objects).

This means that you can associate other objects with a previously created object (e.g. an opportunity related to a contact).

## Legal Field

URL: https://wsform.com/knowledgebase/legal/

The legal field is used to output a legal notice on your forms such as a privacy policy, terms and conditions or disclaimer.

The Legal field is used to output a legal notice on your forms such as a privacy policy, terms and conditions or disclaimer. You can enter your own legal notice or automatically create content using a third-party service such as Termageddon.

## Demo

## Adding a Legal Field

To learn how to add, edit, clone, move, resize, offset, or delete a legal field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

The label is used solely for identifying the legal field when editing your form. The label is not shown to the website visitor.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form.

In order to validate the field, the user is required to scroll to the bottom of the legal agreement.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Source

Select the source for your legal notice. The available options are:

Termageddon (U.S. only)

Own Copy

### Termageddon

Termageddon generates required policies for websites and apps and updates them whenever the laws change.

Disclaimer: WS Form has no control over and accepts no liability in respect of this service and content.

To use Termageddon as your legal notice source, follow these directions:

Register with Termageddon

Create a policy

View the embed code

Copy the key from the Termageddon embed code into the legal field Key setting.

Choose whether or not to hide the policy title using the Hide title checkbox

Click Save

Your Termageddon policy will now appear on your form!

### Own Copy

If you choose Own Copy, use the visual editor to enter your own legal notice.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

## Advanced

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## License Activity Logging

URL: https://wsform.com/knowledgebase/license-activity-logging/

How to enable license activity logging in WS Form Pro to diagnose unexpected deactivations.

WS Form includes an optional license activity log that records every significant interaction with the license server. This includes activations, deactivations, remote checks, and most importantly, every time the license status is cleared or set to inactive.

Logging is disabled by default and has no effect on live sites unless explicitly enabled. If it fails for any reason (such as incorrect file permissions), it does so silently without producing errors or affecting your site.

## When to use this feature

Enable logging when you need to diagnose why a license is being deactivated unexpectedly. Common scenarios where this helps:

The license activates successfully but later shows as unlicensed for no apparent reason

You are using a WSF_LICENSE_KEY constant in wp-config.php and the key keeps being cleared

Remote API requests to the license server are failing due to hosting firewall rules, network restrictions, or SSL verification issues. The log will capture the exact error returned

You suspect a cron job or third-party plugin is triggering a license check at an unexpected time

Note: Some hosting environments restrict outbound HTTP requests or enforce strict SSL verification. If a remote license check fails for network reasons, WS Form will not deactivate your license immediately, but the log will show the failure so you can identify whether a network issue is contributing to the problem.

## Enabling logging

Logging is controlled by the wsf_licensing_log filter hook. Add the following code to enable it:

add_filter( 'wsf_licensing_log', '__return_true' );

## Where to add the filter

The filter can be added in any of the following locations depending on your setup.

Active theme's functions.php
The quickest option for temporary testing. Open your active theme's functions.php and add the filter there. Note that logging will stop if the theme is switched.

Code snippet plugin
If you use a plugin such as WPCode or Code Snippets, add the filter as a new PHP snippet. This is a good option if you want logging to persist regardless of theme changes.

## Log file location

Entries are written to:

wp-content/uploads/ws-form/licensing/licensing.log

This path is inside the WordPress uploads directory structure used by WS Form. You can override it using the wsf_licensing_log_path filter:

add_filter( 'wsf_licensing_log_path', function( $path ) {
 return 'licensing/custom-path';
} );

The path is relative to the WS Form uploads directory. The directory will be created automatically if it does not already exist, provided the web server has write permissions.

## What gets logged

Each log entry includes a UTC timestamp, the site URL, the calling method, and a description of the event. Events that are always recorded:

Activation attempts (manual and silent via constant)

Activation success or failure, including the specific error code returned by the server

Deactivation attempts and outcomes

Remote license checks, including failures due to network errors

Every time license_activated is set to false, with the reason

Every time the license expiry is cleared (reset_license_expiry)

Detection and removal of the WSF_LICENSE_KEY constant

Transient expiry and refresh cycles

A typical log file looks like this:

[2025-06-01 09:14:02] [https://example.com] [caller:transient_check] Constant license key detected (WSF_LICENSE_KEY), attempting silent activation.
[2025-06-01 09:14:03] [https://example.com] [caller:activate] activate() called. silent=true
[2025-06-01 09:14:04] [https://example.com] [caller:activate] license_activated set to true: activation succeeded.
[2025-06-01 09:14:04] [https://example.com] [caller:set_license_expiry] License expiry set to: 2026-06-01 00:00:00
[2025-06-02 03:00:01] [https://example.com] [caller:transient_check] License transient expired or missing. Running remote license check.
[2025-06-02 03:00:02] [https://example.com] [caller:check] check() failed: network error or non-200 response.
[2025-06-02 03:00:02] [https://example.com] [caller:transient_check] Remote license check failed (network error or invalid response). Aborting transient check.

The last two lines in the example above indicate a network issue. The remote check failed but the license was not cleared. If you see license_activated set to false followed by a network failure, that points to a different code path and the caller field will identify it precisely.

## File permission requirements

For logging to work, the web server process must have write access to the wp-content/ws-form/licensing/ directory. If this directory does not exist, WS Form will attempt to create it on first use.

If the directory cannot be created or written to, logging fails silently. No error is shown in the WordPress admin, no notice is logged to debug.log, and your site continues to function normally. This is intentional. The logging feature must never affect a live site.

Warning: If logging appears to be enabled but no log file is being created, check that the web server user has write permissions on the wp-content/ws-form/ directory.

## Disabling logging

Remove or comment out the add_filter line you added earlier. The log file itself is not removed automatically. You can delete licensing.log manually once you have finished diagnosing the issue.

Warning: Do not leave logging enabled on a production site indefinitely. The log file grows with every license-related request and is not automatically rotated or pruned.

## Licensing

URL: https://wsform.com/knowledgebase/licensing/

How to license WS Form and where to find your license keys if you lose them.

Once you have purchased the plugin, you will be provided with a license key and a link to download a ZIP installation file both in your web browser and in the order confirmation email.

Licensing the plugin ensures you will receive continued software updates and support.

Agency or Freelance License: If you have purchased an Agency or Freelance license, enter the key for WS Form PRO or the individual integration, not the license key provided for the Agency or Freelance product. The Agency or Freelance license is only used for renewing your license.

Note: If you have moved WS Form PRO to a different hostname, you may need to change the hostname the license key is associated with. Learn how to use a license key on a different hostname.

## Licensing WS Form and Integrations

To license WS Form or an integration:

Click WS Form from the WordPress administration menu on the left side of your screen.

Click Settings from the same menu.

Click the License or appropriate integration tab.

Enter your license key and click Activate.

## Finding Your License Key

Your license key(s) is provided in the email receipt you are sent.

To find your license key:

Click Purchase History.

Click View Licenses next to the order you placed.

Click the key icon to view your license key.

## Changing Sites for a License Key

Personal license keys can be licensed to a single hostname. Freelance license keys can be licensed to 5 hostnames. Agency licenses keys can be licensed to unlimited hostnames.

To change which hostnames a key is licensed to:

Log in to https://wsform.com

Click on My Account

Click on Purchase History

Click on View Licenses

Click on Manage Sites

## Renewing a License Key

WS Form will send you an email reminder when it is time to renew a license key.

To renew a license key at any other time:

Log in to https://wsform.com

Click on My Account

Click on Purchase History

Click on View Licenses

Click on Renew License

You can also manually renew a license key.

## Upgrading a License Key

Personal licenses can upgrade to Freelance and Agency licenses. Freelance licenses can upgrade to Agency licenses.

To upgrade a license key:

Log in to https://wsform.com

Click on My Account

Click on Purchase History

Click on View Licenses

Click on View Upgrades

## Limit a Number Field to Whole Numbers

URL: https://wsform.com/knowledgebase/limit-a-number-field-to-whole-numbers/

HTML number fields enable a user to enter any floating point number. This tutorial explains how to limit this to whole numbers.

HTML number fields enable a user to enter any floating point number. Number fields have a variety of validation features such as min, max and step but these are only assessed when the form is submitted. Therefore you could set a step of 0 (which means no decimal places) but the user could still enter '1234.56' and that won't be trapped until the form is submitted.

A trick to getting a number field to only allow the entry of a whole number is as follows.

## Demo

## Tutorial

First, edit the number field by clicking the settings icon.

Next click on the Advanced tab in the settings sidebar and then scroll down to 'Custom Attributes'.

Tip: Click the expand icon (top right) to make the sidebar the full width of the page.

Click the add icon to add a new custom attribute.

In the 'Name' column enter:

onkeypress

In the 'Value' column enter:

return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : (event.charCode >= 48 && event.charCode <= 57)

The finished custom attribute will look like this:

Then click Save at the bottom of the sidebar.

You should now find that the number field only allows a whole number to be entered.

The custom attributes setting allows you to add additional attributes to any field. In this case, it adds an onkeypress attribute to the field which checks the charCode of the keypress. If the keypress is a numeric character, it is added to the field, otherwise the character is discarded.

 

 

## Linking to Tabs on a Form

URL: https://wsform.com/knowledgebase/linking-to-tabs-on-a-form/

It is possible to link directly to tabs on a form. There are two methods for doing this.

It is possible to link directly to tabs on a form. There are two methods for doing this:

## Query String Parameter

By adding a query string parameter to your URL to you can link directly to a tab on your form.

The format of the query string is as follows:

wsf_tab_index_<form_id>=<tab_index>

Where:

form_id is the ID the form containing the tab.

tab_index is the index of the tab you want to open by default. 0 = The first tab, 1 is the second tab and so on.

For example, if your form ID is 123 and you want to open the 2nd tab (this would be index: 1), your URL might look like:

https://mysite.com/my-form-page/?wsf_tab_index_123=1

## Conditional Logic

Conditional logic can also be used to open any tab of your form. This is done by clicking the tab.

An example of opening the 2nd tab on a form when form loads is shown below:

This same methodology can be use with any other IF condition (e.g. if a custom button is clicked).

## Mailchimp Integration

URL: https://wsform.com/knowledgebase/mailchimp/

The Mailchimp integration lets you add contacts using an action, pull contact data, and create new forms from your lists.

The Mailchimp integration lets you push new contacts using an action, pull contact data using the WS Form autocomplete feature, and create new forms from your lists in a single click on the add form page.

## Installation

The Mailchimp plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Mailchimp plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Mailchimp tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Mailchimp

In order to use the integration, you need to connect it to Mailchimp. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Mailchimp tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Mailchimp account, you can create a new account here.

## Creating a Form for Mailchimp

### Automatically

WS Form can create a form for any of our Mailchimp lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Mailchimp form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Mailchimp tab at the top of the page.

Click on any of your Mailchimp lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Mailchimp tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Mailchimp when a user saves or submits their form.

To add a Mailchimp action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Mailchimp List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Mailchimp action settings are as follows:

#### When Should This Action Run?

You can choose to run the Mailchimp action when the form is saved, submitted, or both.

#### Mailchimp List (Audience)

Choose the Mailchimp list (Audience) you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Status

Select the contact subscriber status you would like new contacts added as. Choose from:

Subscribe

Unsubscribed

Cleaned

Pending (Use this status to require a double opt-in from the user. You also need to ensure double opt-in is enabled on the list)

#### VIP

If you would like contacts to be marked as VIP.

#### Email Type

Select the email type you would like to sign up contacts for. We recommend leaving this as HTML..

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Mailchimp. For example you would want to map your Email field to the Email field in Mailchimp.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Mailchimp field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Interest Mapping

Interest mapping tells WS Form which of your form fields relate to the interest fields in Mailchimp.

To map a field:

Click the Add  icon at the bottom right of the interest mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Interest mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields and should use the interest ID (not label) as the value mapped to MailChimp. If you use the automatic method above, WS Form PRO will automatically build interest mapping options for you.

#### Tags

Tags are labels you create to help organize your contacts. You can add any number of tags to a member. If an existing member uses your form, WS Form will update the tags to include the tags added to your form, retaining any existing tags.

To add a tag:

Click the Add  icon at the bottom right of the tags section.

Enter the tag name.

Repeat this process for each tag

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Mailchimp

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Mailchimp.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Mailchimp from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Mailchimp fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Mailchimp template the field mappings will automatically be created for you. You can also map tags (Mailchimp interests).

## MailerLite Integration

URL: https://wsform.com/knowledgebase/mailerlite/

The MailerLite integration lets you create forms for creating new subscribers in your MailerLite groups in a single click.

The MailerLite integration lets you add subscribers using an action, pull subscriber data using the WS Form autocomplete feature, and create new forms for your MailerLite groups in a single click on the add form page.

## Installation

The MailerLite plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the MailerLite plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the MailerLite tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to MailerLite

In order to use the integration, you need to connect it to MailerLite. Connecting is easy!

### MailerLite Users (New)

Copy your MailerLite API token. To obtain your token key, go to: https://dashboard.mailerlite.com/integrations/api.

Click WS Form in the WordPress administration menu.

Click Settings.

Click the MailerLite tab at the top of the page.

Choose Version 2 for MailerLite API Version.

Enter your MailerLite API token.

Click Save.

### MailerLite Classic Users (Old)

We recommend upgrading to a MailerLite (New) account. If you wish to connect as a MailerLite Classic user, you can use these steps:

Copy your MailerLite API key. To obtain your API key, go to: https://app.mailerlite.com/integrations/api/.

Click WS Form in the WordPress administration menu.

Click Settings.

Click the MailerLite tab at the top of the page.

Choose Version 1 for MailerLite API Version.

Enter your MailerLite API key.

Click Save.

If you do not have a MailerLite account, you can create a new account here.

## Creating a Form for MailerLite

### Automatically

WS Form can create a form for any of your MailerLite groups in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a MailerLite form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the MailerLite tab at the top of the page.

Click on any of your MailerLite group (or select No Group) to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your group does not appear, click the refresh icon in the MailerLite tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to MailerLite when a user saves or submits their form.

To add a MailerLite action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to MailerLite from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The MailerLite action settings are as follows:

#### When Should This Action Run?

You can choose to run the MailerLite action when the form is saved, submitted, or both.

#### MailerLite Group

Choose the MailerLite group you would like subscribers to be added to. If you have created a new group since viewing this screen, you can click the refresh icon to retrieve the new group.

Choose No Group if you do not want subscribers to be added to a group.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in MailerLite. For example, you would want to map your Email field to the Email field in MailerLite.

The Email and Name fields are required.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding MailerLite field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a MailerLite field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to a source field in MailerLite, or perhaps set an ID field to the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding MailerLite attribute.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using MailerLite

As well as pushing form data with this integration, you can also retrieve subscriber data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a subscriber in MailerLite.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose MailerLite from the Action To Populate From pull-down menu.

Select the group you wish to populate data from in the List To Populate From pull-down menu.

Map the MailerLite fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a MailerLite template, the field mappings will automatically be created for you. You can also map tags.

## MailPoet Integration

URL: https://wsform.com/knowledgebase/mailpoet/

The MailPoet integration lets you use WS Form to create forms that subscribe or unsubscribe contacts in MailPoet.

The MailPoet integration lets you use WS Form to create forms that subscribe or unsubscribe contacts in MailPoet. You can create forms for MailPoet lists in a single click!

The MailPoet integration requires WS Form PRO.

https://www.youtube.com/watch?v=YEJdYbRR6gk

You can learn more about MailPoet WordPress plugin by clicking here.

## Installation

The WS Form PRO MailPoet integration plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the WS Form MailPoet integration plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the MailPoet tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for MailPoet

### Automatically

WS Form can create a form for any of your MailPoet lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a MailPoet form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the MailPoet tab at the top of the page.

Click on any of your MailPoet lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the MailPoet tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to MailPoet when a user saves or submits their form.

To add a MailPoet action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a MailPoet List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The MailPoet action settings are as follows:

#### When Should This Action Run?

You can choose to run the MailPoet action when the form is saved, submitted, or both.

#### MailPoet List

Choose the MailPoet list you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Method

Select the method you would like to use when the form is submitted. Choose from:

Subscribe - This will add the contact and subscribe them to the selected MailPoet list

Unsubscribe - This will remove the contact from the selected MailPoet list

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in MailPoet. For example you would want to map your Email field to the Email field in MailPoet.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding MailPoet field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Send Confirmation Email

If this is not checked, the sending of confirmation email will be disabled. It is strongly recommended to keep this setting checked so that MailPoet settings for sign-up confirmation are respected. Unchecking this setting might lead the subscriber being added as unconfirmed.

#### Schedule Welcome Email

If this is not checked, the sending of the welcome email will be disabled.

#### Skip Subscriber Notification

If this is not checked, the sending of the admin notification email will be disabled.

## Populate Forms Using MailPoet

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in MailPoet.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose MailPoet from the Action To Populate From pull down.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the MailPoet fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a MailPoet template the field mappings will automatically be created for you.

## Mailster Integration

URL: https://wsform.com/knowledgebase/mailster/

The Mailster integration lets you use WS Form to create forms that subscribe or unsubscribe contacts in Mailster. You can create forms for Mailster lists in a…

The Mailster integration lets you use WS Form to create forms that subscribe or unsubscribe contacts in Mailster. You can create forms for Mailster lists in a single click!

https://www.youtube.com/watch?v=TreZ_7-imNg

You can learn more about Mailster WordPress plugin by clicking here.

## Installation

The WS Form PRO Mailster integration plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the WS Form Mailster integration plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Mailster tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for Mailster

### Automatically

WS Form can create a form for any of your Mailster lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Mailster form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Mailster tab at the top of the page.

Click on any of your Mailster lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Mailster tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Mailster when a user saves or submits their form.

To add a Mailster action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Mailster List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Mailster action settings are as follows:

#### When Should This Action Run?

You can choose to run the Mailster action when the form is saved, submitted, or both.

#### Mailster List

Choose the Mailster list you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Method

Select the method you would like to use when the form is submitted. Choose from:

Subscribe - This will add the contact and subscribe them to the selected Mailster list.

Unsubscribe - This will remove the contact from the selected Mailster list identified by their email address.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Mailster. For example you would want to map your Email field to the Email field in Mailster.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Mailster field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Mailster field to any value you wish, including the use of WS Form variables.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Mailster field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tags are labels you create to help organize your subscribers. You can add any number of tags to a subscriber. Tags are added by choosing a field on your form such as a checkbox field. The tag ID must be mapped to the value of the field.

To add a tag:

Click the Add  icon at the bottom right of the tag mapping section.

Choose the WS Form field containing the tags.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tags

As well as mapping WS Form fields to subscriber tags, you can also add tags by name using this setting. If a tag doesn't already exist in Mailster it will be automatically created before being assigned to the subscriber.

To add a tag:

Click the Add  icon at the bottom right of the tags section.

Enter the tag name. WS Form variables can be used in this setting.

Repeat this process for each tag you wish to assign to the subscriber.

Click the Save button at the bottom of the sidebar to save your changes.

#### Double Opt-In

If this is checked, an email will be sent to subscriber when then form is submitted. The email contains a link. When the link is clicked, the subscriber will then be set as subscribed. We recommend using this setting.

#### Overwrite Existing Subscriber

If this is checked and a subscriber is added with an email address that already exists, the subscriber data will be overwritten.

## Populate Forms Using Mailster

As well as pushing form data with this integration, you can also retrieve contact data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Mailster.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Mailster from the Action To Populate From pull down.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Mailster fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Mailster template the field mappings will automatically be created for you.

## Make a Field Read-Only

URL: https://wsform.com/knowledgebase/make-a-field-read-only/

Making a form input field read-only means it cannot be modified, however, a user can tab to it, highlight it, and copy the text from it.

Making a form input field read-only means it cannot be modified, however, a user can tab to it, highlight it, and copy the text from it. A form will still submit an input field that is read-only.

To make a field read-only in WS Form, follow these simple steps:

Click the settings icon on the field you want to make read-only.

Click the Advanced tab in the sidebar.

Under the Restrictions section check the Read Only checkbox.

Click Save & Close.

Note that the Read Only checkbox is only available on field types that support that feature. Also, if you have a field set as Required this option will not appear, so ensure that setting is unchecked if you want to change a field to be read-only.

 

## Make AI Request Action

URL: https://wsform.com/knowledgebase/make-ai-request-action/

The Make AI Request action lets you connect Anthropic, Google, or OpenAI to your forms so users can instantly generate text or images directly within fields li…

Note: This feature requires WordPress 7

The WS Form Make AI Request action can be used to make a request to Anthropic, Google or OpenAI to generate content such as text or images. This content can then be used directly in your form such as in a Text Area or File Upload field.

Example use cases include:

Produce text and image content when creating a post using the post management integration.

Provide the ability to improve copy in a text area field using instructions (e.g. Fix my grammar!).

Create an avatar image when using the user management integration.

Question and answer capability on a support page

### Configuring Connectors

In order to use the Make AI Request action you will need to configure at least one AI connector in WordPress such as Anthropic, Google or OpenAI.

To do this:

Click on Settings > Connectors from the WordPress administration menu.

Click the Install button for Anthropic, Google and/or OpenAI and enter your API keys.

Click Save.

WordPress will show Connected when the provider is successfully connected.

Once you have completed the step above a new Create from AI template will appear in the WS Form Add Form admin page and you will also be able to use the Make AI Request action.

## Demo Templates

WS Form includes demo templates to get you started. These show how the Make AI Request action can be used to create text and image content. To access those demos:

Click on WS Form > Add Form from the WordPress admin menu.

Click on the AI tab.

Click Use Template on one of the demo templates.

Click Preview to test the form.

## Tutorial

Here is how to create a basic form that would take input from a Text Area field and use it as a prompt to generate some output text.

### Create a Blank Form

First we'll create a blank form.

Click on WS Form > Add New.

Click Use Template on the Blank form.

### Add Fields

For this tutorial, we're going to add three fields. A Text Area field for the input, a Custom Button that when clicked will make the AI request, and another Text Area field to hold the output of the AI request.

Drag these fields to your form and label them appropriately.

### Create the Make AI Request Action

Next we need to add the Make AI Request Action. To do this:

Click the Actions icon at the top of the layout editor.

Click the Add icon  .

Choose Make AI Request from the Action setting.

Configure the action by choosing the Prompt Field and Output Field from your form.

Click Save & Close.

You will noticed that the When Should This Action Run? setting has neither checkbox checked. This is because we recommend using conditional logic to run the Make AI Request action when a custom button is clicked. This ensures the AI requests run without submitting the form and keeps the user on the form while they interact with it.

### Add Conditional Logic to the Custom Button

To run the Make AI Request action when the Generate Text custom button is clicked, we are going to use conditional logic.

Click the Conditional Logic icon at the top of the layout editor.

Click the Add icon  .

Add the following condition:IF [Generate Text] [Clicked] THEN [Action: Make AI Request] [Run Immediately]

Click Save & Close.

### Preview the Form

Click the Preview button at the top of the layout editor to test the form. Enter a prompt, such as:

Write a haiku about WordPress.

... then click the Generate Text button. WS Form will then use the WordPress AI Client SDK to make an API request to your preferred AI provider and will place the result in the Generated Text field.

## Settings

The Make AI Request action settings depend on the Type setting selected.

### Text

The Text action settings are as follows:

#### Prompt Type

There are two ways of obtaining input:

Field

Mask

##### Prompt Field

If you choose the Field type, you simply choose a field on your form to use for the input. You can choose any text based field such as a Text or Text Area field.

##### Mask

If you choose the Mask method you can create an input mask and use WS Form variables to dynamically insert field variables. See Input Mask below.

#### Input Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Input Mask

Use the input mask to create a custom prompt and use WS Form variables to dynamically insert field variables. This is particularly useful if you are developing prompt engineering.

The following is a conversation between an Agent and a Customer. The agent will attempt to diagnose the problem and suggest a solution, whilst refraining from asking any questions related to PII. Instead of asking for PII, such as username or password, refer the user to the help article wsform.com/knowledgebase

Customer: #field(123)
Agent:

In the above example mask, the pre-amble provides context about the prompt. We then insert the customers question from field ID 123 into that prompt.

#### Output Field

Choose the field to use for the output. This will typically be a Text Area field on your form. The output field can also be configured as the same field as your input field.

#### Use Output Mask

If checked, an Output Mask field will appear allowing you to finely control the output that is injected into the Output Field. You can use WS Form variables in the mask. Use #output to inject the output anywhere in the mask.

#### Trim Output

If checked, the completion will be trimmed.

#### Apply WPAutoP to Output

wpautop is a WordPress function that automatically adds paragraph and line break tags to the text content of a post or page, to properly format the text and make it easy to read on the website.

If checked, WS Form will apply wpautop to the output so that it can be used in fields such as HTML and Text Editor field types.

#### Temperature

The Temperature setting is used to adjust how much of a random element is introduced into the output generated by the AI model. A lower completion temperature indicates that the model should be more conservative in its output, while a higher temperature indicates that the model should be more creative with its output.

#### Model Preference

It is possible to specify preferences for which model is used with the action runs.

Click the Add icon  .

Choose which provider and model you would like to use for the request.

Repeat this for each provider and model you wish to add.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. Longer timeouts may be required for longer or more complex AI requests.

### Image

The Image action settings are as follows:

#### Prompt Type

There are two ways of obtaining input:

Field

Mask

##### Prompt Field

If you choose the Field type, you simply choose a field on your form to use for the input. You can choose any text based field such as a Text or Text Area field.

##### Mask

If you choose the Mask method you can create an input mask and use WS Form variables to dynamically insert field variables. See Input Mask below.

#### Input Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Input Mask

Use the input mask to create a custom prompt and use WS Form variables to dynamically insert field variables. This is particularly useful if you are developing prompt engineering.

#### Output Field

Choose the field to use for the output. This will typically be a File field on your form. The file field must be configured to use DropzoneJS.

#### Image Count

Choose the number of images to create (max 10).

#### Model Preference

It is possible to specify preferences for which model is used with the action runs.

Click the Add icon  .

Choose which provider and model you would like to use for the request.

Repeat this for each provider and model you wish to add.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. For longer or more complex AI requests, you may need to set longer timeouts.

## Variables

The Make AI Request action introduces the following variables for use in actions:

## Make Integration

URL: https://wsform.com/knowledgebase/make/

The Make WS Form integration allows you to integrate form submissions with thousands of apps.

The Make WS Form integration allows you to integrate form submissions with thousands of apps. Make was formerly called Integromat.

## Installation

The WS Form Make plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Make plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Make tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

Note: You will require one published form and at least one submission in order to create a Make scenario.

Note: The WordPress REST API must be enabled and accessible to Make in order for this integration to work. Make pulls data from WS Form and therefore it must have access to your website.

### Adding the WS Form Make App

If you don't already have a Make account, create one here.

Go to the WS Form app invitation page at Make.com

Click Install

Choose the organization to install the app on

Click Install

### Creating a Scenario

To create a WS Form scenario:

In the Make sidebar, click Scenarios.

Click Create a new scenario.

Search for WS Form, then click the Form Submission trigger.

Click Add to create a new connection.

Enter the API URL and API Key from your Make settings form in WS Form PRO:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Make tab at the top of the page.

Copy and paste the API URL and API Key into the Make dialog. Ensure you do not copy and paste any whitespace.

Click Save.

Choose the published Form you want to check for submissions from.

Click Ok.

Click Run Once to test the scenario. If you have submitted a form, the data will be retrieved.

## Fields

In addition to your form fields, the following submission fields are made available to Make for use in filters or mappings:

Identifier
Name
Description

id
ID
A unique identifier for the record. If a form is saved, this will be prefixed with -<count_submit> where count_submit is a number representing the number of times the form has been saved. This ensures zaps are re-assessed when a save occurs.

submit_id
Submission ID
The ID of the WS Form submission.

form_id
Form ID
The ID of the WS Form form.

hash
Hash
The hash (session ID) of the WS Form submission.

duration
Duration
The time it took in seconds from the initial form render to the last save or submit.

count_submit
Count
The number of times the form was saved or submitted.

status
Status
The status of the submission. draft represents an In Progress (saved) submission. publish represents a completed submission.

preview
Preview
A true or false value indicating if the form was saved or submitted in preview mode.

spam
Spam Level
A true or false value indicating if the form was saved or submitted in preview mode (Blank if no spam level available).

date_added
Date Added
The date / time the submission was created.

date_updated
Date Updated
The date / time the submission was updated.

date_expire
Date Expires
The date / time the submission will be purged (Blank for no expiry).

admin_url
Admin URL
The URL to view the submission in the WordPress admin.

## Managing Taxonomy Terms with Post Management

URL: https://wsform.com/knowledgebase/managing-taxonomy-terms-with-post-management/

The Post Management integration allows you to set WordPress taxonomy terms on posts as well as populate a form field with term values.

The Post Management integration allows you to set WordPress taxonomy terms on posts as well as populate a form field with term values.

## What is a Taxonomy?

In WordPress, a Taxonony is used to group and organize content, such as posts, pages, and custom post types. The most common built-in taxonomies are categories and tags, which help classify content in a logical structure.

## What is a Term?

Within a taxonomy, there are individual Terms, which are the specific labels or names you assign to a piece of content. For example:

Category (Taxonomy)

Health (Term)

Technology (Term)

Travel (Term)

Custom taxonomies can also be created to tailor content organization to specific needs, providing flexibility for developers and site owners to build more intuitive and structured websites.

## Creating a Field for Terms

The the most popular field types used for allowing a user to pick a term are:

Select

Checkbox

Radio

A Hidden field containing a term ID value can also be used.

This tutorial explains how to configure a field for use with terms, how to assign terms to a post and how to populate a form field with the term(s) assigned to a post.

### Configuring the Field

#### Demo

The example select field above is configured as follows. It is a similar configuration for checkbox and radio fields.

#### Basic Tab

Configure the field to use Select2. Select2 enables the user to search for terms and the multiple setting shows those terms as pills in the field.

Multiple: Checked

Select2: Checked

#### Options Tab

Use the terms data source to populate the field dynamically with terms from one or more taxonomies.

Data Source: Terms

Filter By Taxonomy: Your chosen taxonomy

#### Options Tab - Column Mapping

Set the column mapping to determine which data grid columns are used for labels, values and action variables. The action variables column mapping tells WS Form which column to use when data is pushed to the post management action. It must be set to ID.

Labels: Name (Shown to the user)

Values: ID

Action Variables: ID (Used for the Post)

#### Summary

Whichever field type you choose, you must ensure the value passed to the Post Management action is one or more Term IDs.

## Adding Terms to a Post

Adding terms to a post is achieved by using the Post Management action.

To set terms on a post, first create or edit the Post Management action as follows:

Click the Actions icon at the top of the layout editor.

Click the settings icon next to the Post Management action. Learn how to create a Post Management action.

Scroll down to the Term Mapping and Terms section.

### Term Mapping

The Term Mapping setting allows you to add a term to a particular taxonomy from a WS Form field. To add a mapping:

Click the add icon below the setting.

In the Form Field setting, choose the field on your form that contains term IDs.

In the Taxonomy setting choose the taxonomy you want to set when the post is added or updated. This should be the taxonomy that the terms in the Form Field relate to.

### Terms

It is also possible to manually select Terms to apply to the post being added or updated. To add a term:

Click the add icon below the setting.

Search for a term name.

Click the term name to add it.

## Populating a Form Field

Populating a form field with the term(s) assigned to a post is achieved by using the Populate Using Action settings.

To do this:

Click the Form Settings  icon at the top of the layout editor.

Click the Data tab.

Ensure your Data tab is configured to populate the form from a post.

Enable the Populate Using Action checkbox.

Choose Post Management under Action to Populate From.

Choose a Post ID to populate from. Learn how to populate a form with post data.

Under Term Mapping choose any fields on your form that contain terms.

WS Form will then populate the chosen fields with terms that are assigned to the selected Post ID.

## Manipulate Submission Data Using WordPress Filter Hooks

URL: https://wsform.com/knowledgebase/manipulate-submission-data-using-wordpress-filter-hooks/

When WS Form read or writes submission meta data, it can be filtered using WordPress filter hooks.

When WS Form read or writes submission meta data, it can be filtered using WordPress filter hooks.

The filter hooks are:

wsf_submit_meta_update($meta_value, $field_id)

wsf_submit_meta_read($meta_value, $field_id)

These filters enable you to modify meta values before they are written to the database (i.e. when a form is submitted), and modify meta values when they are read from the database (e.g. when a submission is viewed).

## Update

When WS Form writes submission meta data to the database, it passes through this filter hook:

wsf_submit_meta_update($meta_value, $field_id)

$meta_value is the value being written.

$field_id is the ID of the field on your form.

An example of manipulating meta values using this filter hook is shown below:

// Add filter for handling submit meta updates
add_filter('wsf_submit_meta_update', 'wsf_submit_meta_update_callback', 10, 2);
// Hook function for wsf_submit_meta_update filter
function wsf_submit_meta_update_callback($meta_value, $field_id) {
 // Switch by field ID
 switch($field_id) {
 // Field ID 123 (Change this to your field ID)
 case 123 :
 // In this example, we'll convert the meta_value to upper case
 // Use your own function here
 $meta_value = strtoupper($meta_value);
 break;
 }
 return $meta_value;
}

## Read

When WS Form reads submission meta data from the database, it passes through this filter hook:

wsf_submit_meta_read($meta_value, $field_id)

$meta_value is the read value from the database.

$field_id is the ID of the field on your form.

An example of manipulating meta values using this filter hook is shown below:

// Add filter for handling submit meta reads
add_filter('wsf_submit_meta_read', 'wsf_submit_meta_read_callback', 10, 2);
// Hook function for wsf_submit_meta_read filter
function wsf_submit_meta_read_callback($meta_value, $field_id) {
 // Switch by field ID
 switch($field_id) {
 // Field ID 123 (Change this to your field ID)
 case 123 :
 // In this example, we'll convert the meta_value to lower case
 // Use your own function here
 $meta_value = strtolower($meta_value);
 break;
 }
 return $meta_value;
}

## Manually Renew a License Key

URL: https://wsform.com/knowledgebase/manually-renew-a-license-key/

Should you wish to renew a license key manually at any other time you can do so using this page.

All WS Form PRO subscriptions automatically renew on an annual basis so you shouldn't need to manually renew.

However, should you wish to renew a license key manually at any other time you can do so using the form below.

Important: When using this method, the following changes to your account will occur:

Your current license key will not be cancelled, it will be extended by 1 year.

Your current subscription will be cancelled and replaced with new annual subscription.

The new annual subscription will start on the date you manually renew and will automatically renew each year on the same date unless canceled in advance.

Any coupon code used will be applied to the first year subscription only.

Please note that all renewals are nonrefundable per our terms of use.

Coupon codes cannot be added after your manual renewal is completed, and we cannot issue refunds or partial refunds if a code is not entered at checkout. Be sure to enter your coupon code before completing your payment.

### Manual License Key Renewal

Already added your renewal? View Checkout

## MCP Server

URL: https://wsform.com/knowledgebase/mcp-server/

WS Form includes an MCP server that enables AI tools and external apps to interact directly for intelligent, automated workflows.

WS Form includes a built-in Model Context Protocol (MCP) server that enables compatible AI clients to connect directly to WS Form. Using natural language, you can create and edit forms, configure fields, conditional logic and actions, apply styles, work with submissions, retrieve form statistics, and more.

The MCP server exposes more than 40 WS Form Abilities as MCP tools, giving AI clients access to many of the same capabilities available in WS Form itself.

You can connect WS Form to MCP-compatible AI clients such as:

Claude

ChatGPT

Novamira

Angie (Elementor)

This lets you work with WS Form using the AI client that best fits your workflow, with no middleware or custom integration code required.

## Prerequisites

In order to use the WS Form MCP Server, the following plugins must first be installed:

MCP Adapter

## Enabling the MCP Server

To enable the WS Form MCP Server:

Go to WS Form > Settings > AI from the WordPress admin menu.

Under MCP Server check Enable.

Click Save Changes.

Form editing is disabled by default for security reasons. If you would like to experiment with making form edits via the MCP server:

Go to WS Form > Settings > AI.

Under Abilities API, check Allow Updates.

Click Save Changes.

Due to AI still being in its infancy, we do not recommend making changes to forms in production.

## Authentication

When connecting to the MCP server, we’re going to need a way of authenticating that the request is coming from an authorized user.

To do this, we can create a WordPress user application password as follows:

Click WP admin in WordPress studio to access the WordPress admin.

Click Users in the WordPress admin menu.

Edit the user you would like to use for accessing the MCP server (e.g. admin).

Scroll down Application Passwords.

In the New Application Password Name input, enter: My MCP Server

Click Add Application Password.

Copy the application password and keep it somewhere safe for now. It is only generated and shown once.

## Testing the MCP Server

### MCP Inspector

The MCP Inspector is an interactive developer tool for testing and debugging MCP servers.

Learn more: MCP Inspector

Here is how you can use the MCP Inspector to test the WS Form MCP server:

Create an mcp-wsform.json file that contains the following:

{
 "mcpServers": {
 "wsform": {
 "command": "npx",
 "args": ["-y", "@automattic/mcp-wordpress-remote"],
 "env": {
 "WP_API_URL": "https://yoursite.com/wp-json/ws-form/v1/mcp",
 "WP_API_USERNAME": "username",
 "WP_API_PASSWORD": "password"
 }
 }
 }
}

In WP_API_URL enter the URL found under WS Form > Settings > AI > MCP Server > Server URL

In WP_API_USERNAME enter the username you used when creating the application password.

In WP_API_PASSWORD enter the password you were given when creating the application password.

Open MCP Inspector:
npx @modelcontextprotocol/inspector --config mcp-wsform.json --server "wsform"

Ensure that Transport Type is set to STDIO.

Click Connect.

Click the Tools tab.

Click List Tools. The MCP Inspector will show the available tools registered with the WS Form MCP server.

### Claude Desktop

Here is how you can use Claude Desktop to test the MCP server:

Download and install Claude Desktop.

Login. You will need at least a Pro level account.

Go to Settings > Desktop App > Developer

Click Edit Config and edit the claude_desktop_config.json file. Add this to the file:

{
 "mcpServers": {
 "WS Form @ yoursite.com": {
 "command": "npx",
 "args": ["-y", "@automattic/mcp-wordpress-remote"],
 "env": {
 "WP_API_URL": "https://yoursite.com/wp-json/ws-form/v1/mcp",
 "WP_API_USERNAME": "username",
 "WP_API_PASSWORD": "password"
 }
 }
 }
}

Restart Claude.

You should now see the MCP server listed when you start a new chat.

You can then try to chat with WS Form on your server by issuing a prompt.

## Tips

Start a new, fresh chat for each form you work with.

If you create a new form, you don't need to specify the form ID in subsequent prompts.

If you are modifying an existing form, identify it initially in your prompt using the form ID
e.g. Publish form ID 123.

You can insert fields before another field by identifying it by ID or label
e.g. Add a select field before the submit button for preferred method of communication.

## Example Prompts

## Scope

The MCP server can be used with both WS Form LITE and WS Form PRO and can create forms that include the following field types:

Checkbox

Email

Note

Number

Phone

Radio

Select

Text

Text Area

Text Editor

URL

When using WS Form PRO, the following additional field types are available:

Color

Date/Time

File Upload

Hidden

Next Tab Button

Previous Tab Button

Price

Rating

Validate

The following WS Form features can be used when creating forms:

Tabs (multi-step forms)

Calculations (for example, #calc(#field(1) + #field(2)))

Field settings (such as Default Value, Required, Placeholder, Help, and Invalid Feedback)

Select, Checkbox, and Radio population

Field sizing

The WS Form features made available to the MCP server are intentionally simplified to minimize the data AI has to handle when interacting with forms. We hope to expose more features as AI technology progresses.

## Current Limitations

Updates to select, checkbox and radio data grid rows are limited a 2 column format of values and labels.

Tabs and sections can only be added when initially creating a new form.

We hope to add additional functionality as AI technology evolves and becomes more reliable.

## Security

All abilities exposed via the MCP server are protected by permission callbacks. User capabilities are checked against standard WS Form capabilities.

## Media Capture Field

URL: https://wsform.com/knowledgebase/media-capture/

The Media Capture field allows you to capture video, photo and audio and upload them with your form submission.

The Media Capture field allows you to capture video, photo and audio and upload them with your form submission. When the form is submitted, media captures can be saved to submissions, attached to emails or mapped to integrations where supported. It can also be used to read QR codes in photo mode on compatible devices.

## Demo

No media is sent to our server in this demo.

## Adding a Media Capture Field

To learn how to add, edit, clone, move, resize, offset, or delete a file upload field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Record a Video or Take a Photo.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Capture Settings

#### Capture Mode

Choose whether this field should capture video, photos or audio.

#### Camera Facing Mode

Only for Photo or Video capture mode on mobile devices.

When capturing photos or video on a mobile device, this setting determines which camera is used by default. Options are:

Front Camera (User)

Rear Camera (Environment)

Note: You cannot use the front and rear cameras simultaneously. If you have more than one media capture field on your form, ensure they are both using the same facing mode.

#### Auto Start Devices

For security, browsers do not allow access to the camera and microphone by default. By default, WS Form does not request camera or microphone access by default and instead politely asks the user to start the camera and/or microphone. If you would like to bypass this and immediately ask for permission to use the users media capture devices, check this setting.

#### Resolution

Only for Photo or Video capture mode.

By default, WS Form will capture photos or video using the cameras default setting. You can override this using this setting. Available settings are:

480p SD (640 x 480)

720p HD (1280 x 720)

1080p Full HD (1920 x 1080)

1440p 2K (2560 x 1440)

2160p 4K (3840 x 2160)

Note that not all devices support all of these resolutions.

#### Auto Hide Controls

For better accessibility, WS Form ensures the media capture controls are always visible. If you would like to auto hide the controls you can enable this setting.

#### Maximum Duration

Only for Audio or Video capture mode.

Enter the maximum duration of the audio or video capture.

### Countdown

#### Enable

Check this if you would like to enable a countdown prior to an audio, photo or video being captured.

#### Duration

Choose the number of seconds to count down before capturing starts.

#### Beeps

To enable an audible beep during the countdown, check this setting.

### Audio Settings

#### Format

Choose the format for the captured audio. Options include:

MP4

OGG

WAV

WEBM

### Photo Settings

#### Format

Choose the image format for the captured photo. Options include:

JPEG

PNG

WEBP

#### Quality

Choose the quality of the capture photo.

#### Sound Effect

If checked, a camera shutter sound effect will play when the photo is captured.

### Video Settings

#### Format

Choose the video format for the captured video. Options include:

MP4

WEBM

### QR Codes

QR code functionality is only available when Capture Mode setting is set to Photo.

This functionality is only available in certain browsers that support the BarcodeDetector interface.

#### Enable

When enabled, the Media Capture field will check for QR codes in the photo preview. When found, the value of the QR code will be injected into the field specified in the Field setting.

#### Field

Choose which field to inject the QR code value into. The following field types can be chosen:

Date / Time

Email

Hidden

Number

Password

Phone

Search

Text

Text Area

URL

#### Overlay

If checked, a capture area overlay will be applied to the photo preview to encourage efficient positioning of a QR code for reading.

#### Beep

If enabled a beep will sound when a QR code is detected and read.

### File Handler

File handlers in WS Form determine the final destination of uploaded files when the form is submitted. You can specify different destinations for each file field on your form. This means you could have one field that saves files to a public location, and another that saves to a private location.

### Save To

Use this setting to determine the final destination of the uploads files for this field when the form is submitted.

Save To
Public
Media Library
Description

WS Form (Private)
No
No
This is the default handler. This handler saves file uploads in a protected hash format. These uploads are only accessible from within the WordPress admin.

WS Form (Public)
Yes
No
This handler saves file uploads in a format that can be accessed publicly.

Media Library
Yes
Yes
This handler saves file uploads to the WordPress Media Library.

WS Form also has file handlers for:

Amazon S3

DropBox

Google Drive

### Saved File Name

By default WS Form will save files using their uploaded file name.

The Saved File Name setting allows you to specify a custom file name mask for the saved file. The mask can include the following variables as well as WS Form variables, e.g. #field(123).

Variable
Description

#file_basename
Original file name (e.g. file.jpg).

#file_filename
File name without extension (e.g. file).

#file_extension
File name extension (e.g. jpg).

#file_index
File upload index (e.g. 1). If you have enabled the Multiple setting, this will return the file index. If the Multiple setting is enabled and you exclude #file_index, WS Form will append this to your mask automatically.

Other commonly used variables in file name masks include:

Variable
Description

#field(123)
Returns the value of a field submitted in the form. Change 123 to match the ID of your field.

#submit_id
Returns the submission ID (Requires a Save Submission action)

File names are sanitized prior to files being saved for security reasons.

### Example Masks

Single Media Capture: custom-#submit_id-#file_filename.#file_extension

Multiple Media Capture: custom-#submit_id-#file_filename-#file_index.#file_extension

### Use WordPress Upload Path (DropzoneJS type only)

By default, files uploaded using DropzoneJS will be saved to the path:

uploads/ws-form/#form_id/ dropzonejs/#field_id/#file_name

This is done to ensure scratch files (i.e. files that are uploaded prior the form being submitted) do not clog up your normal uploads path. Files are retained in this path after they are committed to the Media Library.

If you would prefer for scratch and submitted files to be added to the normal WordPress uploads path, check this box. This path is normally:

uploads/#year/#month/#file_name

Note that this path is subject to change if WordPress admin settings are changed or a filter hook is used.

The upload path can also be controlled with the WS Form wsf_dropzonejs_upload_path filter hook.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the file upload field.

#### Label Position

There are five options you can choose from for positioning your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the Form Settings advanced tab. For new forms, this will be the Top positioning.

Note that when using some frameworks, some label positions may not be available.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities. If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

### Labels

Use these settings to customize or translate the media capture labels.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Message Field

URL: https://wsform.com/knowledgebase/message/

The message field is used to show an message on your form. It can be used to display helpful information to a user completing your form.

The Message field is  used to show a message on your form. It can be used to display helpful information to a user completing your form.

## Adding a Message Field

To learn how to add, edit, clone, move, resize, offset, or delete an HTML field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

The label is used solely for identifying the message field when editing your form. The label is not shown to the website visitor.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Type

Select the type of message you would like to display. Each type of message is shown in a different color. The options are:

Success (Green)

Information (Blue)

Warning (Yellow)

Danger (Red)

### Content

Enter the text you want to show in your message.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the message field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attribute key-value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Meter Field

URL: https://wsform.com/knowledgebase/meter/

This field enables you to add a meter to your form. Meters can be configured to show data with conditional logic, calculations, or your own JavaScript.

This field enables you to add a meter to your form. Meters can be configured to show data with conditional logic, calculations, or your own JavaScript.

## Demo

## Adding a Meter Field

To learn how to add, edit, clone, move, resize, offset, or delete a meter field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example Score or Rating.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with a default value. Meters are usually set with a value from 0 to 1, so you should enter a numeric value from 0 to 1 in this field. If you leave it blank, it will be set to 0. For example 0.5 would set the meter to halfway.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the meter.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### Minimum

Minimum value possible on the meter. Leaving this blank will set the minimum is 0. This can be any negative or positive number.

#### Maximum

Maximum value possible on the meter. Leaving this blank will set the maximum to 1. This can be any negative or positive number.

#### Low

Lowest value across the range defined by the meter. The value must be higher than min and lower than high.

#### High

Highest value across the range defined by the meter. The value must be lower than max and higher than low.

#### Optimum

Indicates the optimum value and must be within the range of min and max values. When used with the low and high attribute, it indicates the preferred zone for a given range.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Migrating from Gravity Forms

URL: https://wsform.com/knowledgebase/migrating-from-gravity-forms/

The WS Form migration tool allows you to import forms and submissions from Gravity Forms.

The WS Form migration tool allows you to import forms and submissions from Gravity Forms. Once a form is migrated, you can edit it like any other form in WS Form. You can also access past submissions as if they were always part of your form in WS Form.

https://www.youtube.com/watch?v=BT-frpl-5BQ

Your source form will not be changed or deleted when you migrate it to WS Form, so  you can easily go back and reference it if you need to.

### Migrating Forms

Click on the Migrate item in the WordPress administration menu under WS Form.

Select Gravity Forms from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Form to instruct WS Form to import your form.

Click the  Start Import button.

Once the migration is complete, you can click Edit Form to view the form in the WS Form layout editor.

If you have submissions you would like to import, you can click on Import Submissions after you have imported a form. We always recommend importing your form first because WS Form will create an automatic map of the Gravity Form fields to your new WS Form form.

## Migrating Submissions

As well as migrating forms, you can also import the submissions from a Gravity Forms form.

If you have just imported a form, click on Import Submissions to start the process. WS Form will select the form you created, as well as show you all of the field mappings that are automatically created for you. Choose the

If you are importing submissions without first migrating a form:

Click on the Migrate item in the WordPress administration menu under WS Form.

Select Gravity Forms from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Submission to instruct WS Form to import your submissions.

Select the form you would like to import the submissions to. You can select any form you have created in WS Form.

Select the duplicate method you would like to use during the import.

Set up the field mappings. The left-hand column represents the fields in Gravity Forms. The right-hand column represents the fields in WS Form. Click the button to add each mapping.

Click the  Start Import button to start the import.

For large volumes of submissions, WS Form will show a progress bar. Once the import is complete, a summary shows how many records have been created, updated, or ignored. You can click to view the submissions to ensure the import was successful.

The WS Form migration tool imports all supported fields, including file upload and signature fields. Page and section breaks are also supported during the import.

Some third-party plugins feature dozens of integrations, and in some cases those features may not be included in the migrated data. If supported, those features can be added to your form afterward using the WS Form layout editor.

And that’s it! It’s simple to move forms and submissions from Gravity Forms to WS Form.

## Migrating from Visual Form Builder Pro (VFB)

URL: https://wsform.com/knowledgebase/migrating-from-visual-form-builder-pro/

The WS Form migration tool allows you to import forms and submissions from Visual Form Builder Pro.

The WS Form migration tool allows you to import forms and submissions from Visual Form Builder Pro. Once a form is migrated, you can edit it like any other form in WS Form. You can also access past submissions as if they were always part of your form in WS Form.

https://www.youtube.com/watch?v=BT-frpl-5BQ

Your source form will not be changed or deleted when you migrate it to WS Form, so  you can easily go back and reference it if you need to.

### Migrating Forms

Click on the Migrate item in the WordPress administration menu under WS Form.

Select Visual Form Builder Pro from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Form to instruct WS Form to import your form.

Click the  Start Import button.

Once the migration is complete, you can click Edit Form to view the form in the WS Form layout editor.

If you have submissions you would like to import, you can click on Import Submissions after you have imported a form. We always recommend importing your form first, because WS Form will create an automatic map of the Visual Form Builder Pro fields to your new WS Form form.

## Migrating Submissions

As well as migrating forms, you can also import the submissions from a Visual Form Builder Pro form.

If you have just imported a form, click on Import Submissions to start the process. WS Form will select the form you created, as well as show you all of the field mappings that are automatically created for you.

If you are importing submissions without first migrating a form:

Click on the Migrate item in the WordPress administration menu under WS Form.

Select Visual Form Builder Pro from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Submission to instruct WS Form to import your submissions.

Select the form you would like to import the submissions to. You can select any form you have created in WS Form.

Select the duplicate method you would like to use during the import.

Set up the field mappings. The left-hand column represents the fields in Visual Form Builder Pro. The right-hand column represents the fields in WS Form. Click the button to add each mapping.

Click the  Start Import button to start the import.

For large volumes of submissions, WS Form will show a progress bar. Once the import is complete, a summary shows how many records have been created, updated, or ignored. You can click to view the submissions to ensure the import was successful.

The WS Form migration tool imports all supported fields, including file upload and signature fields. Page and section breaks are also supported during the import.

Some third-party plugins feature dozens of integrations, and in some cases those features may not be included in the migrated data. If supported, those features can be added to your form afterward using the WS Form layout editor.

And that’s it! It’s simple to move forms and submissions from Visual Form Builder Pro to WS Form.

## Migrating from WPForms

URL: https://wsform.com/knowledgebase/migrating-from-wpforms/

The WS Form migration tool allows you to import forms and submissions from WPForms.

The WS Form migration tool allows you to import forms and submissions from WPForms. Once a form is migrated, you can edit it like any other form in WS Form. You can also access past submissions as if they were always part of your form in WS Form.

https://www.youtube.com/watch?v=BT-frpl-5BQ

Your source form will not be changed or deleted when you migrate it to WS Form, so  you can easily go back and reference it if you need to.

### Migrating Forms

Click on the Migrate item in the WordPress administration menu under WS Form.

Select WPForms from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Form to instruct WS Form to import your form.

Click the  Start Import button.

Once the migration is complete, you can click Edit Form to view the form in the WS Form layout editor.

If you have submissions you would like to import, you can click on Import Submissions after you have imported a form. We always recommend importing your form first, because WS Form will create an automatic map of the WPForms fields to your new WS Form form.

## Migrating Submissions

As well as migrating forms, you can also import the submissions from a WPForms form.

If you have just imported a form, click on Import Submissions to start the process. WS Form will select the form you created, as well as show you all of the field mappings that are automatically created for you.

If you are importing submissions without first migrating a form:

Click on the Migrate item in the WordPress administration menu under WS Form.

Select WPForms from the list of third-party WordPress form plugins.

Select the form you want to import.

Select Submission to instruct WS Form to import your submissions.

Select the form you would like to import the submissions to. You can select any form you have created in WS Form.

Select the duplicate method you would like to use during the import.

Set up the field mappings. The left-hand column represents the fields in WPForms. The right-hand column represents the fields in WS Form. Click the button to add each mapping.

Click the  Start Import button to start the import.

For large volumes of submissions, WS Form will show a progress bar. Once the import is complete, a summary shows how many records have been created, updated, or ignored. You can click to view the submissions to ensure the import was successful.

The WS Form migration tool imports all supported fields, including file upload and signature fields. Page and section breaks are also supported during the import.

Some third-party plugins feature dozens of integrations, and in some cases those features may not be included in the migrated data. If supported, those features can be added to your form afterward using the WS Form layout editor.

And that’s it! It’s simple to move forms and submissions from WPForms to WS Form.

## Modula Integration

URL: https://wsform.com/knowledgebase/modula/

The WS Form Modula integration allows you show a Modula gallery on a form as well as being able to add, reorder and delete images in a gallery.

The WS Form Modula integration allows you show a Modula gallery on a form as well as being able to add, reorder and delete images in a gallery. When the form is submitted the Modula gallery will be updated to include any uploaded or deleted images as well as matching the order of the images.

## How to Automatically Create a Modula Form

To create a Modula form, first click on on Add New from the WS Form admin menu.

Next, click on the Modula tab at the top of the Add New page. This will show all of your Modula galleries.

Simply click on a gallery and WS Form will automatically create a fully configured form. You can then Preview the form. The form will show the images contained within the gallery. When the form is submitted, the Modula gallery will be updated.

## How it Works

### The File Upload Field

In WS Form a gallery is represented by using a File Upload field.

The File Upload field is configured as follows:

Multiple

Sortable

Type: DropzoneJS

File Handler: Media Library

These settings ensure that the behavior of the File Upload field matches that of the Modula gallery.

### Populating the File Upload Field

The File Upload field is populated using the Populate Using Action setting found in Form Settings > Data.

The settings are as follows:

Action to Populate From: Modula

List to Populate From: Your gallery

Gallery Field: The File Upload field on your form

### Updating the Modula Gallery

The Modula gallery is updated by using the Add to Modula action.

The Add to Modula action settings are as follows.

#### Modula Gallery

Choose the gallery to push the file upload images to.

#### File Field

Choose the file field from which to source the images from.

#### Append

If checked, the images will be appended to the gallery.

#### Horizontal Alignment

Choose the horizontal alignment of newly added images. The available options are:

Left

Center (Default)

Right

#### Vertical Alignment

Choose the vertical alignment of newly added images. The available options are:

Top

Middle

Bottom

 

## Mollie Integration

URL: https://wsform.com/knowledgebase/mollie/

The WS Form Mollie integration allows you to accept online payments that effectively act as a gateway prior to creating a form submission.

Mollie Payments provides businesses with a streamlined and efficient way to process online payments. Mollie supports a wide range of payment options, including credit cards, PayPal, and local payment methods specific to certain countries or regions.

The WS Form Mollie integration allows you to accept online payments that effectively act as a gateway prior to creating a form submission.

You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

## Installation

The WS Form Mollie plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Mollie integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Mollie tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Configuring Mollie

### Obtaining Mollie Credentials

In order to use the Mollie button, you first need to enter your Mollie profile ID and API keys.

If you do not yet have a Mollie account, register for a new account.

To obtain your API keys:

Log in to your Mollie account.

Go to Developers.

Click API Keys.

### Entering Your API Keys

To enter your publishable keys:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Mollie tab at the top of the page.

Enter your test and live API keys.

Click the Save button.

We recommend using the Test environment to test your form.

Testing the Mollie API

## Mollie Templates

To help get you started, the Mollie integration includes a number of form templates. To create a form using a Mollie template:

Click on WS Form in the WordPress admin menu.

Click on Add New.

Click the Mollie tab.

Click on a Mollie form template.

## Adding The Mollie Fields

Once configured the Mollie fields will appear under the E-Commerce section of the Build when editing a form. The following fields types are added:

Mollie Cardholder - The user enters their name into this field.

Mollie Card - The user enters their credit card number into this field. Only required for credit card transactions.

Mollie Expiry - The user enters their credit card expiry month and year into this field. Only required for credit card transactions.

Mollie CVV - The user enters their credit card card verification value (CVV) into this field. Only required for credit card transactions.

Mollie Submit - The user clicks this to submit their credit card details. Edit this field to configure the Mollie transaction.

`You can place the Mollie fields anywhere you like on the form. An example layout is shown below:

## Settings

The majority of the settings are found in the Mollie Submit field settings. To access the settings sidebar, click the settings  icon on the Mollie Submit field.

The Mollie Submit field acts like a regular custom button field type. Please refer to that field type for more information about the settings.

The Mollie Submit field settings are split into Basic and Advanced tabs in the sidebar as are detailed below:

### Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

#### Label

This is the label shown on the button. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Submit Payment.

#### Hidden

If checked, the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

#### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

#### Transaction

##### Method

Use this field to determine which payment method should be used. This defaults to creditcard.

The available payment methods you can use will depend on the configuration of your Mollie account.

The possible values for this field are:

applepay

bancontact

banktransfer

belfius

creditcard (Default)

directdebit

eps

giftcard

giropay

ideal

kbc

mybank

paypal

paysafecard

przelewy24

sofort

You can also enter WS Form variables in this field, for example you could provide a payment selector field to the user and then enter:

#field(123)

... where 123 is the ID of the payment method selector.

A Mollie data source is available to automatically populate a payment method selector for a select or radio field.

#### Amount to Charge

This setting is used to tell Mollie how much to charge. By default this setting will equal the e-commerce total of the form. You can also enter a specific amount or use WS Form variables in this setting.

#### Currency

Choose the currency to use for the transaction.

#### Description

Enter a description for the transaction. WS Form variables can be used in this field.

#### Zero Amount

You can configure how WS Form should handle zero amounts for Mollie buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

#### Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

#### Billing Address

##### Billing Address Mapping

Use the billing address mapping option to specify which fields on your form relate to the different parts of the billing address.

To map your form fields to Mollie billing address fields:

Click the Add  icon at the bottom right of the billing address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding Mollie billing address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Shipping Address

##### Shipping Address Mapping

Use the shipping address mapping option to specify which fields on your form relate to the different parts of the shipping address.

To map your form fields to Mollie shipping address fields:

Click the Add  icon at the bottom right of the shipping address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding Mollie shipping address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Advanced

#### Styles

Use the Styles settings to change the design of the credit card entry field.

##### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

##### Type

Choose the type of button.

#### Classes

For developers WS Form allows you to add your own classes to fields.

##### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

##### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

#### Validation

##### Show Invalid Feedback

Invalid feedback text is shown when the credit card information entered is not valid, or if a transaction fails. If this setting is checked, invalid feedback is shown under the field.

#### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Moosend Integration

URL: https://wsform.com/knowledgebase/moosend/

The Moosend integration lets you push new subscribers using an action and create new forms from your lists in a single click on the add form page.

The Moosend integration lets you push new subscribers using an action and create new forms from your lists in a single click on the add form page.

## Installation

The Moosend plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Moosend plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Moosend tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Moosend

In order to use the integration, you need to connect it to Moosend. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Moosend tab at the top of the page.

Enter your API key. Your API key can be found under Settings, API Keys.

If you do not have a Moosend account, you can create a new account here.

## Creating a Form for Moosend

### Automatically

WS Form can create a form for any of our Moosend lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Moosend form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Moosend tab at the top of the page.

Click on any of your Moosend lists to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Moosend tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Moosend when a user saves or submits their form.

To add a Moosend action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Moosend List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Moosend action settings are as follows:

#### When Should This Action Run?

You can choose to run the Moosend action when the form is saved, submitted, or both.

#### Moosend List

Choose the Moosend List you would like contacts to be added to. If you have created a new list since viewing this screen, you can click the refresh icon to retrieve the new list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding custom fields in Moosend. For example you would want to map your Email field to the Email field in Moosend.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Moosend field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Moosend field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source (e.g. #blog_name) to the source field in CleverReach.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Moosend field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Populate Forms Using Moosend

As well as pushing form data with this integration, you can also retrieve subscriber data and populate the fields on your form.

This feature is only available if a website visitor is signed in and their WordPress email address matches the email address of a contact in Moosend.

To enable this feature:

Click the Form Settings icon in the top toolbar when editing a form.

Click the Data tab in the sidebar.

Enable the Populate Using Action setting.

Choose Moosend from the Action To Populate From pull-down menu.

Select the list you wish to populate data from in the List To Populate From pull-down menu.

Map the Moosend fields to your form fields.

Click Save at the bottom.

Note that if you created your form using a Moosend template, the field mappings will automatically be created for you.

## Move Down Button

URL: https://wsform.com/knowledgebase/section_move_down/

The move down button is used with repeatable sections to move a row down.

The Move Down button is used with repeatable sections to move a row down. The move button must be added to the section you want to use it for.

## Demo

## Adding a Move Down Button

To learn how to add, edit, clone, move, resize, offset, or delete a move down button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the move down button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the move down button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Move Up Button

URL: https://wsform.com/knowledgebase/section_move_up/

The move up button is used with repeatable sections to move a row up.

The Move Up button is used with repeatable sections to move a row up. The move button must be added to the section you want to use it for.

## Demo

## Adding a Move Up Button

To learn how to add, edit, clone, move, resize, offset, or delete a move up button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the move up button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the move up button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the move up attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Next Tab Button

URL: https://wsform.com/knowledgebase/tab_next/

If you have more than one tab on your form, the next tab button will take the website visitor back one tab.

If you have more than one tab on your form, the Next Tab button will take the website visitor forward one tab.

## Adding a Next Tab Button

To learn how to add, edit, clone, move, resize, offset, or delete a next tab button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the next tab button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Scroll

#### Scroll To Top

None

Instant

Smooth

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the next tab button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Note Field

URL: https://wsform.com/knowledgebase/note/

The note field allows you to add notes about your form in the layout editor.

The Note field allows you to add notes about your form in the layout editor. Notes are not rendered on the public side of your website and can only be seen in the layout editor.

## Adding a Note Field

To learn how to add, edit, clone, move, resize, offset, or delete a Note field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

The settings for a Note field are explained below:

#### Label

The label is used solely for identifying the text editor field when editing your form. The label is not shown to the website visitor.

#### Note

Enter the note you would like to appear in the layout editor.

## Notion Integration

URL: https://wsform.com/knowledgebase/notion/

The Notion integration lets you push WS Form form submissions from your WordPress website to Notion databases.

The Notion integration lets you push WS Form form submissions from your WordPress website to Notion databases.

## Installation

The Notion plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Notion plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Notion tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Notion

In order to use the integration, you need to connect it to Notion. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Notion tab at the top of the page.

Click Connect and follow the onscreen prompts.

If you do not have a Notion account, you can create a new account here.

## Sharing Databases with WS Form

In order for WS Form to be able to access one of your databases, you first need to share the database with the WS Form integration. To do this:

Click Settings & members in the Notion menu. The Account modal will appear.

Click My connections.

Click the three dots next to the WS Form connection.

Click the Access selected pages button.

Check the databases you would like to access within WS Form.

Click Update access.

The database will then be available for WS Form to push data to.

## Creating a Form for Notion

### Automatically

WS Form can create a form for any of your Notion lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Notion form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Notion tab at the top of the page.

Click on any of your Notion databases. (See Sharing Databases with WS Form if your database does not appear).

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your database does not appear, click the refresh icon in the Notion tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Notion when a user saves or submits their form.

To add an Notion action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Notion from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

### Field Considerations

The following should be considered if you are building your own form to connect to Notion:

Select and Multi-Select fields should submit the name of the options, not the option ID.

Checkbox fields should only include a single checkbox.

Fields pushing value as people should use the ID of a person (including dashes).

HTML is not supported for text (Rich text) fields in Notion.

### Action Settings

The Notion action settings are as follows:

#### When Should This Action Run?

You can choose to run the Notion action when the form is saved, submitted, or both.

#### Notion Database

Choose the Notion Database you would like to push the form data to. If you have created a new database since viewing this screen, you can click the refresh icon to retrieve the new database list.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Notion. For example, you would want to map your Email field to the Email field in Notion.

At minimum, you must map the Name field.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Notion field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Notion field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to a corresponding field in Notion, or perhaps set a number field to the submission ID using the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Notion field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Novamira

URL: https://wsform.com/knowledgebase/novamira/

Control WS Form with AI through Novamira using the WordPress Abilities API and MCP to create, manage, style, and analyze forms in WordPress using natural langu…

Novamira enables AI agents to interact with WS Form through the WordPress Abilities API and MCP (Model Context Protocol). This allows compatible AI tools to discover and run WS Form abilities for creating, managing, styling, and reviewing forms in WordPress.

This article explains how to connect WS Form with Novamira, which capabilities are available, and how to use prompts to complete common form management tasks.

## What Is Novamira?

Novamira is a WordPress plugin that acts as an MCP server for AI agents. It provides access to WordPress abilities registered by compatible plugins and makes those abilities available through several AI interfaces.

Novamira can be used through:

Novamira Chat in wp-admin.

Novamira Visual.

External MCP clients such as Claude Desktop, Cursor, and similar compatible tools.

When Novamira discovers abilities registered by WS Form, an AI agent can use those abilities to perform real operations in WS Form. It does not create temporary HTML forms or approximate WS Form behavior.

## Requirements

WordPress 6.9 or later with support for the WordPress Abilities API.

WS Form LITE or WS Form PRO.

The Novamira plugin.

A supported Novamira interface or external MCP client.

## How WS Form Works With Novamira

WS Form registers a collection of WordPress abilities under the ws-form category. These abilities describe operations that an AI agent can perform, such as creating a form, adding fields, retrieving submissions, or applying a style.

When Include in MCP Discovery is enabled in WS Form, Novamira can discover these abilities and make them available to its AI agents.

No custom glue code is required for basic use. Novamira handles the MCP connection, while WS Form provides the abilities used to complete each task.

## Enable MCP Discovery

Install and activate WS Form.

Install and activate Novamira.

In WordPress, go to WS Form > Settings > AI.

Enable Include in MCP Discovery.

Save the settings.

After MCP discovery is enabled, open Novamira Chat, Novamira Visual, or connect a compatible external MCP client. The client can then discover the WS Form abilities available on the site.

### Allowing Updates And Deletions

WS Form separates read-only operations from operations that modify data.

To allow an AI agent to edit forms, fields, styles, or related configuration, enable Allow Updates in WS Form > Settings > AI.

To allow an AI agent to delete supported resources, enable Allow Deletes.

## Available WS Form Abilities

Novamira can use the abilities registered by WS Form to work with forms, form structure, styles, submissions, notes, and statistics.

### Forms

Form abilities allow an AI agent to create and manage forms throughout their lifecycle.

List forms.

Create a form from a natural-language description.

Retrieve a form as structured JSON.

Update a form from structured JSON.

Publish a form.

Change a form to draft status.

Clone a form.

Delete a form.

Restore a deleted form.

Retrieve shortcode for a form.

Retrieve block markup for a form.

This allows a prompt to move from a plain-language requirement to a working WS Form form without manually adding every component.

### Tabs, Sections, And Fields

An AI agent can inspect and modify the internal structure of a form, including its tabs, sections, and fields.

Add, update, and delete tabs.

Add, update, and delete sections.

Add, update, and delete fields.

Position fields within the appropriate section.

Change supported field settings.

For example, an AI agent can add a Company field after the Email field without rebuilding the rest of the form.

### Actions

WS Form actions control operations that run when a form is submitted, including email notifications.

Email notifications are actions, not general form settings. When asking an AI agent to create or update a notification, describe the required recipient, subject, message, and any conditions that should apply.

An AI agent can inspect, add, update, and remove supported actions without changing unrelated parts of the form.

### Conditional Logic

Conditional logic abilities allow an AI agent to review and manage rules that control form behavior.

Prompts should clearly describe the condition and the required outcome. For example, specify which field value should trigger another field, section, action, or validation rule.

### Submissions And Notes

Novamira can use WS Form abilities to list and inspect submissions. It can also work with notes attached to a submission.

List submissions.

Retrieve submission details.

Create a submission note.

Update a submission note.

Delete a submission note.

Access remains subject to WordPress authentication, permissions, and the configuration of the connected AI client.

### Statistics

WS Form statistics abilities allow an AI agent to retrieve form performance data.

This can be used to answer questions about form views, submissions, conversion performance, or activity during a specified period, depending on the statistics available for the form.

## Working With Styles

WS Form exposes abilities for managing styles used by the WS Form Styler and framework styles.

Style abilities should be used when a prompt specifically asks for a visual theme, brand colors, typography, border radius, spacing, or another aspect of the form's appearance.

Creating an ordinary form does not require creating a new style. In most cases, the form should be created first and a style should only be created or assigned when the prompt includes visual requirements.

### Available Style Operations

List styles.

Retrieve a style.

Create a style.

Update a style.

Delete a style.

When retrieving a style, the returned data can include the root palette used by the style, such as form colors, fonts, border radius, and grid gap.

A style can be created from an available template, such as standard-light or standard-dark, and then adjusted to use the required palette.

A style can be:

Assigned to a specific form.

Set as the site default style.

Set as the conversational default style.

### Recommended Style Workflow

Create or identify the form.

Describe the required visual appearance.

Create or update a suitable style.

Assign the style to the form.

Review the result before using it on a production site.

This workflow keeps the form structure separate from its visual presentation and avoids creating unnecessary styles.

## Example Prompts

The following prompts can be entered in Novamira Chat, Novamira Visual, or a connected MCP client.

## Create, Style, And Embed A Form In One Conversation

A single Novamira conversation can include several related WS Form operations.

For example, you can ask the AI agent to:

Create a form from a description.

Add the required fields and actions.

Create a style that matches the site branding.

Assign the style to the form.

Publish the form.

Return the shortcode or block markup.

## Using Novamira Visual

Novamira Visual provides additional page context while working with an AI agent. This can be useful when a form needs to be created and then placed into an existing page.

A typical workflow is to ask Novamira to create the form with WS Form, retrieve the block markup, and then add that block to the appropriate page location.

Always review the resulting page, form configuration, actions, conditional logic, and style before publishing changes.

## Permissions And Safety

Novamira does not bypass WordPress authentication or permissions. The connected user and AI client must have permission to perform the requested operation.

WS Form provides additional controls for MCP discovery, updates, and deletions. Use these settings to limit what an AI agent can do.

Enable Include in MCP Discovery only when WS Form abilities should be available to MCP clients.

Leave Allow Updates disabled when the AI agent only needs to inspect data.

Leave Allow Deletes disabled unless deletion operations are specifically required.

Test prompts in a development or staging environment.

Review form actions before sending live notifications.

Review style assignments before changing a site default.

Confirm destructive operations before allowing them to proceed.

Granting update or delete access allows an AI agent to modify real WS Form data. Use the minimum permissions required and maintain a current backup of the site.

## Troubleshooting

### WS Form Abilities Are Not Available

Confirm that WS Form and Novamira are active.

Confirm that the site meets the WordPress version requirement.

Go to WS Form > Settings > AI and verify that Include in MCP Discovery is enabled.

Refresh or reconnect the MCP client so it can repeat ability discovery.

Confirm that the connected WordPress user has the required permissions.

### The AI Can Read Forms But Cannot Edit Them

Go to WS Form > Settings > AI and confirm that Allow Updates is enabled.

The connected WordPress user must also have permission to edit the requested resource.

### The AI Cannot Delete A Form Or Style

Confirm that Allow Deletes is enabled in the WS Form AI settings and that the connected user has sufficient permissions.

## Summary

Novamira provides an AI environment that can discover and run the WordPress abilities registered by WS Form.

After MCP discovery is enabled, supported AI agents can create and manage forms, edit fields and sections, configure actions and conditional logic, inspect submissions, manage submission notes, retrieve statistics, and work with WS Form styles.

Use a development or staging site when first testing the integration, enable only the permissions required, and review all AI-generated changes before using them in production.

## Number Field

URL: https://wsform.com/knowledgebase/number/

The Number field lets your website visitor enter a number value. You can specify minimum and maximum permissible values.

The Number field lets your website visitor enter a number value. You can specify minimum and maximum permissible values. By using the number field, mobile users will be presented with a numeric keypad when entering a value.

Tip: WS Form always adheres to HTML element defaults. The default step on a number field is 1, therefore if you want to use numbers with decimals you should change the step setting in the Advanced tab (e.g. 0.001 or any). Learn more.

## Demo

## Adding a Number Field

To learn how to add, edit, clone, move, resize, offset, or delete a number field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Postal Code or Age.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #user_id to insert a logged-in user's user ID into a User ID number field.

WS Form variables can be entered into this field.

### Step

Specifies the granularity that the value must adhere to. Defaults to 1. Examples:

Step
Description

any
Any number / any decimal places

0.01
Any number to 2 decimal places

5
Must be a multiple of 5

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as #####.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the number field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the minimum number that should be entered into the field in order for it to be valid. Leaving this blank will mean any minimum value can be entered. This can be any negative or positive number.

#### Maximum

This is the maximum value that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. This can be any negative or positive number.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. For more information about using WS Form data grids, click here. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

## Number Rounding Examples

URL: https://wsform.com/knowledgebase/number-rounding-examples/

Learn how to round numbers using calculated fields.

Here are some example calculations for rounding numbers. These examples use field ID 123 which you should change to the ID of the field you wish to round.

## Round to the Nearest Whole Number

#calc(#round(#field(123)))

## Round to 2 Decimal Places

#calc(#round(#field(123), 2))

## Round to the Nearest 50

#calc(#round(#field(123) / 50) * 50)

## Round to the Nearest 1000

#calc(#round(#field(123) / 1000) * 1000)

 

## Omnisend Integration

URL: https://wsform.com/knowledgebase/omnisend/

The Omnisend integration lets you add new contacts using an action and create a form automatically a single click on the add form page.

The Omnisend integration lets you add new contacts using an action and create a form automatically a single click on the add form page.

## Installation

The plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Omnisend tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Omnisend

In order to use the integration, you need to connect it to Omnisend. Connecting is easy!

### Obtain Your Omnisend API Key

To obtain your Omnisend API key:

Login to your Omnisend account.

Go to Store Settings.

Click on API Keys.

Click Create API Key.

Copy the API key provided.

### Enter Your API Key

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Omnisend tab at the top of the page.

Enter your Omnisend API key.

Click Save.

If you do not have a Omnisend account, you can create a new account here.

## Creating a Form for Omnisend

### Automatically

WS Form can create a form for any of your Omnisend lists in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Omnisend form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Omnisend tab at the top of the page.

Click the Contact template.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Omnisend tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Omnisend when a user saves or submits their form.

To add the action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Omnisend from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The action settings are as follows:

#### When Should This Action Run?

You can choose to run the action when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Status

Choose what status the contact should be added with. The available options are:

Subscribed

Unsubscribed

Non Subscribed

#### Send Welcome Email

#### If this setting is checked, Omnisend will send a welcome email only if welcome workflow is turned on.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Omnisend. For example you would want to map your Email field to the Email field in Omnisend.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Omnisend field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Omnisend field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source hidden field to a custom field in Omnisend.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Omnisend field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Properties

In addition to the standard Omnisend fields you can also add custom properties to the contact. Custom properties are added as name value pairs.

To add a custom property:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a name. Names should only contain latin characters, numbers, and underscores. WS Form variables can be used in this setting.

In the right-hand column, enter a value or a WS Form variable.

Repeat this process for each custom property you wish to add to the contact.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tags

Tags are labels you create to help organize your contacts. You can add any number of tags to a contact.

To add a tag to a contact:

Click the Add  icon at the bottom right of the tags section.

Enter the tag name.

Repeat this process for each tag.

Click the Save button at the bottom of the sidebar to save your changes.

 

## OpenAI Integration

URL: https://wsform.com/knowledgebase/openai/

The WS Form OpenAI integration allows you to integrate the core OpenAI endpoints into your forms for the purposes of generating text and image content.

The WS Form OpenAI integration provides two key features:

The ability dynamically create WordPress forms simply by entering a prompt describing the form you need.

Integration with the core OpenAI endpoints into your WordPress forms for generating text and image content.

## What is OpenAI?

Let's ask OpenAI what it is...

Human: What is OpenAI? 

AI: OpenAI is a nonprofit artificial intelligence research organization. It works on developing friendly AI systems to enhance human well-being, as well as create responsible, equitable AI solutions. OpenAI strives to operate transparently and collaboratively with the global AI research community. OpenAI's main research areas are robotics, reinforcement learning, natural language processing, computer vision, and generative modeling.

## Example Use Cases

Example use cases include:

Create a form by providing a description.

Produce text and image content when creating a post using the post management integration.

Provide the ability to improve copy in a text area field using instructions (e.g. Fix my grammar!).

Create an avatar image when using the user management integration.

Question and answer capability on a support page.

Moderate form submissions for inappropriate content.

Create text from an audio file containing speech.

Create spoken audio files from text.

## Installation

The OpenAI plugin is free to purchase. Click here to download the integration.

The OpenAI plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the OpenAI plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the OpenAI tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Create an OpenAI Account

Visit the OpenAI homepage and click on Sign Up in the top right corner.

Fill out the form with your information accept the terms and conditions and click Submit.

Verify your email address by clicking on the link sent to your inbox.

Log in to your new OpenAI account using the credentials you set up during the sign up process.

Create an API key on the OpenAI API Keys page.

You are now ready to connect WS Form to OpenAI.

## Connect WS Form to OpenAI

Connecting WS Form to OpenAI is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the OpenAI tab at the top of the page.

Enter your OpenAI API key. You can find this on the OpenAI API Keys page.

Optionally enter your OpenAI organization ID.

There might be a short delay between setting your account up with OpenAI and your API key being ready for use.

## Templates

The following templates are included with the OpenAI integration. To access these templates, click on Add New in the WS Form admin and then click the OpenAI tab.

The AI Generated Form template allows you to create a WordPress form simply by describing the type of form you want.

https://www.youtube.com/watch?v=Uc8NRETsoK8

To create an AI generated form:

Click WS Form in the WordPress administration menu.

Click Add New.

Click the OpenAI tab at the top of the page.

Choose the AI Generated Form template.

Enter a prompt that describes the form your require.

Click Create to create the form.

An example prompt is as follows:

Create a support request form. Add instructions to the top of it and require the user to upload a screenshot. First name, last name, email and license key are required as well as a description of the issue. Include help text on each field to improve accessibility.

The following WS Form fields are currently supported when using this template:

Text

Text Area

Email

Phone

URL

Number

File Upload

Rating

Select

Checkbox

Radio

Number

Help text and placeholders can also be generated for each field. You can request these features in the description you provide to WS Form.

Once a form is created you can edit as you would any other form using the layout editor.

The OpenAI Audio Transcription endpoint is an AI-powered tool that allows you to convert speech in an audio file uploaded using a file upload field to text that is inserted into a text based field on your form.

The OpenAI Audio Speech endpoint is an AI-powered tool that allows you to convert text in a field on your form to an audio file that is inserted into a file upload field.

The OpenAI Chat endpoint is an AI-powered search engine that uses natural language processing to help you find the answers you need. It can return a list of possible answers, including relevant webpages, articles, and other sources of information, so you can find what you're looking for quickly and easily.

The OpenAI Chat Playground is an interactive tool that helps you explore and create AI-powered conversations. It allows you to customize chatbot responses, experiment with natural language processing models, and fine-tune your conversational skills.

The OpenAI image endpoint is an AI-powered tool that helps you extract, analyze and generate images. It can be used to create automated image classifiers, identify objects in photos, and create digital artwork.

The OpenAI image endpoint is an AI-powered tool that helps you extract, analyze and generate images. It can be used to create automated image classifiers, identify objects in photos, and create digital artwork.

The OpenAI moderation endpoint is a tool for automatically detecting, analyzing, and moderating potentially offensive content. It can help you protect user-generated content on your website.When a form is submitted in WS Form the moderation action can be used to mark a submission as spam if obscene language, hate speech, and other inappropriate content is detected.

## Creating a Form Integrated With OpenAI

### Automatically

WS Form can create a form for an OpenAI endpoint in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a OpenAI form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the OpenAI tab at the top of the page.

Click on an OpenAI template to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

### Manually

It is also possible to use any form created in WS Form and add an action so that you can make OpenAI requests.

#### Add an OpenAI Action

When editing your form, click the Actions  icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Make OpenAI Request from the Action pulldown.

Click Save & Close.

You will noticed that the When Should This Action Run? setting has neither checkbox checked. This is because we recommend using conditional logic to run the OpenAI action when a custom button is clicked. This ensures the OpenAI requests run without submitting the form and keeps the user on the form while they interact with it.

#### Add Conditional Logic to Run the OpenAI Action

Add a custom button to your form.

Click the Conditional Logic  icon at the top of the layout editor.

Create an IF condition that checks if the custom button has been clicked.

Create a THEN statement and choose the Make OpenAI Request action, then choose Run Immediately.

Click Save & Close.

The Make OpenAI Request action will now run when the custom button is clicked.

The OpenAI action settings depend on the endpoint selected.

### Audio - Transcription

The OpenAI Audio endpoint is an advanced API designed for generating and manipulating audio content through AI algorithms.

The audio transcription action settings are as follows:

#### OpenAI Model

Choose the OpenAI model you want to use for this action.

An OpenAI Model is a pre-trained machine learning model that can be used for a variety of tasks such as natural language processing, image recognition, and more. OpenAI models can be used to build applications that are intelligent and able to learn from their data.

#### Language

Choose the language of the speech in the audio file uploaded to the File Field.

#### File Field

Choose a file field on your form to use as the input.

#### Prompt Type

There are two ways of obtaining input for OpenAI:

Field

Mask

##### Prompt Field

If you choose the Field type, you simply choose a field on your form to use for the OpenAI input. You can choose any text based field such as a Text or Text Area field.

##### Mask

If you choose the Mask method you can create an input mask for OpenAI and use WS Form variables to dynamically insert field variables. See Input Mask below.

#### Prompt Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Prompt Mask

Use the input mask to create a custom prompt for OpenAI and use WS Form variables to dynamically insert field variables. This is particularly useful if you are developing prompt engineering for OpenAI. To learn more:

Best practices for prompt engineering with OpenAI API

#### Response Format

Choose the response format of the converted speech.

#### Output Field

Choose the field to use for the output (speech to text). This will typically be a text area field on your form. The output field can also be configured as the same field as your input field. An example of this can be found in the Completion - Chat template where input and output are both contained within the same text area field.

#### Temperature

Choose the temperature setting for the OpenAI request.

The OpenAI Temperature setting is used to adjust how much of a random element is introduced into the output generated by the OpenAI model. A lower completion temperature indicates that the model should be more conservative in its output, while a higher temperature indicates that the model should be more creative with its output.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. Longer timeouts may be required for longer or more complex OpenAI requests.

### Audio - Speech

The OpenAI Audio endpoint is an advanced API designed for generating and manipulating audio content through AI algorithms.

The Audio - Speech endpoint is used to convert text into an audio file containing speech.

The audio speech action settings are as follows:

#### OpenAI Model

Choose the OpenAI model you want to use for this action.

An OpenAI Model is a pre-trained machine learning model that can be used for a variety of tasks such as natural language processing, image recognition, and more. OpenAI models can be used to build applications that are intelligent and able to learn from their data.

#### Voice

Choose the style of voice to use in the audio file. Learn more

#### Speed

Choose the speed of the voice to use in the audio file.

#### Prompt Type

at There are two ways of obtaining input for OpenAI:

Field

Mask

##### Prompt Field

If you choose the Field type, you simply choose a field on your form to use for the OpenAI input. You can choose any text based field such as a Text or Text Area field.

##### Mask

If you choose the Mask method you can create an input mask for OpenAI and use WS Form variables to dynamically insert field variables. See Input Mask below.

#### Prompt Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Prompt Mask

Use the input mask to create a custom prompt for OpenAI and use WS Form variables to dynamically insert field variables. This is particularly useful if you are developing prompt engineering for OpenAI. To learn more:

Best practices for prompt engineering with OpenAI API

#### Response Format

Choose the response format of the generated speech.

#### Output Field

Choose the field to use for the output (speech to text). This will typically be a text area field on your form. The output field can also be configured as the same field as your input field. An example of this can be found in the Completion - Chat template where input and output are both contained within the same text area field.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. Longer timeouts may be required for longer or more complex OpenAI requests.

### Chat - Completion

The OpenAI Chat endpoint creates a completion for a chat input.

The completion action settings are as follows:

#### OpenAI Model

Choose the OpenAI model you want to use for this action.

An OpenAI Model is a pre-trained machine learning model that can be used for a variety of tasks such as natural language processing, image recognition, and more. OpenAI models can be used to build applications that are intelligent and able to learn from their data.

#### Prompt Type

There are two ways of obtaining input for OpenAI:

Field

Mask

##### Prompt Field

If you choose the Field type, you simply choose a field on your form to use for the OpenAI input. You can choose any text based field such as a Text or Text Area field.

##### Mask

If you choose the Mask method you can create an input mask for OpenAI and use WS Form variables to dynamically insert field variables. See Input Mask below.

#### Input Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Input Mask

Use the input mask to create a custom prompt for OpenAI and use WS Form variables to dynamically insert field variables. This is particularly useful if you are developing prompt engineering for OpenAI.

The following is a conversation between an Agent and a Customer. The agent will attempt to diagnose the problem and suggest a solution, whilst refraining from asking any questions related to PII. Instead of asking for PII, such as username or password, refer the user to the help article wsform.com/knowledgebase

Customer: #field(123)
Agent:

In the above example mask, the pre-amble provides OpenAI with context about the prompt. We then insert the customers question from field ID 123 into that prompt.

To learn more:

Best practices for prompt engineering with OpenAI API

#### Output Field

Choose the field to use for the output (completion). This will typically be a text area field on your form. The output field can also be configured as the same field as your input field. An example of this can be found in the Completion - Chat template where input and output are both contained within the same text area field.

#### Trim Output

If checked, the completion will be trimmed.

#### Apply WPAutoP to Output

wpautop is a WordPress function that automatically adds paragraph and line break tags to the text content of a post or page, to properly format the text and make it easy to read on the website.

If checked, WS Form will apply wpautop to the output from OpenAI so that it can be used in fields such as HTML and Text Editor field types.

#### Use Output Mask

If checked, an Output Mask field will appear allowing you to finely control the output that is injected into the Output Field. You can use WS Form variables in the mask. Use #output to inject the OpenAI output anywhere in the mask.

#### Append Output

If checked, the OpenAI output will be appended to the existing content in the output field.

#### Max Tokens

Choose the maximum number of tokens you want to allow each time the action runs. This defaults to 150.

The GPT family of models process text using tokens, which are common sequences of characters found in text. The models understand the statistical relationships between these tokens, and excel at producing the next token in a sequence of tokens.

#### Inject Start Text

This setting injects text to the beginning of the output prior to it being added to the output field. This setting is included in case you want to simulate output similar to that provided by the API playground.

#### Inject Restart Text

This setting injects text at the end of the output prior to it being added to the output field.This setting is included in case you want to simulate output similar to that provided by the API playground.

#### Stop Sequences

OpenAI Stop Sequences are used to determine when OpenAI models should stop generating responses. The stop sequence is a predetermined set of words or characters that, when encountered, will indicate to the model that it has reached the end of its output and should not generate any more data. Up to 4 stop sequences can be configured.

#### Temperature

Choose the temperature setting for the OpenAI request.

The OpenAI Temperature setting is used to adjust how much of a random element is introduced into the output generated by the OpenAI model. A lower completion temperature indicates that the model should be more conservative in its output, while a higher temperature indicates that the model should be more creative with its output.

#### Top P

Choose the top p setting for the OpenAI request.

The OpenAI Completion Top P setting is used to adjust the probability of which tokens will be included in the generated output. A higher top p value indicates that the model should prioritize tokens with a higher probability, while a lower top p value indicates that the model should consider tokens with lower probabilities.

#### Frequency Penalty

Choose the frequency penalty setting for the OpenAI request.

The OpenAI Frequency Penalty setting is used to adjust how much frequency of tokens in the source material will influence the output of the model. A higher frequency penalty indicates that the model should favor tokens with a higher frequency, while a lower frequency penalty indicates that the model should prioritize tokens with a lower frequency.

#### Presence Penalty

Choose the presence penalty setting for the OpenAI request.

The OpenAI Presence Penalty setting is used to adjust how much presence of tokens in the source material will influence the output of the model. A higher presence penalty indicates that the model should favor tokens with a higher presence, while a lower presence penalty indicates that the model should prioritize tokens with a lower presence.

#### User

An optional unique identifier representing your end-user, which can help OpenAI to monitor and detect abuse, e.g. #user_id.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. Longer timeouts may be required for longer or more complex OpenAI requests.

### Moderation

The OpenAI moderation endpoint is a tool for automatically detecting, analyzing, and moderating potentially offensive content. It can help you protect user-generated content on your website.When a form is submitted in WS Form the moderation action can be used to mark a submission as spam if obscene language, hate speech, and other inappropriate content is detected.

The moderation action settings are as follows:

#### OpenAI Model

Choose the OpenAI model you want to use for this action.

An OpenAI Model is a pre-trained machine learning model that can be used for a variety of tasks such as natural language processing, image recognition, and more. OpenAI models can be used to build applications that are intelligent and able to learn from their data.

#### Input Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. For longer or more complex OpenAI requests, you may need to set longer timeouts.

### Image

The OpenAI image endpoint is an AI-powered tool that helps you extract, analyze and generate images.

The image action settings are as follows:

#### Input Field

Choose the field to use for the input (prompt). This will typically be a text area field on your form.

#### Output Field

Choose the field to use for the output (completion). There are two options for handling the output:

Use a file field configured as a DropzoneJS type to load the resulting images into.

Use a text or URL field to store the resulting URL from OpenAI.

#### Number

Choose the number of images to create (max 10).

#### User

An optional unique identifier representing your end-user, which can help OpenAI to monitor and detect abuse, e.g. #user_id.

#### API Request Timeout (Seconds)

The maximum permissible time in seconds that the API request will run for. For longer or more complex OpenAI requests, you may need to set longer timeouts.

## Variables

The OpenAI integration introduces the following variables for use in actions:

## Option Management Integration

URL: https://wsform.com/knowledgebase/option-management/

The WS Form Option Management integration lets you set WordPress options and also populate form fields with option values.

WordPress options are a core feature of WordPress that allow developers to store and retrieve site-wide settings in the database using the wp_options table. These options are commonly used for saving configuration settings, theme preferences, plugin data, and other customizable values that persist across pages and sessions.

The WS Form Option Management integration lets you set WordPress options and also populate form fields with option values.

https://www.youtube.com/watch?v=HpP-MNtFjes

## Custom Field Plugin Support

While WordPress provides built-in functions like get_option() and update_option() to manage these settings, developers often rely on tools like Advanced Custom Fields (ACF), JetEngine or Meta Box to create more user-friendly settings pages. These plugins provide interfaces for managing custom options, making it easier for site administrators to configure settings without writing custom code.

The WS Form Option Management allows developers to seamlessly retrieve and populate form fields with stored option values without the need for using WordPress functions. Furthermore, the integration can be used to populate and set any option name with an option value, including using WS Form variables.

The following custom field plugins are also supported by the Option Management integration:

Advanced Custom Fields (ACF) PRO

JetEngine

Meta Box

WS Form can automatically create option forms for these custom field plugins.

## Installation

The Option Management plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Option Management plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Option Management tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Creating a Form for Option Management

### Automatically

To automatically create an Option Management form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Option Management tab at the top of the page.

Click on a form template. If you have ACF, JetEngine or Meta Box settings pages, templates are automatically created for those.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

### Manually

It is also possible to use any form created in WS Form and add an action so that fields values are pushed to WordPress options.

To add an Option Management action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Option Management from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click on the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Option Management action settings are as follows:

#### When Should This Action Run?

You can choose to run the Option Management action when the form is saved, submitted, or both.

#### Source

Choose the options source. For regular WordPress options, use Custom. If you are pushing a custom field plugin settings page, choose the setting page from this option. If you need to push options to multiple settings pages, add multiple actions.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to corresponding WordPress options.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your Form Field.

In the middle column, enter the option Name.

In the right-hand column, choose the Autoload setting. Learn more about the option Autoload setting.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

The integration also supports setting custom option values.

To add a custom mapping:

Click the Add  icon at the bottom right of the meta mapping section.

In the left-hand column, enter the option Name.

In the middle column, enter the option Value. WS Form variables can be used in this column.

In the right-hand column, choose the Autoload setting. Learn more about the option Autoload setting.

Repeat this process for each mapping.

Click the Save button at the bottom of the sidebar to save your changes.

## Populating a Form with Option Data

As well as pushing data to WordPress options, you can also populate a form with option data. To do this:

Click on the Form Settings icon at the top of the layout editor.

Click the Data tab.

Check the Populate Using Action checkbox.

Choose Option Management.

Choose which option settings you want to populate from under List to Populate From.

For WordPress options choose Custom.

To populate from a custom field plugin such as ACF or Metabox choose the appropriate Settings Page.

Use the mappings settings to map the options to your form fields.

Click Save & Close.

Click Publish to push the changes live.

## Custom Field Settings

If you are using a custom field plugin for WordPress such as Advanced Custom Fields (ACF) or Meta Box, addition mapping options will appear to allow you to map WS Form fields to your settings page custom fields.

## Our Support

URL: https://wsform.com/knowledgebase/our-support/

Our WS Form PRO license holders receive one year of support and plugin updates from the purchase date.

Our WS Form PRO license holders receive one year of support and plugin updates from the purchase date. When a license is renewed this is extended by an additional year.

## What Does Support Cover?

For users of our LITE version, please refer to our knowledge base.

For our paid license customers, support covers:

Questions regarding the built-in features of WS Form PRO or any of our integrations

Reporting and fixing bugs

For other requests, please refer to:

Feature Requests

Facebook WS Form Community

Please note that we will not be held to any deadline and we are not obligated to provide support for a feature which is not already part of WS Form PRO.

## What Does Support Not Cover?

We are unable to provide support for:

Phone or video support calls.

Code samples (PHP, JavaScript, CSS, regular expressions or other languages). We may however point you in the direction of existing example code to assist you.

Unintended use.

Coaching or training of how to build complex applications with WS Form.

Questions unrelated to WS Form (e.g. why an unrelated plugin will not work).

If you need help custom development help, we recommend Codeable.

### What Should I Include in a Support Ticket?

When submitting a support ticket, the following helps us to provide a timely and helpful response:

Provide a concise and short explanation of the issue you are experiencing.

Let us know where in your form you are experiencing the problem.

Provide a link to your form and/or an export of your form.

If the issue is related to a bug, please send us a screenshot of the Settings -> System page.

Please provide screenshots of anything else you think might help assist us.

If applicable and you are able to, please provide us with details of any error messages you are seeing.

### Support Hours

The WS Form team is based in the USA and is on Eastern Time.

Support is provided from 9am to 5pm EST Monday - Friday. We are closed during normal public holidays.

We aim is to respond to support tickets by the next business day.

 

## Oxygen Visual Site Builder - Form Element

URL: https://wsform.com/knowledgebase/oxygen-visual-site-builder-form-element/

Adding a form to a page using Oxygen visual builder can be done by using a shortcode element.

Adding a form to a WordPress page using the Oxygen Visual Site Builder (oxygenbuilder.com) can be done easily by using the WS Form element.

In Oxygen open the WS Form PRO section and click the Form element to add it to your layout.

Choose a form from the dropdown.

Click Apply Params and the form will be show in your layout.

 

## Pabbly Integration

URL: https://wsform.com/knowledgebase/pabbly/

Connect WS Form to Pabbly. Pabbly integrates and connects more than 600+ different platforms.

Pabbly Connect integrates and connects more than 600+ different platforms.

Learn more: The official WS Form Pabbly integration page

To connect WS Form to Pabbly:

#### In Pabbly

From your Pabbly Dashboard, click Create Workflow.

Choose a name for your workflow.

Search for and click WS Form in the app directory.

Choose New Form Submission in the Trigger Event setting.

Click Copy to copy the Webhook URL.

#### In WS Form

Add or edit a new form.

Click the Actions icon at the top of the page when editing a form.

Click the + icon to add a new action.

Choose Webhook as the action type.

Copy the Webhook URL from above & paste it in the URL of Endpoint setting.

Leave all other settings as is.

Under Field Mapping configure each of your form fields to map to keys of your choice, e.g. Map a First Name text field to the key first_name.

Click on Save & Close button.

Pabbly will then show the Webhook response in your workflow and WS Form is connected!

## Passing Data from One Form to Another Using a Query String

URL: https://wsform.com/knowledgebase/passing-data-from-one-form-to-another-using-a-query-string/

It is possible to transfer data from one form to another using query string parameters.

It is possible to transfer data from one form to another. Let's assume we have two forms; Form 1 and Form 2. The general methodology is as follows:

Form 1 uses a Redirect action that redirects to the URL of Form 2 when the form is submitted. The URL includes a query string which contains the values from Form 1 using the WS Form variable #field(123) where 123 is the ID of the field.

Form 2 extracts the values from the query string using the WS Form variable #query_var("parameter"). This variable is added to the Default Value setting of the fields on Form 2.

## Form 1 - Create a Redirect Action

In this tutorial we'll create a simple form containing a name and email field.

On Form 1 we create a redirect action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select Redirect from the Action pulldown. A series of settings will appear.

In the URL setting add the web address to Form 2.

In the Query String Parameter setting we're going add two rows, one for Name field and one for the Email field. To add a query string parameter, click the Add  icon twice, one for each row, then we'll enter the following:

Field: n Value: #field(1)

Field: e Value: #field(2)

... where 1 is the ID of the Name field and 2 is the ID of the Email field.

NOTE: Certain query string parameters are reserved by WordPress and will cause a redirect or 404 error. Please refer to the list of reserved query parameters here.

An example of configuring the redirect action is shown below:

## Form 2 - Set Default Values

On Form 2 you extract the field values from Form 1 using the WS Form variable #query_var("parameter") in the default value setting of the fields on that form.

In this tutorial we'll create two corresponding text fields, one labeled Name, the other Email.

To set the default value of the Name text field:

Click the settings icon on the text field.

In the Default Value setting we'll add: #query_var("n").

Click Save & Close.

This will extract the n parameter from the query string and will replace it with the name entered on Form 1.

We do the same for the Email field using a default value of #query_var("e") so that it extracts the query string parameter e instead.

And that's it. When Form 1 is submitted, the values from the Name and Email fields will be passed to Form 2 and loaded into the corresponding fields.

Some fields, such as Select, Checkbox and Radio fields do not have a default value setting (due to the more advanced selected icons in the data grid). These can be populated using a different method:

Dynamically Set a Select Field Value Using a Query Variable

Learn more about populating fields using query string parameters:

Populate a Field With Query String Data

Fields can also be populated dynamically using custom PHP:

Populate the Default Value of a Field Using PHP

Populate Select, Checkbox and Radio Fields Using PHP

Data Sources: WordPress Filter Hook

## Password Field

URL: https://wsform.com/knowledgebase/password/

The password field provides a way for the user to securely enter a password.

The Password field provides a way for the user to securely enter a password. The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, which is done usually by replacing each character with a symbol, such as the asterisk ("*") or a dot ("•"). This character will vary depending on the user agent and OS.

## Demo

## Adding a Password Field

To learn how to add, edit, clone, move, resize, offset, or delete a password field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field such as ********** for a password field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Features

#### Password Strength Meter

If you enable this feature, the password field will show how strong a password is as the password is being typed.

#### Minimum Password Strength

Choose a minimum password strength for the password field. If the chosen level is not attained the field will be invalidated. Password strength levels are handled ZXCVBN which is bundled with WordPress.

#### Password Visibility Toggle

If you enable this feature, a password visibility toggle icon will appear in the password field. When clicked, the obscured password will be shown as plain text. When clicked again, the plain text password will be obscured again.

#### Suggest Password

If you enable this feature, a suggest password icon will appear that will generate a random password for the user.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the password field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Auto Complete Off

If checked, the form will attempt to not allow the visitor's browser to autofill this field.

#### Minimum Character Length

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

This number can be used in conjunction with the character count variables.

#### Maximum Character Length

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

This number can be used in conjunction with the character count variables.

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element's value is checked against. This field is useful in, for example, forcing a website visitor to enter an alphanumeric password.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Labels

Use these settings to change the labels used for the password strengths as well as the visibility toggle icon title.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Pasting Content into Data Grids

URL: https://wsform.com/knowledgebase/pasting-content-into-data-grids/

Learn how to quickly populate WS Form data grids by pasting CSV or tab-separated data directly from spreadsheets, text editors, or CSV files into Select, Check…

WS Form lets you paste comma-separated (CSV) or tab-separated (TSV) or data directly into a Data Grid used to configure field options in Select, Checkbox, and Radio fields.

Pasting multiple rows and columns at once is a much faster way to build out long lists of options compared to typing them in one cell at a time, and it works seamlessly with data copied directly from spreadsheet apps such as Microsoft Excel, Apple Numbers, and Google Sheets. Unlike CSV import, pasted data does not use the first row as column headings. Every pasted row is treated as normal data.

## How It Works

When you paste into a data grid cell, WS Form looks at the contents of your clipboard and decides what to do:

If the clipboard contains a single value, it pastes into the focused cell as normal.

If the clipboard contains multiple lines, each line becomes a new row.

If each line contains tabs or commas, each value becomes a separate column. The first pasted row is treated as data, not as column headings.

Pasting always starts from the cell you have focused. Existing rows below and columns to the right are overwritten, and new rows or columns are added automatically if the pasted data is larger than the current grid.

## Pasting Multiple Rows

To paste multiple rows into a data grid:

Copy your data from a spreadsheet, text editor or any other source.

Click the cell in your data grid where you want the paste to start.

Press Ctrl + V on Windows or Cmd + V on Mac.

For example, if your data grid already has three rows and you click into the first column of the second row, the pasted data will overwrite row 2 onward and add new rows beneath as needed.

## Pasting Multiple Columns

WS Form automatically detects the column delimiter in your pasted data:

Tab characters are used as the column delimiter when present (this is the default format used by Excel, Numbers and Google Sheets when you copy cells).

Commas are used as the column delimiter if no tabs are found (standard CSV format).

If your pasted data contains more columns than the data grid currently has, WS Form will add new columns automatically, up to the maximum allowed for that data grid. Pasting only adds column cells and values. It does not create column labels from the first row. To define column headings, use the CSV import feature instead.

### Quoted Values

Standard CSV quoting rules (RFC 4180) are supported, which means values containing commas, line breaks or quote characters can be wrapped in double quotes. To include a literal double quote inside a quoted value, escape it by doubling it up. For example:

"apple, red","crisp and sweet" → two columns: apple, red and crisp and sweet

"He said ""hello""" → one column containing: He said "hello"

## Copying From a Spreadsheet

The easiest way to populate a data grid is to copy directly from a spreadsheet:

In your spreadsheet, select the range of cells you want to copy.

Press Ctrl + C on Windows or Cmd + C on Mac.

In WS Form, click into the data grid cell where you want the paste to start.

Press Ctrl + V or Cmd + V to paste.

Spreadsheet apps copy cells using tab delimiters by default, so values with commas in them are preserved correctly without any extra quoting on your part.

## Examples

### Example 1: Build a Country List

Copy a list of countries from a spreadsheet and paste them into the first cell of a Select field's data grid. WS Form creates a new row for each country.

United States
Canada
Mexico
Brazil
United Kingdom
France
Germany
Japan
Australia
South Africa

### Example 2: Build a Price List

In a Price Select field, you can paste multiple columns at once, such as a product label and price copied directly from a spreadsheet.

Small Coffee,2.50
Medium Coffee,3.25
Large Coffee,4.00
Blueberry Muffin,2.95
Chocolate Croissant,3.50
Bagel with Cream Cheese,4.25
Orange Juice,3.75
Bottled Water,1.50

After pasting, the first column becomes the option label and the second column can be mapped to a price or value column.

### Example 3: Build a Multi-Column Product Grid

You can paste larger datasets with several columns at once.

Laptop Stand,LS-100,Office,49.99
Wireless Mouse,WM-220,Electronics,24.95
Mechanical Keyboard,MK-500,Electronics,89.00
Notebook Pack,NB-010,Office,12.50
Desk Lamp,DL-330,Office,39.95
USB-C Cable,UC-120,Accessories,14.99
Webcam,WC-800,Electronics,79.00
Monitor Riser,MR-210,Office,34.50

If the pasted data contains more columns than the current data grid, WS Form automatically creates the additional columns for you, but pasted rows never define column labels.

### Example 4: Paste Tab-Separated Spreadsheet Data

Spreadsheet applications such as Excel, Numbers and Google Sheets copy data using tab characters instead of commas. WS Form detects this automatically.

The example below shows the same data represented with tabs between values:

Basic Plan basic 9.99
Standard Plan standard 19.99
Professional Plan pro 29.99
Enterprise Plan enterprise 99.99
Student Plan student 4.99
Nonprofit Plan nonprofit 7.99

When pasted into a data grid, each tab-separated value becomes its own column automatically.

### Example 5: Paste Quoted CSV Values

Quoted CSV values are useful when your data contains commas, quotation marks or line breaks.

"New York, NY","United States"
"Paris","France"
"Berlin","Germany"
"Sydney","Australia"
"Toronto","Canada"
"He said ""hello""","Example with quotes"

WS Form correctly parses quoted values according to standard CSV formatting rules.

### Example 6: Append Rows to an Existing Grid

You can click into the first empty row of an existing data grid and paste additional rows without affecting earlier data.

Visa
Mastercard
American Express
Discover
PayPal
Apple Pay
Google Pay

This is useful when gradually building up a long list of options over time.

### Example 7: Paste Data With Empty Cells

Empty values are preserved when pasting multi-column data.

Red,#ff0000,Primary
Blue,#0000ff,Primary
Green,#00ff00,Secondary
Black,#000000,
White,#ffffff,
Orange,#ff9900,Secondary
Purple,#800080,Secondary

Blank cells remain empty in the data grid and can be filled in later if needed.

## Tips

Pasting always starts from the focused cell, not from the top of the grid. Click the exact cell where you want the paste to begin before pressing paste.

Existing values in cells covered by the paste are overwritten. If you want to keep your existing rows, click into the first empty row before pasting.

For very large datasets, or to replace the data grid entirely, consider using the built-in CSV import feature. Note that you can also drag and drop CSV files into the data grid to import them.

## PayPal Checkout Integration

URL: https://wsform.com/knowledgebase/paypal_checkout/

The PayPal Checkout integration allows you to accept PayPal or credit card payments from your forms.

The PayPal Checkout integration allows you to accept PayPal or credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

The PayPal Checkout button uses the latest client-side payment process offered by PayPal described here.

Note: When a PayPal Checkout transaction is completed, WS Form PRO will store the transaction ID with the form submission. This transaction ID is a credit transaction ID. Your customer will receive a debit transaction ID. Although these IDs are different, you can still search using either transaction ID in PayPal.

Note: You must serve the page containing the payment form over HTTPS. The address of the page containing PayPal Checkout must start with https:// rather than just http://.

## Installation

The WS Form PayPal Checkout integration is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the PayPal Checkout integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the PayPal Checkout tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Configuring PayPal Checkout

In order to use the PayPal Checkout button, you first need to enter your PayPal client IDs.

If you do not yet have a PayPal account, register for a new account.

To obtain your client IDs:

Login to your PayPal account

Create a new app by clicking here. We suggest calling the app WS Form.

Copy the Client ID for the sandbox and live versions of your app.

To enter your client IDs:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the PayPal Checkout tab at the top of the page.

Enter the Client ID for the sandbox and live versions of your app created above.

Click the Save button.

Once configured, the PayPal Checkout button will appear under the E-Commerce section of the Build when editing a form.

## Adding The PayPal Checkout Button

To learn how to add, edit, clone, move, resize, offset, or delete a PayPal Checkout button field, please click here.

When editing a custom button field, the field settings sidebar will appear. This contains the following tabs:

Basic

Advanced

You can edit any of the settings in each of these tabs and then click the Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

For a full explanation of the configuration options for the PayPal Checkout button, click here.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the custom button in the WS Form form builder.

### Transaction

#### Amount To Charge

By default this field is blank, and the PayPal Checkout button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

#### Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

### Billing Address

#### First Name

You can use this field to pre-populate the payers first name.

WS Form variables can be entered into this field.

#### Last Name

You can use this field to pre-populate the payers first name.

WS Form variables can be entered into this field.

#### Email

You can use this field to pre-populate the payers email address.

WS Form variables can be entered into this field.

#### Phone Type / Phone

You can use this field to pre-populate the payers phone number. First use a phone type, e.g. Mobile, then enter their phone number.

WS Form variables can be entered into this field.

#### Billing Address Mapping

This field is optional. Billing Address Mapping tells WS Form which of your form fields relate to the corresponding billing (payer) fields in PayPal Checkout. When using this feature, the following fields MUST be mapped:

Address Line 1

City

State

Postal Code

Country

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding PayPal field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Shipping Address

#### Recipient Name

You can use this field to pre-populate the recipient name when used in conjunction with the shipping mapping fields.

#### Shipping Address Mapping

This field is optional. Shipping Address Mapping tells WS Form which of your form fields relate to the corresponding shipping fields in PayPal Checkout. When using this feature, the following fields MUST be mapped:

Address Line 1

City

State

Postal Code

Country

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding PayPal field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Disabled Payment Methods

Check which payment methods you would like to disable.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how the PayPal Checkout button is rendered.

### Button

#### Layout

This setting determines the button layout when multiple buttons are available. Choose from horizontal or vertical.

#### Color

Select the button color you would like to use. The default and recommended color is gold.

### Shape

Select the button color you would like to use. The default and recommended shape is rectangle.

#### Height

Height is optional. Leave this field blank, or enter a value in pixels (typically between 25 and 55) to specify a button height. Different button sizes have different limitations on height.

#### Label

Select the style of button you would like to create by changing this setting. The available options are:

PayPal

PayPal Checkout

Buy Now

Pay with PayPal

PayPal Installment

#### Tagline

When enabled the PayPal tagline will appear under the button. This option is only available for the horizontal layout.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Transaction

#### Breakdown Mapping

This field is optional. Breakdown Mapping tells WS Form which of your cart detail form fields relate to the corresponding detail fields in PayPal Checkout. When using this feature, the following fields are available for mapping:

Subtotal

Shipping

Tax

Handling Fee

Shipping Discount

Insurance

Gift Wrap

Note: The mapped fields MUST add up to the cart total.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your cart detail form field.

In the right-hand column, select the corresponding cart detail PayPal field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Zero Amount

You can configure how WS Form should handle zero amounts for PayPal Checkout buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

#### Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

#### Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the Show Message action. You can configure these settings to change how the error messages are displayed to users.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## PDF Integration

URL: https://wsform.com/knowledgebase/pdf/

The PDF integration allows you to attach a PDF file to emails, as well as export PDFs from the submissions page.

The PDF integration allows you to attach a PDF file to emails, as well as export PDFs from the submissions page.

Note: The PDF integration uses Published forms. Please ensure your form has been published before using the PDF integration.

## Installation

The WS Form PDF plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the PDF plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the PDF tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## PDF Settings

Page size, page orientation, and font settings can be changed in the PDF settings tab. To access the settings:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the PDF tab at the top of the page.

Adjust the settings to suit your preferences.

Click Save.

## Attaching a PDF to a Send Email Action

To attach a PDF to a Send Email action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action (or select an existing 'Send Email' action).

Scroll down the settings until you see the Attach PDF checkbox.

Check the Attach PDF checkbox.

If you want to specify the filename of the PDF, enter it in the Custom PDF Filename setting. You can use WS Form variables in this setting. (Optional)

If you want to specify a custom template to use for the PDF, enter the template filename in this setting. For example: my-custom-template.html (See Creating Custom PDF Templates below)

Click the Save button at the bottom.

Now when the email is sent, a PDF attachment of your submitted data will be included with the email.

## Export Submission PDFs

To create a PDF of a submission:

View the submissions of a form.

In the left-most column, click on Export PDF.

## Adding Page Breaks

When you install the PDF integration, a new field type will appear in the form editor field types called 'Page Break'. Simply drag that onto your form, and a page break will appear in your PDF at that point. This is useful for formatting PDFs that are created from your form submissions. This field type does not have any settings.

## Variables

The PDF integration adds additional variables that you can use in actions such as messages, emails and in custom mapping.

PDF files are not stored on your server. The URLs provided by these variables generate PDF documents dynamically from a hash. A unique encryption key is stored in the wp_options table to encrypt the hash used in the URLs. You should ensure the WS Form wp_options record (option name: ws_form) is not changed or the URLs will become stale.

You must have a Save Submission action on your form in order for PDF URLs to work.

## Creating Custom PDF Templates

Note: We are not able to provide HTML support for the development of custom templates using the PDF integration.

The PDF integration uses parsed HTML templates containing WS Form variables. These templates are then converted to PDF. By default, WS form will create the PDF using a template found at the following location:

<plugin root>/templates/standard.html

You can also create custom templates for each form or for each 'Send Email' action. We recommend copying the standard.html template to get started.

For tips on how to add fields to your HTML template, see Writing Custom HTML for Email Content and PDF Templates.

### Custom Templates By Form

To create a template that will be used by a specific form, the template should be saved to:

wp-content/uploads/ws-form/pdf/templates/<form_id>.html

So for example, for form ID 123 you would save your custom template to:

wp-content/uploads/ws-form/pdf/templates/123.html

You can find the form ID by clicking the 'Form Settings'  icon and looking at the top of the sidebar.

### Custom Templates By Send Email Action

If you want to specify a custom template for a specific Send Email action, that can be done by configuring the 'Custom PDF Template' setting in the Send Email action itself.

In the example above the template would be located at:

wp-content/uploads/ws-form/pdf/templates/my-template.html

Note that the 'Export PDF' link on the submissions page will always use the standard template or the form specific template.

### How a PDF is Created

The integration uses the popular dompdf converter to transform the parsed HTML template in a PDF document. Please refer to their online help for guidance on formatting a PDF document.

## Standard Template

The standard template code is as follows:

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>#blog_name</title>

<style>

 body{

 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%
 -webkit-font-smoothing: antialiased;
 background-color: #ffffff;
 font-family: #pdf_default_font;
 font-size: #pdf_default_font_size;
 line-height: 1.4;
 margin: 0;
 padding: 0;
 }

 h1, h2, h3, h4 {

 font-weight: bold;
 margin: 0;
 margin-bottom: 10px;
 }

 h1 {

 font-size: 24px !important;
 }

 h2 {

 font-size: 22px !important;
 }

 h3 {

 font-size: 20px !important;
 }

 h4 {

 font-size: 18px !important;
 }

 div.wsft-field,p,li,td,span,a {

 font-weight: normal;
 margin: 0;
 margin-bottom: 10px;
 }

 svg, img {

 max-width: 100%;
 }

 img[data-type="signature"] {

 max-height: 100px;
 }

</style>

</head>

<body>

#email_submission

</body>

</html>

## Setting Page Size and Orientation in the Template

You can set the page size and orientation in the template itself by using CSS:

<style>
 @page {
 size: A4 landscape;
 }
</style>

## Performance

URL: https://wsform.com/knowledgebase/performance/

WS Form has been designed with form-rendering performance in mind. All WS Form submissions are completely isolated from the rest of the standard Wordpress tabl…

The WS Form WordPress form plugin has been designed with form-rendering performance in mind. A few of these design considerations are detailed below.

## Database

All WS Form submissions are completely isolated from the rest of the standard Wordpress database tables to improve performance.

Many of our competitors add form submissions to the regular Wordpress wp_posts table as a custom post type. While this does have some advantages, such as making some of the Wordpress codex functions available to the form submissions themselves, we believe that isolating the form submissions in their own table dramatically improves performance. The main disadvantage to pushing submissions into the wp_posts table is that  post types such as pages, posts, and attachments (media items) all share the same table. Therefore if, for example, you had 10,000 form submissions, any queries for a page will have to contend with those 10,000 records, thus affecting the performance of your website.

## Published Snapshots

While we retain the draft version of forms in various database tables, the final rendering of a form on your website comes from a pre-compiled version of the form that involves a single database query per rendering. This unique way of rendering forms means your website is faster and there is less load on your server. We can achieve client side load speeds of less than 10ms for most forms.

## Good Quality HTML

WS Form comes with a ready-to-use CSS framework that can sit seamlessly in the vast majority of websites. The HTML is clean and concise, such that seasoned developers can easily style the forms to fit in with the rest of a website.

Furthermore WS Form is compatible with recent and past versions of CSS frameworks, such as Bootstrap and Foundation. WS Form physically changes the HTML output to match the precise code required for those frameworks so that the forms rendered are a perfect fit for the rest of the website.

## HTML 5 Compliant Form Fields

Other than some specialist fields such as the signature and reCAPTCHA fields, all of the form fields available in WS Form take advantage of native browser functionality. This avoids the use of third party libraries which would otherwise slow down the performance of a website. Field HTML only includes attributes that are configured in the field settings.

## SCRIPT_DEBUG Compliance

SCRIPT_DEBUG is a related constant that will force WordPress to use the “dev” versions of core CSS and JavaScript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. WS Form complies with this constant to allow for easier debugging.

## No Plugin Piggybacking

Some form plugins require the free version to be installed if the paid version is being used. This is primarily done to increase installation counts in the WordPress plugin repository, but this can be detrimental to plugin performance because two plugins have to be loaded.

Our LITE and PRO plugin editions are separate plugins and do not rely on each other to work. This improves the plugin load speed and reduces resource requirements.

## Performance Plugin Support

WS Form has integrated support for performance plugins such as LiteSpeed and Perfmatters.

## Performance Settings

In addition to the above considerations, WS Form also has some additional settings you can use to further improve performance on production websites.

### Compile CSS

We recommend enabling this to ensure all CSS for the form is pre-compiled and does not require processing each time a form loads. This is only applicable if you are using the WS Form framework. This setting can be found on the Global Settings page under the Advanced tab.

### Inline CSS

We recommend enabling this to render the WS Form CSS as part of your website HTML instead of being enqueued as separate file. This is only applicable if you are using the WS Form framework. This setting can be found on the Global Settings page under the Advanced tab.

### CSS Cache Duration

We recommend setting this to a long duration to improve CSS file caching. This is only applicable if you are using the WS Form framework. Note that the CSS caching will automatically reset when you upgrade to a newer version of WS Form PRO due to a version attribute being appending to the CSS paths. This setting can be found on the Global Settings page under the Advanced tab.

### Dynamic Script Enqueuing

WS Form will only enqueue its own scripts and CSS when a form is rendered on the page.  Furthermore it will only enqueue field type functionality and third party libraries if a form contains a field type that requires that library.

WS Form offers the ability to load third party libraries (signature, color picker, date picker etc) locally or from a CDN location. This setting can be found on the Global Settings page.

WS Form is also compatible with popular speed optimization plugins.

### Statistics - Method

This setting can be found on the Global Settings page under the Basic tab. By default WS Form using a tracking pixel to create statistics about form views, submissions and saves. Whilst this is the most accurate means of gathering statistics, it also requires an additional HTTP request to the WordPress API. A server side option also exists which performs statistical operations on the server as opposed to using an additional HTTP request. The drawback of this method is that if you are using a page caching system the statistics will be less accurate. For optimal performance you may consider disabling the statistics altogether.

## Performance Plugin Considerations

URL: https://wsform.com/knowledgebase/performance-plugin-considerations/

When using a performance plugin, this article contains information that may be of assistance:

When using a performance plugin, the following information may be of assistance:

## Rest API

WS Form uses the WordPress REST API both in the admin and also when submitting forms on a website. The REST API should therefore not be disabled. At minimum all REST API calls to the following path should be enabled:

/wp-json/ws-form/v1/*

## Enqueued JavaScript Files

All enqueue paths have a version appended to them, e.g. ?ver=1.0.0

WS Form provides minified and non-minified versions of all enqueued JavaScript files. If the SCRIPT_DEBUG constant is set to true, WS Form will enqueue the non-minified JavaScript files to aid with debugging. The non-minified JavaScript files do not contain .min in the file path.

The plugin path for WS Form PRO is /wp-content/plugins/ws-form-pro/.

The plugin path for WS Form LITE is /wp-content/plugins/ws-form/.

WS Form PRO does not require WS Form LITE to be installed. They are two different plugins.

The file paths below represent all possible WS Form PRO minimized files. The actual files enqueued will depend on the functionality included in your form.

### Core WS Form Scripts

These files are always enqueued:

/wp-includes/js/jquery/jquery.min.js /wp-content/plugins/ws-form-pro/shared/js/ws-form.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public.min.js

### Debug Console Script

If the debug console is enabled, the following file will be enqueued:

/wp-content/plugins/ws-form-pro/public/js/ws-form-public-debug.min.js /wp-content/plugins/ws-form-pro/public/css/ws-form-public-debug.min.css 

### Dynamically Enqueued Scripts

The following JavaScript files may be enqueued if that functionality is required by a particular field type.

/wp-content/plugins/ws-form-pro/public/js/ws-form-public-analytics.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-calc.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-captcha.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-cascade.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-checkbox.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-color.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-conditional.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-date-translate.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-datetime.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-ecommerce.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-file.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-geo.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-google-address.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-google-map.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-google-route.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-legal.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-loader.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-password.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-progress.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-radio.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-rating.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-section-repeatable.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-select.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-signature.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-ssn.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-tab.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-tel.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-textarea.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-tracking.min.js /wp-content/plugins/ws-form-pro/public/js/ws-form-public-validate.min.js

### Dynamically Enqueued CSS

The following CSS files may be enqueued if that functionality is required by a particular field type. /wp-content/plugins/ws-form-pro/public/css/ws-form-public-base.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-button.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-checkbox.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-color.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-conversational.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-datetime.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-file.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-google-address.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-legal.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-loader.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-media-capture.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-meter.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-number.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-password.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-progress.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-radio.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-range.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-select.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-signature.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-summary.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-tab.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-tel.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-textarea.min.css /wp-content/plugins/ws-form-pro/public/css/ws-form-public-validate.min.css

### Third Party Scripts / CSS

The following files may be enqueued if that functionality is required by a particular field type.

/wp-content/plugins/ws-form-pro/public/js/external/coloris.min.js /wp-content/plugins/ws-form-pro/public/css/external/coloris.min.css /wp-content/plugins/ws-form-pro/public/js/external/dropzone.min.js /wp-content/plugins/ws-form-pro/public/js/external/intlTelInput.min.js /wp-content/plugins/ws-form-pro/public/css/external/intlTelInput.min.css /wp-content/plugins/ws-form-pro/public/js/external/jquery.datetimepicker.full.min.js /wp-content/plugins/ws-form-pro/public/css/external/jquery.datetimepicker.min.css /wp-content/plugins/ws-form-pro/public/js/external/jquery.inputmask.min.js /wp-content/plugins/ws-form-pro/public/js/external/media-capture.min.js /wp-content/plugins/ws-form-pro/public/js/external/media-capture.min.css /wp-content/plugins/ws-form-pro/shared/js/external/select2.full.min.js /wp-content/plugins/ws-form-pro/public/js/external/signature_pad.min.js

### WordPress Core Scripts

#### TinyMCE

If the visual editor is enabled in a text area field, the following files may be included:

/wp-admin/js/editor.min.js /wp-admin/js/media-upload.min.js /wp-includes/js/admin-bar.min.js /wp-includes/js/dist/vendor/wp-polyfill-inert.min.js /wp-includes/js/dist/vendor/regenerator-runtime.min.js /wp-includes/js/dist/vendor/wp-polyfill.min.js /wp-includes/js/dist/dom-ready.min.js /wp-includes/js/dist/hooks.min.js /wp-includes/js/dist/i18n.min.js /wp-includes/js/dist/a11y.min.js /wp-includes/js/hoverintent-js.min.js /wp-includes/js/jquery/ui/menu.min.js /wp-includes/js/jquery/ui/autocomplete.min.js /wp-includes/js/quicktags.min.js /wp-includes/js/shortcode.min.js /wp-includes/js/thickbox/thickbox.js /wp-includes/js/tinymce/tinymce.min.js /wp-includes/js/tinymce/plugins/compat3x/plugin.min.js /wp-includes/js/tinymce/langs/en.js /wp-includes/js/wplink.min.js /wp-includes/js/zxcvbn.min.js

#### CodeMirror

If the HTML editor is enabled in a text area field, the following files may be included:

/wp-includes/js/codemirror/codemirror.min.js /wp-includes/js/codemirror/htmlhint.js /wp-includes/js/codemirror/csslint.js /wp-includes/js/codemirror/esprima.js /wp-includes/js/codemirror/fakejshint.js

#### DropzoneJS

If DropzoneJS is enabled in a file upload field, the following files may be included:

/wp-includes/js/jquery/ui/sortable.min.js /wp-includes/js/jquery/jquery.ui.touch-punch.js

## Phone Field

URL: https://wsform.com/knowledgebase/tel/

The phone field lets your website visitor enter a phone number. By using the phone field, mobile users will be presented with a keypad designed for entering te…

The Phone field lets your website visitor enter a phone number. By using the phone field, mobile users will be presented with a keypad designed for entering telephone numbers. This keyboard type prominently features the numbers 0 through 9 and the "*" and "#" characters. This keyboard type does not support auto-capitalization.

## Demo

## Adding a Phone Field

To learn how to add, edit, clone, move, resize, offset, or delete a phone field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Phone Number or Mobile Phone.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be (555) 555-5555.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field such as (###) ###-### for a phone field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### International Telephone Input

#### Enable

By checking this setting, WS Form will apply functionality provide by the International Telephone Input (ITI) JavaScript library.

The ITI functionality provides a user friend interface for entering domestic or international phone numbers.  It adds a flag dropdown to your phone field, detects the user's country, displays a relevant placeholder and provides phone number formatting and validation.

If you intend on using this feature and allowing the Save feature on your form, we recommend choosing a Return Format of International (see below).

#### Allow Dropdown

If not checked, there is no dropdown arrow, and the selected flag is not clickable.

#### Show Placeholder Number

If checked, an example placeholder number will be shown. The example placeholder will only be shown if your placeholder setting is blank.

#### National Mode

If checked, allow users to enter national numbers and not have to think about international dial codes.

#### Separate Dialing Code

If checked, the country dial code will be displayed next to the selected flag so it is not part of the typed number.

#### Return Format

The return format defines how the phone number entered will ultimately be submitted and stored. The options are as follows:

Return Format
Example Input
Example Output

No Formatting
5551234567
5551234567

National
5551234567
(555) 123-4567

International
5551234567
+1 555-123-4567

E164
5551234567
+15551234567

RFC3966
5551234567
+tel:+1-555-123-4567

#### Initial Country

Use this setting to choose the initial country shown to the website visitor.

If you choose Auto WS Form will perform a client-side IP lookup to try to determine the visitors location. This feature is only available in WS Form PRO.

#### Countries

This setting allows you to override the available countries shown in the dropdown list.

To add a country:

Click the Add  icon.

Choose a country from the dropdown list.

Repeat this for each country you wish to list.

Click Save.

#### Preferred Countries

This setting allows you to override the preferred countries shown at the top of the dropdown list.

To add a preferred country:

Click the Add  icon.

Choose a country from the dropdown list.

Repeat this for each country you wish to list.

Click Save.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the phone field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the minimum number that should be entered into the field in order for it to be valid. Leaving this blank will mean any minimum value can be entered. This can be any negative or positive number.

#### Maximum

This is the maximum value that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. This can be any negative or positive number.

#### Step

The step attribute specifies the legal number intervals for values entered into the field. For example if the minimum value is set to -3 and the maximum is set to 9 and the step is set to 3, the permitted values would be:

-3, 0, 3, 6, 9

#### Input Mask

Input masks help the user with the input by ensuring a predefined format. This can be useful for fields such as dates, numerics and phone numbers.

Example input masks can be selected by clicking the hamburger icon .

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element’s value is checked against. This field is useful in, for example, forcing a website visitor to enter a phone number in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. For more information about using WS Form data grids, click here. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

## Pipedrive Integration

URL: https://wsform.com/knowledgebase/pipedrive/

The Pipedrive integration lets you push new deals to a pipeline and stage using a WS Form action.

The Pipedrive integration lets you push new deals to a pipeline and stage using a WS Form action. You can also create new forms from your Pipedrive pipelines in a single click on the add form page.

## Installation

The Pipedrive plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Pipedrive plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Pipedrive tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Pipedrive

In order to use the integration, you need to connect it to Pipedrive. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Pipedrive tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Pipedrive account, you can create a new account here.

## Creating a Form for Pipedrive

### Automatically

WS Form can create a form for any of your Pipedrive objects in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Pipedrive form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Pipedrive tab at the top of the page.

Click on a pipeline.

Select a stage.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your pipeline does not appear, click the refresh icon in the Pipedrive tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a Pipedrive object when a user saves or submits their form.

To add a Pipedrive action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Pipedrive from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Pipedrive action settings are as follows:

#### When Should This Action Run?

You can choose to run the Pipedrive action when the form is saved, submitted, or both.

#### Pipeline

Select which pipeline the deal should be pushed to.

#### Stage

Select which pipeline stage the deal should be pushed to.

#### Field Mapping

Field mapping tells WS Form which of your form fields relates to the corresponding deal, organization or person fields in Pipedrive. For example you would want to map your Email field to the Person Email field in Pipedrive.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Pipedrive field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

At minimum, one of the following fields must be mapped for each object type:

Deal: Title

Organization: Name

Person: Name

#### Custom Mapping

Custom mapping allows you to set a Pipedrive field to any value you wish, including the use of WS Form variables. For example you might want to map a lead source to the source field in the Lead object in Pipedrive, or perhaps set the deal title to include the submission ID using the #submit_id variable.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Pipedrive field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Notes

The notes setting allows you to add notes to any deal, organization or person added when the action runs.

To add a note:

Click the Add  icon at the bottom right of the notes section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column. select the objects you would like the note to be attached to.

Repeat this process for each note you require.

Click the Save button at the bottom of the sidebar to save your changes.

#### Deduplication

When a deal is added, you can opt to deduplicate by:

Organization Name

Person Name

Person Email (ensure an email address is mapped to the person email field)

Deal Title

Check the deduplication settings you would like to implement.

## Populate a Country Select Field with Geolocation

URL: https://wsform.com/knowledgebase/populate-a-country-select-field-with-geolocation/

Automatically set a country select field by performing a client-side geolocation lookup with WS Form.

When showing a country select field, you can automatically set the user’s country using a client-side IP geolocation lookup.

## Demo

## Tutorial

To create a select field containing countries:

Add a Select field to your form.

Edit the Select field and click on the Options tab.

Under Data Source choose Preset.

Choose Countries (Basic).

Click Get Data.

Under Column Mapping choose Code for the Values setting.

Click Save & Close.

Next, enable geolocation on the form:

Click the Form Settings  icon at the top of the layout editor.

Click the Geo tab.

Check the Enable setting.

Click the + icon to add a new Geolocation Mapping.

In the left column choose: Country - Short

In the right column choose your country select field.

Click Save & Close.

Now if you preview the form you should find that the country select field defaults to your country.

WS Form makes geolocation requests to third party IP lookup services client-side so that the user's IP address does not pass through your web server.

If you opt to use this feature we would recommend updating your privacy policy accordingly.

## Accuracy

Geolocation lookups based on IP addresses provide approximate location information, but their accuracy varies. Factors like dynamic IP assignments, VPN usage, and data availability can impact precision. While useful for certain purposes, relying solely on IP geolocation for critical decisions or precise location determination is not recommended.

Users accessing your website via a cellular signal are more likely to return inaccurate results whereas land-based users will return more accurate results.

The quality of the data returned will also depend on the Geolocation Lookup by IP service you have chosen in Global Settings (Advanced tab).

## Populate a Data Grid with ACF Relationship Field Posts

URL: https://wsform.com/knowledgebase/populate-a-data-grid-with-acf-relationship-field-posts/

How to Populate Select, Checkbox, or Radio Fields with Posts Linked to an ACF Relationship Field.

You can easily populate Select, Checkbox or Radio fields with posts selected in an Advanced Custom Field (ACF) relationship field. This is accomplished using a straightforward PHP script in combination with the WordPress Filter Hook data source data source.

## ACF Field Configuration

This example works with an ACF field configured as follows:

Field Type: Relationship

Field Label: Related Post (You can label it as anything you wish)

Field Name: related_post (If your field is named differently, you'll need to change the $acf_field_key in the example below)

Filter by Post Type: Post

## PHP Example

The code below would typically go in functions.php of your theme (use a child theme where appropriate), or in a code snippet plugin.

When you click Get Data on the data grid in WS Form, the request will not be tied to a specific post ID. In the code snippet below, replace 123 with the ID of a test post that has some selected posts in the ACF relationship field.

// Add a filter for WordPress Filter Hook data source to use
add_filter( 'wsf_acf_relationship_field', 'wsf_acf_relationship_field_hook_callback', 10, 3 );

// My callback function for tag wsf_acf_relationship_field
function wsf_acf_relationship_field_hook_callback( $data_grid, $field_id, $form_object ) {

 // Get post ID (Set 123 to a test post ID for "Get Data" testing)
 global $post;
 $post_id = empty( $post ) ? 123 : $post->ID;

 // Check post ID
 if( empty( $post_id ) ) { return $data_grid; }

 // ACF field key
 $acf_field_key = 'related_post';

 // Get relationship field (third parameter false ensures the return is not formatted)
 $relationship_posts = get_field( $acf_field_key, $post_id, false );

 // Check field value
 if ( empty( $relationship_posts ) || !is_array( $relationship_posts ) ) { return $data_grid; }

 // Build data grid rows
 $rows = array();

 // Look through relationship posts
 foreach( $relationship_posts as $relationship_post_id ) {

 // Add data grid row
 $rows[] = array(

 // Column data
 'data' => array(

 // Post ID
 esc_attr( $relationship_post_id ),

 // Post title
 esc_html( get_the_title( $relationship_post_id ) )
 )
 );
 }

 // Define columns
 $data_grid[ 'columns' ] = array(

 // Post ID
 array( 'label' => __( 'Post ID' ) ),

 // Post title
 array( 'label' => __( 'Post Title' ) )
 );

 // Define first group
 $data_grid[ 'groups' ] = array(

 array(

 // Label for data grid group
 'label' => __( 'Related Posts' ),

 // Define rows in first group
 'rows' => $rows
 )
 );

 return $data_grid;
}

 

## Populate a Field With Query String Data

URL: https://wsform.com/knowledgebase/populate-a-field-with-query-string-data/

It is possible to populate a field with the value of a query string parameter using the WS Form variable.

It is possible to populate a field with the value of a query string parameter using the WS Form variable.

To do this:

Click the field settings icon to open up the settings sidebar. We recommend using a text field or hidden field for this purpose but you can use it on any field type that has a Default Value setting.

In the Default Value setting, add the following: #query_var("parameter") where parameter is the query string parameter you would like to populate the field with.

Click Save.

WS Form will now populate that field with the query string parameter you chose.

For Select, Checkbox and Radio fields you should ensure the value provided in the query string parameter matches the value contained in the Values column mapping. Learn more about data grid column mapping.

An example of how to set this up for a text field is shown below.

## Populate a Form With Post Data

URL: https://wsform.com/knowledgebase/populate-a-form-with-post-data/

It is possible to pre-populate a form with WordPress post data using the Post Management integration. The data could be from a page, post or any other custom p…

It is possible to pre-populate a form with WordPress post data using the Post Management integration. The data could be from a page, post or any other custom post type registered in your theme.

To do this:

Install and activate the Post Management integration.

Click the Form Settings  icon in the top toolbar.

Click on the Data tab.

Check the Populate Using Action setting.

Select Post Management from the Action To Populate From dropdown.

Select the the post type you would like to populate data from.

Use one of the follow to determine which post to populate from:

Leave it blank to use the Post ID of the post/page the form is shown on.

Enter a post ID (e.g. 123) if you want to literally update that post ID.

To use query string variable, enter: #query_var("post_id").
Example URL: https://yourwebsite.com/page-with-form/?post_id=123

Use the Field Mapping, Meta Mapping and Tag Mapping settings to determine which fields, meta and tag (WordPress terms) you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

If you have a custom field plugin installed, field mapping options for that plugin will also be shown. Use this to match user custom fields to fields on the form. WS Form is integrated with ACF, ACPT, JetEngine, Metabox, Pods, and Toolset.

Click Save.

Click Publish if you want the changes to go live immediately.

Tip: If the form does not populate it is possible you have a saved submission overwriting the populated form data. To clear this, reset the session ID from the debug console. Learn more.

## Populate a Form With User Data

URL: https://wsform.com/knowledgebase/populate-a-form-with-user-data/

It is possible to pre-populate a form with WordPress user data with the User Management integration. This is useful for creating an 'Edit Profile' form.

It is possible to pre-populate a form with WordPress user data with the User Management integration. This is useful for creating an Edit Profile form.

To do this:

Install and activate the User Management integration.

Click the Form Settings  icon in the top toolbar when editing a form.

Click on the Data tab.

Check the Populate Using Action setting.

Select User Management from the Action To Populate From dropdown.

Use the Field Mapping and Meta Mapping settings to determine which fields and user meta you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

If you have a custom field plugin installed, field mapping options for that plugin will also be shown. Use this to match user custom fields to fields on the form. WS Form is integrated with ACF, ACPT, JetEngine, Metabox, Pods, and Toolset.

Click Save.

Click Publish if you want to make the changes live immediately.

 

## Populate the Default Value of a Field Using ACF Option Values

URL: https://wsform.com/knowledgebase/populate-the-default-value-of-a-field-using-acf-option-values/

You can use WordPress filter hooks, WS Form functions, and ACF option page values to dynamically set the default value of fields.

You can use WordPress filter hooks, WS Form functions, and ACF option page values to dynamically set the default value of fields.

## Example Code

Here is example code for setting the default value of the field with ID 321 in form ID 123 using a value from an ACF option page. You would put this code in your theme's functions.php file (preferably in the child theme if one is present) or use a code snippet plugin.

<?php

// Add filter to change form ID 123 prior to rendering
add_filter( 'wsf_pre_render_123', 'populate_field_from_acf' );

// Function to populate the default value using ACF
function populate_field_from_acf($form) {

 // Get the value from the ACF option page
 $acf_value = get_field( 'your_acf_field_key', 'option' );

 // Get the field with ID 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the default value of the field
 $field->meta->default_value = $acf_value;

 // Return the modified form
 return $form;
}

## Code Breakdown

### WordPress Filter

Before WS Form renders a form, a WordPress filter runs called wsf_pre_render_{form_id}, where {form_id} is the ID of your form. WS Form passes a form object to this filter function, which you can use to edit all elements of the form.

For example:

<?php

// Add filter to change form ID 123 prior to rendering
add_filter( 'wsf_pre_render_123', 'your_custom_function' );

// Your function to modify the form
function your_custom_function( $form ) {

 // Your custom code here

 return $form;
}

### Using ACF Option Page Values

To retrieve values from an ACF option page, use the get_field() function. When accessing option page values, you must specify 'option' as the second parameter of get_field(). Replace 'your_acf_field_key' with the field key you set in ACF.

$acf_value = get_field( 'your_acf_field_key', 'option' );

### Getting a Field

To modify a field in your form, use wsf_form_get_field($form, $field_id), where $form is the form object passed to your filter function by WS Form. $field_id is the ID of the field you want to retrieve. You can find the field ID in the layout editor. This function returns the field settings.

$field = wsf_form_get_field( $form, $field_id );

### Changing the Default Value

To update the default value of a field, assign a value to the default_value property of the field's meta object.

$field->meta->default_value = $acf_value;

## Complete Example

Here’s the full example of dynamically setting a field value using an ACF option page value:

<?php

// Add filter to change form ID 123 prior to rendering
add_filter( 'wsf_pre_render_123', 'populate_field_from_acf' );

// Function to populate the default value using ACF
function populate_field_from_acf( $form ) {

 // Retrieve the value from ACF option page
 $acf_value = get_field( 'your_acf_field_key', 'option' );

 // Get the field with ID 321
 $field = wsf_form_get_field( $form, 321 );

 // Set the default value of the field
 $field->meta->default_value = $acf_value;

 // Return the modified form
 return $form;
}

This approach ensures your WS Form fields dynamically populate with values managed in the ACF option page, allowing for flexible and centralized value management.

## Populate the Default Value of a Field Using PHP

URL: https://wsform.com/knowledgebase/populate-the-default-value-of-a-field-using-php/

You can use WS Form functions to dynamically set the default value of fields.

You can use WordPress filter hooks and WS Form functions to dynamically set the default value of fields.

## Example Code

Here is example code for setting the default value of the field with ID 321 in form ID 123. You would put this code in your themes functions.php file.

<?php

 // Add filter to change form ID 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Get field ID: 321
 $field = wsf_form_get_field($form, 321);

 // Change the default value of the field
 $field->meta->default_value = 'Default value here';

 // Return the form
 return $form;
 }

## Code Breakdown

### WordPress Filter

Prior to WS Form rendering a form, a WordPress filter runs called wsf_pre_render_{form_id}, where {form_id} is the ID of your form. WS Form passes a form object to this filter function that can be used for editing all elements of the form.

An example of using this filter is shown below:

<?php

 // Add filter to change form ID 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Your code here
 }

### Getting a Field

To change a field in your form, you can use wsf_form_get_field($form, $field_id) where $form is the form passed to your filter function from WS Form. $field_id is the ID of the field you want to retrieve from form. You can find the field ID in the layout editor. This function returns the field settings.

### Changing the Default Value

To change the default value of a field, you change the value of default_value in the meta property of the field.

For example:

<?php

 // Add filter to change form 123 prior to rendering
 add_filter('wsf_pre_render_123', 'my_pre_render_123');

 // My function for filter wsf_pre_render_123
 function my_pre_render_123($form) {

 // Get field ID: 321
 $field = wsf_form_get_field($form, 321);

 // Change the field default value
 $field->meta->default_value = 'Default value here';

 // Return the form
 return $form;
 }

## Populating Field Values with Post Data

URL: https://wsform.com/knowledgebase/populating-field-values-with-post-data/

There are various different ways you can populate the value of a field using post data.

There are various different ways you can populate the value of a field using post data. Here are some of the most common methods:

## Post Management Integration

The value of a field can be populated using the Post Management integration. Learn more.

## #post_meta

The #post_meta variable can be used to extract meta data from the post you form is placed on.

For example, putting #post_meta("my_meta_key") in the default value of the field would pre-populate it with the meta value of the meta key my_meta_key.

## PHP

The value of a field can be populated using WordPress filter hooks and PHP.  Learn more.

## Post Management Integration

URL: https://wsform.com/knowledgebase/post-management/

The 'Post Management' action allows you to create forms and add actions for creating new posts of any post type in WordPress.

The Post Management action allows you to create forms and add actions for creating and updating posts of any post type in WordPress.

For example you could create a form for adding a:

Post

Page

Product

Custom Post Type

This integration is compatible with the following WordPress plugins:

Advanced Custom Fields (ACF)

ACPT

JetEngine

Meta Box

Pods

Toolset

## About WordPress Post Records

Post records are the heart of WordPress. They are used for storing blog articles, revisions and comments and are also used by other plugins such as WooCommerce for storing order information.

There are two tables in the database that store information about WordPress posts. The wp_posts table stores basic information about posts (title, date added etc), whereas the wp_postmeta table is used to store additional information about them, for example, custom fields that you create yourself.

The ability to manage custom posts fields is not native to WordPress so you will need to use a plugin to configure them. We recommend using the Advanced Custom Fields (ACF) or Meta Box plugin.

The WS Form Post Management integration allows you to create and edit post meta data by mapping your form fields to meta keys.

## Updating Posts

As well as creating posts, the post management integration can also be used to update posts. This done by populating the form with existing post data and then using the post management integration to update the post data. You can learn more about that here:

Updating Posts Using the Post Management Integration

## Creating A Post Management Form

### Automatically (Recommended)

WS Form can create a form for any of the post management functions in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a post management form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Post Management tab at the top of the page.

Click on the post type you would like to create a form for.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

Tip: We recommend using the automatic method. Not only does this method create the form for you, but it also maps the fields and creates checkboxes for taxonomies associated with the post type you selected.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is creates a post when a user saves or submits their form.

To add a post management action:

Click the Actions icon at the top of the layout editor. The Actions sidebar will open.

Click the Add  icon to add a new action.

Select Post Management from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The post management action settings are as follows:

#### When Should This Action Run?

You can choose to add the WordPress post when the form is saved, submitted, or both.

#### Post Type

Choose the type of WordPress post you would like to create.

#### Post ID

If this setting is blank, a new post will be created.

Tip: When this integration creates a new post, you can use the #post_id variable in other actions to retrieve the new post ID.

If this setting is not blank, the value entered should be the post ID that you wish to update.

You can enter WS Form variables in this field. Variables in this setting are parsed once the form has been submitted.

Here are some examples of values you can enter into this field:

Post ID
Description

123
Update the post or page with the ID: 123. This method is a good way of testing post updates.

#post_id
Update the post or page that the form is shown on. The #post_id variable returns the ID of the current post or page.

#field(456)
Use the submitted value of field ID: 456 as the post ID to update. For example, if field ID 456 is a hidden field with the number 123 in it, post ID 123 would be updated.

##### Passing the Post ID as a Query Variable

It is possible to specify the post ID you wish to update as a variable in a query string. For example:

https://mysite.com/my-form-page/?post_id=12345

This example would push the submitted form to post ID 12345.

To do this:

Add a hidden field to your form.

Set the Default Value setting to #query_var("post_id").

In the Post Management action, enter #field(123) in the Post ID setting. Change 123 to the ID of the hidden field you added.

You can combine this with Auto Populate under Form Settings to create a post editing feature.

#### Status

Select the status you would like the newly created post to have.

Status
Description

Default
New = Draft, Existing = Inherit

Publish
Post is viewable by everyone.

Scheduled
Scheduled to be published in a future date.

Draft
Incomplete post viewable by anyone with proper user role.

Pending
Awaiting a user with the appropriate capability to publish.

Private
Viewable only to WordPress users at Administrator level.

#### Author

Select the author of the WordPress post. This defaults to the current user signed into the website.

#### Restrict Updates to Author

By checking this setting, updates to posts will be restricted so that only the original author can update their own post. That user will need to be signed in to update their post.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding post being created.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding post field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Field Meta Mapping

The integration also supports mapping fields to post meta data.

To map a field to meta data:

Click the Add  icon at the bottom right of the meta mapping section.

Select your form field.

Select the meta key you would like to create using the form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Meta Mapping

The integration also supports setting custom meta keys to values.

To add a meta key-value pair:

Click the Add  icon at the bottom right of the meta mapping section.

Enter the meta key you would like to set a value for.

Enter the meta value you would like to set the meta key to.

Repeat this process for each meta key-value pair.

Click the Save button at the bottom of the sidebar to save your changes.

#### Deduplication by Field

You can avoid deduplication by specifying which of your form fields you want to be unique for the WordPress post type being created.

To specify a field that you do not want duplicates for:

Click the Add  icon at the bottom right of the deduplication by field section.

Select your form field.

Repeat this process for each field on your form that you do not want duplicates for.

Click the Save button at the bottom of the sidebar to save your changes.

#### Attachment Mapping

File and signature fields can be mapped so that they are uploaded as attachments to the post when it is added.

To add a file or signature field as an attachment:

Click the Add  icon at the bottom right of the attachment mapping section.

Select your form field.

Repeat this process for each field on your form that you want to include as an attachment.

Click the Save button at the bottom of the sidebar to save your changes.

File fields that are marked as multiple will result in multiple attachments if more than one file is uploaded.

#### Featured Image

Select a file or signature field you would like to use for uploading a featured image. The file will be uploaded to the media library and also assigned as the post's featured image.

#### Term Mapping

You can also assign terms to the post that is created. These include:

Post categories

Post tags

Custom taxonomies

We recommend using a choice field for term mapping, such as checkboxes.

For hierarchical terms you should make sure the submitted value is the ID of the term. You can do this by ensuring your checkbox data grid has two columns, one called Values, which would contain the term IDs, and another column called Labels, which would contain the term names.

For non-hierarchical terms, such as tags, you should make sure the submitted value is just the name of terms.

To specify which fields are used to assign terms to a post:

Click the Add  icon at the bottom right of the term mapping section.

Select the taxonomy the form field relates to.

Select your form field.

Repeat this process for each field on your form that you want to map as containing terms.

Click the Save button at the bottom of the sidebar to save your changes.

#### Terms

Use this setting to assign a fixed term to the posts.

Click the Add  icon at the bottom right of the terms setting.

Type the name of the term you want to assign.

Select the matching term from the dropdown list.

Repeat this process for each term you want to assign.

Click the Save button at the bottom of the sidebar to save your changes.

#### Post Parent ID

Set this to parent post ID this child post belongs to. Leave blank for none.

#### Comment Status

Select whether the post can accept comments.

#### Ping Status

Select whether the post can accept pings.

#### Date

Enter the date of the post. Leave blank for current time.

#### Password

The password to access the post. Leave blank for none.

Note: WordPress does not encrypt post passwords.

#### Update Previous Post

If you have two post management actions that are both related to the same WordPress post type, WS Form will by default update the previous post created / updated. Uncheck this if you want to create a fresh post with the second action.

#### Expose Post to Other Actions

If checked the newly created WordPress post data will be available in #post variables for use in other actions.

## Post Variables

URL: https://wsform.com/knowledgebase/post-variables/

Display WordPress Post data in your WS Form for dynamic, content-aware forms.

WS Form includes a range of variables that let you pull information directly from WordPress Posts. You can display post titles, IDs, dates, authors, or even custom fields in your forms. This makes it easy to create dynamic, content-aware forms that automatically adapt to the post they are embedded in.

## Preventing Form Spam

URL: https://wsform.com/knowledgebase/preventing-form-spam/

We offer a variety of spam protection measures: HoneyPot Protection, Spam Check with Akismet, and reCAPTCHA.

WS Form offers a variety of measures to prevent form spam for WordPress forms.

### WS Form Features

Deduplicating Form Submissions

Custom Server-Side Validation

Form Validation

HoneyPot

How to Block Form Submissions by Keyword

How to Block Form Submissions by IP

How to Block Form Submissions by Domain Name

How to Block Form Submissions by User Agent

NONCE

IP Throttling

### WS Form Spam Protection Fields

CaptureFox (EU-based, privacy-first)

Cloudflare Turnstile (frictionless, no CAPTCHA challenges)

hCaptcha (privacy-focused, low data collection)

reCAPTCHA (widely adopted, strong bot detection)

### WS Form Integrations

Akismet

OpenAI Moderation

### Third Party Services

These third party services have integrations with WS Form.

CleanTalk

Clearout (Fake email address detection)

OOPSpam

## Spam Scoring

Akismet, reCAPTCHA (Version 3) and hCaptcha spam checking offer various levels of spam detection. The spam score is stored against your submissions and is represented as a colored circle. If you hover your mouse cursor over the colored circle, you can see the percentage score WS Form has given a submission in terms of spam scoring. The scoring ranges from 0% (not spam, shown in green) to 100% (blatant spam,  shown in red).

Any submissions deemed as spam are moved to your Spam folder on the submissions page.

 

## Preventing Input Zoom on Mobile Devices

URL: https://wsform.com/knowledgebase/why-forms-zoom-on-some-mobile-devices-and-browsers-and-how-to-control-it/

In this article, we'll explore the reasons behind this behavior and provide practical solutions to prevent it.

TL;DR: Ensure the font size used on your form is at least 16px to prevent mobile devices zooming in on inputs.

Have you ever filled out a form on your mobile device, only to have the screen suddenly zoom in, making it difficult to see the entire form? This common issue can be frustrating for users and can lead to a poor user experience. Understanding why this happens and how to control it is crucial for web developers and designers, especially when creating forms for a responsive website. In this article, we'll explore the reasons behind this behavior and provide practical solutions to prevent it.

## Why Do Forms Zoom on Mobile Devices?

When users interact with form fields on mobile devices, the browser often zooms in automatically. This behavior is intended to enhance readability and make it easier to input text. However, it can also disrupt the overall layout and user experience. Several factors contribute to this zooming behavior:

### Small Font Sizes

Mobile browsers are designed to optimize readability by zooming in on input fields. This is especially true for older devices or browsers that do not support responsive design as effectively.

One of the primary triggers for this zooming behavior is the font size used in the form fields. If the font size is too small, the browser will zoom in to make the text more legible.

### Viewport Settings

The viewport meta tag settings can also influence how content is displayed and whether it zooms in when interacting with form fields. We do not recommend disabling zooming with the viewport settings as this can negatively impact the accessibility of a page.

## How to Control Zooming Behavior

Fortunately, there are several techniques to control or prevent this automatic zooming behavior. By adjusting the font size and using appropriate meta tags, you can create a smoother and more user-friendly form experience.

### Adjust Font Size

The simplest and most effective way to prevent zooming is to ensure that the font size of your form fields is sufficiently large. Mobile browsers typically zoom in on input fields with font sizes smaller than 16px. By setting the font size to 16px or larger, you can prevent this behavior.

In WS Form the default font size is 16px but this can be adjusted by using the Customize tool or by using your own custom CSS.

The key to preventing unwanted zooming is to prioritize readability and accessibility.

### Responsive Design

Implementing a responsive design ensures that your forms and other elements are optimized for various screen sizes.

Responsive Forms

### Test Across Devices

We recommend testing your forms across various devices and browsers to ensure consistent behavior. Use tools like BrowserStack or responsive design mode in your browser's developer tools to simulate different devices and screen sizes.

BrowserStack

 

## Preventing Users from Saving Markup in the Layout Editor

URL: https://wsform.com/knowledgebase/preventing-users-from-saving-markup-in-the-layout-editor/

If you do not want to allow users to save markup in WS Form settings, use the unfiltered_html capability in WordPress.

WS Form PRO is an advanced form plugin for WordPress.  As such, it allows developers to save markup to settings such as labels (e.g. add span tags) or HTML content.

For websites where such a capability is not desirable, we comply with the unfiltered_html capability in WordPress.

If a user does not have the unfiltered_html capability, any attempt to  save settings in WS Form that contains HTML tags such as iframe, embed or script or other markup deemed insecure will be stripped out.

If a user does have the unfiltered_html capability, any markup can be saved in settings.

In short, if you do not want users to have the capability of saving markup in WS Form settings you should disable the unfiltered_html capability.

There are two ways of disabling this capability in WordPress.

## For All Users

You can use the DISALLOW_UNFILTERED_HTML constant to remove the unfiltered_html capability for all users by adding the following code to your wp-config.php file:

define( 'DISALLOW_UNFILTERED_HTML', true );

This would typically go beneath the WP_DEBUG constant, for example:

define( 'WP_DEBUG', false );
define( 'DISALLOW_UNFILTERED_HTML', true );

When DISALLOW_UNFILTERED_HTML  is set to true, WordPress will automatically remove the unfiltered_html capability for all users.

Learn more:

Editing wp-config.php file

## By Role

To change the unfiltered_html capability for users by role you can use a user capabilities plugin.

We recommend using the PublishPress Capabilities plugin which allows you to enable or disable this capability by role.

To do this:

Install and activate the PublishPress Capabilities plugin.

Go to Capabilities in your WordPress admin area.

In the top-right corner of the screen, load the user role that you want to customize, e.g. Editor.

In the center of the screen, you can now set the permissions. If you want to allow people in the Editor role to save posts or WS Form settings with full markup, check the unfiltered html box. Click the blue Save Changes button to finish,

If you want to set these permissions across a multisite network, follow these instructions. On WordPress multisite networks, only Super Admins have the unfiltered_html permission.

## Previewing Forms

URL: https://wsform.com/knowledgebase/previewing-forms/

When you are ready to preview your form, click the 'Preview' button at the top of the layout editor.

When you are ready to preview your form, click the Preview button at the top of the layout editor.

By default, WS Form will preview your form in your theme to give you a better idea of how it will look in your website.

Some themes may have difficulties previewing a form. You can change the template used for previewing in global settings.

Click on Settings under WS Form in the Word Press admin menu.

In the Basic tab change the Preview > Template setting.

Click Save.

Choose the Blank Page option if your theme is unable to preview forms.

 

## Previous Tab Button

URL: https://wsform.com/knowledgebase/tab_previous/

If you have more than one tab on your form, the previous tab button will take the website visitor back one tab.

If you have more than one tab on your form, the Previous Tab button will take the website visitor back one tab.

## Adding a Previous Tab Button

To learn how to add, edit, clone, move, resize, offset, or delete a previous tab but, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the previous tab button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Scroll

#### Scroll To Top

None

Instant

Smooth

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the previous tab button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Price Checkbox Field

URL: https://wsform.com/knowledgebase/price_checkbox/

The Price Checkbox field allows you to show one or more products with checkboxes.

The Price Checkbox field allows you to show one or more products with checkboxes. If a checkbox is checked, that product is included in the total cart amount.

If you add a price checkbox field in isolation on your form, your total cart calculation will equal the value of any checked products. If you add more price fields and/or quantity fields, the total cart calculation will equal the sum of all the fields. This means you can build virtually any combination or e-commerce fields to suit your requirements.

If you add a payment field, such as PayPal, to your form, you can apply the cart total amount to that payment by entering #ecommerce_cart_total into the transaction amount field, or by leaving that field blank.

## Demo

## Adding a Price Checkbox Field

To learn how to add, edit, clone, move, resize, offset, or delete a price checkbox field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Enable Select All

When enabled, WS Form will show a Select All checkbox above the first checkbox. This enables users to select or deselect all checkboxes in a single click.

### Default Value

If a value is entered into this setting, the checkbox containing that value will be checked by default. Note that this value needs to be the checkbox value not the text shown for the checkbox.

Comma separated values can be entered into this setting. Values will be trimmed.

Other ways of setting the default value, include:

Select rows in the Checkboxes tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Layout

#### Orientation

Checkboxes can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the checkboxes to appear in.

If you select grid, you can set a width for each checkbox at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you have more than one checkbox in your field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Exclude From Cart Total

If checked, this field will be excluded from the form cart total calculations.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price checkbox field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### Minimum Checked

Enter a number in this setting to determine the minimum number of checkboxes that should be checked in order for this field to validate.

#### Maximum Checked

Enter a number in this setting to determine the maximum number of checkboxes that can be checked in order for this field to validate.

Note that this option is not available if Enable Select All is checked.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to checkbox fields that are within a repeatable section. It prevents the same checkbox from being checked across multiple repeatable section rows. For example, if you had a checkbox field with t-shirt sizes and selected Small in the first row, then the Small checkbox will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Checkboxes

Each product is configured in this tab. Products are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a price checkbox as selected, required, disabled, or hidden.  You can also wrap products in a fieldset, which groups the checkboxes together. That fieldset can then be disabled.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Price

Choose the column in your data grid that contains the price to be used for each product.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the checkboxes shown by using the value of another field on your form. An example application of this feature would be to filter a list of checkboxes for vehicle models by another field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your checkboxes to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your checkboxes by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

## Price Field

URL: https://wsform.com/knowledgebase/price/

The e-commerce price field allows you to add a currency amount to your form.

The Price field allows you to add a currency amount to your form.

These fields are included in the total cart calculation of your form. If you add a price field in isolation on your form, your total cart calculation will equal the value of that price field. If you add more price fields and/or quantity fields, the total cart calculation will equal the sum of all the fields. This means you can build virtually any combination of e-commerce fields to suit your requirements.

If you add a payment field, such as PayPal, to your form, you can apply the total cart amount to that payment by entering #ecommerce_cart_total into the transaction amount field or by leaving that setting blank.

Price fields are editable by default. If you wish to make a price fixed, you can simply make it read-only.

## Demo

## Adding a Price Field

To learn how to add, edit, clone, move, resize, offset, or delete a price field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Donation or Amount.

### Required

If set, the price entered must be greater than or less than zero, otherwise the field will invalidate.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

#### Allow Negative Values

If negative amounts are permitted in this field, check this box.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as $1.00 for a currency field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Exclude From Cart Total

If checked, this field will be excluded from the form cart total calculations.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the minimum number that should be entered into the field in order for it to be valid. Leaving this blank will mean any minimum value can be entered. This can be any negative or positive number.

#### Maximum

This is the maximum value that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. This can be any negative or positive number.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Price Radio Field

URL: https://wsform.com/knowledgebase/price_radio/

The Price Radio field allows you to show one or more products with radios. Price Radios allow a web user to choose a single product from a list.

The Price Radio field allows you to show one or more products with radios. Price Radios allow a web user to choose a single product from a list. If a radio is checked, that product is included in the total cart amount.

If you add a price radio field in isolation on your form, your total cart calculation will equal the value of any checked products. If you add more price fields and/or quantity fields, the total cart calculation will equal the sum of all the fields. This means you can build virtually any combination or e-commerce fields to suit your requirements.

If you add a payment field such as PayPal to your form, you can apply the cart total amount to that payment by entering #ecommerce_cart_total into the transaction amount field or by leaving that field blank.

## Demo

## Adding a Price Radio Field

To learn how to add, edit, clone, move, resize, offset, or delete a price radio field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

If a value is entered into this setting, the radio containing that value will be checked by default. Note that this value needs to be the radio value not the text shown for the checkbox.

Other ways of setting the default value, include:

Select rows in the Radios tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Layout

#### Orientation

Radios can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the radios to appear in.

If you select grid, you can set a width for each radio at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you have more than one radio in your field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Exclude From Cart Total

If checked, this field will be excluded from the form cart total calculations.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price radio field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to radio fields that are within a repeatable section. It prevents the same radio from being checked across multiple repeatable section rows. For example, if you had a radio field with t-shirt sizes and selected Small in the first row, then the Small radio will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Radios

Each product is configured in this tab. Products are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a product as selected, required, disabled, or hidden.  You can also wrap products in a fieldset, which groups the products together. That fieldset can then be disabled.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Price

Choose the column in your data grid that contains the price to be used for each product.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the radios shown by using the value of another field on your form. An example application of this feature would be to filter a list of radios for vehicle models by another field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your radios to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your radios by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

## Price Range Field

URL: https://wsform.com/knowledgebase/price_range/

The price range field lets your website visitor select a price value using a slider interface. These fields are included in the total cart calculation of your…

The Price Range field lets your website visitor select a price value using a slider interface. The price range can be configured to have a minimum and maximum value.

These fields are included in the total cart calculation of your form. If you add a price range field in isolation on your form, your total cart calculation will equal the value of that price range field. If you add more e-commerce fields and/or quantity fields, the total cart calculation will equal the sum of all the fields. This means you can build virtually any combination of e-commerce fields to suit your requirements.

If you add a payment field, such as PayPal, Strip or Authorize.Net, to your form, you can apply the total cart amount to that payment by entering #ecommerce_cart_total into the transaction amount field or by leaving that field blank.

## Adding a Price Range Field

To learn how to add, edit, clone, move, resize, offset, or delete a range slider, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Rating or Score.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

You can use #value to insert the current value of the range slider in the help text.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Exclude From Cart Total

If checked, this field will be excluded from the form cart total calculations.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price range field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Fill Lower Track

This will fill the lower track of the range slider.  Note that this feature is only available if using the WS Form framework.

You can customize the color of the lower and upper track by applying the following CSS variables on the range slider input field:

--color-lower-track --color-upper-track

For example, you could add a custom attribute (See below) as follows:

Name: style Value: --color-lower-track: #0a0; --color-upper-track: #a00;

This would color the range slider per the demo at the top of this page. You could also include this in your themes CSS file.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Minimum

This is the minimum value that can be selected. Leaving this blank will set the minimum is 0. This can be any negative or positive number.

#### Maximum

This is the maximum value that can be selected. Leaving this blank will set the minimum is 100. This can be any negative or positive number.

#### Step

You can change the step attribute to control the granularity. For example if you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Tick Marks

Range sliders can have tick marks added to them. Tick marks are used to highlight specific points on the range slider. You can add labels to your range control by specifying labels.

Tick marks are configured using a WS Form data grid. To create tick marks for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Price Select Field

URL: https://wsform.com/knowledgebase/price_select/

The Price Select field allows you to add a currency amount to your form that is determined by a web user making a selection from a pull down list.

The Price Select field allows you to add a currency amount to your form that is determined by a web user making a selection from a pull-down list. These are managed in much the same way as a normal select field, except the value of the options are currency amounts.

These fields are included in the total cart calculation of your form. If you add a price select field in isolation on your form, your total cart calculation will equal the value of that price field. If you add more price fields and/or quantity fields, the total cart calculation will equal the sum of all the fields. This means you can build virtually any combination or e-commerce fields to suit your requirements.

If you add a payment field, such as PayPal, to your form, you can apply the cart total amount to that payment by entering #ecommerce_cart_total into the transaction amount field or by leaving that field blank.

## Demo

## Adding a Price Select Field

To learn how to add, edit, clone, move, resize, offset, or delete a price select field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Multiple

Enabling this feature will enable the website visitor to select more than one option when submitting the form.

Selecting multiple options varies in different operating systems and browsers:

For Windows: Hold down the control (CTRL) button to select multiple options.

For Mac: Hold down the command button to select multiple options.

Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, you may wish to consider using checkboxes instead.

### Default Value

If a value is entered into this setting, the option containing that value will be selected by default. Note that this value needs to be the option value not the text shown for the option.

Comma separated values can be entered into this setting. Values will be trimmed.

Other ways of setting the default value, include:

Select rows in the Options tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Size

Select fields are typically one row tall. You can make a Select field taller by increasing this value. For example, setting the size to 5 will make the Select field 5 rows tall. This feature is useful if you enable Multiple to allow the website visitor to select multiple options.

### First Row Placeholder

The first row placeholder is used to add a single option at the top of the drop-down list, such as Select. It is assigned no value, so if the website visitor does not select an option, the field will be considered empty.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Select2

#### Enable

Enabling Select2 will initialize the jQuery Select2 plugin on the select field. This provides users with the ability to search for options by typing a keyword. Learn more.

The default Select2 configuration settings in WS Form are:

Clearable Selections - Enabled.

Language - Set to WordPress locale.

Placeholder - Populated with Placeholder Row text.

If you wish to use a custom Select2 configuration, click here.

Use AJAX

When this setting is checked, WS Form will retrieve matching results via AJAX. This means that the options are not pre-loaded on the page which can improve page loading times for larger datasets.

Note that if you are using the Cascade Use AJAX option, this setting will not be available because the field is already using AJAX to retrieve data.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

#### Exclude From Cart Total

If checked, this field will be excluded from the form cart total calculations.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

#### Always Include in Cart Total

The normal behavior for an e-commerce field that has been hidden is that it will not be included in the Cart Total calculation.

If this setting is checked, this field will always be included in the Cart Total calculation if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price select field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to select fields that are within a repeatable section. It prevents the same option from being selected across multiple repeatable section rows. For example, if you had a select field with t-shirt sizes and selected Small in the first row, then the Small option will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Choices

The options in the price select drop-down menu are configured in this tab. Options are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a row as selected, disabled, or hidden.  You can also create opt-groups, which allow you to group options together. For example, this feature could be used to split a product list into categories.

You need to specify a product name and price column for the options. When you add a new price select field, it is pre-populated with three example products that you can change or delete.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Price

Choose the column in your data grid that contains the price to be used for each product.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the options available in your select field by using the value of another field on your form. An example application of this feature would be to filter a select pull down of vehicle models by another select field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your options to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your select options by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### No Results Placeholder

If no results are found, then this placeholder will be shown in the select field. This defaults to Select... but you can change this to anything you wish, e.g. Select Make

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

#### Use AJAX

For larger datasets this setting can considerably speed up page loading times and filtering operations. With this setting enabled, WS Form will:

No longer include the select data in your initial page load, thus reducing your initial page load time.

Make an AJAX request and filter the results server-side each time the filter value is changed.

#### Loading Placeholder

This placeholder is shown in the select field while the AJAX process is retrieving records. This defaults to Loading... but you can change this to anything you wish, e.g. Retrieving Records.

## Price Subtotal Field

URL: https://wsform.com/knowledgebase/price_subtotal/

The e-commerce price subtotal field allows you to show subtotals for any price fields when combined with a quantity field.

The Price Subtotal field allows you to show subtotals for any price fields when combined with a quantity field. You can create a cart-like line entry, as shown in the diagram below.

Price subtotal fields are read-only and cannot be changed by the web user.

## Adding a Price Subtotal Field

To learn how to add, edit, clone, move, resize, offset, or delete a price subtotal field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Price Subtotal.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Text Align

This setting determines how the price will be aligned in the field. This defaults to Right for ease of reading but you can change it to different justifications.

### Related Price Field

Quantity fields enable a quantity to be specified for a price field. For example, you could allow someone to order more than one T-shirt by entering how many they would like in the quantity field.

You can add a quantity field anywhere on your form. Once added, click the settings icon and then select which price field the quantity field relates to. If you do not enter a related price field, a red caution icon will appear on your form and also in the settings sidebar to prompt you to do so.

You can use a price subtotal field to show the calculated amount.

### Allow Negative Value

If negative amounts are permitted in this field, check this box.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the price subtotal field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Process Submit Data with a WordPress Hook

URL: https://wsform.com/knowledgebase/handling-submit-data-with-your-own-code/

You can use the ‘Run WordPress Hook’ action in combination with some simple code to intercept submission data and use it in your own PHP scripts.

You can use the Run WordPress Hook action in combination with some simple code to intercept submission data and use it in your own PHP scripts. By using a WordPress filter you can return the submit object back to WS Form for use in other actions.

To do this:

Add a Run WordPress Hook action to your form. Add it as a filter.

Enter the hook tag, e.g. wsf_filter_tag.

Set the Priority setting to Before other actions.

Click Save & Close.

In your functions.php file, add the following code:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 // Set meta key for field ID 123 (Change this to your field ID)
 $meta_key = 'field_123';

 // Get value submit object
 $field_value_old = $submit->meta[$meta_key]['value'];

 // Do something with $field_value_old (This is just an example)
 $field_value_new = str_replace('replace_this', 'with_this', $field_value_old);

 // Set value in submit object
 $submit->meta[$meta_key]['value'] = $field_value_new;

 // Return the submit object back to WS Form
 return $submit;
}

When the filter is fired, the form and submit data are passed to it.

In the example above, you would change field_123 to match the field ID on your form. For example, if the field you want to obtain has an ID of 321 in the WS Form layout editor, you would enter field_321 as the $meta_key variable.

## Progress Field

URL: https://wsform.com/knowledgebase/progress/

This field enables you to add a progress bar to your form. By default it will show the overall progress of the form being completed.

This field enables you to add a progress bar to your form. Progress bars can be configured to show:

Form progress (Completed required fields)

Tab progress

Upload progress (When used in conjunction with a file upload field) - View tutorial

Custom (Control the progress bar with calculated fields, conditional logic or your own JavaScript. Default range is 0 to 1)

For forms that have multiple tabs, you can add the progress bar to each tab. The progress bar shows the overall progress of the entire form across all tabs.

## Demo

## Adding a Progress Field

To learn how to add, edit, clone, move, resize, offset, or delete a progress bar field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with a default value. Progress bars are usually set with a value from 0 to 1, so you should enter a numeric value from 0 to 1 in this field. If you leave it blank, it will be set to 0. For example 0.5 would set the progress bar to halfway.

WS Form variables can be entered into this field.

### Source

The source pulldown has two options:

No source

Form Progress (Default)

Tab Progress

Upload Progress

When Form Progress is selected, the progress bar will automatically show the progress of the form.

When Tab Progress is selected, the progress will represent how far a user is through the tabs of a form.

When Upload Progress is selected, the progress bar will show the progress of a form submission. This is useful if you have a file upload field on your form and you want to show the progress of that upload.

When No source is set, you can manually set the progress bar value using conditional logic or another javascript source of your choice. You may wish to remove the default help text on the progress bar is you use this setting.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

As well as inserting plain text into this field, WS Form also provides extensive functionality for adding progress variables. The available progress variables are:

Progress

#progress
The form progress represented as a number from 0 to 100.

#progress_percent
The form progress represented as a percentage from 0% to 100%.

#progress_remaining
The remaining form progress represented as a number from 100 to 0.

#progress_remaining_percent
The remaining form progress represented as a percentage from 100% to 0%.

Other WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the progress bar.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### Maximum

This is the maximum value for the progress bar. This defaults to 1 if left blank.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Publishing Forms

URL: https://wsform.com/knowledgebase/publishing-forms/

When you are ready to publish your form and make it live, click the 'Publish' button.

Forms behave much like regular WordPress posts and have two states: Draft and Published. When you create a new form, it will be in a Draft state. This means that it cannot be seen by anyone on your website. Website visitors can only see your form when it is published.

## Preview

To view your form click the Preview Preview button at the top of the page. WS Form will then show you how your form will look on your website. You can click the Preview button when the form is in Draft or Publish states.

## Publish

When you are ready to publish your form and make it live, click the  Publish button. The Publish button will highlight blue whenever you are able to publish any recent changes to your form.

Once a form is published, WS Form creates a snapshot of your form at that moment. That snapshot is then used for the live view of your form on your website. Any subsequent changes to your form will not be available publicly until you press the Publish button again. This means you can conveniently edit your form without affecting the live version of your form.

When you preview your form, WS Form will always show your form with your most recent edits, regardless of whether you have clicked Publish or not. This enables you to test your changes as you build your form without affecting your live form.

## Auto Publishing

If you don't want to click Publish each time to push your changes live (although we recommend this workflow for production websites), you can enable auto publishing. To do this:

Click on WS Form > Settings from the WordPress admin menu.

In the Basic tab, check the Auto Publish setting.

## Push Form Submissions to a JetEngine Custom Content Type

URL: https://wsform.com/knowledgebase/push-form-submissions-to-a-jetengine-custom-content-type/

In this tutorial we'll learn how to push a form submission to a Custom Content Type created with the popular Crocoblock plugin JetEngine by using the WS Form W…

In this tutorial we'll learn how to push a form submission to a Custom Content Type created with the popular Crocoblock plugin JetEngine by using the WS Form Webhook action.

## What is a JetEngine Custom Content Type?

A JetEngine Custom Content Type (CCT) is similar to a WordPress Custom Post Type except the data is stored in a separate table in the WordPress database. This offers improved performance given that a row of data is stored in a single database record as opposed to traditional WordPress post records which have separate post meta records for each field.

Each row of data in a CCT is made up of standard JetEngine custom fields.

JetEngine provides a REST API that enables you to add new CCT rows using an API endpoint. We'll be interfacing with that API via the WS Form Webhook action.

## Create a Custom Content Type

If you don't already have a CCT set-up, you'll need to create one in JetEngine. We'll refer to the JetEngine knowledge base for this step:

JetEngine: How to Create a Custom Content Type

In this tutorial we have created a simple CCT containing three fields:

First Name (Text)

Last Name (Text)

Email (Text)

## Enable the REST API on the Custom Content Type

By default a CCT cannot be accessed by the WordPress REST API. In order to do that we'll need to do the following:

Click Custom Content Types from the JetEngine admin menu.

Click Edit to edit your CCT.

Edit the CCT and in the General section, check the Register create item REST API Endpoint checkbox.

Copy down the Endpoint URL, we'll need it later. You don't need the POST part the beginning. For example in the above screenshot, the URL you need would be: https://mywebsite.com/wp-json/jet-cct/newsletter_subscriber

 

## Create an Application Password

The next step is to create an application password for accessing the REST API. You'll use the application password in conjunction with a WordPress username to authenticate the request to the REST API.

For hardened security, you may wish to create a dedicated WordPress user that has access capabilities that match those configured on your CCT (e.g. edit_posts). This provides you with the ability to delete the user in future if you need to.

Once you have decided which WordPress user will be used to access the CCT, you can then create the application password. To do this:

Click Users in the WordPress admin menu.

Click Edit on the user that will have access to the CCT.

Create an application password by entering a name in the Application Password meta box, e.g. jcct_user.  The name can be anything you wish and is used to identify the application password, it is not used as a credential. JetEngine will then provide you with a password. Copy down the password provided, we'll need it later.

We now have everything we need to connect to the REST API:

Endpoint URL (The CCT endpoint URL)

Username (The WordPress username)

Password (The application password provided by JetEngine)

## Connect Your Form to the JetEngine Custom Content Type

For this tutorial we've created a very simple form containing three fields:

To connect the form to the JetEngine CCT, we're going to use the Webhook action. To do this:

Click the Actions icon at the top of the page. This will open the actions sidebar.

Click the add icon below the action list to add a new icon. Choose the Webhook action.

Once added, configure the Webhook action as follows:

URL of Endpoint: Enter the Endpoint URL from the CCT edit screen you copied earlier.

Request Method: POST

Content Type: JSON (application/json)

Field Mapping: Map each field from your form to the corresponding field name in your CCT.

Authentication: Basic

Username: Enter the WordPress user username (e.g. auser)

Password: The password you were provided with when creating the application password.

Leave all other settings as is.

Click Save & Close to save the action settings.

## Test the Form

Click the Preview button at the top of the layout editor to test the form.

If you have the WS Form debug console open, click Populate & Submit and then you can check the response from the WordPress REST API in the Log tab. You should see a 200 success message in the log that indicates a record was added to the JetEngine CCT.

You should now see a new record added to your CCT in JetEngine.

## Quantity Field

URL: https://wsform.com/knowledgebase/quantity/

The e-commerce quantity field allows you add quantities to any price fields. You can combine this field with a price subtotal field to create a cart like line…

The Quantity field allows you add quantities to any price fields. You can combine this field with a price subtotal field to create a cart-like line entry, as shown in the diagram below.

You can specify minimum and maximum permissible values. When using the quantity field, mobile users will be presented with a convenient numeric keypad when entering a value.

## Adding a Quantity Field

To learn how to add, edit, clone, move, resize, offset, or delete a quantity field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Postal Code or Age.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Text Align

This setting determines how the price will be aligned in the field. This defaults to Center for ease of reading, but you can change it to different justifications.

### Related Price Field

Quantity fields enable a quantity to be specified for a price field. For example, you could allow someone to order more than one T-shirt by entering how many they would like to order in the quantity field.

You can add a quantity field anywhere on your form. Once added, click the settings icon and then select which price field the quantity field relates to. If you do not enter a related price field, a red caution icon will appear on your form and also in the settings sidebar to prompt you to do so.

You can also use a price subtotal field to show the calculated amount.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be 1, indicating a quantity of 1.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as #####.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

These settings allow you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

#### Always Include in Actions

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the quantity field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum

This is the minimum number that should be entered into the field in order for it to be valid. Leaving this blank will mean any minimum value can be entered. This can be any negative or positive number.

#### Maximum

This is the maximum value that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. This can be any negative or positive number.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Radio Field

URL: https://wsform.com/knowledgebase/radio/

The Radio field creates one or more circle boxes on your form, only one of which can be checked.

The Radio field creates one or more circle boxes on your form, only one of which can be checked.

## Demo

Learn more: Style Radios

## Adding a Radio Field

To learn how to add, edit, clone, move, resize, offset, or delete a radio field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

If a value is entered into this setting, the radio containing that value will be checked by default. Note that this value needs to be the radio value not the text shown for the checkbox.

Other ways of setting the default value, include:

Select rows in the Radios tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Layout

#### Orientation

Radios can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the radios to appear in.

If you select grid, you can set a width for each radio at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you have more than one radio in your field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the radio field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to radio fields that are within a repeatable section. It prevents the same radio from being checked across multiple repeatable section rows. For example, if you had a radio field with t-shirt sizes and selected Small in the first row, then the Small radio will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Radios

Each radio  is configured in this tab. Radios are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a radio as selected, disabled, or hidden.  You can also wrap checkboxes in a fieldset, which groups the checkboxes together. That fieldset can then be disabled.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the radios shown by using the value of another field on your form. An example application of this feature would be to filter a list of radios for vehicle models by another field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your radios to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your radios by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

## Range Slider Field

URL: https://wsform.com/knowledgebase/range/

The range slider field lets your website visitor select a number value that must be no less than a given value and no more than another given value.

The Range Slider field lets your website visitor select a number value using a slider interface. The range slider can be configured to have a minimum and maximum value.

## Demo

## Adding a Range Slider Field

To learn how to add, edit, clone, move, resize, offset, or delete a range slider, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Rating or Score.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

You can use #value to insert the current value of the range slider in the help text.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the range slider field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Fill Lower Track

This will fill the lower track of the range slider.  Note that this feature is only available if using the WS Form framework.

You can customize the color of the lower and upper track by applying the following CSS variables on the range slider input field:

--wsft-color-lower-track --wsft-color-upper-track

For example, you could add a custom attribute (See below) as follows:

Name: style Value: --wsft-color-lower-track: #0a0; --wsft-color-upper-track: #a00;

This would color the range slider per the demo at the top of this page. You could also include this in your themes CSS file.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Minimum

This is the minimum value that can be selected. Leaving this blank will set the minimum is 0. This can be any negative or positive number.

#### Maximum

This is the maximum value that can be selected. Leaving this blank will set the minimum is 100. This can be any negative or positive number.

#### Step

You can change the step attribute to control the granularity. For example if you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Tick Marks

Note: Support of tick marks on range sliders is limited across all web browsers. Whilst we have included this functionality for completeness, please note that tick marks usually only appear when a range slider has no styling and only in certain supported browsers.

Range sliders can have tick marks added to them. Tick marks are used to highlight specific points on the range slider. You can add labels to your range control by specifying labels.

Tick marks are configured using a WS Form data grid. To create tick marks for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Rating Field

URL: https://wsform.com/knowledgebase/rating/

This rating field enables web users to give one or more ratings on your form.

This Rating field enables web users to give one or more ratings on your form.

## Demo

## Adding a Rating Field

To learn how to add, edit, clone, move, resize, offset, or delete a rating field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked, the rating field must be given a value from 1 to the maximum rating setting.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with a default value. Rating fields are return number values from 1 to the maximum rating setting. Enter a number in this field to set the default value.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the rating field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Horizontal Alignment

The horizontal alignment setting allows you to choose how the icons are horizontally aligned. The options are:

Left

Center

Right

Space Around (The space around each icon is the same)

Space Between (The space between each icon is the same)

Space Evenly (The space before, between and after each icon is the same)

#### Icon

WS Form has eight different built-in icon designs you can choose from for your rating field.

Check

Circle

Flag

Heart

Square

Smiley

Star

Thumbs Up

You can also select Custom HTML to use your own HTML for each rating list item.

#### Size (Pixels)

The size setting allows you to specify the size of the rating icons in pixels.

#### Unselected Color

Choose the color you would like to use when a rating icon is not selected. This defaults to gray.

#### Selected Color

Choose the color you would like to use when a rating icon is selected or hovered over. This defaults to yellow.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### Maximum Rating

By default rating fields have a maximum rating of 5. Enter a number into this field to change the maximum rating shown.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## reCAPTCHA Field

URL: https://wsform.com/knowledgebase/recaptcha/

This field is used to add a reCAPTCHA to your form.

This field is used to add a reCAPTCHA to your form.

WS Form Pro supports all current versions of reCAPTCHA, including:

Version 2 - Image / Audio reCAPTCHA

Version 2 - Invisible reCAPTCHA

Version 3 - Action based invisible reCAPTCHA

## Register Your Website with reCAPTCHA

In order to use reCAPTCHA, you first need to register your website with Google's reCAPTCHA admin page.

To register for a Version 2 reCAPTCHA, click here.

To register for a Version 3 reCAPTCHA, click here.

Once you have registered your website, you will be provided with two keys:

Site key

Secret key

## Version 3 Submissions

When a submission is successfully made on your website and you have a Version 3 reCAPTCHA on the page, Google provides a spam score. The spam score is stored against your submissions and is represented as a colored circle on the submissions page. If you hover your mouse cursor over the colored circle, you can see the percentage score WS Form has given a submission in terms of spam scoring. The scoring ranges from 0% (not spam, shown in green) to 100% (blatant spam,  shown in red).

## Adding a reCAPTCHA Field

To learn how to add, edit, clone, move, resize, offset, or delete a reCAPTCHA field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

### Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

#### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

#### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

#### reCAPTCHA Type

Select the appropriate reCAPTCHA version from the select pulldown. Depending on which version you choose, you will then be prompted to provide the following information:

#### Site Key

Enter the site key provided when you registered your website. You can also enter a global site key to use for all you reCAPTCHA fields in global settings.

#### Secret Key

Enter the secret key provided when you registered your website. You can also enter a global secret key to use for all you reCAPTCHA fields in global settings.

#### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

#### Version 2 Settings

##### Type

You can choose image or audio for your reCAPTCHA type. The audio reCAPTCHA is a convenient option for the visually impaired.

##### Theme

Visible reCAPTCHAs are available in a dark or light theme. Choose a theme that suits your website design.

##### Size

As well as the normal-sized reCAPTHCA, a compact version can also be selected.

##### Badge Position (Invisible Only)

For the invisible version, you can determine where you would like the reCAPTCHA badge to appear.

#### Version 3 Settings

Version 3 reCAPTCHAs sit silently on your website and require no interaction from your website visitors.

##### Action

Version 3 only requires that you enter an action name. This name is used to identify the action that initiated the reCAPTCHA and is used to cross reference calls in the reCAPTCHA admin pages.

You can just leave this field as is using the default value of:

ws_form/#form_id/load

... or you can enter your own. WS Form variables can be included in this setting.

The action must only contain the following characters:

a-z

A-Z

/ (Forward slash)

_ (Underscore)

#### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Advanced

The advanced tab contains additional settings that provide further control over how a field is rendered.

#### Styles

Use the Styles settings to change the design of the text field.

##### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Classes

For developers WS Form allows you to add your own classes to fields.

##### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Restrictions

##### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

#### Localization

##### Language

Choose the desired language for the reCAPTCHA.

#### Validation

##### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example, if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

##### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

#### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Redirect Action

URL: https://wsform.com/knowledgebase/redirect-to-a-page/

The Redirect action redirects the website visitor's browser to a chosen website address when they save or submit a form.

The Redirect action redirects the website visitor's browser to a chosen website address when they save or submit a form.

## Adding a Redirect Action

To add a Redirect action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select Redirect from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The available options are as follows:

### When Should This Action Run?

You can redirect the website visitor when the form is saved, submitted, or both.

### Type

There are three different types of redirect you can perform:

URL

Page

Post ID

### URL

Enter the URL you where you would like to redirect the website visitor to. This can be an absolute or relative URL.

For example:

Absolute: https://wsform.com/knowledgebase/

Relative: /knowledgebase/

WS Form variables can be used in this setting.

### Page

Search for the page you want to redirect to.

### Post ID

Enter the Post ID you wish to redirect to.

WS Form variables can be used in this setting.

### Query String Parameters

We recommend using this setting if you need to add query string parameters to your URL. WS Form will URL encode your query string parameter values automatically by using this feature. WS Form variables can be used in the field and value settings.

To add a query string parameter:

Click the Add  icon.

Enter a Field and Value for the query string parameter

Repeat as necessary for each parameter

WS Form variables can be used in the Field and Value settings.

An example configuration is show below:

### Exclude Blank Parameters

If checked, WS Form will strip any query string parameters from the URL that have blank values.

### Enable Fallback URL

This setting enables a fallback URL in case the referring page is not suitable for redirection (e.g., a password reset page). When enabled, WS Form will check the defined conditions and redirect users to an alternative page if needed.

You can read the Redirect Users to the Referring Page After Login tutorial to learn more.

### Fallback URL Conditions

Use this setting to configure the conditions that will be assessed to determine if the Fallback URL is used.

Click the Add icon by the Fallback URL Conditions setting to add a new condition.

In the If URL column, choose a condition, for example: Contains.

In the Value column, enter the string to check for in the URL, for example: reset-password

Repeat this for any other paths you want to include in the condition.

### Fallback URL

The URL you wish to fallback to if a fallback URL condition is true. For example: /my-account/

## Redirect Existing Users by Role During Registration

URL: https://wsform.com/knowledgebase/how-to-redirect-existing-users-by-role-during-registration/

When a user registers on your website using the User Management integration you can redirect existing users by their role or other criteria.

When a user registers on your website using the User Management integration, you may wish to redirect existing users by their role or other criteria.

This can be done using WS Form custom server-side form validation.

In this tutorial we show you how to redirect a user if their email address already exists and if their user role is administrator. This code can be easily changed to redirect by other user roles or capabilities. The script would typically reside in the functions.php file of your theme folder (always use the child theme for custom configuration if your theme allows it).

## Creating The Registration Form

To create a registration form:

Click on Add New from the WS Form admin menu.

Click on the User Management tab.

Click on the Registration template.

WS Form will then create a registration form for you.

## Creating The Filter

First we are going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

You can learn more about this function by clicking here.

The tag we will use is a WS Form filter called:

wsf_submit_field_validate

The second parameter provides WordPress with the callback function through which the form validation parameters will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function.

The complete statement looks something like this:

add_filter( 'wsf_submit_field_validate', 'wsf_submit_field_validate_callback', 10, 6 );

## Creating The Callback Function

This callback function is called automatically by WS Form when the form is submitted for each field on your form. It runs prior to any of your form actions running.

Six parameters are passed to the callback function, but we're only concerned with 3 of these for this tutorial:

$field_error_action_array - This array contains any actions that should run when the server side validation completes. If no validation actions occur, this array is blank. This value is always returned back to WS Form by your callback function. We add an element to this array if we want WS Form to do something on the client-side, in this case, run a redirect action.

$field_id - This is the field ID on your form that is being validated. We'll be looking out for the ID of the email field on your form.

$field_value - This is the field value submitted by the user.

Here is an example of the callback function:

// My callback function for tag wsf_submit_field_validate
function wsf_submit_field_validate_callback( $field_error_action_array, $field_id, $field_value, $section_repeatable_index, $post_mode, $submit_object ) {

 // Settings
 $my_email_field_id = 123;
 $user_role = 'administrator';
 $redirect_url = '/redirect-here/';

 // Check field ID
 switch($field_id) {

 case $my_email_field_id :

 // Validate email address
 if( !filter_var( $field_value, FILTER_VALIDATE_EMAIL ) ) {

 return $field_error_action_array;
 }

 // Get user by email using the value of this field
 $user = get_user_by( 'email', $field_value );

 // Check if user exists
 if( !$user ) {

 return $field_error_action_array;
 }

 // Check user role
 if( in_array( $user_role, $user->roles ) ) {

 $field_error_action_array[] = array(

 'action' => 'redirect',
 'url' => $redirect_url
 );
 }

 break;
 }

 return $field_error_action_array;
}

At the top of this function you will see three setting that you can change:

$my_email_field_id - Set this to the ID of the email field on your form. Learn how to find the ID of a field.

$user_role - Set this to the user role you would like to redirect for.

$redirect_url - Set this to the URL you would like to redirect to.

As you can see, we return $field_error_action_array back to WS Form at the end of the function after making changes to it.

This example does the following:

Checks the field ID using a switch statement. You would change 123 to the field ID of your email field. We use a switch statement here in case you want to add other field validations in future.

We validate the email address. This is just good practice! If the email address is not valid, we return out of the callback function. WS Form will the invalid this field anyway.

We attempt to get the user by email address.

If the user cannot be found, we return $field_error_action_array and exit the callback function.

If the user can be found, we check the roles of the user to see if one of them is administrator. If they are, we tell WS Form to run a redirect action to the specified URL by adding an element to $field_error_action_array. You can learn more about the available actions here.

## Putting It All Together

The final code you would add to your functions.php file can be found below:

// Add a filter for custom server-side validation
add_filter( 'wsf_submit_field_validate', 'wsf_submit_field_validate_callback', 10, 6 );

// My callback function for tag wsf_submit_field_validate
function wsf_submit_field_validate_callback( $field_error_action_array, $field_id, $field_value, $section_repeatable_index, $post_mode, $submit_object ) {

 // Settings
 $my_email_field_id = 123;
 $user_role = 'administrator';
 $redirect_url = '/redirect-here/';

 // Check field ID
 switch($field_id) {

 case $my_email_field_id :

 // Validate email address
 if( !filter_var( $field_value, FILTER_VALIDATE_EMAIL ) ) {

 return $field_error_action_array;
 }

 // Get user by email using the value of this field
 $user = get_user_by( 'email', $field_value );

 // Check if user exists
 if( !$user ) {

 return $field_error_action_array;
 }

 // Check user role
 if( in_array( $user_role, $user->roles ) ) {

 $field_error_action_array[] = array(

 'action' => 'redirect',
 'url' => $redirect_url
 );
 }

 break;
 }

 return $field_error_action_array;
}

 

## Redirect Users by Role After Login

URL: https://wsform.com/knowledgebase/how-to-redirect-users-by-role-after-login/

When a user logs in to your website using the User Management integration, you may wish to redirect users by their role or other criteria.

When a user logs in to your website using the User Management integration, you may wish to redirect users by their role or other criteria.

This can be done using the WS Form Run WordPress Hook action.

In this tutorial we show you how to redirect a user if their role is administrator. This code can be easily changed to redirect by other user roles or capabilities. The script would typically reside in the functions.php file of your theme folder (always use the child theme for custom configuration if your theme allows it).

## Creating The Login Form

To create a login form:

Click on Add New from the WS Form admin menu.

Click on the User Management tab.

Click on the Login template.

WS Form will then create a login form for you.

## Creating The Action

The next thing we need to do, is create an action on your form that will call the WordPress filter after the login occurs. To do this:

Click the Actions  icon at the top of the page. The Action sidebar will open.

Click the Add  icon to add a new action.

Select Run WordPress Hook from the Action pulldown. A series of settings will appear.

Complete the settings as follows:

Type: Choose Filter

Hook Tag: Enter your choice of a hook tag name. For this tutorial we'll use: wsf_redirect_after_login

Priority: Choose After other actions

## Creating The Filter

Next we are going to add some code to functions.php to handle the call to the hook. We're going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

You can learn more about this function by clicking here.

The first parameter is the tag name which for this tutorial is:

wsf_redirect_after_login

The second parameter provides WordPress with the callback function through which the form validation parameters will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function. The WordPress Run WordPress Hook action passes two parameters.

The complete statement looks something like this:

add_filter( 'wsf_redirect_after_login', 'wsf_redirect_after_login_callback', 10, 2 );

## Creating The Callback Function

This callback function will be called when WS Form runs the Run WordPress Hook filter.

Two parameters are passed to the callback function, but because we are only checking the logged in user we do not need to worry about those. For reference, however, they are:

$form_object - The form data.

$submit_object - The submission data.

Here is an example of the callback function:

// My callback function for tag wsf_redirect_after_login
function wsf_redirect_after_login_callback( $form_object, $submit_object ) {

 // Settings
 $user_role = 'administrator';
 $redirect_url = '/local-site/wp-admin/';

 // Check user is loged in
 if( !is_user_logged_in() ) {
 return;
 }

 // Get current user
 $user = wp_get_current_user();

 // Check user role
 if( in_array( $user_role, $user->roles ) ) {

 return array(

 'redirect' => array(

 'url' => $redirect_url
 )
 );
 }
}

At the top of this function you will see two setting that you can change:

$user_role - Set this to the user role you would like to redirect for.

$redirect_url - Set this to the URL you would like to redirect to.

As you can see, we return an array back to WS Form if the user has a role of administrator. The array tells WS Form that we want to do a redirect on the client side after the hook has run.

This example does the following:

Checks to ensure the user is logged in. If they are not, we return out fo the function.

We get the current user object using the WordPress function wp_get_current_user().

We check the users roles and if they have a role of administrator, we return an array back to WS Form. The array tells WS Form that we want to do a redirect on the client side after the hook has run.

## Putting It All Together

The final code you would add to your functions.php file can be found below:

// Add a filter for redirecting the user after login
add_filter( 'wsf_redirect_after_login', 'wsf_redirect_after_login_callback', 10, 2 );

// My callback function for tag wsf_redirect_after_login
function wsf_redirect_after_login_callback( $form_object, $submit_object ) {

 // Settings
 $user_role = 'administrator';
 $redirect_url = '/local-site/wp-admin/';

 // Check user is loged in
 if( !is_user_logged_in() ) {
 return;
 }

 // Get current user
 $user = wp_get_current_user();

 // Check user role
 if( in_array( $user_role, $user->roles ) ) {

 return array(

 'redirect' => array(

 'url' => $redirect_url
 )
 );
 }
}

## Redirect Users to a URL Using a Query String

URL: https://wsform.com/knowledgebase/redirect-users-to-a-url-using-a-query-string/

How to dynamically redirect users to a specific URL by passing the path through a query string parameter.

Be cautious when using this method because the query string parameter can be changed by the user to any path they wish. For a login form we recommend using this method instead: Redirect Users to the Referring Page After Login

When using the Redirect action in WS Form, you might want to dynamically redirect users to a specific URL by passing the path through a query string parameter.

You can achieve this by setting the URL dynamically using a query variable. Here's how:

Add a Hidden field to your form (We suggest adding it under the Submit button).

In the Default Value setting, enter: #query_var("r").

Make a note of the Field ID shown in the top right, for example, 123.

Click Save at the bottom.

Click the Actions icon at the top of the page.

Click the Add  icon to add a new action.

Select Redirect from the Action pulldown. A series of settings will appear.

In the URL setting, enter: #field(123) where 123 is the Field ID of the hidden field you added. You can also click the variables icon to the right of the URL setting to find the field variable.

Click Save & Close.

The form will now redirect to whatever the r query string parameter is set to.

## Redirect Users to the Referring Page After Login

URL: https://wsform.com/knowledgebase/redirect-users-to-the-referring-page-after-login/

This tutorial explains how to modify the included Login form template so that it redirects to the referring page after a user logs in.

The WS Form User Management integration can be used to create a login form for WordPress. Sometimes it can be helpful to redirect the user back to the referring page after a successful login. This tutorial explains how to modify the included Login form template so that it redirects to the referring page after a user logs in.

## Enabling Referrer Tracking

The #tracking_referrer variable returns the URL of the page user visited before arriving at the current page. It can be placed in the URL setting of the Redirect action on the login page to return the user back to where they were after logging in.

WS Form disables all tracking by default to prioritize user privacy, therefore we first need to enable Referrer tracking. To do this:

Click the Form Settings icon at the top of the layout editor.

Click on the Tracking tab.

Check the Referrer settings.

Click Save & Close.

## Configuring The Redirect Action

Now that we have referrer tracking enable, we can now use the #tracking_referrer as the URL to redirect to after logging in. To do this:

Click the Actions icon at the top of the layout editor.

Click the Settings  icon next to the Redirect action.

In the URL setting add: #tracking_referrer

Click Save & Close.

## Setting a Fallback URL for Redirects

In some case you may want to redirect to an alternative URL instead of the referring page. For example, you wouldn't want to redirect back to a reset password page. Instead you may wish to redirect to a My Account page or perhaps the home page.

This is possible using the Fallback URL feature of the Redirect action.

In this example, we'll create a fallback URL of /my-account/ if the referring page path is /reset-password/.

Click the Actions icon at the top of the layout editor.

Click the Settings  icon next to the Redirect action.

Check the Enable Fallback URL setting.

Click the Add icon by the Fallback URL Conditions setting to add a new condition.

In the If URL column, choose Contains.

In the Value column, we enter the string we'll check for in the URL, for example: reset-password

Repeat this for any other paths you want to include in the condition.

Enter the Fallback URL, for example: /my-account/

Click Save & Close.

A full example is shown below:

WS Form will now redirect users to the Fallback URL if the referring page matches specific conditions. This prevents users from being sent back to pages like a password reset screen and instead directs them to a more appropriate destination, such as a My Account or your home page.

## Remove Button

URL: https://wsform.com/knowledgebase/section_delete/

The remove button is used with repeatable sections to remove a row.

The Remove button is used with repeatable sections to remove a row. The remove button can be placed within or outside of the section it will add rows to.

## Demo

## Adding a Remove Button

To learn how to add, edit, clone, move, resize, offset, or delete a remove button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the remove button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Repeatable Section

This setting determines which section the row should be added to when the remove button is clicked. You can choose to put the remove button inside the repeatable section, or outside of it.

If you add the remove button to a repeatable section, it will automatically be assigned to it. If you add to a section that is not repeatable you will be alerted to the fact that the repeatable section needs to be chosen.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the remove button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custome attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custome attributes as you need.

To add a custome attributes key value pair:

Click the Add  icon to add a custome attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custome attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Repeatable Sections

URL: https://wsform.com/knowledgebase/repeatable-sections/

Repeatable sections enable someone to duplicate a row of fields on your form.

Repeatable sections (repeaters) enable someone to duplicate a row of fields on your form. This is useful for order forms, lists of names and any other form where adding additional rows of fields would make completing a form easier.

## Demo

## Features

Repeatable sections are easily added. No additional plugins or coding required.

Full compatibility with conditional logic.

Full compatibility with e-commerce fields.

All field types are supported*.

A choice of buttons or icons field types for adding, removing or moving rows.

Default, minimum and maximum row options.

Option to repeat section label.

Repeated fields are neatly presented in emails and submissions.

* Usual exceptions (such as reCaptcha) apply.

## How To

To make a section repeatable:

Hover your mouse over any section you have created.

Click the section settings icon.

Check the Repeatable setting.

Click Save at the bottom of the sidebar.

Then add any fields you want to your section that you would like in each row that will be repeated.

You can add as many repeatable sections to a form as you wish.

You can learn more about the repeatable settings in the Sections knowledge base article.

## Fields

Repeatable sections have their own set of fields that you can add to your form to allow users to add, remove and move rows.

You can learn more about these fields here:

## Tutorials

## Reset Button

URL: https://wsform.com/knowledgebase/reset/

The reset button resets the form to the default values.

The Reset button resets the form to the default values.

## Demo

## Adding a Reset Button

To learn how to add, edit, clone, move, resize, offset, or delete a reset button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the reset button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the reset button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Responsive Forms

URL: https://wsform.com/knowledgebase/responsive-forms/

Responsive forms look good on all devices, from your mobile phone and tablet to a desktop computer screen.

The word Responsive, in the context of web development, means that the web page dynamically adjusts its layout to suit the screen size of the device it is being displayed on. Responsive design is vital for online forms, as incorrect scaling on the front end can make it difficult to interact with certain form elements. If you've ever tried filling in a contact form on a phone where the form labels were so small you couldn't see which field was which, you know what we're talking about.

So, for example, on a mobile device, full-width inline form input fields are larger and easier to interact with on smaller screens, whereas on a desktop computer with a larger screen, you might want to split your fields across 2 or more columns.

Similarly, users interact differently with checkbox, select, and submit button fields depending on whether they're using a touchscreen or a mouse cursor.

Responsive forms improve the accessibility of your forms.

In this tutorial, we'll look at the ins and outs of responsive forms. WS Form PRO allows you to quickly build fully responsive forms for any input type using the drag and drop form builder interface - absolutely no CSS styling, Javascript, or HTML knowledge required!

## Breakpoints

In a responsive form, a breakpoint is a point (screen width) at which the form will adapt in a certain way in order to provide the best possible user experience. These are approximately the width of a screen you would find on different devices such as a phone, tablet, laptop, or desktop computer.

Example breakpoints might be:

 Extra small - Up to 575 pixels width (mobile device)

 Small - Up to 767 pixels with (tablet)

 Medium - Up to 991 pixels (laptop)

 Large - Up 1199 pixels (desktop)

 Extra large -  1200 pixels or more

## How To Choose a Breakpoint

When editing a form in WS Form PRO, you can select the breakpoint you wish to edit by using the slider at the bottom of the screen.

You can either click a breakpoint to view it, or click and drag to see various breakpoints. If you hover your mouse over a breakpoint icon, it will show you the breakpoint attributes, such as the minimum size the screen has to be to trigger that breakpoint.

The width and offset of sections and fields can be changed per breakpoint. Tabs, sections, and fields are ordered the same regardless of the breakpoint you select. The settings of sections and form fields also remain the same for every breakpoint too. For example, this means if you change the label of a field when at the smallest breakpoint, it will have exactly the label at the largest breakpoint.

## Widths

Each field and section on your form can be a different width. The width of a field or section is measured in columns. The max width available is 12 columns. So, for example, to make a field half width, you would set it to 6 columns.

If space allows, fields will stack next to each other in a given row. For example, if you had two fields that were 6 columns each, they would sit next to each other in the same row.

If you need a field to start at the beginning of a row, consider adding a new section.

## Offsets

In addition to width, you can also offset fields and sections. The amount of offset is again measured in columns.

You can only offset fields that are less than 12 columns in width.

## How to Change Field Sizes & Offsets

To change the size of a field, click and drag the resizer icon. To change the offset of a field, click and drag the offset bar.

 

## How to Change Section Sizes & Offsets

To change the size of a section, click and drag the resizer icon. To change the offset of a section, click and drag the offset bar.

 

To change the offset of a field or section, click and drag the thicker edge.

## Inheritance

When you change the size of a field, any breakpoints above that will inherit that same size unless you set a specific size for that field at a higher breakpoint. Likewise, the same occurs with offsets. This applies to sections also.

In other words, if you set a width at the extra-small breakpoint, it will be inherited by the small, medium, large, and extra-large breakpoints, unless you specifically set a custom width or offset at those breakpoints.

## Best Practice

Best practice when building a form would be to design a single-column style form at the mobile breakpoint. Then when you have finished making your form, click to the next breakpoint up and introduce some columns that would make viewing the form easier at that width. Progressively work your way up to desktop width, where you might have two, three, or four columns of fields.

## Reset

The reset button clears all of your widths and offsets and returns your form to a single-column format. If you reset your form in error, you can use the undo tool to revert your form back to its prior state.

## Section and Field Settings

As well as using the slider to select a breakpoint, you can also set the breakpoint widths and offsets when editing a section or field using the sidebar menu. Click on the Advanced tab and scroll to the bottom to find the breakpoint width and offset column editor. This provides you with a granular editor for the column width and offset for any section or field in your form.

Click the Save button to save your changes, or click Cancel to ignore your changes.

## Conversational Forms

Conversational forms are a way of presenting form questions one-by-one instead of showing the entire form at once. This makes completing the form easier, improving conversion rates and user satisfaction. They are presented as a full-screen form, allowing for larger, easier-to read-fields.

Conversational Forms are a template offered with  WS Form Pro, and you can read more about them here.

## For Developers

We also support different frameworks such as Bootstrap and Foundation for developers. These frameworks have different breakpoints and we show those in the layout editor. The default framework, WS Form, has 5 breakpoints. You can change the framework WS Form is using in global settings.

The breakpoint sizes can also be changed by using the wsf_config_frameworks filter hook. Learn more.

WS Form PRO automatically optimizes field and section framework classes.

 

 

## Retrieving ACF Option Values Using #option_get

URL: https://wsform.com/knowledgebase/retrieving-acf-option-values-using-option_get/

Use the WS Form #option_get variable to retrieve ACF Options Page values from the WordPress wp_options table.

Advanced Custom Fields (ACF) allows you to create custom Options Pages in WordPress. These values are stored in the WordPress wp_options table.

The WS Form #option_get variable allows you to retrieve values from the wp_options table. It can be used in actions such as Send Email, Webhook and other integrations.

The syntax is:

#option_get("option_name", "parameter/key")

For ACF, the option_name parameter is prefixed with options_ when a custom field is saved from an Options Page.

So, for example:

Field Label: API Key Field Name: api_key

The option_name would be: options_api_key

Therefore to get that value using #option_get, you could use:

#option_get("options_api_key")

 

## Right-To-Left Support

URL: https://wsform.com/knowledgebase/right-to-left-support/

WS Form PRO is compatible with RTL (Right-To-Left) languages and screen layouts.

WS Form PRO is compatible with RTL (Right-To-Left) languages and screen layouts. Both our administration screens and front-end rendering are compatible with RTL.

## Run JavaScript Action

URL: https://wsform.com/knowledgebase/run-javascript/

The Run JavaScript action allows you to run any JavaScript when a form is saved or submitted.

The Run JavaScript action allows you to run any JavaScript when a form is saved or submitted.

## Adding This Action

To add a Run JavaScript action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select JavaScript from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Run WordPress Hooks action settings are as follows:

## When Should This Action Run?

You can choose to run the WordPress hook when the form is saved, submitted, or both.

## JavaScript

Enter the JavaScript you would like to run in the editor.

For example:

alert('Thank you for submitting your form, #user_first_name!');

You can enter straight text or use a WS Form variable in the JavaScript. For more information about WS Form variables, click here.

## Run JavaScript on Form Load

URL: https://wsform.com/knowledgebase/run-javascript-on-form-load/

Learn how to run your own JavaScript when a form loads.

## Using Your Own JavaScript

If you need to run JavaScript when a form loads, you can use the wsft-rendered WS Form event. This will ensure that the form has loaded and rendered fully before your JavaScript runs.

The wsft-rendered event fired on the document object and is passed the form object, form_id and instance_id. You can use these parameters to determine whether your JavaScript should run.

A simple example of running JavaScript on form load is shown below:

(function($) {

 // Create wsft-rendered event handler
 $(document).on('wsft-rendered', function(e, form, form_id, instance_id) {

 // The form ID this script should run for
 var my_form_id = 1;

 // Do not run this JavaScript if this event does not belong to my form ID
 if(form_id != my_form_id) { return; }

 // My JavaScript here ...

 });

})(jQuery);

If you have multiple instances of the same form on a page, the instance_id parameter can be used to differentiate them. This starts with an integer of 1 for the first instance.

## Using Conditional Logic

You can also run JavaScript using conditional logic. And example of doing this is shown below:

An advantage of using this method is that you can use WS Form variables in your Javascript.

## Run WordPress Hook Action

URL: https://wsform.com/knowledgebase/run-wordpress-hook/

The Run WordPress Hook action runs a WordPress action or filter when a user saves or submits a form.

The Run WordPress Hook action runs a WordPress action or filter when a user saves or submits a form. Although simple this action is powerful and allows developers to run any PHP code when a website visitor submits a form.

## Adding This Action

To add a Run WordPress Hook action:

When editing your form, click the Actions  icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Run WordPress Hook from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Run WordPress Hooks action settings are as follows:

## When Should This Action Run?

You can choose to run the WordPress hook when the form is saved, submitted, or both.

## Type

Select the type of hook you would like to run:

Filter (apply_filter)

Action (do_action)

## Hook Tag

Enter the tag name of the filter or action you want to run.

## Priority

Choose whether to run the hook before or after other actions. The options are:

Before submission created
Hook will run before any other actions. #submit_id variable will be blank.

Before other actions
Hook will run after the submission is created but before other actions run. #submit_id will be set.

After other actions
Hook will run after all other actions have run.

If you want to manipulate field values before other actions run, select Before submission created or Before other actions.

If you want to use data other actions have created (For example, to obtain a Zendesk ticket ID), select After other actions.

## Writing Hooks

Click on a tab below to learn how to use this action for Filters and Actions.

### Filter

WS Form PRO will call the filter as follows:

apply_filters($tag_name, $form, $submit);

$form - This contains the form object.

$submit - This contains the submit object.

#### Return Values

The return from your PHP filter function will be processed as follows:

Return Type
Processed As

Object: $submit
$submit object will be replaced and passed to the next action.

Integer: 0 - 100
Spam level set
0 = Not spam, 100 = Spam.

Array
Return messages, field value setting or redirect to a different URL (See below).

Boolean: false
Action processing halted.

### Sample Code

#### Return a Submit Object

You can use the Run WordPress Hook action in combination with some simple code to intercept submission data and use it in your own PHP scripts. By using a WordPress filter you can return the submit object back to WS Form for use in other actions.

An example of how to do this is shown below:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 // Set meta key for field ID 123 (Change this to your field ID)
 $meta_key = 'field_123';

 // Get value submit object
 $field_value_old = $submit->meta[$meta_key]['value'];

 // Do something with $field_value_old (This is just an example)
 $field_value_new = str_replace('replace_this', 'with_this', $field_value_old);

 // Set value in submit object
 $submit->meta[$meta_key]['value'] = $field_value_new;

 // Return the submit object back to WS Form
 return $submit;
}

When the filter runs, the form and submit data are passed to it.

In the example above, you would change field_123 to match the field ID on your form. For example, if the field you want to obtain has an ID of 321 in the WS Form layout editor, you would enter field_321 as the $meta_key variable.

#### Set a Field Value

You can use the Run WordPress Hook action in combination with some simple code to set the value of a field on your form.

An example of how to do this is shown below:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 return array(

 array(

 'action' => 'field_value',
 'field_id' => 123,
 'value' => 'Test value',
 )
 );
}

The available parameters for the custom message return type array are as follows:

Name
Description
Values
Default
Required

field_id
The field ID to set the value in.
-
-
Yes

value
The field value to set.

No

check
Used to determine if a select, checkbox and radio row matching the value is checked or not.
true, false
true
No

append
For text based fields, whether to append the value to the existing value in the field.
true, false
false
No

prepend
For text based fields, whether to prepend the value to the existing value in the field.
true, false
false
No

section_repeatable_index
Use this to identify the row index if you want to target a field in a repeatable section.
Integer
0 = No section repeatable index
No

In the example above, you would change 123 to match the field ID on your form.

#### Return a Custom Message

To return a custom message, the return from your PHP filter can be set as follows:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 return array(

 array(

 'action' => 'message',
 'message' => __('My custom message')
 )
 );
}

The available parameters for the custom message return type array are as follows:

Name
Description
Values
Default
Required

message
Message to display.
-
-
Yes

type
Type of message.
success, information, warning, danger, none
success
No

method
Position.
before, after
before
No

form_hide
Hide form when shown.
true, false
true
No

clear
Clear other messages.
true, false
true
No

duration
Show duration (ms).

No

scroll_top
Scroll to top.
instant, smooth (Blank = Do not scroll)

No

scroll_top_offset
Scroll offset (pixels).

0
No

scroll_top_duration
Scroll Duration (ms).

400
No

message_hide
Hide message after duration.
true, false
false
No

form_show
Show form after duration.
true, false
false
No

The behavior of a custom message is the same as the Show Message action.

A more advanced example of returning a custom message array is shown below:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 return array(

 array(

 'action' => 'message',
 'message' => __('My information message'),
 'type' => 'information',
 'method' => 'after',
 'form_hide' => false,
 'clear' => true
 )
 );
}

#### Return an Error Message

To return an error message, the return from your PHP filter can be set as follows:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 return array(

 array(

 'action' => 'error',
 'message' => __('My error message')
 )
 );
}

#### Return a Redirect

To return a redirect, the return from your PHP filter can be set as follows:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 // Set your redirect URL
 $redirect_url = 'https://mysite.com/redirect-url/';

 // Redirect
 return array(

 array(

 'action' => 'redirect',
 'url' => $redirect_url
 )
 );
}

#### Return a Spam Level

If your filter is designed to check for spam, you can return a spam level. This is done by returning an integer between 0 (Not spam) and 100 (Spam).

To return a spam level, the return from your PHP filter can be set as follows:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 // Perform your spam check here
 $spam_level = 100;

 // Return a spam level of 100
 return $spam_level;
}

#### Return a Halt Signal

To halt further action processing, the return from your PHP filter can be set as follows:

// Add filter
add_filter('wsf_filter_tag', 'wsf_filter_function', 10, 2);

// Filter function
function wsf_filter_function($form, $submit) {

 // Return false to halt action processing
 return 'halt';
}

### Action

WS Form PRO will call the action as follows:

do_action($tag_name, $form, $submit);

$form - This contains the form data.

$submit - This contains the submit data.

### Sample Code

#### Retrieve Field Data

The following code is an example of how to retrieve submitted field data from a form:

// Add action to process form data
add_action('wsf_action_tag', 'wsf_action_function', 10, 2);

// My function for action
function wsf_action_function($form, $submit) {

 // Get submit value (Change '123' to your field ID)
 $submit_value = wsf_submit_get_value($submit, 'field_123');

 // Do something with $submit_value here
 // ...
}

### Using Conditional Logic to Catch Submit and Save Errors

An example of how to catch a form submission error is shown below. Similar conditions exist for a form save error too. In the example below a previously hidden message field is made visible if a submit error occurs.

## Run WordPress Search Action

URL: https://wsform.com/knowledgebase/run-wordpress-search/

The Run WordPress Search action initiates a WordPress search. It redirects the web browser to the normal WordPress search results page.

The Run WordPress Search action initiates a WordPress search. It redirects the web browser to the normal WordPress search results page.

Tip: We recommend enabling the Enable Form Submit on Enter setting under Form Processing in the Form Settings sidebar. This will enable the user to type a keyword and then type Enter to initiate the search.

## Demo

## Adding This Action

To add a Run WordPress Search action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Run WordPress Search from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Run WordPress Search action settings are as follows:

## When Should This Action Run?

You can choose to run the WordPress hook when the form is saved, submitted, or both.

## Search Query Field

Select the field you would like to use for the search query. The content of that field will be used as the keyword(s) of the WordPress search. We recommend using a Search field.

## Filter By Post Types

This feature enables you to limit the search to certain post types. To add a post type:

Click the Add  icon to add a new post type.

Select the post type from the dropdown.

Repeat this for each post type you wish to filter by.

 

## Salesforce Integration

URL: https://wsform.com/knowledgebase/salesforce/

The Salesforce integration lets you push new records to objects using an action and create new forms from your Salesforce objects in a single click on the add…

The Salesforce integration for WS Form PRO connects forms directly to Salesforce. You can create and update Salesforce objects, run Salesforce invocable actions (Flows), upload files, detect and update duplicate records, populate forms from Salesforce, and use data returned by Salesforce in subsequent actions.

For example, you could create a Lead from a sales inquiry, update an existing Contact, attach uploaded files to an object, run a Salesforce Flow, or retrieve an existing Salesforce record and use it to populate a form.

## Installation

The Salesforce add-on is installed in the same way as installing WS Form PRO.

Once installed, activate the license for the Salesforce add-on.

Click WS Form in the WordPress administration menu.

Click Settings.

Open the Integrations tab and select Salesforce.

Enter your Salesforce add-on license key in Add-on License Key.

Click Activate.

The Add-on License Status setting confirms whether your Salesforce add-on license is active.

If your license key fails to activate, make sure you are using the license key for the Salesforce add-on and not your WS Form PRO license key.

## Connecting To Salesforce

Before you can use Salesforce objects or invocable actions, WS Form needs to be connected to your Salesforce account.

Click WS Form in the WordPress administration menu.

Click Settings.

Open the Integrations tab and select Salesforce.

If required, configure the Custom Endpoint Hostname.

Click Connect.

Follow the Salesforce authorization prompts.

Once connected, the Salesforce Status will show that the integration is connected and the Instance URL assigned by Salesforce will be displayed.

### Custom Endpoint Hostname

By default, WS Form connects using login.salesforce.com.

You can use the Custom Endpoint Hostname setting to connect through a different Salesforce login endpoint.

For example, when connecting to a Salesforce Sandbox, use test.salesforce.com.

Enter the hostname only. You do not need to include the protocol.

### Working Objects

Salesforce can contain a large number of standard and custom objects. The Working Objects setting lets you choose which objects WS Form should make available.

Common Salesforce objects include Accounts, Contacts, Leads, Opportunities, Cases, and Campaigns. Custom Salesforce objects are also supported and will appear in the available object list.

Select the objects you want to use and click Save.

If you add or modify objects in Salesforce and they do not appear in WS Form, click Refresh alongside Working Objects to retrieve the latest object definitions from Salesforce.

### Working Invocable Actions

In addition to working with Salesforce objects, WS Form can run supported Salesforce invocable actions.

The Working Invocable Actions setting determines which available actions can be selected in WS Form. This includes supported Salesforce Flow actions exposed through the Salesforce API.

Select the invocable actions you want to make available and click Save.

If you create or modify an invocable action in Salesforce, click Refresh alongside Working Invocable Actions to retrieve the latest actions.

## Creating A Form From A Salesforce Object

WS Form can automatically create a form from a Salesforce object. Fields are created from the Salesforce object definition and the Salesforce action is configured automatically.

To create a form from a Salesforce object:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Salesforce tab.

Choose the Salesforce object you want to use.

Wait while WS Form builds and configures the form.

The resulting form can be edited in the same way as any other WS Form form.

If an object does not appear, click the refresh icon on the Salesforce tab. You can also check that the object is selected under Working Objects in the Salesforce integration settings.

## Adding A Salesforce Action Manually

You can connect any form to Salesforce by adding a Salesforce action.

Edit the form.

Open the Actions sidebar.

Click Add.

Select Add to Salesforce.

Configure the Salesforce action.

Click Save.

You can add multiple Salesforce actions to the same form. This makes it possible to create or update several related Salesforce objects, run invocable actions, or combine both operations from a single submission.

### When Should This Action Run?

Like other WS Form actions, the Salesforce action can be configured to run when the form is saved, submitted, or both.

### Opt-In Field

The optional Opt-In Field setting controls whether the Salesforce action runs according to the value of a form field.

Select a Select, Checkbox, or Radio field. If the selected field does not contain a value when the action runs, no data is sent to Salesforce.

A common use is to select a Checkbox field that asks the user for permission to send their information to a CRM.

### Endpoint

The Endpoint setting determines what the Salesforce action will interact with.

Objects - Create or update Salesforce records.

Invocable Actions - Run supported Salesforce invocable actions, including supported Salesforce Flows.

The settings shown beneath Endpoint change according to the type of endpoint selected.

## Working With Salesforce Objects

When you select a Salesforce object as the Endpoint, WS Form provides settings for creating records, updating records, mapping fields, detecting duplicates, and uploading attachments.

### Object ID

The Object ID setting can be used when you already know the Salesforce record you want to update.

Leave this setting blank to create a new Salesforce record. To update a specific existing record, enter its Salesforce Object ID.

You can also use WS Form variables in this setting. This is particularly useful when multiple Salesforce actions are configured on the same form.

### Field Mapping

Field Mapping determines which form fields are sent to corresponding Salesforce fields. For example, a form Email field could be mapped to the Salesforce Email field.

To create a field mapping:

Click Add in the Field Mapping section.

Select the WS Form field under Form Field.

Select the corresponding Salesforce Field.

Choose the On Update behavior.

Repeat for each field you want to send to Salesforce.

WS Form processes values according to the Salesforce field type. This includes booleans, numbers, currency values, dates, times, date/times, references, and multi-select picklists.

### Custom Mapping

Custom Mapping lets you send a fixed value or a WS Form variable to a Salesforce field without requiring a corresponding form field.

For example, you could set the Lead Source for every new Salesforce Lead to a fixed value such as Website.

Click Add in the Custom Mapping section.

Enter the value or WS Form variable in Value.

Select the destination Salesforce Field.

Choose the On Update behavior.

### Find Duplicates By

The Find Duplicates By setting lets WS Form search Salesforce for an existing record before creating a new one.

Select the Salesforce field that should uniquely identify the record. For example, when creating Contacts or Leads, you might use the Salesforce Email field.

The Salesforce field selected in Find Duplicates By must also have a value supplied through your field or custom mappings.

### If Duplicate Found

The If Duplicate Found setting determines what happens when an existing Salesforce record is found.

SettingDescription

Do nothingThe existing Salesforce record is left unchanged.

UpdateThe existing Salesforce record is updated using the submitted data and the On Update rules configured for each mapping.

### On Update

Each field and custom mapping has an On Update setting that determines how that value behaves when an existing Salesforce record is updated.

SettingDescription

UpdateReplaces the existing Salesforce value with the new value.

MergeMerges the existing value with the new value. This is particularly useful with Salesforce multi-select picklists.

IgnoreLeaves the existing Salesforce field unchanged.

### Attachment Mapping

Attachment Mapping lets you upload files from WS Form to the Salesforce object.

You can map File Upload and Signature fields.

Click Add in the Attachment Mapping section.

Select the file or signature field.

Repeat for each field that should be uploaded to Salesforce.

If a File Upload field allows multiple files, each uploaded file is processed as an attachment.

## Running Salesforce Invocable Actions

Salesforce invocable actions allow WS Form to send data to supported Salesforce automation, including supported Salesforce Flows.

Add or edit an Add to Salesforce action.

Choose the required invocable action from Endpoint.

Configure the input mappings required by the action.

Configure any response mappings you want returned to WS Form.

Click Save.

The available inputs and outputs depend on how the invocable action is configured in Salesforce.

### Field Mapping

When an invocable action is selected, Field Mapping maps WS Form fields to inputs exposed by the Salesforce action.

For each mapping, select the Form Field and corresponding Salesforce Action Input.

### Custom Mapping

Custom Mapping can be used when an action input should receive a fixed value or a value generated using WS Form variables.

Each mapping consists of an Input Value containing the value or variable to send and an Input Key identifying the Salesforce action input that should receive it.

### File Mapping

File Mapping lets you map uploaded files or signatures to compatible inputs in a Salesforce invocable action.

For each mapping, select the WS Form file or signature field and the corresponding Salesforce Action Input.

WS Form uploads the file to Salesforce and passes the resulting Salesforce Content Version ID to the action input.

### Deduplicate Arrays

Enable Deduplicate Arrays if multiple mappings can add values to the same action input array.

When enabled, duplicate values in those arrays are removed before the request is sent to Salesforce.

### Response Field Mapping

Salesforce invocable actions can return output values after they run. Response Field Mapping lets you store those returned values in WS Form fields.

For each response mapping, enter the Salesforce action Output Key and select the WS Form field that should receive the returned value.

For example, a Salesforce Flow could return an identifier, calculated value, status, or other result and WS Form could store that result in a field for use by subsequent processing.

## Populating Forms From Salesforce

Salesforce can also be used as a Form Population data source.

This lets you retrieve data from a Salesforce object or run an invocable action when a form loads and use the returned data to populate WS Form fields.

Edit the form.

Open the form settings.

Enable Form Population.

Select Salesforce as the population action.

Select the Salesforce object or invocable action you want to use.

Configure the population settings and field mappings.

### Populating From A Salesforce Object

When a Salesforce object is selected as the form population source, the Object ID setting specifies which Salesforce record should be retrieved.

You can enter an Object ID directly or use WS Form variables to determine it dynamically.

After selecting the object, map Salesforce fields to the WS Form fields that should be populated.

### Populating From An Invocable Action

A Salesforce invocable action can also be run as part of form population. This provides settings for sending inputs to the action and mapping its outputs back to the form.

#### Input Mapping

Input Mapping sends values to the Salesforce invocable action. Each mapping contains an Input Value and the Salesforce Input Key that should receive the value.

The input value can contain fixed values or WS Form variables.

#### Output Mapping

Output Mapping maps outputs exposed by the Salesforce action to WS Form fields. Select the Salesforce Output Key and the WS Form field that should receive the returned value.

#### Custom Output Mapping

Custom Output Mapping lets you retrieve an output using a specific output node or path and map that value to a WS Form field.

This is useful when an invocable action returns a more complex response and you need to retrieve a specific value from that response.

## Salesforce Object ID Variables

When a Salesforce object is created or an existing object is found, WS Form makes its Salesforce Object ID available to subsequent processing.

VariableDescription

#salesforce_object_id_firstReturns the first Salesforce Object ID created or found while processing Salesforce actions.

#salesforce_object_idReturns the most recent Salesforce Object ID created or found.

These variables are particularly useful when multiple Salesforce actions run on the same submission.

For example, you could create a Contact and then use #salesforce_object_id in a subsequent Salesforce action to create another object associated with that Contact.

The variables can be used anywhere WS Form variables are supported.

## Using Multiple Salesforce Actions

You can add multiple Salesforce actions to a single form. Actions run in sequence, making it possible to build more sophisticated Salesforce workflows.

For example, a form could create or update a Contact, create another Salesforce object related to that Contact, upload supporting files, run a Salesforce invocable action, and store values returned by that action in WS Form fields.

Salesforce Object ID variables and WS Form variables can be used to pass information between these actions.

## Troubleshooting

### Salesforce Objects Or Actions Are Missing

If an object does not appear in WS Form, go to WS Form > Settings > Integrations > Salesforce, check Working Objects, and click Refresh to retrieve the latest object definitions from Salesforce.

For missing invocable actions, follow the same process using Working Invocable Actions.

### Salesforce Connection Has Expired

If WS Form can no longer communicate with Salesforce, go to WS Form > Settings > Integrations > Salesforce, click Disconnect, and then click Connect to re-establish the connection.

Learn more: Error: INVALID_SESSION_ID - Session Expired Or Invalid

### Using A Salesforce Sandbox

If you are connecting to a Salesforce Sandbox, enter test.salesforce.com in Custom Endpoint Hostname before connecting your Salesforce account.

### Refreshing Salesforce Metadata

If you change object definitions, custom fields, or invocable actions in Salesforce, refresh the corresponding metadata under WS Form > Settings > Integrations > Salesforce.

This ensures the latest Salesforce objects, fields, inputs, and actions are available when configuring your forms.

## Sample CSV Files - Free Download

URL: https://wsform.com/knowledgebase/sample-csv-files/

You can import any CSV file into a data grid. This is useful for importing data, such as a country or state list.

A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values.

Below are some sample CSV files that you can download for free. Use these in WS Form or with any project you wish.

## How to Import CSV Files into WS Form

You can import these sample CSV files into a select, checkbox or radio field data grid in one of two ways:

### Preset Data Source

You can use the data source feature of a data grid to quickly and easily import the samples CSV files above.

### CSV Import

You can import any CSV file into a data grid. To import a CSV file, either click the Import icon or drag a CSV file into the data grid area. When you drag the file into the data grid area, a blue box will appear with a dashed outline. Release the file into that area, and the CSV import will begin.

Note that when you import a file, all data in that data grid will be replaced with the CSV you import.

## Save & Continue

URL: https://wsform.com/knowledgebase/save-continue/

The WS Form save & continue feature allows someone completing a form to save their progress and then continue the form later.

The WS Form save & continue feature allows someone completing a form to save their progress and then continue the form (resume) later. Each submission record has a hidden anonymized value called a session hash that is used to identify the submission. It is this session hash that WS Form uses to retrieve the submission in order that the user can continue their submission.

WS Form has two save & continue methods:

Cookie (Default)

Link

The cookie method is silent and allows someone to continue their form by simply returning to the original  web page containing the form. This must be done on the same device.

The link method provides a link to the user, typically in an email, that they can click to continue their form. The advantage of this method is that they can click the link on any device at any time to recall their form submission.

You can also use a combination of the cookie and link method if you wish.

This tutorial explains how to set up both save methods. By default, new forms are configured to use the cookie method.

## The Save Button

They key to the WS Form save & continue feature is the Save button.

To enable the save feature you simply need to add a save button to your form. To do this, drag or click the save button from the Build to your form. You can place the save button anywhere you wish on your form. You can also add as many save buttons as you wish.

## The Cookie Method

New forms are configured to use the cookie save & continue method, so by adding the save button your form will already allow progress to be saved.

If you do not wish to have the cookie method enabled, you can disable it from the Global Settings page under the Advanced tab. Simply uncheck the Enable Save Cookie setting and click Save.

## The Link Method

An easy way of seeing a demo of the link method is to try the Save & Continue demo template. To do this:

Click on Add New in the WS Form administration menu.

Click on the Demo tab.

Hover over the Save & Continue template and then click Use Template.

### Demo

### Tutorial

The most common way of providing a user with their save & continue link is to send an email. This provides them with a point of reference with which to retrieve the link to continue their form. You could also use other actions to inform the user about their link, such as showing a message. In this tutorial, we'll send the link to the user in an email.

#### Add an Email Field

To do this you will require an Email field on your form which will be used to provide the email address the notification will be sent to. We recommend putting this field as early in your form as possible.

To add the email field, simply click or drag an Email field to your form. Click on the Email field settings and set it to Required, then click Save & Close.

#### Add a Save Button

You will also need to add a Save button to your form. When this is clicked, WS Form will create an In Progress submission record.

To add the save field, simply click or drag a Save field to your form.

#### Create a Save Email Action

When a form is saved or submitted, one or more actions can run. Actions allow you to send emails, show a message, redirect to another page or even integrate with third party systems such as MailChimp, Slack or Zapier.

For this tutorial we are going to create a Save Email action that runs when the Save button is clicked. The email will contain the link to return back to the form so that it can be continued.

Click the Actions icon at the top of the page.

In the sidebar, click the add icon below the action list to add a new action.

Choose Send Email from the dropdown.

Name the action Send Email (Save).

Under When Should This Action Run?, uncheck Submit and then check Save. This tells WS Form that this action should run when the Save button is clicked, but not for the Submit button.

In the To setting, enter #field(123) in the Email Address column and replace 123 with the ID of the email field you added previously. Optionally, you could also add fields for the name of the user and add those to the Display Name column if you wish.

In the Message visual editor, click the Text tab and then copy and paste the following email message HTML:

You are welcome to change this as you wish, but the essential part here is the #submit_url variable. It injects the required URL for returning to the saved form. In this HTML example we're using that in an anchor tag to provide a convenient clickable link for the user. You can use the #submit_link variable which will inject the full URL into your email message as a link. If you intend to use the re-run action in the submission viewer you will need to be more specific with the URL by using #submit_hash, for example:

Your #form_label submission has been successfully saved!

<a href="#submit_url" target="_blank">Continue your submission</a>

Your #form_label submission has been successfully saved!

<a href="https://my-site.com/my-page/?wsf_hash=#submit_url_hash" target="_blank">Continue your submission</a>

Click Save & Close.

#### Disable the Cookie Method (Optional)

If you do not wish to have the cookie method enabled, you can disable it from the Global Settings page under the Advanced tab. Simply uncheck the Enable Save Cookie setting and click Save.

#### Clearing the Session Hash

There are two ways of clearing the session hash:

Clearing the Session Hash Using Conditional Logic

Clearing the Session Hash Using the Debug Console

#### All Done!

Your form will now email the user completing the form each time they click the Save button. When they click the Continue your submission link it will take them back to their form as they left off.

## Variables

The following submission related variables can be used in actions.

 

## Save Button

URL: https://wsform.com/knowledgebase/save/

The save button allows a website visitor to save the progress of their form and come back at a later date to complete the form.

The Save button allows a website visitor to save the progress of their form and come back at a later date to complete the form. The Save to Submissions action needs to be active on the form with the Save event enabled.

The actions that run when the Save button is clicked are all configured in the Actions side bar. To access this, click the Actions icon at the top of the page.

## Demo

## Adding a Save Button

To learn how to add, edit, clone, move, resize, offset, or delete a save button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the save button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the save button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Save Submission Action

URL: https://wsform.com/knowledgebase/save-submission/

The Save Submission action is added by default when you create a form, and it is used to save a submitted or saved form to the WS Form database.

The Save Submission action is added by default when you create a form, and it is used to save a submitted or saved form to the WS Form database for later retrieval in the Submissions administration page.

When a form is saved or submitted, the following is stored in the database:

Submission ID

Status

Submitted, Draft, or Trashed

Whether the form was submitted in preview or published mode

Date added

Date updated

WordPress user (if submitted by a website visitor who is logged in)

Duration (the time it took the website visitor to complete the submission)

All submitted fields

Any tracking information that was enabled and able to be obtained

Details of any actions that fired when the form was saved or submitted

## Adding This Action

To add a Save Submissions action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Save Submissions from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Save Submissions action settings are as follows:

### When Should This Action Run?

You can choose to show the message when the form is saved, submitted, or both.

### Fields to Save

This setting allows you to save all fields or select which fields to include or exclude. If you choose the include or exclude filter feature, you will be prompted to add the fields you wish to filter. Click Add to add fields to this list.

Note that any excluded fields will also be excluded in other actions too.

### Auto Delete Submissions

You can set submissions to be automatically trashed or permanently deleted after a pre-determined number of days using this option.

If submissions are not being trashed or permanently delete, please ensure your wp-cron process is correctly configured to run.

### Mark as Read

If checked, new submissions will automatically be marked as read.

## Search Field

URL: https://wsform.com/knowledgebase/search/

The search field works the same as a regular Text field but is provided so that you can style it separately from other text fields on your form.

The Search field is ideally suited for the Run WordPress Search action. The field works the same as a regular Text field but is provided so that you can style it separately from other text fields on your form.

## Demo

## Adding a Search Field

To learn how to add, edit, clone, move, resize, offset, or delete a search field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #user_first_name to insert a logged-in user's first name into a First Name search field.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as (###) ###-### for a phone field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the search field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read-only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum Characters

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

This number can be used in conjunction with the character count variables.

#### Maximum Characters

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

This number can be used in conjunction with the character count variables.

#### Minimum Words

This is the minimum number of words that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum word length to zero. If the field is submitted without the minimum number of words defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Maximum Words

This is the maximum number of words that can be entered into the field in order for it to be valid. Leaving this blank will set the maximum number of words to infinity. If the field is submitted with more than the maximum word length defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Input Mask

Input masks help the user with the input by ensuring a predefined format. This can be useful for fields such as dates, numerics and phone numbers.

Example input masks can be selected by clicking the hamburger icon .

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element's value is checked against. This field is useful in, for example, forcing a website visitor to enter a phone number or date in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example, if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attribute key-value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers, you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## Section Library

URL: https://wsform.com/knowledgebase/section-library/

The WS Form section library contains ready-made sections that can be used to quickly create forms.

The WS Form section library contains ready-made sections that can be used to quickly create forms.

https://www.youtube.com/watch?v=JdGbDqWP-KI

The section library can be accessed from the Build menu under the Sections tab.

## Adding Sections to Your Form

There are two ways of adding a section from the library to your form. You can drag and drop a section to your form which allows you to choose where on your form you would like the section to be inserted. Alternatively you can click a section which will result in the section being added to the bottom of your form.

## Conditional Logic

When a section is added to your form, it may contain conditional logic that adds interactivity to your form. For example the Date From + To section contains conditional logic to ensure the From cannot be set beyond the To date. WS Form adds this conditional logic automatically to your form.

## My Sections

The My Sections feature allows you to add your own sections to the library for use in any form on your website.

Adding a section to the library can be done in various ways.

### Adding a Section

To add a section to the library:

Click the settings icon on any section.

Click the Add to My Sections icon.

The section will then appear in the Sections tab of the Build sidebar.

### Importing a Section

Another way of adding a section to the library is to import an export from WS Form. To do this, simply drag and drop the export file into the My Library area.

### Exporting Sections

To delete a section in My Library click the export  icon. You can use this feature to export a backup of a section to your computer.

When a section is exported you can import it at a later date into the My Sections library or even as a form, tab or section import.

### Deleting Sections

To delete a section in My Library click the delete   icon. Confirm deletion to proceed. Note that once a section has been deleted it cannot be recovered.

## Creating Advanced Sections

It is possible to create library items that contain more than one section. This is done by importing a tab or form export.

For tab exports, WS Form uses all of the sections and fields contained within that tab for the library item.

For form exports, WS Form uses all of the sections and fields contained within the first tab for the library item.

Additionally, any conditional logic associated with the sections and fields are also incorporated when the library item is added to the form. This allows you to retain interactive features of your form, tab and section exports.

## Searching Sections

At the top of the Sections tab is a keyword search. By entering a keyword into this field you can search any of the sections in the My Sections and built-in categories.

 

## Sections

URL: https://wsform.com/knowledgebase/sections/

To add a section to your form, simply click the add section icon at the bottom of your form.

## Adding Sections

To add a section to your form, simply click the add section icon at the bottom of your form.

Once you have added the section into the form, you can immediately start typing a label for it. To save the section label, you can either type Enter or click somewhere on the page away from the section.

## The Anatomy of a Section

 

## Cloning Sections

To clone a section:

Hover your mouse over a section

Click the section settings icon

Click the clone  icon

A cloned version of the section will then appear. It will inherit the width, offset, and settings of the section you cloned.

## Deleting Sections

To delete a section:

Hover your mouse over a section

Click the section settings icon

Click the delete  icon

The section will then be deleted. If you delete a section in error, you can always click the undo  icon or use the undo tool in the Build on the right-hand side of the page.

## Moving Sections

You can move a section around the form by clicking and dragging the section to a new position within the same section or a different section. Click anywhere in the section that is blank.

You can also move sections between tabs. Click and drag the section over a tab. Then simply drag the section into a section of the tab you selected.

## Resizing Sections

You can resize sections to be 1-12 columns wide by clicking and dragging the resize icon on the right side of a section.

For developers it is possible to adjust the number of columns used from the main Settings page under the Advanced menu. Click here to learn more. We recommend leaving this setting at 12.

## Offsetting Sections

Offsetting a section will move it inward from the left side of the screen. This is useful if you want to right align or center a section in a form.

You can offset sections by 1-11 columns wide by clicking the offset  icon on the left side of a section.

Note that sections that are as wide as the form itself cannot be offset.

## Changing Section Settings

To access the section settings, click the section settings icon. The section settings toolbar will then appear on the right of the page.

Section settings are split into Basic and Advanced. The basic tab allows you to change all of the key features you are likely to need on a simple form. The advanced tab provides greater control over the section.

Section settings are as follows:

## Basic

### Label

Use this setting to set the label for a section. The label is used if you wish to show a heading for a section. It is also used for referencing the section when building a form.

### Show Label

When enabled the section label will be shown as a heading on the page.

For developers section labels are rendered in a legend wrapper. You can change the wrapper used for section headings under the advanced section of form settings. Sections are rendered as a fieldset.

### Hidden

If checked the section will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Repeatable

#### Enabled

Checking this setting will turn the sections repeatable functionality on.

#### Repeat Label

If enable, the section label will be shown for each row added to the repeatable section.

More repeatable sections options are shown in the Advanced tab.

## Advanced

### Classes

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a tab wrapper. To add multiple classes, add a space between the class names.

### Restrictions

#### Disabled

You can disable a section (fieldset) using this setting.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Repeatable

#### Minimum Row Count

This sets the minimum number of rows a repeatable section can have.

#### Maximum Row Count

This sets the minimum number of rows a repeatable section can have.

#### Row Delimiter

When WS Form exports a submission containing repeatable data in a CSV file or passes data to an action, a fallback string is created. For example, in a CSV file due to the multi-dimensional nature of repeatable sections each rows of data will be delimited using the row delimiter for each field. The default row delimiter is a comma character.

You can change the delimiter used for each row by changing this setting.

Note that if you change the delimiter, old submissions will retain the original delimiter to maintain backward compatibility.

#### Item Delimiter

If a repeatable row contains a field that could potentially contain more than one response (e.g. checkboxes, files or a select pulldown), they will be delimited using the item delimiter. The default item delimiter is a semi-colon character.

You can change the delimiter used for each item by changing this setting.

Note that if you change the delimiter, old submissions will retain the original delimiter to maintain backward compatibility.

#### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Renaming Section Labels

To rename the label of a section, you have two options:

You can double click the label of the section, enter a new section, and then type Enter or click somewhere on the page away from the section.

Click the section settings icon to open the section settings toolbar. Change the label at the top of the toolbar, and then click the Save button at the bottom of the toolbar.

## Select Field

URL: https://wsform.com/knowledgebase/select/

The Select field creates a drop-down list with options.

The Select field creates a dropdown list with options.

## Demo

## Adding a Select Field

To learn how to add, edit, clone, move, resize, offset, or delete a select field, please click here.

## Field Settings

To edit the settings for this field type, click the sett ings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Multiple

Enabling this feature will enable the website visitor to select more than one option when submitting the form.

Selecting multiple options varies in different operating systems and browsers:

For Windows: Hold down the control (CTRL) button to select multiple options.

For Mac: Hold down the command button to select multiple options.

Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, you may wish to consider using checkboxes instead.

### Default Value

If a value is entered into this setting, the option containing that value will be selected by default. Note that this value needs to be the option value not the text shown for the option.

Comma separated values can be entered into this setting. Values will be trimmed.

Other ways of setting the default value, include:

Select rows in the Options tab using the Selected icon. Learn more

Set the default value using PHP. Learn more

Use the WordPress Filter Hook Data Source. Learn more

### Size

Selects fields are typically one row tall. You can make a Select field taller by increasing this value. For example setting the size to 5 will make the Select field 5 rows tall. This feature is useful if you enable Multiple to allow the website visitor to select multiple options.

### First Row Placeholder

The first row placeholder is used to add a single option at the top of the drop-down list, such as Select. It is assigned no value, so if the website visitor does not select an option, the field will be considered empty.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Select2 (PRO only)

#### Enable

Enabling Select2 will initialize the jQuery Select2 plugin on the select field. This provides users with the ability to search for options by typing a keyword. Learn more.

The default Select2 configuration settings in WS Form are:

Clearable Selections - Enabled.

Language - Set to WordPress locale.

Placeholder - Populated with Placeholder Row text.

If you wish to use a custom Select2 configuration, click here.

#### Use AJAX

When this setting is checked, WS Form will retrieve matching results via AJAX. This means that the options are not pre-loaded on the page which can improve page loading times for larger datasets.

Note that if you are using the Cascade Use AJAX option, this setting will not be available because the field is already using AJAX to retrieve data.

#### Show All If No Results

When this setting is checked, WS Form will show all results if no matching results are found.

#### Enable Tagging (Shown if Multiple checked)

When this setting is checked, Select2 will dynamically create new options from text input by the user in the search box.

#### Minimum Input Length

Minimum number of characters required to start a search.

#### Maximum Input Length

Maximum number of characters that may be provided for a search term.

### Select2 Custom Messages (PRO only)

#### Input Too Short

Enter a custom message that is shown when the input is too short. Only shown if you have entered a Minimum Input Length setting.

Select2 Default: Please enter #char_remaining or more character#char_plural Example: Input too short. Still need #char_remaining character#char_plural.

#### Input Too Long

Enter a custom message that is shown when the input is long short. Only shown if you have entered a Minimum Input Length setting.

Select2 Default: Please delete #char_over character#char_plural Example: Input too long. Please delete #char_over character#char_plural.

#### Searching

Enter a custom message that is shown when Select2 is searching via AJAX.

Select2 Default: Searching... Example: I am searching for #term, please wait.

#### No Results Found

Enter a custom message that is shown when no matching results are found.

Select2 Default: No results found Example: There were no results.

#### Error Loading

Enter a custom message that is shown when an error occurs when loading the results.

Select2 Default: No results found Example: An error occurred when loading the results.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the select field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplicates

#### No Duplicates in Repeatable Sections

This setting only applies to select fields that are within a repeatable section. It prevents the same option from being selected across multiple repeatable section rows. For example, if you had a select field with t-shirt sizes and selected Small in the first row, then the Small option will be disabled in all other rows.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Choices

The options in the Select drop-down are configured in this tab. Options are added using the data grid feature of WS Form. Data grids make entering lists of information quick and easy.

Using the data grid, you can mark a row as selected, disabled, or hidden.  You can also create opt-groups which allow you to group options together. For example this feature could be used to split a country list into continents.

For more information about using WS Form data grids, click here.

### Column Mapping

#### Label

Choose the column in your data grid that contains the labels to be shown to the user when they are viewing your form.

#### Value

Choose the column in your data grid that contains unique values to used. This is the value that is saved to the submission.

#### Action Variables

Choose the column in your data grid that is used when you use variables such as #field or #email_submission when used in actions (e.g. Send Email).

### Cascading

Cascading allows you to filter the options available in your select field by using the value of another field on your form. An example application of this feature would be to filter a select pull down of vehicle models by another select field containing vehicle makes.

#### Cascade

Check this setting to enable the cascading feature on this field.

#### Filter Column

The filter column setting allows you to choose which column of your data grid you want your options to be filtered by. In most cases you will want to create a new column that contains values you want to filter by.

#### Filter Value

The filter value setting allows you to choose which field on your form to filter your select options by in the filter column.

The following field types can be used for the filter value:

Text

Number

Range Slider

Rating

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Price Range

WS Form uses the Value column mapping of select, checkbox and radio fields for the filter value.

You should ensure that the value(s) returned by the Filter Value field match the values in your Filter Column exactly (Case sensitive).

#### No Results Placeholder

If no results are found, then this placeholder will be shown in the select field. This defaults to Select... but you can change this to anything you wish, e.g. Select Make

#### Show All If No Results

Enable this setting if you want WS Form to show all available results if no matching results are found.

#### Use AJAX

For larger datasets this setting can considerably speed up page loading times and filtering operations. With this setting enabled, WS Form will:

No longer include the select data in your initial page load, thus reducing your initial page load time.

Make an AJAX request and filter the results server-side each time the filter value is changed.

#### Loading Placeholder

This placeholder is shown in the select field while the AJAX process is retrieving records. This defaults to Loading... but you can change this to anything you wish, e.g. Retrieving Records.

## Send Email Action

URL: https://wsform.com/knowledgebase/send-email/

The Send Email action is included with WS Form PRO. It lets you send any number of emails to receipients when a form is saved or submitted.

The Send Email action lets you send any number of emails to recipients when a form is saved or submitted.

This action is fully configurable and allows you to:

Choose HTML or Plain text email format

Specify the sender*

Specify one or more recipients*

Specify one or more CC and/or BCC recipients*

Enter a reply-to email address*

Set the subject*

Edit the email using the WordPress visual editor or raw HTML*

Attach files (uploaded files or even signatures from your form)

Specify custom email headers*

Specify the email character set*

* You can dynamically set these values with WS Form variables too. So you could even set one of these as the email address someone entered onto your form.

Tip: To ensure WS Form is fully compatible with WordPress, we use the standard wp_mail function to send emails. We recommend using an email gateway such as Amazon SES, MailGun, or SendGrid to send emails and using a WordPress plugin to add support for these gateways. You will then find that email sending is a lot more efficient than relying on raw emails being sent from your hosting provider.

## Adding This Action

To add a Send Email action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Send Email from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Send Email action settings are as follows:

### When Should This Action Run?

You can choose to send an email when the form is saved, submitted, or both.

### From Email Address

Enter the From email address in this field. You can either enter an email address directly or use a WS Form variable in this field. For more information about WS Form variables, click here.

This field defaults to #blog_admin_email which will enter the email address you have configured in the WordPress Settings > General page.

### From Display Name (optional)

You can enter a display name for your email for the from field. This will show the display name instead of the email address in most email clients.

You can either enter a name or use a WS Form variable in this field. For more information about WS Form variables, click here.

This field defaults to #blog_name which will enter the name of the website you have configured in the WordPress Settings > General page.

### To

You can add any number of To email addresses for the email. Typically this will be to you or perhaps to the website visitor to acknowledge their inquiry. To add a To email address:

Click the Add  icon.

Enter the email address.

Optionally enter a display name for the email address (e.g. Your name).

You can enter straight text or use a WS Form variable in this field. For more information about WS Form variables, click here.

This field defaults to #blog_admin_email and#blog_name which will enter the email address and the name of your website you have configured in the WordPress Settings > General page.

Tip: Some email clients do not like emails that are sent to and from the same email address. We would recommend changing the from email address to something like do.not.reply@yourdomain.com to ensure these are different. Also some email gateways require you to register sender email addresses before you can use them. Ensure you have registered all from addresses if that is the case.

### Round Robin

The round robin feature is used to send notifications to each recipient in your To list according to the percentages you set in the Round Robin % column. To enable round robin, check this box. A third column will then appear in the To repeater above.

The Round Robin % column defaults to Auto. WS Form will automatically calculate a percentage for that row. For example, if you have two recipients, each recipient will receive 50% of the notifications if the column is set to Auto. If you enter a percentage, e.g. 25, that row will receive 25% of the notifications and the other Auto row will receive 75%.

The sum of the percentages entered for all the rows should not exceed 100.

### CC

The CC field lets you send a carbon copy of the email to recipients. Use the same method as adding values to the To field (see above) to complete this section. This field is optional.

### BCC

The BCC field lets you send a blind carbon copy of the email to recipients. Use the same method as adding values to the To field (see above) to complete this section. This field is optional. BCC recipients will receive a copy of the email, but other recipients will not see that they received it.

### Reply To Email Address

By default replies to an email are sent to the From email address. You can override this by entering an email address into this field.

For multiple reply to email address, separate email addresses with a comma.

You can enter straight text or use a WS Form variable in this field. For more information about WS Form variables, click here.

### Subject

Enter the subject line of your email here.

You can enter straight text or use a WS Form variable in this field. For more information about WS Form variables, click here.

This field defaults to #form_label which enters the label of your form as the subject line.

### Message

Enter the content of your email here.

You can enter straight text and also use WS Form variables in this field. For more information about WS Form variables, click here. There are various email-specific variables that can be used in this field.

This field defaults to:

#email_subject
#email_submission

This will add the subject of the email and the contents of the form submission to the email.

Some frequently used variables are as follows:

To view all available variables, click here.

### Message Editor

Use this setting to choose which type of editor to use for your message content. The available options are:

Visual / Text - This displays the standard WordPress visual editor. The Text tab gives you more granular control over the content, e.g. you can add HTML.

HTML - This displays an HTML editor so that you can enter raw HTML as your email content.

### Field Attachments

If you have file upload or signature fields in your form, you can attach them using this setting. To add a field attachment:

Click the Add  icon to add an attachment row.

Select the file upload or signature field.

### Media Attachments

You can attach files from your media library to your email. To add a media attachment:

Click the Add  icon to add an attachment row.

Click Select to open the WordPress media library.

Select a media item. The filename will then appear in the attachment row.

### Link to Files

If file uploads are included in the email submission, then enabling this checkbox will link the file names to the files.

### Wrap Messages in Header and Footer

This setting is checked by default. It wraps your message in a simple header and footer including some basic styling to make email sending quick and easy. If you want more control over your email content, you can uncheck this setting and the content of your message will sent without this wrapper.

### Clear Hidden Fields

When this setting is checked, WS Form will clear the value of any fields that are hidden on the form before they are processed by this action. This is useful if you only want to include completed fields a user could see at the time the form was submitted or saved. Note that fields that are of the hidden type are always included.

### Content Type

Choose Plain text or HTML for your email type. We recommend using HTML, which will enable you to better format your email and include images if you wish.

### Headers

You can use this setting to add custom headers to your email.

Click the Add  icon.

Add the header key value pair.

### Character Set

Enter the character set of the email here if you wish to change it.

You can enter straight text or use a WS Form variable in this field. For more information about WS Form variables, click here.

This field defaults to #blog_charset which enters the character set of your website.

## Send File Attachments in an Email

URL: https://wsform.com/knowledgebase/send-file-attachments-in-an-email/

WS Form can attach file uploads to email notifications.

WS Form can attach file uploads to email notifications. This is done by configuring the Attachments setting in a Send Email action.

To change a Send Email action, click the Actions icon at the top of the page. This will open the Actions sidebar:

Click on the settings icon next to the Send Email action that you would like to attach the file upload to.

Scroll down to the Attachments section.

Click the add icon below the attachments list.

Select the desired file field.

Repeat steps 3 and 4 for any additional file upload fields.

Click Save & Close at the bottom of the sidebar.

And that’s it! WS Form will now attach the file uploads to the email.

Click Preview to try it or click Publish and add the form to your web site.

Also see: File Uploads Appear as Code in Email

## Send Submissions Error Email Notifications

URL: https://wsform.com/knowledgebase/send-submissions-error-email-notifications/

Learn how to send an email notification when an error occurs with a WordPress form submissions.

WS Form offers a robust error notification feature for form submissions. In certain instances, while processing a submission, errors may arise. These can include, but are not limited to:

Third party API integration errors

Email sending errors

Run WordPress Hook PHP errors

In such cases, WS Form can ensure that you're promptly informed via error emails, enabling quick identification and resolution of the issues.

To enable email notifications when errors occur:

Click on Settings in the WS Form menu.

Click on the Reporting tab.

In the Form Submission Error Email section, check Enable.

Use the Frequency setting to specify how frequently you would like to receive error emails. Setting this to every minute, hour or day prevents too many emails being sent to you should you have a high traffic website.

Enter the email address(es) you would like the emails to be sent to in the Email To setting. The emails are sent to the blog administrator email by default.

Optionally enter a custom subject line in the Email Subject setting.

Click Save Changes.

You need to ensure that your WordPress installation is correctly configured to send emails. We recommend using an SMTP plugin to improve email deliverability.

## Set Repeatable Section Row Count Using a Field

URL: https://wsform.com/knowledgebase/set-repeatable-section-row-count-using-a-field/

Learn how to set the number of rows in a repeatable section by using the value from another field.

WS Form can set the number of rows in a repeatable section by using the value from another field. In the example below we are using the numeric value of a range slider to set the number of rows in the repeatable section. Instead of a range slider, this could be any other field that can accommodate a numeric value.

## Demo

## Conditional Logic: Set Row Count

The demo above is achieved by using conditional logic. When selecting a section in a THEN or ELSE statement, you can select Set row count as an option. Note that this will only work with the section is set up as repeatable. We are using #field(field_id) to get the value of the range slider and using that to set the row count of the repeatable section People.

The conditional logic used in this demo to change the row count to match the range slider value is as follows:

## Variable: #section_row_count(section_id)

You can also use the variable #section_row_count(section_id) to obtain the current number of rows in a repeatable section. You would set section_id to be the ID of the section you want to get row count from.

The conditional logic used in the demo to update the Number of Rows field is as follows:

The ELSE statement above ensures that the Number of Rows field is initially updated with the row count before any interaction occurs. The THEN statement then updates the value after the People row count changes.

Keyword: repeater

## Set Repeatable Section Row Count Using PHP

URL: https://wsform.com/knowledgebase/set-repeatable-section-row-count-using-php/

Learn how to set the row count of a repeatable section using PHP.

The code below demonstrates how to set the row count of a repeatable section using PHP. In this example we also set the maximum row count to the same value.

<?php

 // Callback function for the wsf_pre_render_123 filter hook
 function my_pre_render_123( $form ) {

 // Set section ID
 $section_id = 321;

 // Set number of rows
 $row_count = 3;

 // Get section object
 $section = wsf_section_get_object( $form, $section_id );

 // Set default number of rows
 $section->meta->section_repeat_default = $row_count;

 // Set maximum number of rows
 $section->meta->section_repeat_max = $row_count;

 return $form_object;
 }

 // Add filter to change form ID 123 prior to rendering
 add_filter( 'wsf_pre_render_123', 'my_pre_render_123' );

 

## Setting Custom Breakpoint Sizes

URL: https://wsform.com/knowledgebase/setting-custom-breakpoint-sizes/

Breakpoints can be changed by using the wsf_config_frameworks filter hook.

WS Form supports fully responsive forms. In a responsive form, a breakpoint is a point (screen width) at which the form will adapt in a certain way in order to provide the best possible user experience. These are approximately the width of a screen you would find on different devices such as a phone, tablet, laptop, or desktop computer.

Breakpoints can be changed by using the wsf_config_frameworks filter hook. An example of changing the breakpoints for the WS Form framework can be found below:

// Add a callback function for the wsf_config_frameworks filter hook
add_filter( 'wsf_config_frameworks', 'my_hook_function', 10, 3 );

// Callback function for the wsf_config_frameworks filter hook
function my_hook_function( $frameworks, $framework, $public ) {

 // Get framework breakpoints
 $breakpoints = $frameworks['types'][$framework]['breakpoints'];

 // Extra small (ID: 25) always 0

 // Small (ID: 50)
 $breakpoints[50]['min_width'] = 576; // Small breakpoint size in pixels

 // Medium (ID: 75)
 $breakpoints[75]['min_width'] = 768; // Medium breakpoint size in pixels

 // Large (ID: 100)
 $breakpoints[100]['min_width'] = 992; // Large breakpoint size in pixels

 // Extra large (ID: 150)
 $breakpoints[150]['min_width'] = 1200; // Extra large breakpoint size in pixels

 // Set admin breakpoint settings so that sizes are reflected in layout editor
 $breakpoints[25]['admin_max_width'] = $breakpoints[50]['min_width'] - 1;
 $breakpoints[50]['admin_max_width'] = $breakpoints[75]['min_width'] - 1;
 $breakpoints[75]['admin_max_width'] = $breakpoints[100]['min_width'] - 1;
 $breakpoints[100]['admin_max_width'] = $breakpoints[150]['min_width'] - 1;

 // Set framework breakpoints
 $frameworks['types'][$framework]['breakpoints'] = $breakpoints;

 // Return frameworks with adjusted breakpoints
 return $frameworks;
}

Note that after adding this code, if you have Compile CSS enabled in WS Form > Settings > Advanced you may need to click Save on that admin page to force the CSS to recompile.

## Setting License Keys With PHP Constants

URL: https://wsform.com/knowledgebase/setting-license-keys-with-php-constants/

License keys for WS Form PRO and integrations can be set using PHP code in wp-config.php.

License keys for WS Form PRO and integrations can be set using PHP code in wp-config.php.

This feature requires at least version 1.9.139 of WS Form PRO.

## Setting the WS Form PRO License Key

You can use the WSF_LICENSE_KEY constant to define the WS Form PRO license key by adding the following code to your wp-config.php file:

define( 'WSF_LICENSE_KEY', '***' );

Where *** is your license key.

This would typically go beneath the WP_DEBUG constant, for example:

define( 'WP_DEBUG', false );
define( 'WSF_LICENSE_KEY', '***' );

Each time a license key is defined in wp-config.php an automatic attempt will be made to activate it next time the WordPress admin is accessed.

When a license key is defined using this method, the settings tab changes as follows for your security:

The license key is obscured so that it cannot be edited or seen. Only the last 6 characters are shown for reference.

The message describing how to set the license key in wp-config.php is no longer shown.

The ability to deactivate a license key is disabled.

The ability to active a key is only shown if the attempt to activate the license key has failed.

## Setting Integration License Keys

To obtain the named constant to define for an integration:

Click on Settings from the WS Form admin menu.

Click on the tab for the integration.

Under License Key you will see the license key constant, e.g. WSF_ACTION_POST_LICENSE_KEY for the Post Management integration.

Define the integration license key by adding the following code to your wp-config.php file:

define( 'WSF_ACTION_POST_LICENSE_KEY', '***' );

Where *** is your license key.

This would typically go beneath the WP_DEBUG constant, for example:

define( 'WP_DEBUG', false );
define( 'WSF_ACTION_POST_LICENSE_KEY', '***' );

## Multi-Site

License keys set using this method will apply to all sites in multi-site installations.

## Troubleshooting

If you experience issues with this method:

Ensure the license key has been entered precisely and correctly for the constant name you have entered.

If you have an agency or freelance license key, be sure you have used the WS Form PRO license key and not the bundle/parent key.

Try removing the constant, refreshing the settings page, then adding it again to reprocess a license key.

## Setting Which Post ID to Populate With Using PHP

URL: https://wsform.com/knowledgebase/setting-which-post-id-to-populate-with-using-php/

In this tutorial we show you how to change the 'Post ID' setting found in Form Settings > Data > Populate Using Action by using a simple PHP script.

In this tutorial we show you how to change the 'Post ID' setting found in Form Settings > Data > Populate Using Action by using a simple PHP script. The script would typically reside in the functions.php file in your theme folder (always use the child theme for custom configuration if your theme allows it).

## Creating The Filter

First we are going to use the following function to create a new filter in WordPress:

add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

You can learn more about this function by clicking here.

The tag we will use is a WS Form filter called:

wsf_pre_render_<form_id>

For example, to process the form_object for form ID 123, the tag would be:

wsf_pre_render_123

The second parameter provides WordPress with the callback function through which $form_object  will flow.

The third parameter determines the priority, we can just leave that with a number of 10.

The fourth parameter defines how many parameters are passed to the callback function, in this case it is 2; $form_object and $preview.

The complete statement looks something like this:

add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

This filter is applied prior to the form being rendered.

## Creating The Callback Function

The callback function is a called by WordPress to filter the form.

Two parameters are passed to the callback function:

$form_object - A complete object containing the form itself.

$preview - Whether the form is being rendered in preview mode or not (We'll ignore this parameter in this tutorial).

Here is a simple example of the callback function:

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Do something with $form_object here
 // ...

 // Return the form object back to WS Form
 return $form_object;
}

As you can see, we return $form_object back to WS Form at the end of the function after making changes to it.

For the purpose of this tutorial we're going to edit the 'Post ID' setting. This done by setting the action_post_form_populate_post_id meta key.

$form_object->meta->action_post_form_populate_post_id = 234;

You would change '234' to be the post ID you want to use.

## Putting It All Together

The final code you would add to your functions.php file can be found below:

// Add a filter for form ID 123
add_filter( 'wsf_pre_render_123', 'wsf_pre_render_callback', 10, 2 );

// My callback function for tag wsf_pre_render_123
function wsf_pre_render_callback( $form_object, $preview ) {

 // Set the 'Post ID' setting to 234
 $form_object->meta->action_post_form_populate_post_id = 234;

 // Return the form object back to WS Form
 return $form_object;
}

## Setting Which Post ID to Update in the Post Management Action

URL: https://wsform.com/knowledgebase/setting-which-post-id-to-update-in-the-post-management-action/

Adding or updating a post is determined by using the 'Post ID' setting in the post management action.

The Post Management action can be used to add or update a post in WordPress.

Adding or updating a post is determined by using the Post ID setting in the post management action.

To access this setting:

When editing your form, click the Actions   icon at the top of the page. The Actions sidebar will open on the right hand side of the page.

Click the Post Management action settings   icon or click the Add  icon to add a new post management action.

Scroll to the Post ID setting.

## Adding a Post

If you would like the post management integration to create a new post, you simply leave the Post ID setting blank.

## Updating a Post

To update a post you enter a value into the Post ID setting. Examples of values you can enter in this setting are shown below:

Post ID
Description

123
Update the post or page with the ID: 123. This method is a good way of testing post updates.

#post_id
Update the post or page that the form is shown on. The #post_id variable returns the ID of the current post or page.

#field(456)
Use the submitted value of field ID: 456 as the post ID to update. For example, if field ID 456 is a hidden field with the number 123 in it, post ID 123 would be updated.

### Passing the Post ID as a Query String Parameter

It is also possible to specify the post ID you wish to update as a query string parameter.

Using a Query String Parameter to Specify Which Post to Update

## Show a Loader During Form Processing

URL: https://wsform.com/knowledgebase/loader/

WS Form supports a variety of customizable built-in loaders as well as being able to implement your own loader HTML.

A form loader (spinner) is a used to indicate that a form is in the process of loading, submitting or processing data. It is used to provide visual feedback to users that their action (such as submitting a form) has been initiated, and that WS Form is working on processing the request.

WS Form supports a variety of customizable built-in loaders as well as being able to implement your own loader HTML.

WS Form makes adding a loader icon to your form easy.

## Demo

[ws_form id="13738"]

## Loader Styles

The following built-in loader styles are available:

Rotate 25 Gap

Rotate 25 Accent

Rotate Grow

Rotate Dots

Rotate Dots Tail

Circle Dots

Circle Dots Pulse

Horizontal Dots Pulse

Horizontal Dots Accent

Credit: The built-in lightweight CSS loaders were adapted from the cssloader github repo developed by Vineeth.TR.

## How to Enable the Loader

To enable the WS Form loader:

Click the Form Settings  icon at the top of the layout editor.

Click the Loader tab.

Check the Enabled setting.

Click Save.

## Customizing the Loader

The loader can be fully customized using the settings in the Loader tab. The loader settings are as follows:

### Sprite

#### Type

Choose from the following types:

None - No sprite will be rendered, only the overlay will be shown.

Rotate 25 Gap

Rotate 25 Accent

Rotate Grow

Rotate Dots

Rotate Dots Tail

Circle Dots

Circle Dots Pulse

Horizontal Dots Pulse

Horizontal Dots Accent

Custom HTML - Use your own custom HTML for the sprite.

#### Size

The approximate size of the sprite. Note that due to how CSS loaders are rendered in the browser this may not be pixel perfect.

#### Color

Choose the color for the sprite.

#### Opacity

Choose the opacity for the sprite (0 = Transparent, 1 = Solid).

#### Accent Color

If the sprite type chosen supports an accent color (e.g. Rotate 25 Color), choose the color for the accent.

#### Accent Opacity

If the sprite type chosen supports an accent color (e.g. Rotate 25 Color), choose the opacity for the sprite (0 = Transparent, 1 = Solid).

#### Border Width

If the sprite type chosen utilizes a border width CSS attribute, choose the border width in pixels.

#### Always Visible

If checked WS Form will attempt to keep the loader always visible. If a form is taller than the web browser viewport, this feature can be useful to ensure the loader is seen by the user.

This setting is best suited to forms that are statically positioned and scroll with the page. If your form is rendered in a pop-up or is in an element that has been placed in a specific position on this page, we recommend disabling this setting.

#### Custom HTML

If you choose the Custom HTML option then an HTML editor will appear allowing you enter any custom HTML you wish for your sprite.

You can find a sample of other loader sprites in the cssloaders github repo.

We recommend adding any associated CSS to your theme as opposed to the Custom HTML setting.

### Text

Text can optionally be displayed below the sprite. Note that the text will always be present in the DOM for accessibility purposes.

#### Visible

If checked, the text will be displayed beneath the sprite.

#### Text

Text shown below the sprite.

### Overlay

When the loader is shown, an overlay is rendered over the top of the form. This is intended to fade out the form and indicate to the user that form processing is in progress.

#### Color

Choose the color for the overlay.

#### Opacity

Choose the opacity for the overlay (0 = Transparent, 1 = Solid).

#### Cursor

You also choose a cursor to show when the mouse pointer hovers over the overlay.

### Timing

#### Animation Duration

This is the total time in seconds one cycle of the sprite animation should take. The higher this value, the slower the sprite will animate.

#### Fade-In Duration

This is the total amount of time it should take for the animation to fade-in. Set to 0 for no fade-in.

#### Fade-Out Duration

This is the total amount of time it should take for the animation to fade-out. Set to 0 for no fade-out.

### Events

Use the events settings to determine when the loader should appear.

#### Submit

If checked, the loader will appear with the form is submitted. Use the slider beneath this setting if you would like to delay showing the loader.

#### Save

If checked, the loader will appear with the form is saved. Use the slider beneath this setting if you would like to delay showing the loader.

#### Action

If checked, the loader will appear when an action is run using conditional logic. Use the slider beneath this setting if you would like to delay showing the loader.

#### Render

#### If checked, the loader will appear while the form is being rendered. Use the slider beneath this setting if you would like to delay showing the loader.

#### Geolocate

#### If checked, the loader will appear while a geolocate (browser or IP) is in progress. Use the slider beneath this setting if you would like to delay showing the loader.

## Show Form Submission Count for a Specific Form

URL: https://wsform.com/knowledgebase/show-form-submission-count-for-a-specific-form/

A PHP example showing how to create a shortcode that returns the total number of submissions for any form ID.

The following code example will create a shortcode that will enable you to show the total number of submissions for any form ID.

Usage: [ws_form_submit_count id="123"]

... where 123 is the ID of your form.

The following code would typically be placed in your functions.php file or included in a code snippet.

Requires WS Form version 1.9.14 or later.

Only forms submitted when you are not logged in as an administrator are included in this number.

function ws_form_submit_count( $atts ) {
 
 // Read args
 $args = shortcode_atts( array( 'id' => '' ), $atts );
 
 // Check for ID parameter
 if ( empty( $args[ 'id' ] ) ) { return; }
 
 // Get form ID
 $form_id = absint( $args[ 'id' ] );

 // Return submit count 
 return wsf_form_get_count_submit_by_id( $form_id );
}

add_shortcode( 'ws_form_submit_count', 'ws_form_submit_count' );

 

## Show Message Action

URL: https://wsform.com/knowledgebase/show-message/

The Show Message action shows messages when a user saves or submits a form.

The Show Message action shows a message when a user saves or submits a form. The message can be positioned above or below the form. Messages have a variety of display options that can be configured when you add the action.

It is possible to add multiple message actions, so that messages are shown one after the other when the form is saved or submitted. You can drag and drop the actions to determine which order the messages are displayed in.

## Adding This Action

To add a Show Message action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Show a Message from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Show a Messages action settings are as follows:

## When Should This Action Run?

You can choose to show the message when the form is saved, submitted, or both.

## Type

There are four different types of message:

Success (Green)

Information (Blue)

Warning (Orange)

Danger (Red)

## Content

Enter the message you would like to be displayed. HTML is supported in this field should you wish to apply additional formatting.

## Position

You can choose to position your message above or below your form when it fires. For large forms we would recommend enabling Scroll to top if you choose top positioning, so that the message is seen by the user.

## Hide Form When Shown

If enabled the form will be hidden when the message is shown.

## Clear Other Messages

If enabled any other messages on the screen will be cleared first. This is useful if you are adding multiple message actions.

## Scroll to Top

If enabled the browser will scroll to the top of the page when the message is shown.

## Show Duration

Use this field to enter how long the message is shown before the next action fires. The value entered should be in milliseconds (1 second = 1000 milliseconds). If you enter a value in this field, the following two options are also available.

## Hide Message After Duration

If enabled the message will be hidden after the Show Duration has elapsed.

## Show Form After Duration

If enable the form will be shown after the Show Duration has elapsed.

## Show Select, Checkbox and Radio Labels in Emails

URL: https://wsform.com/knowledgebase/show-select-checkbox-and-radio-labels-in-emails/

Choose which data grid column to use for select, checkbox and radio choices in email templates.

If your emails show the unsightly value of a select, checkbox or radio field (such as an ID number), you can change this so that the easier to read label is shown instead.

The example below is for a select field but the same applies to checkboxes or radio fields.

Click the field settings icon. This will open the settings sidebar for that field.

Click the Options tab in the sidebar.

Beneath the data grid, you will see a setting called Variables. Choose the column you would like to use for displaying the chosen option in your emails.

Click Save.

Using this method you could have three separate columns for the select value, label and the text shown in the email.

 

## Sidebars

URL: https://wsform.com/knowledgebase/sidebars/

When editing a form, the right side of the page contains sidebars.

When editing a form, the right side of the page contains sidebars. To access the sidebars, click on an icon at the top of the layout editor.

The sidebars in WS Form are:

Build - Fields selector and Undo Tool

Actions - Change settings for sending emails and other form save and submit actions.

Form settings - Change form level settings such as the Form label or tracking.

Conditional Logic (PRO Only) - Add interactivity to your form.

Support - Request help from our support team.

In addition, there are side bars:

Tabs

Sections

Fields

These are accessed by clicking the settings icon on a tab, section or field.

The settings, actions, and conditional logic sidebars enable you to edit and then either Save your changes or Cancel to disregard your changes. Note that if you do not click Save and you click to another sidebar, it is effectively like clicking the Cancel button, and your changes will be disregarded.

## Expand / Contract

Any of the sidebars can be expanded to the full width of the WordPress editor screen. To do this simply click the expand icon. To contract the sidebar back to the original size, click the contract button. The WordPress admin menu will always remain visible.

## Keyboard Shortcuts

You can use the following keyboard shortcuts when using a sidebar:

### Mac: Command + S / Windows: CTRL + S

This will save your changes.

### Mac: ESC / Windows: ESC

This will disregard your changes, close the sidebar, and return you to the Build sidebar.

## Signature Field

URL: https://wsform.com/knowledgebase/signature/

The signature field allows a website visitor to physically sign the form using their mouse or by using their finger on a touch device.

The Signature field allows a website visitor to physically sign the form using their mouse or by using their finger on a touch device.

## Demo

## Adding a Signature Field

To learn how to add, edit, clone, move, resize, offset, or delete a signature field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### File Handler

File handlers in WS Form determine the final destination of uploaded files when the form is submitted. You can specify different destinations for each file field on your form. This means you could have one field that saves files to a public location, and another that saves to a private location.

### Save To

Use this setting to determine the final destination of the uploads files for this field when the form is submitted.

Save To
Public
Media Library
Description

WS Form (Private)
No
No
This is the default handler. This handler saves file uploads in a protected hash format. These uploads are only accessible from within the WordPress admin.

WS Form (Public)
Yes
No
This handler saves file uploads in a format that can be accessed publicly.

Media Library
Yes
Yes
This handler saves file uploads to the WordPress Media Library.

WS Form also has file handlers for:

Amazon S3

DropBox

Google Drive

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the signature field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

Type determines the output format of the signature. The options are:

PNG (Image, with transparency - Recommended)

JPG (Image, no transparency)

SVG (Vector format)

Signatures are stored in a submission much like a file upload. You can attach signatures to email actions as attachments. We therefore recommend using the PNG file format for the best compatibility and to retain transparency of the signature.

#### Pen Color

This setting allows you to choose the color of the signature. Click on the color panel to choose a color or enter a hexadecimal RGB color reference.

#### Pen Size

The size setting determines how thick the line of the signature will be in pixels.

#### Height

This setting determines how tall the signature component will be on the form. We recommend leaving this at the default setting of 76 pixels.

#### Crop

When this setting is checked, the signature will be cropped prior to be saved. This removes the whitespace around the signature.

Cropping required the PHP Imagick extension to be installed.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Labels

#### Clear

You can use this setting to change the text shown in the clear link. If left blank, it will default to Clear.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Slack Integration

URL: https://wsform.com/knowledgebase/slack/

The 'Add To Slack' action allows you to push messages about a form save or submission to Slack.

The Add To Slack action allows you to push messages from a WordPress form  to Slack. You can fully configure the message sent to Slack with setting such as:

Color of the message

Message text

Attachment title, image, icon, buttons and fields

... and more!

You can incorporate WS Form variables into any of the message settings.

Messages can be posted to public and private channels in your workspace.

Private Channels: In order to post messages to private channels you must first add WS Form as an app to that channel. This is done after you have connected to Slack. To add WS Form to a private channel, click on the Conversation settings icon (gear) at the top of the channel, then click Add App, then add WS Form.

## Installation

The official WS Form Slack add on page can be found here.

The Slack plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Slack plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Slack tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Slack

In order to use the integration, you need to connect it to Slack. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Slack tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Slack account, you can create a new account here.

## Creating a Slack Form

### Automatically (Recommended)

WS Form PRO can create a form that is is pre-configured to push messages to any of your Slack channels. The form comes with a single text field but you can add other fields that can also be pushed to Slack. This process not only creates a form but also fully configures WS Form PRO so that the form is ready to use immediately.

To create a Slack form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Slack tab at the top of the page.

Click on any of your Slack channels to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If you chose a private Slack channel you must first add WS Form as an app to that channel. To add WS Form to a private channel, click on the Conversation settings icon (gear) at the top of the channel, then click Add App, then add WS Form.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Slack when a user saves or submits their form.

To add a Slack action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Slack from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Slack action settings are as follows:

#### When Should This Action Run?

You can choose to run the user management action when the form is saved, submitted, or both.

#### Slack Channel

Choose the Slack channel you would like to push the form submission data to. In order to post messages to private channels you must first add WS Form as an app to that channel. To add WS Form to a private channel, click on the Conversation settings icon (gear) at the top of the channel, then click Add App, then add WS Form.

#### Text

This is the main text you would like to be sent to Slack. You can either enter static text into this field, or include WS Form variables.

The text field can also be formatted using Slack mark up. Further information about formatting message text in Slack can be found here.

#### Attachment

Check this box if you want to add an attachment to the message. Attachments have a lot of additional settings which are found below.

#### Attachment Title

Enter the title of the attachment.

#### Attachment Title Link

If you would like the title of the attachment to link somewhere, enter the URL here.

#### Attachment Fallback

This should be a  plain-text summary of the attachment. This text will be used in clients that don't show formatted text (eg. IRC, mobile notifications) and should not contain any markup.

#### Attachment Pretext

This is optional text that appears above the message attachment block.

#### Author Name

It is possible to accompany the message attachment with details about the author. Enter the author name into this field.

#### Author Link

Enter a valid URL that will hyperlink the Author Name text above. This will only work if Author Name is present.

#### Author Icon

Enter a valid URL that displays a small 16px x 16px image to the left of the Author Name text. This will only work if Author Name is present.

#### Attachment Text

This is where you should enter the main text for the attachment.

The text field can also be formatted using Slack mark up. Further information about formatting message text in Slack can be found here.

#### Attachment Color

Enter a hexadecimal color reference into this field. You can also enter:

good

warning

danger

Additionally you can also use WS Form variables in this field. For example: #skin_color_information

 

#### Buttons

You can add up to buttons to a message that link to any given URL.

To add a button.

Click the Add  icon at the bottom right of the buttons section.

Enter the text shown on button in the first column.

Enter the URL the button will ink to in the second column. For example: #submit_admin_url would provide a convenient link to the submission in the WordPress administration.

Choose the Style of the button in the third column.

Repeat this process for each button you wish to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Field Mapping

Field mapping tells WS Form which of your form fields you would like to add to the message attachment.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Image

You can select any file or signature field you have added to your form to be uploaded as the image for this attachment. Note that if you are using a signature field it should be set to output a JPG or PNG signature. Do not use SVG as this is not supported by Slack.

Supported file formats are: JPG, GIF, PNG and BMP.

#### Icon

You can select any file or signature field you have added to your form to be uploaded as the icon for this attachment. Note that if you are using a signature field it should be set to output a JPG or PNG signature. Do not use SVG as this is not supported by Slack.

Supported file formats are: JPG, GIF, PNG and BMP.

#### Footer Text

Enter the text you would like to be entered as the footer of that attachment.

This defaults to the name of the WS Form PRO Slack integration so that you can easily identify messages added via this method.

#### Footer Icon URL

Enter the URL of the icon you would like to be add to the left of the footer text.

This defaults to the WS Form icon so that you can easily identify messages added via this method.

Note: The WS Form PRO Slack Integration is not created by, affiliated with, or supported by Slack Technologies, Inc.

## Social Security Number (SSN) Field

URL: https://wsform.com/knowledgebase/ssn/

The Social Security Number (SSN) field in WS Form for WordPress forms provides a structured way to collect SSNs while prioritizing user privacy.

The Social Security Number (SSN) field in WS Form for WordPress forms provides a structured way to collect SSNs while prioritizing user privacy. This field includes built-in formatting options and automatic obscuring of entered values, ensuring that only the last few digits remain visible. Ideal for applications, financial forms, and identity verification workflows, the SSN field helps protect sensitive information while maintaining a seamless user experience.

## Demo

## Limitations

At present the SSN field can only be used for:

Data pushed using the Webhook action.

Certain integrations that support SSNs such as the Salesforce action.

For security reasons, the SSN field is protected and cannot be used in email templates or variables.

## Adding a Social Security Number Field

To learn how to add, edit, clone, move, resize, offset, or delete a password field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field such as ###-##-#### for a SSN field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Features

#### Mask SSN

If you enable this feature, the SSN field will visually mask the number on the form as it is entered.

There are four different mask options to choose from:

Mask
While Typing
Final

Full (Default)
***-**
***-**-****

Partial
***-**
***-**-1234

Partial, show while typing
***-*5
***-**-1234

Unmasked
555-55
555-55-1234

#### Output Format

The output format determines how the SSN is sent to actions.

There are two possible output formats:

Output Format
Example

Dashed (Default)
555-55-1234

Numeric
555551234

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the password field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Labels

Use these settings to change the labels used for the password strengths as well as the visibility toggle icon title.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Spacer Field

URL: https://wsform.com/knowledgebase/spacer/

The spacer is used to introduce a block of space to your form. It is useful for adding space to your form to make it easier to read.

The Spacer field is used to introduce a block of space to your form. It is useful for adding space to your form to make it easier to read.

Tip: You can often achieve the same effect as a spacer by using the offset feature.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

### Label

The label for a spacer is solely used to identify the spacer in the administration system. It is unlikely you will change the label. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

## Advanced

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Breakpoints

This feature is available in WS Form PRO.

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Spam Check with Akismet

URL: https://wsform.com/knowledgebase/spam-check-with-akismet/

Akismet provides WordPress with the ability to check comments and form submissions against their global database of spam.

Akismet provides WordPress with the ability to check comments and form submissions against their global database of spam. WS Form PRO is fully integrated with the popular Akismet spam check plugin and provides a convenient and effective way of tackling form submissions containing spam content.

Any submissions checked with Akismet will be graded for spam, and a colored circle will accompany the submission in the WS Form submissions page. Red = blatant spam, Orange = possible spam, Green = not considered spam.

## Activate Akismet

In order to use this action, you will need to have the Akismet plugin activated and be registered for an Akismet API key. Keys are free for personal blogs; paid subscriptions are available for businesses and commercial sites.

## Enabling Akismet

To enable Akismet on your form:

Click the settings icon at the top of the layout editor.

Click the Spam tab.

Check the Enabled setting in the Akismet section of the sidebar.

You are then presented with the following options:

### Email Field

You should select the field on your form that represents the email address of the website visitor completing your form. If no options appear under this setting, it means you do not have an email field on your form, so you should add one.

### Fields to Check for Spam

Click the Add  icon to add fields on your form that will contain textual content. Akismet will analyze these fields for spam. A good example of a field you would choose here might be an Inquiry or Comments text area field.

### Settings

This setting lets you determine what to do if spam is found.

Use Spam Threshold - Akismet will score the submission between 0 (Not spam) and 100 (Blatant spam) and will use the spam threshold setting (at the bottom of the sidebar) to determine if the submission should be placed in the submissions spam folder. Actions and integrations will run.

Reject Suspect Spam - If Akismet suspects the submission contains spam, submissions will be moved the submissions spam folder. No actions or integrations will run.

Reject Blatant Spam - If Akismet marks the submission as blatant spam, submissions will be moved the submissions spam folder. No actions or integrations will run.

### Test Mode

Test mode can be used to put Akismet's API into test mode and disable training of Akismet. For further information about this mode, click here.

### Bypass if Administrator

If checked this action will not run if you are signed in as an administrator. This is a useful feature to enable while you are developing forms.

Click Save & Close or Save to save your settings.

## Spam Check with Clearout

URL: https://wsform.com/knowledgebase/spam-check-with-clearout/

The Clearout Email Validator plugin seamlessly integrates with WS Form to validate email addresses submitted in your forms in real-time.

The Clearout Email Validator plugin seamlessly integrates with WS Form to validate email addresses submitted in your forms in real-time. The plugin performs 20+ refined real-time validation checks to determine the current status of an email address.

To use the plugin:

Download and activate the Clearout Email Validator plugin.

Sign up for a Clearout account (You get 100 free email validations included with your free account).

Obtain an API key and enter it into the plugin settings.

Ensure WS Form is checked in the plugin settings.

Once enabled, any email fields submitted on a form will be checked by Clearout automatically. If an email address is deemed invalid, invalid feedback will be shown on the field:

For detailed instructions, click here.

## Statistics

URL: https://wsform.com/knowledgebase/statistics/

WS Form PRO comes with built-in statistics for monitoring form views, saves and submissions. Learn more about these features.

WS Form PRO comes with built-in statistics for forms:

Views

Saves

Submissions

A View occurs whenever a form is shown on your website.

A Save occurs when someone clicks a Save button on your form to save their progress.

A Submission occurs when someone submits their form using a Submit button.

View, save and submission statistics are counted on a daily basis and are shown in various places in WS Form PRO.

## How to Enable Form Statistics

Statistics gathering is enabled by default WS Form. If you need to re-enable form statistics gathering:

Click on Settings from the WS Form admin menu.

Scroll down to Statistics.

Uncheck the Disabled setting.

Click Save Changes

## The Dashboard Widget

This widget is shown on the WordPress Dashboard. If you are unable to see the widget, click on Screen Options at the top right of your dashboard and then check WS Form.

Statistics are shown for views, saves and submissions for all forms or individual forms over a given date range. Simply change the form and date range using the select fields under the graph to choose which criteria you would like to view. The widget remembers your last setting so that when you load the dashboard in future the same criteria will show.

You can hover your mouse over the graph to get more details about a point on the graph.

The following WS Form user capabilities are required to see the dashboard widget: read_submission, read_form

## Individual Form Statistics

Each form has individual statistics associated with it. These statistics are shown in the form list.

Views
The total number of times the form has been shown on a web page.

Saves
The total number of times the form has been save (e.g. for Save & Continue). This figure may be higher that the total number of submissions in your database. When a submission is trashed this figure is not adjusted.

Submissions
The total number of times the form has been submitted. This figure may be higher that the total number of submissions in your database. When a submission is trashed this figure is not adjusted.

Statistics are not gathered if you are previewing a form or signed in as an administrator.

The date from which statistics were gathered is shown under the statistics so that you have a reference point for the numbers shown. The bar on the right hand side is the overall conversion percentage for submissions versus views.

## Resetting Form Statistics

To delete statistics for a form:

Click on Settings from the WS Form admin menu.

Click on the Data tab.

Choose a form, then click Reset.

This process cannot be reversed.

## Unread Count

Each time you receive a new submission, the unread count for that form will be increased. The total number of unread submissions is shown in a red bubble in the WS Form administration menu.

Unread counts are also shown in the form list at a form level.

When you view a submission, the unread count will decrease. You can also mark submissions as read or unread. Learn more about the submissions screen.

You can disable the unread bubbles as follows:

Click on Settings from the WS Form administration menu.

Click on the Advanced tab.

Check the Disable Unread Submission Bubbles setting.

Click Save

## Emailed Statistics

WS Form can also send you email reports of your form statistics.

Daily, Weekly or Monthly Form Statistics Reports

## How to Disable Form Statistics

If you want to disable form statistics gathering:

Click on Settings from the WS Form admin menu.

Scroll down to Statistics.

Check the Disabled setting.

Click Save Changes

## Statistics Methods

WS Form has three method of tracking form statistics / analytics. Use this setting to choose your preferred method.

AJAX

AJAX Low Resource

Server Side

The AJAX methods provide the most reliable data as it makes a request each time your form is shown, however this does require an additional HTTP request to your server.

The AJAX Low Resource method uses a call to a light weight PHP script that requires minimal resources to run. The script is located at:

<WS Form Plugin Install Path>/public/add-view.php

In a small number of cases some servers will be unable to use this script due to security settings. WS Form will automatically disable this option if it can't be used.

The server side option does not require an additional HTTP request and uses the least resources but if you are using page caching it is likely your statistics will be less accurate because the PHP on the page is not executing. We recommend using one of the AJAX methods for the highest accuracy.

## Stripe Elements Integration

URL: https://wsform.com/knowledgebase/stripe-elements/

The Stripe Elements integration allows you to accept credit card payments from your forms.

The Stripe Elements integration allows you to accept credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

## How it Works

The Stripe Elements payment process works as follows:

Customer enters their credit card details on the form.

The credit card details are sent to Stripe client-side and securely tokenized.

If tokenization is successful (e.g. the card number is correct), the form is saved and a payment intent is created in Stripe server-side.

If card authorization is required, it is shown the user.

The card payment is confirmed and completed and the form is submitted.

If the card payment is successful, the rest of the action configured on the form are run.

If the card payment is not successful, an error is shown on the form.

## Installation

The WS Form Stripe Elements plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Stripe Elements integration, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Stripe Elements tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Configuring Stripe Elements

### Obtaining Stripe API Keys

In order to use the Stripe Elements button, you first need to enter your Stripe publishable keys.

If you do not yet have a Stripe account, register for a new account.

To obtain your API keys:

Log in to your Stripe account.

From your Dashboard, click Developers.

Click API Keys.

### Creating Restricted Keys

We recommend creating restricted keys for your Stripe integration having the following permissions.

#### All Core Resources

Customers: Read / Write

PaymentIntents: Read / Write

SetupIntents: Read / Write

Sources: Read

Tokens: Read

#### All Billing Resources

Invoices: Read

Subscriptions: Write

Enter your regular Stripe Publishable Key in the Publishable Key field and the restricted key in the Secret Key field.

### Entering Your API Keys

To enter your publishable keys:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Stripe Elements tab at the top of the page.

Enter your test and live API keys.

Click the Save button.

## Adding The Stripe Elements Fields

Once configured the  Stripe Elements fields will appear under the E-Commerce section of the Build when editing a form. Two fields types are added:

Stripe Card - The user enters their credit card details here

Stripe Submit - The user clicks this to submit their credit card details

You can place the Stripe Card and Stripe Submit fields anywhere you like on the form. An example layout is shown below:

## Settings

The majority of the settings are found in the Stripe Card field settings. To access the settings sidebar, click the settings  icon on the Stripe Card field.

The Stripe Submit field acts like a regular custom button field type. Please refer to that field type for more information about the settings.

The Stripe Card field settings are split into Basic and Advanced tabs in the sidebar as are detailed below:

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown above the credit card entry field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Credit or Debit Card.

### Render Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Label Position

There are five options you can choose from for positioning your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the Form Settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks, some label positions may not be available.

### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

### Hidden

If checked, the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Transaction

#### Type

Choose One Time, Subscription, Subscription - Custom Price or Setup Intent

One time transactions perform a single charge of a customer's credit card.

#### Amount To Charge

By default this field is blank, and the Stripe Elements button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

#### Currency

Choose the currency for the transaction. This defaults to the currency selected in Form Settings.

#### Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

Subscription transactions subscribe a customer to a Stripe Subscription. The subscription must be set up in the Stripe Dashboard before it can be used.

Note: Subscription payments must have customer fields mapped (See below). We recommend mapping at least name and email.

#### Subscription Price API ID(s)

To subscribe a customer to a Stripe Subscription, you need to enter a Price API ID.

Each subscription product you create in Stripe has a Price API ID.

You can find Price API IDs as follows:

Log in to your Stripe Dashboard.

Click on Products.

Click on a product that contains a subscription (or create a new recurring payment product).

Under Pricing, click the three dot icon and then Copy Price ID for the appropriate Price.

To add the Price API ID in WS Form:

Note: The live and test environments in Stripe have separate products. When testing Stripe Elements using Price API IDs, ensure you use IDs that relate to the current environment you are using.

Edit the Stripe Card field in your form.

Click the Add  icon at the bottom right of the Subscription Price API ID(s) section.

Paste the API ID into the setting and enter a quantity.

Click the Save button at the bottom of the sidebar to save your changes.

It is possible to add more than Price API ID, but all of the prices must have the same duration.

It is also possible to use WS Form variables in the Price API ID field meaning you can use Select, Checkbox or Radio fields to give subscription options on your form.

Cancelling of subscriptions should be completed in the Stripe Dashboard.

#### Trial

You can add a trial period to a subscription using this feature. The options are:

No Trial

Number of Days

Use Plan Setting (This will use the legacy trial period associated with the price API ID you entered)

#### Initial Invoice Item Price API ID(s)

It is possible to add invoice items to the initial subscription transaction using this setting. This is done by adding Price API ID(s).

You can find Price API IDs as follows:

Log in to your Stripe Dashboard.

Click on Products.

Click on a product you wish to add (or create a new one-time payment product).

Copy the API ID for the appropriate Price (It will begin with price_).

To add the Price API ID in WS Form:

Edit the Stripe Card field in your form.

Click the Add  icon at the bottom right of the Initial Invoice Item Price API ID(s) section.

Paste the API ID into the setting and enter a quantity.

Click the Save button at the bottom of the sidebar to save your changes.

You can add up to 10 items to this setting.

#### Promotion Code(s)

Promotion codes can be applied to subscriptions. To add a promotion code:

Edit the Stripe Card field in your form.

Click the Add  icon at the bottom right of the Promotion Code(s) section.

Paste the API ID into the setting. Promotion code API IDs always begin with promo_.

Click the Save button at the bottom of the sidebar to save your changes.

WS Form variables can be added to this setting, e.g. #field(123). If the resulting string is empty, no promotion code will be applied.

#### Automatic Tax

If checked, Stripe will automatically calculate tax rates on all invoices generated by the subscription.

Tip: Automatic Tax requires your Stripe account tax settings to be configured correctly in Stripe.

Subscription transactions with a custom price subscribe a customer to a Stripe Subscription whilst setting a custom price. The subscription must be set up in the Stripe Dashboard before it can be used. You can specify the interval and frequency of the subscription.

#### Amount To Charge

By default this field is blank, and the Stripe Elements button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

#### Currency

Choose the currency for the transaction. This defaults to the currency selected in Form Settings.

#### Product API ID

You can find Product API IDs as follows:

Log in to your Stripe Dashboard.

Click on Products.

Click on a subscription product you wish to use (or create a new subscription payment product).

Copy the API ID for the appropriate Product (It will begin with prod_).

#### Recurring Interval

Specifies billing frequency. Available options are:

Day

Week

Month

Year

#### Recurring Interval Count

This is the number of intervals between subscription billing.

For example, if:

Recurring Interval: Month

Recurring Interval Count: 3

... then Stripe will bill every 3 months.

You can enter a maximum of one year for the total interval (e.g. 1 year, 12 months, or 52 weeks).

Setup Intent transactions save a customer's payment method in Stripe without charging the card. This is useful if you want to collect card details now and charge the saved payment method later from within Stripe.

Note: Setup Intent transactions require a Stripe customer to be created. Enable Create Customer in the Customer settings below and map the customer fields. We recommend mapping at least name and email.

#### Description

Enter the description of the setup intent in this field. For example: Card setup for #blog_name.

WS Form variables can be entered into this field.

#### Meta Data

Use Meta Data to add one or more key / value pairs to the Stripe transaction.

Meta data is added to the Stripe object created for the selected transaction type:

One Time - Payment Intent

Subscription - Subscription

Subscription - Custom Price - Subscription

Setup Intent - Setup Intent

To add meta data:

Edit the Stripe Card field in your form.

Click the Add  icon at the bottom right of the Meta Data section.

Enter a Key and Value.

Click the Save button at the bottom of the sidebar to save your changes.

WS Form variables can be used in both the meta data key and value fields.

### Customer

#### Create Customer

If checked, a customer record will be created using the mapping settings below. Creating a customer record in Stripe makes cross-referencing transactions much easier.

Note: This option only appears if you have chosen a transaction type of One Time or Setup Intent. If you choose Setup Intent, enable this option and complete the customer field mappings below. If you choose Subscription or Subscription - Custom Price, the following customer field mappings should be completed. We recommend a minimum of name and email.

#### Name

Use this field to specify the name of the payer.  If you have text fields for first and last names, you would enter something such as:

#field(1) #field(2)

WS Form variables can be entered into this field.

#### Email

Choose an email field from your form to use for the payer's email address.

#### Phone

Choose a phone field from your form to use for the payer's phone number.

#### Description

Optionally, enter a description for the customer.

WS Form variables can be entered into this field.

#### Billing Address Mapping

Use the billing address mapping option to specify which fields on your form relate to the different parts of the billing address.

To map your form fields to Stripe billing address fields:

Click the Add  icon at the bottom right of the billing address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding Stripe billing address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Shipping Name

Use this field to specify the shipping name of the payer. In most cases you would enter the same value as entered in the Name field above.

WS Form variables can be entered into this field.

#### Shipping Phone

Choose a phone field from your form to use for the payer's phone number.

#### Shipping Address Mapping

Use the shipping address mapping option to specify which fields on your form relate to the different parts of the shipping address.

To map your form fields to Stripe shipping address fields:

Click the Add  icon at the bottom right of the shipping address mapping section.

In the left-hand column, select a field from your form.

In the right-hand column, select the corresponding Stripe shipping address field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Meta Data

Use Meta Data to add one or more key / value pairs to the Stripe customer record.

To add customer meta data:

Edit the Stripe Card field in your form.

Click the Add  icon at the bottom right of the customer Meta Data section.

Enter a Key and Value.

Click the Save button at the bottom of the sidebar to save your changes.

WS Form variables can be used in both the meta data key and value fields.

### Language

#### Locale

Choose the locale used by Stripe Elements. This controls the language shown by Stripe for card entry and authentication screens. By default, Stripe will attempt to determine the appropriate locale automatically.

### Accessibility

#### ARIA Label

Use this setting to add an ARIA label to the Stripe Card field for screen readers.

## Advanced

### Styles

Use the Styles settings to change the design of the credit card entry field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Icon Hidden

If checked, the credit card icon will be hidden from the credit card entry field.

#### Icon Style

This controls the appearance of the icon in the credit card entry field. Options are either solid or default.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Transaction

#### Zero Amount

You can configure how WS Form should handle zero amounts for Stripe Elements buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

#### Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

### Messages

#### Error Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the Show Message action. You can configure these options to change how the error messages are displayed to users.

#### Clear Other Messages

If checked, other messages shown on the form will be cleared before the Stripe Elements error message is shown.

#### Scroll To Top

If checked, the browser will scroll to the top of the form when a Stripe Elements error message is shown.

#### Hide Form When Shown

If checked, the form will be hidden when a Stripe Elements error message is shown.

#### Duration

Use this setting to control how long the Stripe Elements error message is shown. Leave blank for the message to remain visible.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when the credit card information entered is not valid, or if a transaction fails. If this setting is checked, invalid feedback is shown under the field.

### Custom Attributes

For developers, custom attributes can be added to the Stripe Card field wrapper.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Variables

The Stripe Elements integration introduces additional variables that you can use in actions such as messages and emails.

## Stripe Support

URL: https://wsform.com/knowledgebase/stripe-support/

Received an email from Stripe about your credit card? This article explains how to update your credit card details.

WS Form securely processes subscription payments through Stripe.

If you’ve received an email from Stripe indicating that your payment failed or your credit card needs to be updated, you can resolve it by following these steps:

Click on My Account at the top of wsform.com.

Click on Edit Profile.

At the bottom of the Edit Profile page you will find the Manage Payment Methods section.

To update an existing card, click Update.
To add a new card, click Add New Card.
To remove a card, click Delete.

## Style Checkboxes

URL: https://wsform.com/knowledgebase/style-checkboxes/

If you are using the WS Form framework you can use classes to style checkboxes.

If you are using the WS Form framework you can use the following classes to style checkboxes. The demo below is available as a template in the Demo tab when you add a new form.

## Demos

## Tutorials

### Buttons

To create button options for checkboxes:

Add a Checkbox field to your form.

Click the settings icon on the checkbox field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-button in the Field setting.

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Switches

To create switch options for checkboxes:

Add a Checkbox field to your form.

Click the settings icon on the checkbox field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-switch in the Field setting.

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Swatches

To create swatches or color options for checkboxes:

Add a Checkbox field to your form.

Click the settings icon on the checkbox field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-color in the Field setting.

Click the Checkboxes tab at the top of the sidebar.

Click the expand icon to make the data grid easier to work with.

Click the add column icon, and name the column Value.

In the Label column, enter: <span style="background-color: #data_grid_row_value;"></span> Color for each row. Change the word Color to whatever label you would like for that row.

In the Value column, enter the hex color you would like to use for that row, for example: #ff0000.

Underneath the data grid, choose Value in the Values setting. This tells WS Form which column to use for the checkbox value. Your finished checkbox data grid should look similar to this:

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Images

To create switch options or swatches for checkboxes:

Add a Checkbox field to your form.

Click the settings icon on the checkbox field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-image in the Field setting.

Click the Checkboxes tab at the top of the sidebar.

Click the expand icon to make the data grid easier to work with.

Click the add column icon, and name the column Value.

Hover your mouse cursor over the Label column and click the Insert Image icon  . Select an image from the media library. We recommend sizing the images appropriately before uploading them.

In the Value column, enter the value you would like to use when the image is selected.

Underneath the data grid, choose Value in the Values setting. This tells WS Form which column to use for the checkbox value. Your finished checkbox data grid should look similar to this:

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

## Style Radios

URL: https://wsform.com/knowledgebase/style-radios/

If you are using the WS Form framework you can use classes to style radios.

If you are using the WS Form framework you can use the following classes to style radios. The demo below is available as a template in the Demo tab when you add a new form.

## Demos

## Tutorials

### Buttons

To style radios as buttons:

Add a Radio field to your form

Click the settings icon on the radio field to open the settings sidebar

Click the Advanced tab at the top of the sidebar

Enter wsft-button in the Field setting.

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Switches

To create switch options for checkboxes:

Add a Radio field to your form

Click the settings icon on the checkbox field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-switch in the Field setting.

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Swatches

To create swatches or color options for radios:

Add a Radio field to your form

Click the settings icon on the radio field to open the settings sidebar

Click the Advanced tab at the top of the sidebar

Enter wsft-color in the Field setting.

Click the Radios tab at the top of the sidebar

Click the expand icon to make the data grid easier to work with

Click the add column icon, and name the column Value

In the Label column, enter: <span style="background-color: #data_grid_row_value;"></span> Color for each row. Change the word Color to whatever label you would like for that row

In the Value column, enter the hex color you would like to use for that row, for example: #ff0000

Underneath the data grid, choose Value in the Values setting. This tells WS Form which column to use for the radio value. Your finished radio data grid should look similar to this:

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

### Images

To create image options or swatches for radios:

Add a Radio field to your form.

Click the settings icon on the radio field to open the settings sidebar.

Click the Advanced tab at the top of the sidebar.

Enter wsft-image in the Field setting.

Click the Radios tab at the top of the sidebar.

Click the expand icon to make the data grid easier to work with.

Click the add column icon, and name the column Value.

Hover your mouse cursor over the Label column and click the Insert Image icon  . Select an image from the media library. We recommend sizing the images appropriately before uploading them.

In the Value column, enter a label for the image, e.g. Bear.

Underneath the data grid, choose Value in the Values setting. This tells WS Form which column to use for the radio value. Your finished radio data grid should look similar to this:

Click Save & Close at the bottom of the settings sidebar.

Click Preview at the top of the layout editor to test the field.

## Style Tabs

URL: https://wsform.com/knowledgebase/style-tabs/

If you are using the WS Form framework you can use classes to style tabs.

If you are using the WS Form framework you can use classes to style tabs.

## Demos

### Regular

[ws_form id="13655"]

### Steps

Tabs Wrapper Class: wsft-steps 

### Steps + Checkmarks

Tabs Wrapper Classes: wsft-steps wsft-steps-checks 

### Steps + Checkmarks + Green

Tabs Wrapper Classes: wsft-steps wsft-steps-checks wsft-steps-success 

### Vertical

Any of the tab classes can be used in conjunction with wsft-vertical. Form Wrapper Class: wsft-vertical Tabs Wrapper Class: wsft-steps 

## Classes

The available classes are as follows:

Class
Description
Where To Use

wsft-steps
Changes tabs into numeric steps
Tabs Wrapper Class

wsft-steps-checks
Show checkmarks on completed steps
Tabs Wrapper Class

wsft-steps-success
Change steps to green color
Tabs Wrapper Class

wsft-vertical
Change tabs or steps to a vertical format
Form Wrapper Class

## How to Add Classes

Classes are added to the Tabs Wrapper or Form Wrapper settings in Form Settings. You can access these setting as follows:

Click the settings icon at the top of the layout editor.

Click the Styling tab at the top of the sidebar.

Enter the class(es) into the Tab Wrapper and/or Form Wrapper class settings according to the table above.

Click Save & Close

## Styler

URL: https://wsform.com/knowledgebase/styler/

Design WordPress forms effortlessly with WS Form Styler. Unlimited styles, intuitive controls, and over 400 customizable settings.

The Styler allows you to design an unlimited number of styles that can be applied to any WordPress form built with WS Form with ease. Whether you want to maintain consistent branding across your WordPress site or tailor the appearance of individual forms for specific purposes, the Styler offers the flexibility to create, design, and manage styles effortlessly.

For developers, the Styler provides access to over 400 customizable settings, all easily managed using CSS variables for maximum flexibility and control. For beginners, creating styles is a breeze with intuitive options for adjusting colors, sizes, and other design elements, no coding required.

https://www.youtube.com/watch?v=ZsTBBsdQxFQ

## What is a Style?

A style in WS Form is a structured hierarchy of CSS variables, beginning with high-level settings like the color palette and typography. These foundational elements cascade down to progressively more specific settings, including sections, fields, and even individual field types, ensuring a consistent and customizable design throughout your forms.

## How to Edit a Style

There are two ways to open the Styler to edit a style.

To edit a style, click Edit on the Styles admin page. This opens the Styler, displaying a sample form with fields that allow you to preview most Styler settings in real time.

Click the Style  icon at the top of the form layout editor. This opens your form alongside the Styler, allowing you to customize its appearance seamlessly.

## Quick Start: The Form Category

The Form category in the Styler can be used to change the majority of the styling in a form and provides a quick way of getting the bulk of your form styled. For example, changing the Base color will change other elements on the form such as label colors, help text and input colors automatically.

The Form category includes the following style settings:

Sub CategorySettingTypeDefaultDescription

BorderColorColortransparentThe border color. Learn more.

RadiusSize0pxThe border radius. Learn more.

WidthSize0pxThe border width. Learn more.

StyleTextsolidThe border style. Learn more.

Color PaletteBackgroundColortransparentThe form background color.

BaseColor#000000Main color used for labels, inputs and help text.

Base - ContrastColor#ffffffContrast color used for checkmarks, button text, etc.

AccentColor#205493Used for checked and styled checkboxes and radio fields, range slider thumb, etc.

NeutralColor#767676Used for neutral tones on the form such as the file upload button.

PrimaryColor#205493Used for the form submit button and any elements configured to use the Primary color.

SecondaryColor#5b616bDefault color used for other buttons.

SuccessColor#2e8540Used for success messages.

InformationColor#02bfe7Used for information messages.

WarningColor#fdb81eUsed for warning messages.

DangerColor#bb0000Used for error messages and invalid feedback.

SpacingGrid GapSize20pxThe spacing between fields.

Padding - HorizontalSize0pxHorizontal form padding.

Padding - VerticalSize0pxVertical form padding.

TransitionSpeedText200msThe time for transitions it takes for general transitions to run on the form.

Timing FunctionTextease-in-outThe CSS timing function used for transitions. Learn more

TypographyFont FamilyTextinheritThe base font family used throughout the form.

Font SizeSize16pxThe base font size used throughout the form.

Font Size - SmallSize14pxThis is primarily used on field help text.

Font Size - LargeSize18pxThis is primarily used on legends.

Font StyleTextinheritDefines italic or normal text style. Learn more.

Font WeightTextinheritControls text boldness or lightness. Learn more.

Letter SpacingTextinheritAdjusts space between text characters. Learn more.

Line HeightSixe1.4Sets spacing between text lines. Learn more.

Text DecorationTextinheritAdds lines, styles, or colors. Learn more.

Text TransformTextinheritChanges text casing styles. Learn more.

These settings may vary slightly for conversation styles where font sizes and spacing are increased for legibility.

## How to Save a Style

Once you have finished making changes to a style, click the Save  icon. This will immediately publish the style ready for use on the website.

## The Styler Sidebar

The Styler will open on the left and side of your form by default.

### Style Name

The Style Name is shown at the top of the Styler. To edit the style name click the Settings icon at the top, change the name, then click the Save icon.

### Setting Search

You can search for settings in a variety of ways:

Variables (e.g. --wsft-form-color-background)

Variable names (e.g. button primary)

Category names (e.g. typography)

Simply enter keywords into the search (minimum 2 characters) and the setting hierarchy will be filtered.

### Style Categories

The top level style categories are:

Form

Tab

Section

Field

Field Type

Conversational (Only for conversation forms)

To open a category and view the sub-categories click the category name.

Use the Form category to change the main colors, sizes and typography settings for your form.

For more granular control, browse the other top level categories or use the Setting Search to find a particular setting.

### Style Setting

There are various types of Style Setting.

#### Color

Color settings allow you to pick any color for a form element.

To use the color picker to choose a color, simply click the Swatch.

The following values can be entered into the color Setting Value.

Color ModelExampleDescription

Hex#ff0000Hexadecimal as #rrggbb.

Hex 8#ff000088Hexadecimal with alpha as #rrggbbaa.

RGBrgb(255, 0, 0)Red, green, blue as rgb(r, g, b).

RGBArgba(255, 0, 0, 0)Red, green, blue, alpha as rgba(r, g, b, a).

HSLhsl(0, 100%, 50%)Hue, saturation and lightness as hsl(h, s, l).

HSLAhsla(0, 100%, 50%, 0.533)Hue, saturation and lightness as hsla(h, s, l, a).

var()var(--accent-color)CSS variable.

### Size

Size settings allow you to set the size of a form element.

 The following values can be entered into the color Setting Value.

Unit of MeasurementExampleTypeDescription

px16pxAbsolutePixels: A fixed unit, most commonly used.

em1.5emRelativeRelative to the font size of the element.

rem1.5remRelativeRoot em: Relative to the font size of the root element.

%90%RelativePercentage: Relative to the parent element's size.

var()var(--font-size-base)CSS variable.

We recommend a base pixels size of at least 16 pixels to help with the accessibility of your form.

### Other Settings

Other settings include:

Font family

Font style

Font weight

Text decoration

Text transform

These values have text inputs that support a CSS value or variable.

### Style Undo

Any changes made during a given editing session can be undone by clicking the Style Undo  icon. This will reset all of the settings in the style those the values that were present when the Styler was opened.

If you want to fully reset a style to the system defaults, you can do that from the Styles admin page by clicking the Reset link.

### Settings

The settings panel allows you change the style name and also enable the alternative colors scheme. To access the settings panel click the Settings  icon.

### Save

The Save  icon is used to publish the changes you have made to the style so that they are committed to the live version of any form using that style.

If you are making significant changes to a style, consider cloning it or exporting a backup prior to doing so.

## Repositioning the Styler

You can temporarily move the Styler by clicking and dragging the WS Form logo. If the Styler is position at the left or right of the screen, WS Form will attempt to lock it in position and introduce left or right margin to the body element to provide you with a better view of your form.

## Styles

URL: https://wsform.com/knowledgebase/styles/

WS Form styles consist of settings such as colors, typography and sizes to control how your forms look on your website.

WS Form styles consist of settings such as colors, typography and sizes to control how your forms look on your website.

This article explains how to add, manage and delete styles.

To learn how to about editing a style (i.e. changing colors, fonts etc), check out our Styler article.

You can add as many styles to your website as needed. Each style can be assigned to as many different forms as you wish. One style is designated as the Default style. All newly created forms will be assigned to that default style.

## Accessing Styles

To access the styles, click on Styles from the WS Form admin menu.

The Styler admin page lists all of the styles you have created in WS Form.

## Default Styles

The default styles created when you first install or upgrade WS Form are as follows:

Standard - Light
A dark on light style suitable for all standard forms.

Conversational - Light
A dark on light style suitable for conversational forms.

Style templates also exists for light on dark themes to speed up for styling of sites that have a dark background with light text.

## Editing Styles

To edit a style, click the Style Name or the Edit link when hovering over the style. This will take you to the WS Form Styler.

## Add Additional Styles

If you need to apply unique styling to a specific form, such as one located in the site footer, you can easily create a custom style for it.

To do this, simply click the Add New button at the top of the Styles admin page. This will redirect you to the Styles Template admin page, where you can choose from a starting template.

The Standard - Light template is suitable for websites that have a light theme (dark text on a light background).

The Standard - Dark template is suitable for website that have a dark theme (light text on a dark background).

Each template shows a sample of the default colors. The colors shown on the template are:

Back - Background

Base - Base

Cont - Base - Contrast

Acc - Accent

Neut - Neutral

Pri - Primary

Sec - Secondary

One you have created a style, all of these colors can be changed in the WS Form Styler.

## Assigning Styles to Forms

By default, all new forms are assigned to the Default style. You can also choose a specific style for a form as follows:

Click the Form Settings  icon at the top of the layout editor.

Click the Styling tab.

Choose a style from the Style setting.

Click Save & Close.

Click Publish if you want to publish the change immediately.

## Managing Styles

On the Styles admin page, each style has options that can be clicked on beneath the style name.

Each option is described below:

### Edit

Click this to edit the theme using the Styler. To learn how to use the Styler see: Editing Styles

### Clone

You can clone any style by clicking the Clone link.

Once you have cloned a style you can rename it as follows:

Click Edit to edit the style.

Click the Settings  icon at the top of the Styler.

Change the Name then click the Save icon at the top of the Styler.

### Trash

To move a style to the trash folder, click the Trash link. You can recover trashed styles if you need to, or permanently delete them.

### Export

Any style can be exported by clicking the Export link. This provide a file in JSON format that can then be imported into any other site with WS Form. To import a form export:

Click Styles from the WordPress admin menu.

Click the Import icon at the top of the Styler.

Choose the export style JSON file.

Alternatively you can simply drag and drop the JSON file into the styles table.

### Set as Default

New forms will use the Default style. When you modify the default style it will apply to any forms set to use the default style. To change which style is used as the default style, click the Set as Default link.

You can also add additional styles and apply those to specific forms if you wish.

When you click this link, any forms specifically assign to that style will be set to use the default style.

### Set as Conversational (PRO Only)

If you are using conversational forms, they will use the Conversational style by default. When you modify the conversational style it will apply to any forms set to use the default conversational style. To change which style is used as the conversational style by default, click the Set as Conversational link.

You can also add additional conversational styles and apply those to specific forms if you wish.

When you click this link, any forms specifically assign to that style will be set to use the default conversational style.

### Reset

Clicking the Reset link will set all of the style settings back to the WS Form defaults.

If the style is marked as the Conversational Default then it will revert to the conversational defaults.

## CSS Variables

CSS Variables Reference

## Styling Forms with CSS

URL: https://wsform.com/knowledgebase/styling-forms-with-css/

This article describes how to use CSS to style form elements.

Most styling of a form can be achieved using our responsive layout editor and customize tools, but sometimes you will want to apply more granular styling using some custom CSS (Cascading Style Sheet). This article describes how to use CSS to style forms created with WS Form.

If you need help understanding he HTML attributes used by WS Form, please see our HTML Form Attributes article.

If you require additional assistance understanding CSS, please see our Custom Project Development article.

## Contents

Basic Examples

Targeting Forms

Adding Classes to a Form

Setting the Form ID in a Shortcode

Learning CSS

## Basic Examples

The following examples are for use with the WS Form framework. If you are using Bootstrap or Foundation please refer to the documentation for those frameworks.

### Labels

CSS selector: wsft-label

Example of making all labels white:

.wsft-form .wsft-field-wrapper .wsft-label {
 color: #FFFFFF;
}

### Fields

CSS selector: wsft-field

Example of giving fields a white background and black text:

.wsft-form .wsft-field-wrapper .wsft-field {
 background: #FFFFFF;
 color: #000000;
}

### Buttons

CSS selector: wsft-button

Example of making buttons red with white text:

.wsft-form .wsft-field-wrapper .wsft-button {
 background: #FF0000;
 color: #FFFFFF;
}

### Placeholders

CSS selector: wsft-field::placeholder

Example of making placeholder text gray:

.wsft-form .wsft-field-wrapper .wsft-field::placeholder {
 color: #999999;
}

### Help Text

CSS selector: wsft-help

Example of making help text white:

.wsft-form .wsft-field-wrapper .wsft-help {
 color: #FFFFFF;
}

## Targeting Forms

WS Form supports multiple forms per page. Each form on the page is called an instance.

Each instance on the page is given a unique ID. For example:

<form id="ws-form-1" data-id="123" class="wsft-form">

Let's break those attributes down.

The id attribute is a unique identifier for the form. It has the format ws-form-<instance_id>. In this example it is referencing instance 1.

The data-id attribute indicates which form ID is being rendered. In this example it is rendering form ID 123.

The class attribute wsft-form appears on all forms. You can use it to target all forms rendered by WS Form.

### Selector Examples

.wsft-form Target all forms.

form[data-id="123"] Target form ID 123 on any page.

#ws-form-1 Target the first instance of a form on any page.

## Adding Classes to a Form

It is also possible to add classes to form elements so that you can target them with your own CSS.

### Form

To add a class to the form.

Click the settings icon at the top of the layout editor.

Click the Styling tab in the sidebar.

In the Classes settings enter a class name in the Form Wrapper setting.

### Tabs (All)

Tabs are made up two components, the tab itself and the tab content. To add a class to these components:

Click the settings icon at the top of the layout editor.

Click the Styling tab in the sidebar.

In the Classes settings enter a class name in the Tab Wrapper or Tab Content Wrapper setting.

The class(es) entered will be added to all tabs in the form.

### Tabs (Individual)

If you have more than one tab in your form, you can also add a class each tab content individually. To do this:

Click the settings icon for a specific tab in the layout editor.

Click the Advanced tab in the sidebar.

In the Classes settings enter a class name in the Tab Content Wrapper setting.

The class(es) entered will be added to the content for that tab.

### Sections (All)

To add a class to all sections in your form:

Click the settings icon at the top of the layout editor.

Click the Styling tab in the sidebar.

In the Classes settings enter a class name in the Section Wrapper setting.

The class(es) entered will be added to all sections in the form.

### Section (Individual)

To add a class to a specific section in your form:

Click the settings icon for a specific section in the layout editor.

Click the Advanced tab in the sidebar.

In the Classes settings enter a class name in the Section Wrapper setting.

The class(es) entered will be added to that specific section.

### Fields (All)

Fields are made up of a wrapper and the field itself. To add wrapper or field classes to all fields on your form:

Click the settings icon at the top of the layout editor.

Click the Styling tab in the sidebar.

In the Classes settings enter a class name in the Field Wrapper or Field setting.

The class(es) entered will be added to all fields in the form.

### Field (Individual)

To add a class to a specific field in your form:

Click the settings icon for a specific section in the layout editor.

Click the Advanced tab in the sidebar.

In the Classes settings enter a class name in the Field Wrapper or Field setting.

The class(es) entered will be added to that specific section.

### Setting the Form ID in a Shortcode

The format of the WS Form shortcode is very simple:

[ws_form id="123"]

… where 123 is equal to your form ID.

The shortcode also has an option element_id parameter which enables you to set the ID of the form element. For example:

[ws_form id="123" element_id="my-form"]

This is useful if you want to target your form using JavaScript.

## Learning CSS

Here are some great online resources for learning CSS:

W3 Schools CSS Tutorial

W3 Schools CSS Forms

Code Academy

 

## Submissions

URL: https://wsform.com/knowledgebase/submissions/

The Submissions administration page provides you with easy access to all forms that have been saved or submitted on your website.

The Submissions administration page provides you with easy access to all forms that have been saved or submitted on your website.

To access the submissions for a form, you can either click the Submissions button at the top of the page when editing a form, or click Submissions from the left-hand administration menu under WS Form, and then select a form from the pulldown menu.

Submissions are presented in much like any other table in WordPress. The features of this page are as follows:

## Viewing Submissions

WS Form will show the most recent submission on the right-hand side of the page by default. To view any other submissions, either click the submission ID or click the View link in the leftmost column of the submissions table.

### Submission Details

At the top of the submission, you will find basic information, including:

Submission ID (For example: #1234)

Date added

Date updated

User (WordPress user if they were logged in at the time the form was saved or submitted)

Duration (how long it took the website visitor to save or submit the form)

### Form Fields

Below the submissions details, you will find all of the fields that were saved or submitted. These are broken down by tab, section, and field for convenient viewing of the data.

### Actions

Any actions that fired as a result of the last save or submit are stored so that you can check them for debug purposes. You can click the actions icon to learn more about the action that fired, or in some cases, you can re-run an action. This is useful if, for example, you want to re-send an email acknowledgement.

The action icons are:

 Configuration This shows the configuration options that were used when firing the action.

 Information This shows any logs that were generated as a result of the action firing.

 Errors This shows any errors that occurred as a result of the action firing.

 Re-Run By clicking this you can re-run an action. This icon is not available for all action types.

### Tracking

When a form is saved or submitted, WS Form can store a wealth of tracking information along with that form to help you gain a better understanding of your audience. Each tracking item can be switched on or off from the Form Settings sidebar.

You are advised to make it clear to website visitors that you are storing such information to ensure your website is GDPR compliant.

## Editing Submissions

You can edit a submission by clicking the Edit link in the leftmost column of the submissions table. An editable form will then appear in the right sidebar. Make any necessary edits and then click the Save button at the bottom right of the page to save your changes. You can click the Cancel button to disregard your changes.

You can also trash a submission by clicking the Trash button. Don't worry if you click this accidentally; you can always restore a submission by clicking the Trash filter link at the top-left side of the page, and then click the Restore link next to the submission you trashed.

Some fields, such as file uploads or signatures, cannot be edited.

## Screen Options

WS Form automatically selects the fields it thinks are most appropriate for the submissions table. You can also choose which fields you wish to be displayed in the submissions table by clicking the Screen Options link at the top of the page. You can also choose how many submissions to show per page.

The Clear hidden fields options allows you to clear any values in the submissions that were hidden at the time the form was submitted.

## Date Filtering

You can filter which submissions to show by date by clicking the Date from or Date to selectors at the top of the page, and then click the Filter button. To remove the date filtering, click the Reset button.

## Exporting Submissions

Submissions can be exported in CSV format. CSV files can be easily imported into software, such as Excel.

### Exporting All Submissions

To export all submissions, click the Export CSV button at the top of the page.

### Exporting Individual Submissions

To export an individual submission, click the Export link in the leftmost column of the submissions table.

### Exporting Selected Submissions

You can click the checkboxes to the left of the submissions table and then select Export CSV from the Bulk Actions pulldown at the top left of the page. This will produce a CSV file containing only the submissions you checked.

## Submit Button

URL: https://wsform.com/knowledgebase/submit/

Every form needs a submit button! The submit button takes the contents of the form and submits them to WS Form for processing.

Every form needs a Submit button! The submit button takes the contents of the form and submits them to WS Form for processing. WS Form then runs any actions you have configured for the form and processes them, such as saving the submission to WordPress, showing a message, sending an email, or redirecting to a different web page.

The actions that run when the Submit button is clicked are all configured in the Actions side bar. To access this, click the Actions icon at the top of the page.

## Demo

## Adding a Submit Button

To learn how to add, edit, clone, move, resize, offset, or delete a submit button, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar. 

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This label is used to identify the submit button in the WS Form form builder.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the submit button.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

#### Type

The type option allows you to choose how this button is styled. The options are:

Default

Primary

Secondary

Success

Information

Warning

Danger

#### Remove Full Width Class

Checking this option will no-longer render the button as 100% width.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Subscription Cancellation

URL: https://wsform.com/knowledgebase/subscription-cancellation/

Learn how to cancel your WS Form subscription.

WS Form operates on a subscription basis with an annual license that auto-renews by default.

To cancel your subscription at any time:

Log in to your WS Form account.

Click on the Subscriptions tab.

Click to cancel the subscription.

If you decide to cancel your subscription, you will retain access until the current term ends on the renewal date shown in your account, provided you have not been provided with a refund. No refunds are provided beyond the initial 14 days of opening an account with WS Form. Renewals are not eligible for refunds.

## Summary Field

URL: https://wsform.com/knowledgebase/summary/

Provides users with a quick and easy way to review their responses before submitting the form.

The Summary field automatically creates a live preview of completed field values on your WordPress form. It provides users with a quick and easy way to review their responses before submitting the form.

## Demo

## Adding a Summary Field

To learn how to add, edit, clone, move, resize, offset, or delete a summary field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Summary.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box. This setting is unchecked by default for the Summary field.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Layout

#### Field Orientation

Fields can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the fields to appear in the summary.

If you select grid, you can set a width for each radio at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you have more than one field in your summary.

#### Label / Value Orientation

This setting determines whether field labels and values are oriented horizontally or vertically.

### Headings

Use these settings to determine whether Form, Tab or Section labels are rendered. The options for each heading type are as follows:

Auto - The label will be shown if a label is present and Show Label is enabled on the form, tab or section.

Yes - The label will always be shown.

No - The label will not be shown (Default).

### Fields

#### Hide Empty Fields

If this setting is enabled, the field will only be shown in the summary if it contains a value.

#### Render Repeaters as Tables

If this setting is enabled, fields contained within repeatable sections will be rendered as a table.

#### Repeater Row Number Column

If this setting is enabled, a column containing the row number will be added to the table if Render Repeaters as Tables is enabled.

#### Include Fields

If this setting is left blank, all fields will be included by default. Otherwise, you can specify which fields you would like to include in the summary using this setting. Click the + icon to add a new field.

#### Exclude Fields

Use this setting to exclude fields on your form from the summary. Click the + icon to add a new field.

The following field types are always excluded:

Hidden

Meter

Progress

Signature

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text area field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Tabs

URL: https://wsform.com/knowledgebase/tabs/

Tabs are a convenient way of splitting a form into separate pages. Each form can have one or many tabs.

Tabs are a convenient way of making a multi-step form.

Each form can have one or many tabs. When you create a new form, it will only have one tab. Tabs will only show on your website if you have added two or more tabs in the layout editor.

To learn about styling tabs, click here.

## Demo

Learn more: Style Tabs

### Steps

### Steps + Checkmarks

### Steps + Checkmarks + Green

### Vertical

## Adding Tabs

If you want tabs to appear at the top of your form, you need to have more than one tab. To add a tab to the form, simply click the add tab plus icon to the right of the existing tabs. New tabs will be placed at the end of the existing tabs.

Once you have added a tab to the form, you can immediately start typing a label for it. To save the tab label, you can either type Enter or click somewhere on the page away from the tab.

## Cloning Tabs

To clone a tab:

Hover your mouse pointer over a tab

Click the tab settings icon

Click the clone  icon

A cloned version of the tab will then appear. It will inherit the settings of the tab you cloned.

## Deleting Tabs

To delete a tab:

Hover your mouse pointer over a tab

Click the tab settings icon

Click the delete  icon

The tab will then be deleted. If you delete a tab in error, you can always click the undo  icon or use the undo tool in the Build on the right-hand side of the page.

## Reordering Tabs

You can change the order of tabs by clicking and dragging the tab to a new position.

## Renaming Tabs

To rename the label of a tab, you have two options:

You can double click the label of the tab, enter a new tab, and then type Enter or click somewhere on the page away from the tab.

Click the tab settings icon to open the tab settings toolbar. Change the label at the top of the toolbar, and then click the Save button at the bottom of the toolbar.

## Hiding Tab Navigation

You can hide the tabs at the top of the form whilst retaining the functionality of tabs, i.e. next and previous tab buttons will still allow you to step through the form.

To do this:

Click on the Form Settings settings icon at the top of the layout editor.

In the Basic tab, go to the Tabs section.

Check the Hide Tabs setting.

Click Save & Close.

## Tab Validation

By default, form validation occurs when a Submit button is clicked. If a field is invalid within a tab, WS Form will move to that tab and then focus on the invalid field.

There are other validation options for tabs, including:

Disable Next Tab buttons until all fields in the current tab are validated. The user cannot progress to the next tab until all fields in the current tab are validated.

Show validation feedback on any invalid fields in the current tab if a Next Tab button is clicked.The user cannot progress to the next tab until all fields in the current tab are validated.

## Tab Navigation

You can add previous and next tab buttons anywhere you wish on your form. You can add multiple instances of these buttons in a tab.

Previous Tab

Next Tab

## Changing Tab Settings

To access the settings of an individual tab, click the tab settings icon. The tab settings toolbar will then appear on the right of the page. Many of these settings will only appear if more than one tab exists.

Tab settings are split into Basic and Advanced. The basic tab allows you to change all of the key features you are likely to need on a simple form. The advanced tab provides greater control over the tab.

The settings are as follows:

### Basic

#### Label

Use this setting to set the label for a tab. Forms with a single tab will not show any tabs at the top of the form. Only forms that have two or more tabs will have tabs that show.

The label is used for the tab label and also a heading for that tab when it is selected.

#### Show Label

When enabled the tab label will be shown as a heading on the page.

For developers tab labels are rendered as H3. You can change the wrapper used for tab headings under the advanced section of form settings.

#### Hidden

If checked, the tab will be hidden when the form loads.

### Advanced

#### Classes

##### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a tab wrapper. To add multiple classes, add a space between the class names.

#### Restrictions

##### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

## Text Area Field

URL: https://wsform.com/knowledgebase/textarea/

The text area field creates a text area input for your form. This field is useful for storing larger volumes of text or text requiring multiple lines.

The Text Area field creates a text area input for your form. This field is useful for storing larger volumes of text or text requiring multiple lines. For example you might want to use this field to store an inquiry or customer feedback.

## Demo

## Adding a Text Area Field

To learn how to add, edit, clone, move, resize, offset, or delete a text area, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Type

There are three types you can choose for your text area:

Default

Visual Editor (TinyMCE)

HTML Editor

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #user_first_name to insert a logged-in user's first name into a First Name text field.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as Describe yourself here... for a text area field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Visual Editor Settings

#### Toolbar

Choose from a Full or Compact toolbar. You can also customize the Visual Editor toolbar using WordPress filter hooks.

#### Enable Add Media Button

If checked, logged in users that have the upload_files capability will see the Add Media button on the visual editor.

#### Paste as Text

This setting is used to set the default state of the Paste as Text button. If is set to off by default.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text area field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum Characters

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

This number can be used in conjunction with the character count variables.

#### Maximum Characters

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

This number can be used in conjunction with the character count variables.

#### Minimum Words

This is the minimum number of words that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum word length to zero. If the field is submitted without the minimum number of words defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Maximum Words

This is the maximum number of words that can be entered into the field in order for it to be valid. Leaving this blank will set the maximum number of words to infinity. If the field is submitted with more than the maximum word length defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Input Mask

Input masks help the user with the input by ensuring a predefined format. This can be useful for fields such as dates, numerics and phone numbers.

Example input masks can be selected by clicking the hamburger icon .

#### Columns

Use this setting to specify how many columns of characters the text area should have. This field should only be used if you are not styling the text area. By default WS Form will automatically apply a width to your text area, so you can leave this setting blank.

#### Rows

Use this setting to determine how many rows of text the text area should have. This field should only be used if you are not styling the text area. By default WS Form will automatically apply a width to your text area, so you can leave this setting blank.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Transform

#### Transform

The transform setting can be used to force the case of the characters that are entered in the field. For example, choosing Uppercase will convert any lowercase characters entered into the field to uppercase. There are four transform options:

Uppercase

Lowercase

Capitalize

Sentence

To see examples of how the transform options work, you can learn more by reading our Transform Strings knowledge base article.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can do enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Text Editor Field

URL: https://wsform.com/knowledgebase/texteditor/

The Text Editor field creates a WordPress content editor in the typical fashion used in Posts and Pages.

The Text Editor field is  used to output text on your form. Text is entered using the standard WordPress visual editor, which means you can apply formatting to the text such as bold, italics, and underline.

## Adding a Text Editor Field

To learn how to add, edit, clone, move, resize, offset, or delete a text editor field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

The label is used solely for identifying the text editor field when editing your form. The label is not shown to the website visitor.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Content

Enter the text you want to display into this WordPress visual editor.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text editor field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Text Field

URL: https://wsform.com/knowledgebase/text/

The text field can be used to store a single line of text on your form, such as a first or last name.

The Text field can be used to store a single line of text on your form, such as a first or last name.

## Demo

## Adding a Text Field

To learn how to add, edit, clone, move, resize, offset, or delete a text field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #user_first_name to insert a logged-in user's first name into a First Name text field.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as (###) ###-### for a phone field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Exclusions

#### Exclude From Emails

By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you're using with conditional logic to show or hide an element.

To hide a field from emails, check this box.

Other WS Form integrations may add exclusions in this section too, such as the WooCommerce integration which allows you to exclude certain fields from the cart entries.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the text field.

#### Label Position

There are five options you can choose from for positioning your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the Form Settings advanced tab. For new forms, this will be the Top positioning.

Note that when using some frameworks, some label positions may not be available.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read-only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum Characters

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

This number can be used in conjunction with the character count variables.

#### Maximum Characters

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

This number can be used in conjunction with the character count variables.

#### Minimum Words

This is the minimum number of words that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum word length to zero. If the field is submitted without the minimum number of words defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Maximum Words

This is the maximum number of words that can be entered into the field in order for it to be valid. Leaving this blank will set the maximum number of words to infinity. If the field is submitted with more than the maximum word length defined, a validation error will appear under the field.

This number can be used in conjunction with the word count variables.

#### Input Mask

Input masks help the user with the input by ensuring a predefined format. This can be useful for fields such as dates, numerics and phone numbers.

Example input masks can be selected by clicking the hamburger icon .

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element's value is checked against. This field is useful in, for example, forcing a website visitor to enter a phone number or date in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Transform

#### Transform

The transform setting can be used to force the case of the characters that are entered in the field. For example, choosing Uppercase will convert any lowercase characters entered into the field to uppercase. There are four transform options:

Uppercase

Lowercase

Capitalize

Sentence

To see examples of how the transform options work, you can learn more by reading our Transform Strings knowledge base article.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example, if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attribute key-value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers, you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

For more information about using WS Form data grids, click here.

## The Anatomy of a Form

URL: https://wsform.com/knowledgebase/the-anatomy-of-a-form/

Learn how WS Form organizes forms into tabs, sections and fields.

Each of your website pages can have one or many forms on it. Each form on a web page is known as a form instance. You can have as many form instances on a page as you need. For example, in addition to a contact us form, you could add a  newsletter sign-up form in the header and the footer of your website.

## Tabs

Tabs are a convenient way of splitting a form into separate pages.

Tabs are optional and forms can have one or many tabs. Forms with one tab are considered to be a single page form, and therefore the tab will not be show on your website.

When you create a new, blank form, it will only have one tab.  If you create an additional tab, WS Form will show the tabs at the top of your form on your website.

As a rule of thumb, smaller forms, such as a contact us form, are ideally suited to a single tab. Longer forms, such as an application form, might be better suited to a form with multiple tabs.

## Sections

Each tab can have one or more sections. You can think of a section as a logic grouping of fields. For example, you might have one section for personal information and another section for an address.

As a rule of thumb, smaller forms, such as a contact us form, might only need one section. More complex forms might benefit from multiple sections to provide a better layout of your fields.

## Fields

Each section can have one or many fields. There are over 55 different types of fields that you can add to your form, and each has its own settings that enable you to control how that field behaves.

## Actions

When a user completing a form clicks the Submit or Save button, you can set up any number of actions to run.

Each action takes the completed form fields and does something with them, such as sending an email to you, sending an email to the user, saving the form fields in WordPress, checking for spam, or showing a message on the web page to thank the user for their submission.

WS Form can be extended with Integrations to create additional actions, such as adding a contact to an external email marketing system such as AWeber, Mailchimp, or Constant Contact.

Actions can also be run by using conditional logic.

## Conditional Logic

This feature is available in WS Form PRO.

Conditional logic enables you to add interactivity to your form.

Examples uses of conditional logic are:

Hide or show other fields based upon other field input

Do something if the user clicks or hovers over a field

Check if two fields match each other (e.g. passwords)

Check if a field has a minimum character count

Each form can have one or more conditionals added to it. Each condition is made up of an IF, THEN, and ELSE.

IF: This is used to check one or more conditions, e.g., Does the field contain some text? If you add more than one condition, you can specify the logic between them, i.e.,  AND or OR.

THEN: If the IF condition is true, WS Form will run any defined actions, e.g., Show a field. You can add one or more THEN actions to run.

ELSE: If the IF condition is not true, WS Form will run the actions., e.g., Hide a field. You can add one or more ELSE actions to run.

## The Date/Time Cheat Sheet

URL: https://wsform.com/knowledgebase/the-date-time-cheat-sheet/

Dates can be complex! On this page we provide a variety of Date/Time field examples.

Dates in WordPress forms can be complex! On this page we provide a variety of Date/Time field examples. You can download any of the examples below and import them into a blank form to review them further. You can even drag and drop them into your section library to use in any other form.

In the demos below we are using the following WordPress date and time format settings:

Date: F j, Y

Time: g:i a

When using date variables, there are three types of date/time you can reference:

Blog - This is the blog date/time localized to your time zone

Client - This is the date/time of the visitors viewing your form

Server - This is the date/time of your hosting server (This is often set to UTC)

## Default to Today's Date

The date/time field will default to your visitors date/time when the picker is opened, but it will not show this as the default value. To set the default value to today's date, the following variables can be used:

#blog_date

#client_date

#server_date

These variables are added in the Default Value setting of the field:

### Demo

## Default to Today's Date with Custom Formatting

You can change the format of a date using the following variables:

#blog_date_custom(format)

#client_date_custom(format)

#server_date_custom(format)

For example:

#blog_date_custom("m/d/Y")

The date format follows the date format as the PHP date function. Learn more.

### Demo

## Default to Today's Date with Offset

You can offset a date/time using the offset parameter:

#blog_date_custom(format, offset)

#client_date_custom(format, offset)

#server_date_custom(format, offset)

The offset is the number of seconds to add (or subtract) from the current date.

For example:

#blog_date_custom("m/d/Y", #seconds_year)

This would offset today's date by a year and then format the date as m/d/Y (e.g. 12/31/2022)

### Demo

### Seconds Constant Variables

As well as entering your own offset, you can use the following variables for several helpful constants that represent durations in seconds.

Variable
Output
Description

#seconds_minute
60
Seconds in a minute

#seconds_hour
3600
Seconds in an hour

#seconds_day
86400
Seconds in a day

#seconds_week
604800
Seconds in a week

#seconds_year
31536000
Seconds in a year

## Default to Current Time

If you are using a date/time field with a type of Time, you can also pre-populate the time. To set the default value to the current time, the following variables can be used:

#blog_time

#client_time

#server_time

### Demo

## Offset a Date

The #field_date_offset variable can be used to insert the value of date field that has been offset by a value in seconds.

The syntax is #field_date_offset(field_id, offset_in_seconds, format)

The parameters are:

field_id - The ID of the source date field.

offset_in_seconds - The number of seconds to offset the date by (e.g. #seconds_day or 86400).

format (optional) - The date format (Same as PHP date format).

You can put this variable in the default value of a date field as well as the minimum and maximum settings should you wish to dynamically adjust the available date range.

By wrapping the variable in #text(...) you can ensure the value updates whenever the source date is changed.

### Demo (Default Value)

Default Value (Basic tab): #text(#field_date_offset(123, #calc(#seconds_day * 10))) (Where 123 is he ID of the input date field)

### Demo (Default Value + Date Range)

Default Value (Basic tab): #text(#field_date_offset(123, #calc(#seconds_day * 10))) (Where 123 is he ID of the input date field)

Minimum (Advanced tab): #text(#field_date_offset(123, #calc(#seconds_day * 7)))

Maximum (Advanced tab): #text(#field_date_offset(123, #calc(#seconds_day * 13)))

## Setting Minimum and Maximum Date Offsets

When the date picker is opened, you can limit the dates shown to the visitor. You can set the minimum and maximum dates available to choose by using the following date/time field settings (these can be found in the advanced tab):

Minimum

Maximum

There are two formats you can enter in this date:

A specific date in yyyy-mm-dd format, e.g. 2025-12-20

A date offset in +1970-01-01 (future) or -1970-01-01 (past) formats

### Offset Examples

Offsets can be in the future or past by using the + or - as the first character and have an origin of 1970-01-01, for example:

+1970-01-01 (Future)

or

-1970-01-01 (Past)

If you want to set the minimum date to todays date minus 2 days, you would enter:

-1970-01-03

If you want the maximum date to be todays date plus 2 days, you would enter:

+1970-01-03

If you want the maximum date to be todays date plus 1 month, you would enter:

+1970-02-01

If you want the maximum date to be todays date plus 1 year and 6 months, you would enter:

+1971-07-01

### Demo

## Setting Minimum and Maximum Time Offsets

When the date picker is opened and the field is configured to use Time only, you can limit the time shown to the visitor. You can set the minimum and maximum times available to choose by using the following date/time field settings (these can be found in the advanced tab):

Minimum Time

Maximum Time

The time entered into these fields must be in 24 hour clock notation, for example:

03:30:00 (3:30 am)

15:30:00 (3:30 pm)

You can also configure these settings using dynamic values. For example, if you had From and To time fields and you wanted the To field to not offer times before the From time you could enter the following into the Minimum Time setting in the To field:

#text(#field_date_format(123, "H:i:s"))

... where 123 is the ID of the From field.

### Demo

[ws_form id="13752"]

## Disabling Week Days

You can disable any week day in the date/time picker by using the Disabled Week Days setting in the Advanced tab.

### Demo

## Disabling Dates

You can disable dates in the date/time picker by using the Disabled Dates setting in the Advanced tab.

To add a date to disable:

Click the Add  icon to add a new date.

Enter a date in the format: yyyy-mm-dd.

Repeat this for each date you wish to disable.

Click Save.

### Demo

## Enabling Dates

You can enable dates and exclude all others  in the date/time picker by using the Enabled Dates setting in the Advanced tab.

To add a date to enable:

Click the Add  icon to add a new date.

Enter a date in the format: yyyy-mm-dd.

Repeat this for each date you wish to enable.

Click Save.

### Demo

## Setting the Minimum and Maximum Year

By default, the minimum and maximum year in the date/time picker will be 1950 - 2050. You can change this range by using the following settings in the Advanced tab:

### Demo

## Calculated Dates

It is possible to use dates in calculated fields.

### Demo

## The Layout Editor

URL: https://wsform.com/knowledgebase/the-layout-editor/

Learn how to build virtually any form you need for your website with WS Form!

https://www.youtube.com/watch?v=uYmnD5iuEJA

## The Variable Cheat Sheet

URL: https://wsform.com/knowledgebase/the-ws-form-variable-cheat-sheet/

While you can achieve a whole lot in WS Form without using variables, you can create even more dynamic and powerful forms using them.

While you can achieve a whole lot in WS Form without using variables, you can create even more dynamic and powerful forms using them.

Variables can be used in a variety of places, including:

Field default values, placeholders, help text and other settings

The Send Email action including From, To and Content settings

HTML and Text Editor fields

Custom mappings in actions and integrations

Conditional Logic

Below are some common variable combinations our customers use in WS Form.

## Fields

Example
Description
Where To Use

#field(123)
Returns the value of field ID 123.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#field(123, "/")
Returns the value of field ID 123, delimiting multiple values with the / character.

Learn more about the delimiter parameter.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#field(123, "/", "Width")
Returns the value found in the Width column of field ID 123, delimiting multiple values with the / character.

Learn more about the delimiter and column parameters.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#field(123, "/", 2)
Returns the value found in column index 2 (third column) of field ID 123, delimiting multiple values with the / character.

Learn more about the delimiter and column parameters.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#text(#field(123))
Dynamically returns the value of field ID 123. The value is updated whenever field ID 123 changes.

Learn more about the #text variable

 Conditional logic THEN / ELSE values

 Field label

 Field default value

 Field placeholder

 Field help

 Field content (Text Editor and HTML field types)

 Field min / max attributes

#calc(#field(123) + #field(321))
Returns the sum of field IDs 123 and 321. The sum is updated whenever field ID 123 or 321 changes if it is used in field settings.

Learn more about the #calc variable

 Conditional logic THEN / ELSE values

 Field label

 Field default value

 Field placeholder

 Field content (Text Editor and HTML field types)

 Field help

 Field min / max attributes

## Sections

Example
Description
Where To Use

#section_row_count(123)
Returns the number of repeatable rows in section ID 123.

Learn more about repeatable sections

 Client-side

#calc(#section_row_count(123) * 10)
Returns the number of repeatable rows in section ID 123 multiplied by 10. The value is updated whenever the number of rows in section ID 123 changes.

Learn more about repeatable sections

 Client-side

#section_row_number
Returns the current section row number. This is useful for numbering repeatable sections.

Learn more about repeatable sections

 In a field inside a repeatable section.

## Submissions

Example
Description
Where To Use

#submit_id
Returns the submission ID.

 Email templates

 PDF templates

 Action settings

#submit_hash
Returns the submission hash.

 Email templates

 PDF templates

 Action settings

#submit_url
Returns a URL that can be used to return back to a saved submission.

Learn more about save and continue

 Email templates

 PDF templates

 Action settings

## #if ... #endif

Example
Description
Where To Use

#if(#field(123))You entered something in field ID 123#endif
Returns You entered something in field ID 123 if field ID 123 is not blank.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#if(#field(123) == "Option 1")You chose option 1#endif
Returns You chose option 1 if field ID 123 equals Option 1.

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

#if("#text(#field(123))" == "Option 1")You chose option 1#endif
Dynamically returns You chose option 1 if field ID 123 equals Option 1. The value is updated whenever field ID 123 changes.

Learn more about the #text variable

 Field label

 Field default value

 Field placeholder

 Field help

 Field content (Text Editor and HTML field types)

 Field min / max attributes

#if(#calc(#field(123)) > 10)Number greater than 10#endif
Dynamically returns Number greater than 10 if field ID 123 contains a number greater than 10. The value is updated whenever field ID 123 changes.

Learn more about the #calc variable

 Email templates

 PDF templates

 Action settings

 Conditional logic THEN / ELSE values

 Field label

 Field default value

 Field placeholder

 Field content (Text Editor and HTML field types)

 Field help

 Field min / max attributes

## Blog

Example
Description
Where To Use

#blog_name
Returns the site title.

 Anywhere

#blog_admin_email
Returns the administration email address.

 Anywhere

#blog_date
Returns the current date using the site date format.

 Anywhere

#blog_time
Returns the current time using the site time format.

 Anywhere

## Selects, Checkboxes and Radios

Example
Description
Where To Use

#field(123)
Returns the value of a select, checkbox or radio for field ID 123.

 Anywhere

#select_option_text(123)
Returns selected option text for field ID 123.

 Anywhere

#checkbox_label(123)
Returns the checked checkbox(es) label(s) for field ID 123.

 Anywhere

#radio_label(123)
Returns the checked radio label for field ID 123.

 Anywhere

## Query Variables

Example
Description
Where To Use

#query_var("post_id")
Returns the value of the query variable post_id.

For example:

https://mysite.com/?post_id=123

This would return 123.

 Client-side

## Date/Time

Also see our Date/Time Cheat Sheet for more examples.

Example
Description
Where To Use

#client_date
Returns the users web browser local date in the format configured in WordPress. This variable can only be used in client-side.

 Client-side

#client_time
Returns the users web browser local time in the format configured in WordPress. This variable can only be used in client-side.

 Client-side

#client_date_custom(format, seconds_offset)
Returns the users web browser local date and time in a specified format (PHP date format)

Learn more about date formats

 Client-side

#blog_date
Returns the blog date in the format configured in WordPress.

 Anywhere

#blog_time
Returns the blog time in the format configured in WordPress.

 Anywhere

#blog_date_custom(format, seconds_offset)
Returns the blog date and time in a specified format (PHP date format).

Learn more about date formats

 Anywhere

#server_date
Returns the server date in the format configured in WordPress.

 Anywhere

#server_time
Returns the server time in the format configured in WordPress.

 Anywhere

#server_date_custom(format, seconds_offset)
Returns the server date and time in a specified format (PHP date format).

Learn more about date formats

 Anywhere

For a complete reference of all the available variables, click here.

## The WS Form Shortcode

URL: https://wsform.com/knowledgebase/the-ws-form-shortcode/

Use the WS Form shortcode to add a form to any page or post within WordPress.

Use the WS Form shortcode to add a form to any page or post within WordPress.

The format of the WS Form shortcode is very simple:

[[ws_form id="123"]]

... where 123 is your form ID.

The shortcode also has an optional element_id attribute which enables you to set the element ID of the form. For example:

[[ws_form id="123" element_id="my-form"]]

This is useful if you want to target your form using JavaScript with a specific ID.

### Shortcode Field Population

You can populate fields when using a shortcode by using the following attributes:

#### Attribute: field_

Use the field_<field_id> parameter to set the value of a specific field ID., for example:

[[ws_form id="123" field_1="Text value"]]

In this example the field with the ID of 1 would be set to "Text value" by default.

You can also specify multiple field values, for example:

[[ws_form id="123" field_1="Text value" field_2="Another value"]]

To populate fields that have multiple values such as a checkbox field, you can separate values with a comma.

[[ws_form id="123" field_1="Option 1,Option 2"]]

#### Attribute: field_values

The field_values attribute allows you to specifying field values in a query string format, for example:

[[ws_form id="123" field_values="field_1=Text+Value&field_2=Another+Value"]]

## Tracking

URL: https://wsform.com/knowledgebase/tracking/

WS Form provides several built-in tracking attributes to provide you with information about the website visitors using your form.

WS Form provides several built-in tracking attributes to provide you with information about the website visitors using your form.

When a form is saved or submitted, you have the option of attaching the tracking attributes to a submission.

Tip: You are advised to make it clear to website visitors that you are storing such information to ensure your website is GDPR compliant.

In order to comply with GDPR, tracking attributes are disabled by default. If you switch these on, you should make it clear to the users of your form that you are tracking this information and also provide a checkbox to acknowledge that the user is providing consent for you to store such information.

To enable or disable tracking attributes, click the form settings icon in the top toolbar when editing a form. The form settings sidebar will then appear on the right side of the page.

The available tracking features are as follows.

WS Form requests free IP lookups from geoPlugin, which uses GeoLite data created by MaxMind, available from http://www.maxmind.com. WS Form provides no warranty as to the accuracy or reliability of this data. Please see geoPlugin's Acceptable Use Policy for more information.

## Showing Tracking Data in Emails

If you want to show tracking data in an email acknowledgement you can add #email_tracking to your email content.

## Variables

The following variables can be used to insert the various tracking values. Note that some of these can only be used server-side, e.g. in an action such as Send Email or in a custom mapping setting.

## Tracking Variables Not Working

URL: https://wsform.com/knowledgebase/tracking-variables-not-working/

If your tracking variables are not working as expected in WS Form, this article will help you understand how they work and where they can be used.

If your tracking variables are not working as expected in WS Form, this article will help you understand how they work and where they can be used.

## Make Sure Tracking Variables Are Enabled

To use tracking variables, you must first enable them in your form:

Click the Form Settings icon.

Click the Tracking tab.

Make sure the variables you want to use are checked.

Click Save & Close.

If a tracking variable is not enabled here, it will not be available when the form is submitted. Tracking variables are disabled by default to respect privacy.

## Some Tracking Variables Are Server-Side Only

Some tracking variables in WS Form are only available after the form is submitted. Examples of tracking variables that are server-side only are:

#tracking_remote_ip

#tracking_duration

Server side variables can only be used in actions such as in:

The Send Email action (e.g. subject or message content)

The Webhook action (e.g. custom mapping settings)

Custom mapping fields in integrations (e.g. MailChimp)

If you want to see all tracking data in an email, you can use the #email_tracking variable in your email message to output all available tracking values.

## More Information

For a complete list of available tracking variables and usage examples, see:

Tracking

## Transfer a License Key to a Different Hostname

URL: https://wsform.com/knowledgebase/transfer-a-license-key-to-different-hostname/

Here's how to transfer your license key from one hostname to another.

To change or transfer your license key to a different hostname:

Login to wsform.com

Click My Account (Top right)

Click Purchase History

Click View Licenses

Click Manage Sites

Click Deactivate to remove the old hostname

You can now activate your license key on the new hostname in WordPress:

Click WS Form from the WordPress administration menu on the left side of your screen.

Click Settings from the same menu.

Click the License or appropriate Plugin tab on the settings page.

Enter your license key and click Activate.

## Transforming Strings

URL: https://wsform.com/knowledgebase/transforming-strings/

WS Form can transform the text entered into fields as well as transforming strings using WS Form variables.

WS Form can transform the case of text entered into fields as well as transforming the case of text using WS Form variables.

## Demo

## Transform Fields

Text based fields have a Transform setting that can be used to force the text to be either:

Uppercase

Lowercase

Capitalized

Sentence Case

The following field types support the transform functionality:

Text

Textarea

Email

Search

Color

To apply a transformation, first click the edit icon on any field.

Next, click on the Advanced tab and then change the Transform setting.

Then click Save.

Now any text entered into that field will be transformed as it is typed according to the setting you choose.

Note that when the field is submitted it will retain the text transformation.

## Transform Variables

It is also possible to transform strings using WS Form variables.

For example:

#upper(#field(123))

This would convert the value of field ID 123 to uppercase.

You can use this in conjunction with the #text variable to update a field in real time.

For example, putting the following in the default value of a text field:

#text(#upper(#field(123)))

Would insert the value of field ID 123 as an uppercase string.

The following variables can be used to transform strings (client-side and in actions):

## Translate Forms

URL: https://wsform.com/knowledgebase/translate-forms/

WS Form supports popular WordPress translation plugins including WPML, Polylang, TranslatePress, and Weglot for creating multilingual forms.

WS Form supports several popular WordPress translation plugins.

## Supported Translation Plugins

Click a plugin below for setup instructions and translation configuration details.

WPML (Recommended)

Polylang

TranslatePress

Weglot

## Manual Translation

If you are using an unsupported translation plugin, or prefer to manage translations manually, see:

Manually Translating Forms

## Translate Forms Manually

URL: https://wsform.com/knowledgebase/translate-forms-manually/

WS Form supports manual translation by allowing you to create separate forms for each language.

We recommend using a supported translation plugin. However, if you are using an unsupported translation plugin, or prefer to manage translations manually, you can create separate forms for each language.

For example:

Contact Form (English)

Contact Form (French)

Contact Form (German)

Each form can then be embedded on the appropriate translated page.

## Recommended Workflow

Create your original form.

Duplicate the form for each language.

Translate all labels, placeholders, help text, email content, and messages manually.

Add each translated form to the corresponding translated page.

## Managing Multiple Language Forms

To make forms easier to manage, we recommend:

Using a consistent naming convention for translated forms

Grouping translated forms into folders if required

Keeping field structure identical between translations where possible

This approach provides maximum flexibility and works with any multilingual WordPress setup.

WS Form provides full control over the copy used in your form.

## Field Elements

The key elements of each field are shown below:

To edit each of these elements:

Click the field settings icon.

In the Basic tab edit the label, placeholder text, default value and/or help text.

In the Advanced tab edit the invalid feedback text.

Click Save.

## Accessibility Labels

The ARIA label of each field can be edited as follows:

Click the field settings icon.

Enter the ARIA label in the Basic tab.

Click Save.

The ARIA label defaults to the label of the field.

## Translate Forms with Polylang

URL: https://wsform.com/knowledgebase/translate-forms-with-polylang/

WS Form integrates with Polylang to automatically register and translate WordPress form strings for multilingual websites.

Polylang is a multilingual plugin for WordPress that supports server-side string translation.

WS Form integrates directly with Polylang and can automatically register translatable form strings for translation.

## Requirements

Polylang integration requires:

Polylang Plugin

## Installing Polylang

Install and activate the Polylang plugin.

Configure your site languages.

## Setting Up Form Translation

Create or edit a form in WS Form.

Click the Form Settings icon at the top of the layout editor.

Click on the Translations tab.

Check the Enable setting.

Click Manage in Polylang.

In the filter toolbar, choose the WS Form group for your form and then click Filter.

Add translations for each language.

Once translated, forms will automatically display in the active language.

## Translation Settings

When Polylang is installed and activated, WS Form adds a Translation tab to Form Settings.

### Enable

Enables integration with Polylang and registers strings automatically for the form.

### Translate Data Grids

Data grids are used by Select, Checkbox and Radio fields to store the choices shown on the form.

Data grid translation adds one translatable string per Select, Checkbox and Radio choice. The Label column mapping is used for the translation. This can produce a considerable number of translatable strings and therefore you can use this setting to disable translation of data grids.

The following field types include data grids.

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Note that only data grids that do not have a data source can be translated. Data sources cause a data grid to be dynamic and for that reason persistent translatable strings cannot be generated.

### Manage in Polylang

Click this button to go to the Polylang translations admin page.

## What Can Be Translated?

Polylang string translation supports translation of:

Form settings

Tab labels

Section labels

Field labels

Field placeholders

Field help text

Field default values

Action settings (e.g. Show Message content or Send Email subject lines)

ARIA accessibility strings

## Translate Forms with TranslatePress

URL: https://wsform.com/knowledgebase/translate-forms-with-translatepress/

WS Form works seamlessly with TranslatePress to visually translate WordPress form content into multiple languages directly in the browser.

TranslatePress is a client-side translation plugin for WordPress that translates pages visually in the browser.

WS Form works with TranslatePress out of the box and does not require any special integration settings.

## Requirements

TranslatePress integration requires:

TranslatePress

## Installing TranslatePress

Install and activate the TranslatePress plugin.

Configure your site languages.

## Setting Up Form Translation

Create and publish your form using WS Form.

Add the form to a page.

Open the page on the front end of your website.

Click Translate Page in the WordPress admin bar.

Use the visual editor to translate form labels, buttons, placeholders and messages.

Once translated, forms will automatically display in the active language.

## What Can Be Translated?

TranslatePress can translate visible form content including:

Field labels

Field help text

Field placeholders

Button labels

Validation messages

Confirmation messages

## Additional Notes

TranslatePress works with WS Form automatically and no additional WS Form settings are required.

Translations are managed entirely within TranslatePress.

## Translate Forms with Weglot

URL: https://wsform.com/knowledgebase/translate-forms-with-weglot/

WS Form integrates with Weglot to automatically translate visible WordPress form content into multiple languages using client-side translation.

Weglot is a client-side translation platform for WordPress that automatically translates website content using JavaScript.

WS Form includes built-in support for Weglot by registering dynamic selectors so that form content can be translated correctly.

## Requirements

Weglot integration requires:

Weglot Plugin

## Installing Weglot

Install and activate the Weglot plugin.

Configure your source and destination languages.

Complete the Weglot setup wizard.

## Setting Up Form Translation

Create and publish your form.

Add the form to a page.

Open the page in the translated language.

Use the Weglot Visual Editor to review and edit translations.

Note: If Weglot indicates that a translation cannot be found for a new element, try changing the language to force Weglot to register it.

Once translated, forms will automatically display in the active language.

## Translation Settings

When Weglot is installed, the WS Form Translation tab includes a Weglot section with a management button for quick access.

### Manage in Weglot

Click this button to go to the Weglot admin page.

## What Can Be Translated?

Weglot can translate visible form content including:

Field labels

Field placeholders

Field help text

Validation messages

Button labels

Confirmation messages

## Additional Notes

WS Form automatically handles selector registration for Weglot.

Translation management and language display behavior are controlled entirely through Weglot.

## Translate Forms with WPML

URL: https://wsform.com/knowledgebase/translate-forms-with-wpml/

WS Form integrates with WPML to automatically translate WordPress form content into multiple languages.

WPML is a multilingual plugin for WordPress that enables server-side translation using string translation.

WS Form integrates directly with WPML and can automatically register translatable form strings for translation.

## Requirements

WPML integration requires:

WPML Multilingual CMS

WPML String Translation

The String Translation integration is included with paid WPML plans.

## Installing WPML

Install and activate the WPML Multilingual CMS plugin.

Install and activate the WPML String Translation plugin.

Complete the WPML setup wizard.

Note: When choosing the Language URL format you should choose:

Different languages in directories

A different domain per language

The language name added as a parameter option (example: ?lang=fr) is not supported.

## Setting Up Form Translation

Create or edit a form in WS Form.

Click the Form Settings icon at the top of the layout editor.

Click on the Translations tab.

Check the Enable setting.

Click the Translation Dashboard button.

Locate the WS Form package and check your form.

Choose how to translate the content (e.g. Translate myself) then click the Translate content button.

Translate each element of the form in the WPML Advanced Translation Editor and then click Save and Complete.

Once translated, forms will automatically display in the active language.

## Translation Settings

When WPML is installed and activated, WS Form adds a Translation tab to Form Settings.

### Enable

Enables integration with WPML and registers strings automatically for the form.

WS Form also installs a WPML translation package for each form to make translations easier to manage.

### Translate Data Grids

Data grids are used by Select, Checkbox and Radio fields to store the choices shown on the form.

Data grid translation adds one translatable string per Select, Checkbox and Radio choice. The Label column mapping is used for the translation. This can produce a considerable number of translatable strings and therefore you can use this setting to disable translation of data grids.

The following field types include data grids.

Select

Checkbox

Radio

Price Select

Price Checkbox

Price Radio

Note that only data grids that do not have a data source can be translated. Data sources cause a data grid to be dynamic and for that reason persistent translatable strings cannot be generated.

### Translation Dashboard

Click this button to go to the WPML translation dashboard (Recommended translation method).

### String Translations

Click this button to go to the WPML string translations admin page.

## What Can Be Translated?

WPML string translation supports translation of:

Form settings

Tab labels

Section labels

Field labels

Field placeholders

Field help text

Field default values

Action settings (e.g. Show Message content or Send Email subject lines)

ARIA accessibility strings

## Troubleshooting

### Translatable String Not Appearing

If a particular setting is not appearing as a translatable string, you should first enter a value in the setting. Blank settings are not registered with WPML. Once you have entered a value in the setting it should appear in WPML.

If it still does not appear it is possible that particular setting is not available for translation.

### Form Changes Not Showing Up in Advanced Translation Editor

You may need to Save and Complete in the Advanced Translation Editor and then reopen it

## Troubleshooting

### A Translatable String Is Not Appearing

WPML only registers settings that contain a value. If a setting is blank, it will not appear as a translatable string.

To resolve this:

Enter a value in the setting.

Save the form.

Check WPML again.

If the string still does not appear, that particular setting may not currently support translation.

### Form Changes Are Not Showing in the Advanced Translation Editor

If recent form changes are not appearing in the WPML Advanced Translation Editor, try the following:

Open the translation in the Advanced Translation Editor.

Click Save and Complete.

Reopen the translation.

This usually refreshes the translation data and displays the latest form changes.

If the changes still do not appear, you can also try recreating the translation job.

## Troubleshooting Form Submission Issues

URL: https://wsform.com/knowledgebase/troubleshooting-form-submission-issues/

This article guides you through a series of steps to help identify and resolve form submission issues.

There may be times when a form doesn't submit as expected. This can happen for a variety of reasons, and in most cases, it's due to conflicts with third-party software. This article guides you through a series of steps to help identify and resolve the issue.

## How Submissions Work

To understand why a form submission might fail, it’s helpful to first know what happens behind the scenes when a form is submitted. Each submission involves sending a request, processing actions on the server, and returning a response to the browser. Here's a breakdown of how that process works.

### 1. Request

When a form is submitted, a request is sent to WS Form by using the WordPress REST API. The request contains all of the submitted form fields plus any other data you may have configured for the form such as tracking data. The request is sent as a JSON packet.

Requests come in 3 types:

Submit (Regular form submission)

Save (Form save)

Action (Action run immediately via conditional logic)

### 2. Action Processing

When the request is received, WS Form will run any actions configured to run for the request type, such as Save Submission, Show Message or Send Email. If any errors occur, WS Form will halt processing and send error details in the response.

### 3. Response

WS Form sends a response back to the web browser with a JSON packet. The JSON packet contains actions that need to be run client-side such as showing a success message or redirecting to another page.

## Identifying Submission Errors

Most of the time, submission errors will be displayed after the submit button has been clicked.

Error messages will be shown for:

Email sending errors

Integration errors

Webhook errors

Malformed submission responses (e.g. if the JSON packet broken because of PHP error or warning messages)

Server-side validation errors

## Using the Debug Console

The WS Form debug console is a powerful tool that helps you diagnose, troubleshoot, and optimize form behavior directly within your browser.

The debug console will often include more information about an error as well as log information about actions.

To enable the debug console:

Click on Settings in the WS Form admin menu.

In the Basic tab, set Debug Console to Administrators only.

Click Save.

When previewing a form or viewing a form on your site, the debug console will now appear at the bottom of the screen.

The Log tab can be used to see details about actions, event and other useful information about the lifecycle of the current form submission.

The Error tab will show any errors that have occurred during the action process or if the form submission response is malformed.

Learn more: Debug Console & Testing and Debugging Forms

## Using the Browser Inspector

When a form or website feature isn’t working as expected, your browser’s built-in developer tools can help you pinpoint the issue. Here's how to use the browser inspector to track down JavaScript and network-related errors.

### 1. Open the Browser Inspector

In most modern browsers (like Chrome, Firefox, or Edge), you can open the inspector by:

Right-clicking on the page and selecting Inspect, or

Pressing F12 or Ctrl+Shift+I (Cmd+Option+I on Mac).

### 2. Check for JavaScript Errors

Click on the Console tab. Any JavaScript errors will appear here in red. These may include:

Syntax or runtime errors in scripts

Conflicts between themes or plugins

Deprecated functions or undefined variables

Each error usually includes a file name and line number, making it easier to locate and resolve.

### 3. Monitor Network Activity

Next, go to the Network tab. This panel shows all requests made by the page (like form submissions or API calls). To capture everything, refresh the page after opening the Network tab.

You can filter by XHR or Fetch to focus on asynchronous requests (such as AJAX form submissions).

Look for requests that return a red status code (like 404 or 500). These indicate failed or incomplete responses from the server.

### 4. Check the Server Response

Click on any request in the Network tab to view its details. Then click the Response sub-tab. This shows the raw response returned by the server, which may include:

A success or error message

Debugging output

A PHP error, stack trace, or JSON error

HTML content indicating a redirect or login screen

Reviewing the Response tab can help you understand exactly what the server is sending back, and whether it matches what you expect.

Once you’ve identified the issue—whether it’s a JavaScript error or an unexpected server response—you can begin troubleshooting. This might involve fixing a script, adjusting plugin settings, or passing the error details to the WS Form support team.

## Enabling Email Notifications

WS Form can send you an email if an error occurs when WS Form is processing form actions.

Learn more: Send Submissions Error Email Notifications

## TrustedForm Field

URL: https://wsform.com/knowledgebase/trustedform/

The TrustedForm field in WS Form brings seamless TrustedForm integration to your WordPress forms, making it easier than ever to certify and validate your lead…

The TrustedForm field in WS Form brings seamless TrustedForm integration to your WordPress forms, making it easier than ever to certify and validate your submitted form data. TrustedForm is a trusted industry solution for lead certification, ensuring proof of consent and contact intent for leads collected through online forms.

TrustedForm helps with compliance laws such as TCPA, GDPR, and CCPA by certifying consumer consent, documenting the time and source of form submissions, and ensuring transparency in data collection and usage.

## Why Use TrustedForm in Your WordPress Forms?

With the TrustedForm field, you can effortlessly enhance your WordPress forms by:

Adding TrustedForm compliance to any WS Form form.

Choosing specific fields for the certificate URL, ping URL, and token injection.

Initializing TrustedForm in sandbox mode for testing within your WordPress environment.

Setting up a unique identifier for tracking and reporting.

Supporting multiple TrustedForm-enabled forms on the same WordPress page.

By integrating TrustedForm into your WordPress forms, you ensure compliance with lead certification standards while maintaining the flexibility and advanced functionality WS Form is known for. This article will walk you through setting up and configuring the TrustedForm field in WS Form for WordPress, so you can get started quickly and confidently.

Always consult an attorney to ensure your forms comply with applicable laws. WS Form and TrustedForm are tools to assist with compliance but are not liable for legal adherence

## Sign up for TrustedForm

If you don't already have a TrustedForm account:

Sign up for TrustedForm

Go to the Domains admin page.

Add and follow the steps to verify your website domain name.

## Adding TrustedForm to Your Form

Configuring your form to use TrustedForm is simple.

In the Build > Sections sidebar, drag the TrustedForm section anywhere on your form.

This will automatically add four fields to your form:

TrustedForm
This controls how TrustedForm is initialized on your form

TrustedForm Certificate URL
This field will contain the TrustedForm certificate URL

TrustedForm Ping URL
This field will contain the TrustedForm ping URL

TrustedForm Token
This field will contain the TrustedForm token (Usually the same as the certificate URL)

When the section is added, the TrustedForm field will be configured with Sandbox enabled for testing. You must uncheck the Sandbox setting when you are ready to generate certificates in a live environment.

## Configuring TrustedForm

WS Form automatically enqueues the TrustedForm JavaScript for your form. TrustedForm will be bound to your form automatically such that it will only record consent for that form. You can add TrustedForm to as many forms as you wish.

To configure how TrustedForm is initialized for your form, click the field Settings icon on the TrustedForm field. The settings are as follows:

### Certificate URL Field

Choose which field to use for storing the TrustedForm certificate URL. We recommend using a hidden field.

### Ping URL Field

Choose which field to use for storing the TrustedForm ping URL. We recommend using a hidden field. This field is optional.

### Token Field

Choose which field to use for storing the TrustedForm token. We recommend using a hidden field. This field is optional.

### Sandbox

If checked, TrustForm certificates will be generated in sandbox mode. This is useful if you haven't yet signed up for a paid account and want to test the functionality.

If you added TrustedForm to your WordPress form using the Section Library, note that the Sandbox setting will be enabled by default for testing. You must uncheck the Sandbox setting when you are ready to generate certificates in a live environment.

### Invert Field Sensitivity

The Invert Field Sensitivity setting in the TrustedForm field provides greater control over how sensitive fields are handled during TrustedForm certification.

With this setting enabled, you can determine which fields are not sensitive as follows:

Edit a field by clicking the Settings icon.

Click on the Advanced tab.

In the Custom Attributes setting add:

Name: data-tf-sensitive

Value: false

### Identifier

This optional Identifier will be displayed in a section on TrustedForm Certificates called "Publisher Provided Data". Any data present here is provided by the publisher of the lead generation form at the time of the certificate’s creation and only shown if it is provided. By comparing the unique identifier present across multiple certificates lead buyers can confirm whether or a not a publisher intended for them to be viewed together to represent a more complete picture of all the consumer's activity.

## Tip

We suggest turning off the Reset Form After Submit setting in Form Settings > Basic so that a new TrustedForm certificate is not issued after your form has been submitted.

## Twilio Integration

URL: https://wsform.com/knowledgebase/twilio/

This integration lets you send SMS messages using Twilio and a WordPress form created in WS Form.

This integration lets you send SMS messages using Twilio and a WordPress form created in WS Form. You can create new forms from your Twilio phone numbers in a single click from the add form page. The integration supports sending text messages as well as attaching file uploads, signatures and media library files.

## Installation

The Twilio plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Twilio plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Twilio tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Twilio

In order to use the integration, you need to connect it to Twilio. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Twilio tab at the top of the page.

Enter your Access SID and Auth Token from the Twilio console page.

Click Save.

If you do not have a Twilio account, you can create a new account here.

## Creating a Form for Twilio

### Automatically

WS Form can create a form for any of your Twilio phone numbers in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a Twilio form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Twilio tab at the top of the page.

Click on a phone number.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your list does not appear, click the refresh icon in the Twilio tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a Twilio object when a user saves or submits their form.

To add a Twilio action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Twilio from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Twilio action settings are as follows:

#### When Should This Action Run?

You can choose to run the Twilio action when the form is saved, submitted, or both.

#### From

Select which Twilio active phone number the SMS should be sent from.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### To

Enter the phone number the SMS will be sent to.

You can enter straight text and also use WS Form variables in this field. For more information about WS Form variables, click here. There are various email-specific variables that can be used in this field.

For example, you could map a phone field using:

#field(123)

... where 123 is the ID of the phone field.

#### Message

Enter the message you would like to send to the recipient.

You can enter straight text and also use WS Form variables in this field. For more information about WS Form variables, click here. There are various email-specific variables that can be used in this field.

For example, you could map a text area field using:

#field(123)

... where 123 is the ID of the text area field.

#### Field Attachments

If you have file upload or signature fields in your form, you can attach them using this setting. To add a field attachment:

Click the Add  icon to add an attachment row.

Select the file upload or signature field.

#### Media Attachments

You can attach files from your media library to your email. To add a media attachment:

Click the Add  icon to add an attachment row.

Click Select to open the WordPress media library.

Select a media item. The filename will then appear in the attachment row.

 

## Undo Tool

URL: https://wsform.com/knowledgebase/undo-tool/

WS Form features a multi-step undo tool. As you build a form, your edit history is retained so that you can go back to any step in your building process.

WS Form features a multi-step undo tool. As you build a form, your edit history is retained so that you can go back to any step in your building process. The undo feature can be accessed in one of two ways:

## Undo / Redo Icons

At the top of the page in the main toolbar, you will find undo and redo icons.

When you have made a change to your form, the undo icon will appear. Click the undo icon to undo the last change you made. You can continue to click the undo icon to step back through the history of your form build.

When you click the undo icon, the redo icon will highlight. Click the redo icon to redo the last change you made. You can continue to click the redo icon until no more steps are available.

## Undo History

The undo history can be found in the Undo tab of the Build sidebar. the Build sidebar is shown on the right side of the page when you first start to edit a form, or it can be accessed at any time by clicking the Build icon in the main toolbar. The undo tab can be found at the top of the Build sidebar.

Every time you make a change to your form, an entry is made in the undo history.

By hovering over the history steps, you can see a preview of what the form looked like at that moment. If you click on a step, the form will revert to that step. Any changes made thereafter will result in any history regarding that step being replaced with your new changes.

Note that when you leave the form edit screen, the history is set back to empty again.

## Update Your Payment Method

URL: https://wsform.com/knowledgebase/update-your-payment-method/

Learn how to update your payment method for your subscription if your credit card has expired or changed.

You may need to update your payment method if your credit card has expired or changed.

## Credit Card

If you originally paid by credit card, you can update your credit card details as follows:

Click on My Account at the top of wsform.com.

Click on Edit Profile.

At the bottom of the Edit Profile page you will find the Manage Payment Methods section.

To update an existing card, click Update.
To add a new card, click Add New Card.
To remove a card, click Delete.

## PayPal

If you originally paid by PayPal you should login to PayPal to change your payment method details.

If you would like to change your payment method from PayPal to Credit Card you can manually renew your license key.

Manually Renew a License Key

## Updating Posts Using the Post Management Integration

URL: https://wsform.com/knowledgebase/updating-posts-using-the-post-management-add-on/

Learn how to update a WordPress post using the Post Management integration.

Tip: We recommend using the templates in the Post Management category on the Add New page to create your forms. WS Form will automatically add the form fields as well as creating mappings for populating and updating the post data.

Updating a WordPress post using a form is achieved in WS Form using the Post Management integration. Posts in WordPress represent blog posts, pages or any other custom post you have configured in WordPress.

There are two steps involved when updating a post using WS Form.

Populate the form with the original post data.

Update the post when the form is submitted.

## Choose Which Post to Update

There are three methods you can use to determine which post to update. An explanation of each method and how to configure your form is described below.

## Current Post

Use this method if you want to update the post that the form is placed on.

### 1. Populate the Form

To populate the form with post data you use the Data tab in the Form Settings sidebar. To do this:

Click the form settings  icon in the top toolbar.

Click on the Data tab.

Check the Populate Using Action setting.

Choose Post Management from the Action To Populate From dropdown.

Choose the the post type you would like to populate data from.

Enter #post_id (or leave it blank) to use the Post ID of the post/page the form is shown on.

Use the field mapping, meta mapping and tag mapping settings to determine which fields, meta and tag (WordPress terms) you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

### 2. Update the Post

Updating the post when the form is submitted is done via the Post Management action. To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open.

If you do not yet have a Post Management action:

Click the Add  icon to add a new action.

Choose Post Management from the Action pulldown.

Choose the post type you would like to update.

Enter #post_id in the Post ID setting.

Under Status we recommend choosing the Default setting to retain the existing post status. Otherwise you can choose a specific status for the post.

Use the field mapping and other mapping settings to determine which fields you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

## Query String Parameter

Use this method if you want to specify the post ID to update in a query string parameter.

For example, the URL to your page might be:

https://yourwebsite.com/page-with-form/?post_id=123

Note that the post ID is specified using the query string at the end of the URL.

post_id=123

So, in this example the post ID to update would be 123 using the query parameter post_id.

### 1. Populate the Form

To populate the form with post data you use the Data tab in the Form Settings sidebar. To do this:

Click the form settings  icon in the top toolbar.

Click on the Data tab.

Check the Populate Using Action setting.

Choose Post Management from the Action To Populate From dropdown.

Choose the post type of the post you are populating from.

Enter #query_var("post_id") in the Post ID setting.

Use the field mapping, meta mapping and tag mapping settings to determine which fields, meta and tag (WordPress terms) you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

### 2. Update the Post

Updating the post when the form is submitted is done via the Post Management action.

To do this:

#### Add a Hidden Field

A hidden field is required to pass the post ID through to WS Form when the form is submitted.

Add a hidden field to your form.

Set the Default Value field setting to #query_var("post_id").

#### Configure the Post Management action

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open.

If you do not yet have a Post Management action:

Click the Add  icon to add a new action.

Choose Post Management from the Action pulldown.

Choose the post type you would like to update.

Enter #field(123) in the Post ID setting. Change 123 to the ID of the hidden field you added.

Under Status we recommend choosing the Default setting to retain the existing post status. Otherwise you can choose a specific status for the post.

Use the field mapping and other mapping settings to determine which fields you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

## Specific Post ID

Use this method if you want to update a specific post instead of specifying the post ID dynamically.

### 1. Populate the Form

To populate the form with post data you use the Data tab in the Form Settings sidebar. To do this:

Click the form settings  icon in the top toolbar.

Click on the Data tab.

Check the Populate Using Action setting.

Select Post Management from the Action To Populate From dropdown.

Select the the post type you would like to populate data from.

Enter a post ID (e.g. 123) in the Post ID setting.

Use the field mapping, meta mapping and tag mapping settings to determine which fields, meta and tag (WordPress terms) you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

### 2. Update the Post

Updating the post when the form is submitted is done via the Post Management action. To do this:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open.

If you do not yet have a Post Management action:

Click the Add  icon to add a new action.

Select Post Management from the Action pulldown.

Select the the post type you would like to update.

Enter a post ID (e.g. 123) in the Post ID setting.

Under Status we recommend choosing the Default setting to retain the existing post status. Otherwise you can choose a specific status for the post.

Use the field mapping and other mapping settings to determine which fields you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

 

## Troubleshooting

### Form Won't Populate

If your form has been saved, it could be overwriting the populated post data. Clear the session ID. Learn more

Ensure you have specified the correct Post ID to populate from. Learn more

Ensure all fields are mapped correctly. Learn more

### Post Won't Update

If you are using a query string parameter to specify the post ID, ensure you are passing that value through by using a hidden field. Learn more

Ensure you have specified the correct Post ID to update. Learn more

Ensure you have configured the Actions > Post Management settings to use the correct post ID. See above.

Ensure all fields are mapped correctly. Learn more

 

## Upgrade a License Key

URL: https://wsform.com/knowledgebase/upgrade-a-license-key/

Personal licenses can upgrade to Freelance and Agency licenses. Freelance licenses can upgrade to Agency licenses.

Upgrading a WS Form license is easy. Personal licenses can be upgraded to Freelance and Agency licenses. Freelance licenses can be upgraded to Agency licenses.

The cost is calculated as the difference between your original license and the new license. It will be prorated based on your existing subscription renewal date.

To upgrade a license key:

Log in to https://wsform.com

Click on My Account

Click on Purchase History

Click on View Licenses

Click on View Upgrades

Integrations cannot be refunded, but an integration being used with a Personal license can be used with a Freelance license.

## Upgrade Notes for 1.10.x

URL: https://wsform.com/knowledgebase/upgrade-notes-for-1-10-x/

Version 1.10.x of WS Form introduces a new styling system that provides greater control of WordPress form design.

Release date: January 2, 2025.

Version 1.10.x of WS Form introduces a new Styler system that provides greater control for WordPress form design.

https://www.youtube.com/watch?v=ZsTBBsdQxFQ

The new system is designed to be backward compatible with earlier versions of WS Form with minimal changes to the underlying HTML used to render forms. However, there are a few improvements that you should consider when upgrading to 1.10.x.

## First Things, First!

Whenever you upgrade a plugin, theme or core in WordPress:

Create a full backup of your website, including the database and files. Ensure the backup is stored in a safe location in case you need to restore your site.

Review the changelog.

Test on a staging / development server first.

Clear any caching after installing.

## Improved Accessibility

Version 1.10.x introduces some new accessibility features that may have a subtle effect on your forms.

Improved color contrasts to ensure WCAG AAA compliance by default.

Checkbox field labels are now shown by default.

Text Area fields no longer have character / word count enabled by default. See Word and Character Counts in Help Text if you want to add this.

URL fields now have an https:// placeholder added by default.

An improved color picker by Coloris.

## New CSS

1.10.x includes a rewrite of the CSS used in WS Form to support CSS variables. You can check the CSS Variables Reference to see all of the available CSS variables.

CSS is now dynamically loaded by field type to reduce redundancy.

### Custom CSS Considerations

If you have implemented any custom CSS yourself this should still work provided your selectors are specific enough to WS Form elements.

We recommend prefixing all CSS selectors with:

.wsft-form

This is per our original Styling Forms with CSS documentation.

For example:

.wsft-form .wsft-field-wrapper .wsft-label

Whilst not necessary, we would recommend using the new Styler to implement your customizations. You can, of course, implement any further customizations you need using custom CSS. Consider using the WS Form CSS variables to customize form elements.

## New HTML

Revised HTML has been implemented to improve the presentation / customization of some field types. These should not present any styling issues but have been included here for transparency.

### Date / Time Fields

All icons in the date / time picker have now been replaced with pure CSS icons. This allows for easier resizing and coloring.

### Password Fields

Password fields now have the following markup added as a sibling to the password input element if the password strength meter is enabled:

<ul><li /><li /><li /></ul>

This replaces an SVG that was used for the strength meter and improves the ability for you to recolor the meter if required by using pure CSS icons.

### Select Fields

The dropdown arrow on Select fields has been converted from an SVG file to a pure CSS icon. This allows for easier resizing and coloring.

## URL Field

URL: https://wsform.com/knowledgebase/url/

The URL field provides a simple way to define a link.

The URL field lets your website visitor enter a web address. By using the URL field, mobile users will be presented with a keyboard optimized for URL entry. This keyboard type prominently features the period (".") and slash ("/") characters and the ".com" string.

## Demo

## Adding a URL Field

To learn how to add, edit, clone, move, resize, offset, or delete a url field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Website Address.

### Show Label

If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.

### Required

If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.

Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Default Value

The default value setting is used to populate the field with some default content. Unlike the placeholder text, default values are stored when the form is saved or submitted. An example default value could be #user_url to insert a logged-in user's website address into a Website URL field.

WS Form variables can be entered into this field.

### Placeholder

Field placeholders are used to place text in a field prior to the website visitor completing the field. The web browser then removes the placeholder text when text is entered into the field. Placeholder text is typically used to provide an example of what should be entered into that field, such as http://www.website.com/ for a URL field. If this field is left blank, a placeholder will not be added to the field.

Placeholder text is not stored when the form is saved or submitted.

WS Form variables can be entered into this field.

### Help Text

The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.

In addition to inserting plain text, WS Form can also display character and word count information in this field.

WS Form variables can be entered into this field.

### Auto Complete

Web browsers sometimes have features for helping users fill forms in, for example pre-filling the user's address based on earlier user input. The autocomplete content attribute can be used to hint to the web browser how to, or indeed whether to, provide such a feature.

Use this setting if you would like to specify the value of the autocomplete attribute. Use the off option to prevent auto complete on the field.

### Prefix / Suffix

The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.

For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.

### Accessibility

#### ARIA Label

Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.

This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.

The value of this setting defaults to your field label. If you would like to change this, enter a new value.

WS Form variables can be entered into this field.

### Hidden Behavior

#### Always Include in Actions

This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.

The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.

If this setting is checked, this field will always be included in actions if it is hidden.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Styles

Use the Styles settings to change the design of the URL field.

#### Label Position

There are five positions you can choose from for your label:

Default

Top

Left

Right

Bottom

The default position will place the label set in the form settings advanced tab. For new forms this will be the Top positioning.

Note that when using some frameworks some label positions may not be available.

#### Label Width

If your label position is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns (or whatever value is set in Form Settings). By default, labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

To change the default width of all labels in your form:

1. Click the form settings icon. 2. Click the Advanced tab. 3. Scroll down to Default Label Width and change the setting. 4. Click Save at the bottom.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

#### Field

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### Disabled

If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.

#### Read Only

If checked the field will be read only. Read-only forms provide a way of showing a value in a field without giving the website visitor the opportunity to change the value.

#### Minimum Character Length

This is the minimum number of characters that need to be entered into the field in order for it to be valid. Leaving this blank will set the minimum character length to zero. If the field is submitted without the minimum character length defined, a validation error will appear under the field.

#### Maximum Character Length

This is the maximum number of characters that can to be entered into the field in order for it to be valid. Leaving this blank will set the maximum character length to infinity. If the field is submitted with more than the maximum character length defined, a validation error will appear under the field. Typing will typically be limited to this number of characters.

#### Pattern

This advanced field enables you to set the pattern attribute on a field. The pattern attribute specifies a regular expression that the element’s value is checked against. This field is useful in, for example, forcing a website visitor to enter a phone number or date in a particular format that you require.

Example patterns can be selected by clicking the hamburger icon .

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Duplication

#### No Submission Duplicates

When checked, WS Form will check to see if a duplicate submission exists containing the same value for this field. If found, the submission will not be allowed and a message shown to the user completing the form.

#### Within

This setting lets you specify how recently WS Form should check for duplicates. The available options are:

Setting
Description

All Time
Check all submissions

Past Hour
Check submissions in the past hour

Past Day
Check submissions in the past 24 hours

Current Day
Check submissions since midnight

Past Week
Check submissions in the past 7 days (168 hours)

Past Month
Check submissions in the past month

Past Year
Check submissions in the past year

### Duplication Message

If a duplicate is found, this message will show.

### Validation

#### Show Invalid Feedback

Invalid feedback text is shown when a form is saved or submitted, and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.

#### Invalid Feedback Text

WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.

WS Form variables can be entered into this field.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Datalist

Many field types have a datalist option. When a website visitor starts to type in a field, the browser will display options that it believes match what the website visitor is typing in. The website visitor can then click on the datalist option to speed up their data entry. Datalist is also used to provide hints to the website visitor as to the available options that can be entered for a field.

Tip: In some browsers you may need to activate a datalist function for this to work, while some older browsers may not support this feature.

To create datalist suggestions for the field, add rows to the datalist data grid. For more information about using WS Form data grids, click here. Data grids make entering lists of information quick and easy. You can also use the data grid to import a CSV file of data into the datalist field, which makes adding large suggestion lists easier than entering them one by one.

## Use Repeatable Section Count in Calculations

URL: https://wsform.com/knowledgebase/use-repeatable-section-count-in-calculations/

How to use the #section_row_count variable with repeatable sections to calculate other fields.

The form example below demonstrates how to use a combination of the #calc field and #section_row_count variables to perform calculations on the number of rows in a repeatable section. A more advanced example using an #if ... #endif statement is also shown to demonstrate how you can adjust calculation inputs based upon the total number of rows in a repeatable section. You can learn more about these variables here:

Calculated Fields

if ... endif

## Use Shortcodes In Forms

URL: https://wsform.com/knowledgebase/use-shortcodes-in-forms/

WS Form PRO allows you to add WordPress Shortcodes to Text Editor, HTML and Message fields.

WS Form PRO allows you to add WordPress Shortcodes to the following content field types:

Text Editor

HTML

Message

Simply add your short code to the content of these fields and WS Form with run the shortcode in your form.

## Demo

 

## User Capabilities

URL: https://wsform.com/knowledgebase/user-capabilities/

WS Form introduces additional capabilities that can be used to enable or disable functionality for your WordPress users.

WS Form introduces additional capabilities to WordPress that can be used to enable or disable WS Form functionality for your users.

When WS Form is first activated, the administrator role is given all of these capabilities.

If you need to assign a capability to other users, we recommend using the PublishPress Capabilities plugin which includes support for WS Form.

The available capabilities are:

## Form

Capability
Description

create_form
User can create new forms.

delete_form
User can delete forms.

edit_form
User can use the layout editor to edit forms.

export_form
User can export JSON files of forms.

import_form
User can import form JSON files.

publish_form
User can publish forms.

read_form
User can read form data.

## Style

Capability
Description

create_form_style
User can create new form styles.

delete_form_style
User can delete form styles.

edit_form_style
User can use the layout editor to edit form styles.

export_form_style
User can export JSON files of form styles.

import_form_style
User can import form style JSON files.

publish_form_style
User can publish form styles.

read_form_style
User can read form style data.

## Submission

Capability
Description

delete_submission
User can delete submissions.

edit_submission
User can edit submissions.

export_submission
User can export submissions as CSV files.

read_submission
User can read submissions.

## Settings

Capability
Description

manage_options_wsform
User can manage WS Form settings.

## User Management Integration

URL: https://wsform.com/knowledgebase/user-management/

The 'User Management' action allows you to perform various Wordpress user functions.

The User Management action allows you to perform various WordPress user management functions, including:

Register

Edit Profile

Log In

Forgot Password / Reset Password (Read the tutorial here)

Log Out

This integration is also compatible with the following plugins:

Advanced Custom Fields (ACF)

ACPT

JetEngine

Meta Box

Pods

Toolset

## About WordPress User Records

In WordPress, there are two tables in the database that store information about users. The wp_users table stores basic information about users (first name, last name, email etc), whereas the wp_usermeta table is used to store additional information about them, for example, custom fields that you create yourself.

The ability to manage custom user fields is not native to WordPress so you will need to use a plugin to configure them. We recommend using the Advanced Custom Fields (ACF) or Meta Box plugin.

The WS Form User Management integration allows you to create and edit user meta data by mapping your form fields to meta keys.

## Creating a User Management Form

### Automatically (Recommended)

WS Form can create a form for any of the user management functions in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

To create a user management form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the User Management tab at the top of the page.

Click on any of the user management methods to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

Tip: We recommend using the automatic method. Not only does this method create the form for you, but it also maps the fields and creates email actions suitable for these methods.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to the user management action when a user saves or submits their form.

To add a user management action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the side of the page.

Click the Add  icon to add a new action.

Select User Management from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The user management action settings are as follows:

#### When Should This Action Run?

You can choose to run the user management action when the form is saved, submitted, or both.

#### Method

Choose the method you like to run:

Register

Edit Profile

Log In

Forgot Password

Reset Password

Log Out

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding user management method. For example, you would want to map your Email field to the registration Email.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding user management method field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Meta Mapping (Register & Update Methods)

The register and update user management methods provide the ability to map your form field to user metadata.

To map a field:

Click the Add  icon at the bottom right of the meta mapping section.

Select your form field.

Select the user meta key you would like to create / update using the form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Meta Mapping

The integration also supports setting custom meta keys to values.

To add a meta key-value pair:

Click the Add  icon at the bottom right of the meta mapping section.

Enter the meta key you would like to set a value for.

Enter the meta value you would like to set the meta key to.

Repeat this process for each meta key-value pair.

Click the Save button at the bottom of the sidebar to save your changes.

#### Disable the Visual Editor When Writing (Register Method)

The visual editor in WordPress provides a WYSIWYG interface for writing content. Some users who are comfortable writing basic HTML prefer to use the text editor. By checking this setting ,you can disable the visual editor for newly registered users.

#### Disable Syntax Highlighting When Editing Code (Register Method)

If checked, syntax highlighting will not be used.

#### Enable Keyboard Shortcuts for Comment Moderation (Register Method)

If checked, keyboard shortcuts will be enabled for comment moderation.

#### Show Toolbar in Viewing Website (Register Method)

If enabled the WordPress administration toolbar will be shown when the newly registered user logs in. For non-blog style websites, we recommend leaving this unchecked.

#### Create Password (If blank) (Register Method)

If no password fields are mapped, or the password is blank you can check this setting to automatically create a password for the newly registered user automatically. Note that this password is not accessible and only serves the purpose of allowing you to register users without them having to specify a password on the form. WordPress requires all newly created users to have a password so this features creates the password automatically. The password will need to be changed by the registered user once they have been added to the users database.

#### Password Length

If Create Password is checked, you should specify the password length here. We recommend a minimum password length of 12 characters.

#### Password Special Characters

If checked, the automatically generated password will contain special characters. We recommend enabling this setting.

#### Send Email Notification (Register)

Choose whether or not to send new user notification emails. Available options are:

None

Administrator

User

User and Administrator

#### Admin Color Scheme

Choose the admin color scheme for the user. Available options are:

Default

Light

Blue

Coffee

Ectoplasm

Midnight

Ocean

Sunrise

#### Role (Register Method)

Choose the role of newly registered users.

## Populating a Form with User Data

It is possible to pre-populate a form with WordPress user data using this integration. This is useful for creating an Edit Profile form.

To do this:

Click the form settings  icon in the top toolbar when editing a form.

Click on the Populate tab.

Check the Populate Using Action setting.

Select User Management from the Action To Populate From dropdown.

Use the field mapping and meta mapping to determine which fields and meta data you would like to populate into which fields of your form. Click the Add  icon to add new mappings.

Click Save.

## Creating a Login Redirect

It is possible to create a redirect for the login method, so that when a website visitor successfully logs in their browser they are taken to a URL of your choice.

### Constant Redirect

If you want the redirect to be consistent, simply add a redirect action to the login form. For information about doing this, please see the Redirect to a Page action.

### Dynamic Redirect

You can also pass a redirect URL to the login page to control the redirect URL dynamically. To do this:

Drag a Hidden field to your form (We suggest adding it under the Submit button).

In the Default Value setting, enter: #query_var("r").

Make a note of the Field ID shown in the top right, for example, #123.

Click Save at the bottom.

Click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Redirect to a Page from the Action pulldown. A series of settings will appear.

In the URL setting, enter: #field(123) where 123 is the Field ID of the hidden field you added. You can also click the variables icon to the right of the URL setting to find the field variable.

Click Save at the bottom.

The login will now redirect to whatever the r query string parameter is set to.

An example login URL would therefore be:

https://wsform.com/log-in/?r=%2Fwelcome%2F

This URL would redirect to /welcome/ after a successful login.

This same methodology can be used for any redirect action.

## User Registration with Email Validation

URL: https://wsform.com/knowledgebase/user-registration-with-email-validation/

You may wish to validate an email address prior to someone registering on your website. To do this you can use the WS Form Email Validation functionality in co…

You may wish to validate an email address prior to someone registering on your website. To do this you can use the WS Form Email Validation functionality in conjunction with the User Management register action. This method is also known as a double opt-in.

## Demo

Want to jump in and see how it is done? Download a demo form and import it into WS Form.

Download Demo

## How it Works

The full form is shown below.

Email validation is a two step process. The form contains two sections. One section is shown when the form initially loads, i.e. when the email address is unvalidated. The second section is only shown once the email address has been validated. The section visibility is achieved by using some simple conditional logic.

The conditional logic used to control the sections is shown below:

So, when the submission is not email validated, the ELSE statement runs and shows section 1 but hides section 2. When the submission is email validated, the THEN statement runs and shows section 2 but hides section 1.

### Step 1

In step 1, we request the users email address in the first section of the form. This allows us to send them an email containing a validation link. The email is sent when the Validate button is clicked which is a Save button. We use a save button because it saves the form fields (i.e. the email address) but does not submit the form and run any other actions that are configured to run on submit.

When the Validate button is clicked, two actions run.

A Send Email action runs that sends an email to the email address provided. The email contains the #submit_url WS Form variable which is what the user will click on to validate their email addres.

A Show Message action runs to notify the user that an email has been to sent to them.

In step 2, the email address field will be hidden, therefore we need to ensure the Always Include in Actions setting is checked. This ensures that even though the first section is hidden, the email address will still be available for when we register the user.

## Step 2

Once the user has clicked the link in the email, they will be returned back to the same URL the form was on and WS Form will show section 2 as a result of the conditional logic running.

The user is prompted to enter their first name, last name and choose a password. You'll notice some conditional logic on the form for confirming that the password has been entered correctly twice.

When the Register button is clicked, two actions run.

A User Management action runs configured to user the Register method. The form fields are mapped to the appropriate user registration fields in the action.

A Show Message action runs to notify the user that they have been successfully registered.

## Using #field With Delimiter and Column Parameters

URL: https://wsform.com/knowledgebase/using-field-with-delimiter-and-column-parameters/

The #field variable 'delimiter' and 'column' parameters allow you to extract data from any column in a data grid as well as separate multiple choices by any ch…

The #field variable takes the following parameters:

#field(field_id, delimiter, column)

field_id is the ID of the field.

delimiter (Optional) is the character or string you want to separate multiple values by.

column (Optional) is the column in your data grid you wish to retrieve the value from.

The column parameter is compatible with select, checkbox and radio fields.

Example: #field(123, ",", "Width")

In order to the use the column parameter the Value column mapping must contain unique values. For Select fields, any AJAX settings should be disabled to ensure option values are always present.

## Demo

This demo uses a checkbox field that has the following data grid:

## Column Mapping

When using the column parameter of the #field variable, you must ensure the column mapped to Values contains unique values.

## Examples

Example
Description

#text(#field(123))
Dynamically returns the value of field ID 123 and update it if field ID 123 changes.

#text(#field(123, "/"))
Dynamically returns the value of field ID 123, separating multiple values with the / character and update it if field ID 123 changes.

#text(#field(123, "/", "Width"))
Returns the value found in the Width column of field ID 123, separating multiple values with the / character.

#text(#field(123, "/", 2))
Dynamically returns the value found in column index 2 (third column) of field ID 123, separating multiple values with the / character and update it if field ID 123 changes.

## Using #calc with Multiple Columns

You can use the #calc variable with #field variables containing the column parameter.

For example: #calc(#field(123, ",", "Width") * #field(123, ",", "Length"))

Note how the delimiter parameter is simply set to its default value "," and is essentially ignored in this example because the radio field only returns one value (row).

### Demo

## Using a Query String Parameter to Specify Which Post to Update

URL: https://wsform.com/knowledgebase/using-a-query-string-parameter-to-specify-which-post-to-update/

To use a query string parameter to specify which post ID to update, you will need to add a hidden field to pass the value through when the form is submitted.

In the post management action, there is a Post ID setting that is used to tell WS Form which post ID to update. To use a query string parameter to specify which post ID to update, you will need to add a hidden field to pass the value through when the form is submitted.

For the purpose of this tutorial, let's assume the URL to your form is:

https://mysite.com/my-page/?post_id=123

In this URL, the query string parameter post_id is set to 123, i.e. We want to update post ID 123.

First, let's create the hidden field to pass the post ID through with the form submission.

## 1. Create a Hidden Field

Add a hidden field to the form.

In the hidden field, add #query_var("post_id") in the Default Value setting.

So now we have a hidden field on the form that will contain the value of the post_id query string parameter. This will get sent as a form field value when the form is submitted.

## 2. Set the Post ID in the Post Management Action

In the Post Management action, we refer to the hidden field we created in step 1 by using:

#field(123)

.. in the Post ID setting, where 123 is the ID of the hidden field you created in step 1.

And that's it! The post_id query string parameter will now be passed through to the Post Management action and will be used to specify which post ID to update.

## Restricting Post Updates to the Original Author

By utilizing a query string parameter to define the post ID, you inadvertently allow the possibility for individuals to modify any post ID of the same post type by altering this parameter.

To safeguard against unauthorized updates, it's advisable to limit post modification privileges exclusively to the post's original author. This measure guarantees that a post can only be edited by the user who initially created it.

You can activate this security feature by checking the Restrict Updates to Author setting in the Post Management action.

Furthermore, you can also restrict form population to the original author by checking the Restrict Populate to Author setting in Form Settings > Data > Populate Using Action.

## Using Cascading Fields to Filter Posts by Terms

URL: https://wsform.com/knowledgebase/using-cascading-fields-to-filter-posts-by-terms/

Cascading fields can be used to filter a list of posts by terms.

Cascading fields can be used to filter a list of posts by terms. For example you could filter a list of blog articles by category, or filter a list of custom post types by a custom taxonomy term.

## Demo

In the above demo we are filtering knowledge base articles by their assigned categories.

There are two fields used to do this:

A select field with term options.

A select field with post options. This list of options is filtered by the terms in the first select.

## Term Select

To configure the first select field to use terms, we configure the options to use the Terms data source. The screenshot below shows how the select field is configured to do this:

Choose a taxonomy applicable to the post type you want to filter. Use the default columns configured for the Terms data source (ID, Name & Slug). Finally we configure the column mapping and choose the Name column for the option labels and the Slug column for the value. The value column mapping will be passed to the cascade filtering of the next field.

## Post Select

To configure the second select field to use posts, we configure the options to use the Posts data source. The screenshot below shows the select field is configured to do this:

Choose a post type that is associated with the taxonomy chosen in the first field. Use the default columns configured for the Posts data source (ID, Title, Status, Slug, Date, Terms), or optionally just keep the the ID and Title and Terms columns. Configure the column mapping and choose the Title column for the option labels and the ID column for the option values. Cascading is enabled and we choose the Terms column as the Filter Column. It is possible a post will be assigned to more than one term, so we'll check the Filter Column - Comma Separate setting to handle it. Finally we choose the first field as the Filter Value.

And that's it! Your form will now enable to choose a term which will filter the posts in the second field.

## Using FooGallery with WS Form

URL: https://wsform.com/knowledgebase/using-foogallery-with-ws-form/

The FooGallery WordPress plugin provides a shortcode for embedded a gallery on a page. This shortcode can be used in WS Form.

The FooGallery WordPress plugin provides a shortcode for embedded a gallery on a page. This shortcode can be used in WS Form.

WS Form supports WordPress shortcodes in forms using fields types such as Text Editor or HTML.

To enable the gallery to display, a small piece of JavaScript is required:

jQuery('.foogallery').foogallery();

This JavaScript needs to run on form load. This can be done very simply by using some conditional logic as shown below:

You can also use your own custom JavaScript to run scripts when a form loads. See: Run JavaScript on Form Load

## Using License Keys with Development Hostnames

URL: https://wsform.com/knowledgebase/using-license-keys-with-development-hostnames/

As well as your production website you can also use your license key for any WS Form edition with development or staging hostnames.

As well as your production website you can also use your license key for any WS Form edition with the following local, development or staging hostnames:

localhost

10.0.0.0/8

172.16.0.0/12

192.168.0.0/16

*.dev

*.development

*.local

*.staging

*.test

dev.*

development.*

local.*

staging.*

test.*

Simply use the same license key and it will not count towards your activation count.

## Using NONCEs to Protect Against Spam

URL: https://wsform.com/knowledgebase/using-nonces-to-protect-against-spam/

WS Form’s NONCE protection adds a security token to form submissions to help block spam.

Spam form submissions are a constant challenge for WordPress websites. WS Form includes a powerful option to help protect against them: NONCE protection.

A WordPress NONCE (short for Number Used Once) is a security token that helps verify that a form submission came from your site and not from a malicious script. When enabled in WS Form > Settings > Spam Protection, a NONCE will automatically be added to all form submissions.

Learn more: NONCEs (developer.wordpress.org)

## Why NONCEs Help Prevent Spam

They ensure the submission originated from your website.

They block attempts to submit data directly to the form endpoint without first loading the form page.

They reduce the likelihood of automated spam bots successfully posting entries.

This makes NONCEs an effective additional layer of security alongside other WS Form spam protection features like reCAPTCHA, hCaptcha, Cloudflare Turnstile, keyword blocking, and IP throttling.

## Important Consideration: Caching and NONCE Expiration

WordPress NONCEs are time-sensitive. By default, they expire after 12–24 hours depending on your site’s configuration. This helps keep them secure, but it also introduces a consideration for websites that use caching.

If a page with a form is cached for too long, the NONCE embedded in the form may go stale. That means when a user tries to submit the form, it will fail because the NONCE is no longer valid.

To avoid this problem:

Keep your page cache lifetime to 10 hours or less when NONCEs are enabled.

If your site uses aggressive caching (for example, full-page caching with CDNs), test your forms to ensure submissions work correctly.

Remember that if a user is logged in, WS Form always enforces NONCE checks regardless of your setting. This is required to identify the user when submitting the form.

## When to Use NONCE Protection

You should consider enabling NONCE protection if:

Your site is experiencing spam form submissions that aren’t blocked by CAPTCHAs or other tools.

You want to add another layer of verification to ensure only real form visits can lead to submissions.

You may wish to leave it disabled if:

Your site relies on very long cache lifetimes (greater than 10 hours) and you want to avoid potential submission failures.

## Conclusion

NONCEs in WS Form provide an extra safeguard against spam and malicious activity. They are easy to enable and can dramatically reduce unwanted submissions. Just keep in mind the relationship between NONCEs and page caching to ensure your visitors never run into expired tokens.

## Using RegEx Pattern Attributes on Field Inputs

URL: https://wsform.com/knowledgebase/using-regex-pattern-attributes-on-field-inputs/

Examples of regular expressions in field input pattern attributes.

The pattern attribute in HTML form inputs is used to define a regular expression (regex) that the input field's value must match for the form to be submitted successfully. This attribute is particularly useful for validating the format of user input directly in the browser, without needing to rely on server-side validation.

The pattern attribute can be applied to several field types, such as Text, Date/Time, Email, and Phone. When a user enters data that doesn't conform to the specified regex, the browser will block the submission of the form and WS Form will show invalid feedback against that field.

Learn more: mdn web docs: HTML attribute: pattern

## How To Set The Pattern Attribute in WS Form

In WS Form, the Pattern setting sets the pattern attribute on form inputs. You can find this setting in the Advanced tab in the Restriction section.

## Example Regular Expressions

The form below demonstrates the use of the Pattern attribute setting found in the Advanced tab of form input fields.

You can enter a value into any input to test the regular expression.

## Using Variables in Conditional Logic IF Statements

URL: https://wsform.com/knowledgebase/using-variables-in-conditional-logic-if-statements/

Learn how to use WS Form variables directly in IF statements to create dynamic conditional logic using query variables, tracking variables, calculated values,…

In conditional logic, IF statements can directly compare the value of WS Form variables.

This enables you to create dynamic conditions using values such as the current post ID, language code, query variables, tracking variables, field values, and calculated values.

## Example

The example below checks whether the user's browser language is English (en).

## How It Works

To create a condition that evaluates a variable, select Variable as the IF type.

Next, configure the following settings:

Expression

Operator

Comparison Value

The Expression and Comparison Value fields can contain static text, WS Form variables, or a combination of both.

The following operators are available:

Equals
Checks if the resolved value exactly matches the comparison value.

Does not equal
Checks if the resolved value does not exactly match the comparison value.

Contains
Checks if the resolved value contains the comparison value.

Does not contain
Checks if the resolved value does not contain the comparison value.

Starts with
Checks if the resolved value begins with the comparison value.

Does not start with
Checks if the resolved value does not begin with the comparison value.

Ends with
Checks if the resolved value ends with the comparison value.

Does not end with
Checks if the resolved value does not end with the comparison value.

Is blank
Checks if the resolved value is empty.

Is not blank
Checks if the resolved value is not empty.

Matches JS regex
Checks if the resolved value matches a JavaScript regular expression pattern.

Does not match JS regex
Checks if the resolved value does not match a JavaScript regular expression pattern.

An example condition is shown below.

In this example:

The Expression is #query_var("key")

The Operator is Equals

The Comparison Value is abc

This condition checks the current page URL for a query string parameter named key. If the parameter value equals abc, the condition evaluates as true.

An example URL that would return a true condition is:

https://example.com/?key=abc

## Using the Variables Helper

The Expression and Comparison Value fields both support the Variables Helper.

Click the # icon next to either field to browse and insert available variables.

## Examples

Below are some common examples of using variables in IF statements.

### Check the Current Locale

Expression
Operator
Comparison Value

#blog_locale
Equals
en_US

### Check the Current Post ID

Expression
Operator
Comparison Value

#post_id
Equals
123

### Check the Current Post Slug

Expression
Operator
Comparison Value

#post_name
Equals
contact-us

### Check a Query Variable

URL:

https://example.com/?campaign=summer_sale

Expression
Operator
Comparison Value

#query_var("campaign")
Equals
summer_sale

### Check if a Query Variable Exists

Expression
Operator
Comparison Value

#query_var("ref")
Is not blank

### Check a Tracking Variable

URL:

https://example.com/?utm_campaign=black_friday

Expression
Operator
Comparison Value

#tracking_utm_campaign
Equals
black_friday

### Check if a Tracking Variable Exists

Expression
Operator
Comparison Value

#tracking_utm_campaign
Is not blank

### Compare a Field Value

Expression
Operator
Comparison Value

#field(123)
Equals
Yes

### Combine Variables and Text

You can combine static text and variables in the same value.

Expression
Operator
Comparison Value

#blog_language_code:#post_id
Equals
en:123

## Multiple Matching

Enable Multiple to compare against multiple values using the selected operator.

This behaves in the same way as other WS Form conditional logic rules that support multiple values.

## Common Use Cases

Show fields based on the current language

Show fields based on the current post or page

Display campaign-specific fields using UTM tracking variables

Check URL query parameters

Create dynamic conditional logic based on calculated values

Create logic based on another field value without selecting that field directly

Combine multiple variables into a single comparison

## Related Variables

Common variables used in IF statements include:

#blog_language_code

#blog_locale

#post_id

#post_name

#post_title

#query_var("key")

#tracking_utm_campaign

#tracking_utm_source

#tracking_utm_medium

#field(id)

#calc(...)

## Notes

The expression is resolved before the IF statement is evaluated.

Variables are resolved before the operator comparison is performed.

You can enter a single variable or a string containing multiple variables.

If a variable cannot be resolved, the comparison may evaluate against an empty value.

## Using WS Form with Pop-Ups

URL: https://wsform.com/knowledgebase/using-ws-form-with-pop-ups/

Learn how to make WS Form display correctly inside pop-ups by calling the wsf_form_init() function when the pop-up opens.

When using WS Form inside a pop-up, the form may not render. WS Form renders client-side. On page load, it reads each <form> tag, checks the data-id, then builds the form in the browser using wsf_form_init().

## Why WS Form Renders Client-Side

Performance
Client-side rendering reduces server work. Pages stay light because only a minimal <form> placeholder is sent. The browser builds the full form.

Security
The full form HTML is not in the page source. This makes automated scraping and basic bot attacks harder.

## Why This Affects Pop-ups

If the pop-up's content is injected only when opened, the form does not exist in the DOM during the initial page load. The automatic call to wsf_form_init() on page load will miss it. You must call wsf_form_init() after the pop-up opens and the form markup is present.

## Solution

Call wsf_form_init() when the pop-up has opened and rendered its content. Most pop-up systems expose an event you can hook into.

Important: Ensure the form exists in the DOM before calling wsf_form_init().

## Ready-To-Use Examples

### Bricks Popups

// Regular Bricks popups: run when a popup opens
document.addEventListener('bricks/popup/open', function (event) {
 wsf_form_init();
});

// Optional: scope to a specific popup by ID
// if (event.detail.popupId === 3321) { wsf_form_init(); }

// AJAX popups: run after Bricks injects loaded content
document.addEventListener('bricks/ajax/popup/loaded', function (event) {
 wsf_form_init();
});

### Elementor Pro Popups

jQuery(document).on('elementor/popup/show', function(event, id, instance) {
 wsf_form_init();
});

### Popup Maker (WordPress plugin)

jQuery(document).on('pumAfterOpen', function(event, popup) {
 wsf_form_init();
});

### Bootstrap Modal (v4 or v5)

jQuery(document).on('shown.bs.modal', '.modal', function (e) {
 wsf_form_init();
});

### Fancybox 3

jQuery(document).on('afterShow.fb', function(e, instance, slide) {
 wsf_form_init();
});

## Troubleshooting Checklist

If you inject content via AJAX, use the plugin’s "content added" or "shown" event rather than a generic click.

If multiple pop-ups can open, keep the event delegation approach shown above so all instances are handled.

## Using ws_form_stat to Show Submission Statistics

URL: https://wsform.com/knowledgebase/using-ws_form_stat-to-show-submission-statistics/

When asking questions in a form using choice fields such as select, checkbox or radio fields you can use the ws_form_stat shortcode to display statistics about…

When asking questions in a form using choice fields such as select, checkbox or radio fields you may wish to obtain statistics about the answers given. You can use the ws_form_stat shortcode to do this.

## Demo

[ws_form id="13758"]

### Form Statistics

Total Responses: [ws_form_stat field_id="18663" type="count"]

Early bird: [ws_form_stat field_id="18663" type="count" value="Early bird"] ([ws_form_stat field_id="18663" type="percent" value="Early bird"]) Night owl: [ws_form_stat field_id="18663" type="count" value="Night owl"] ([ws_form_stat field_id="18663" type="percent" value="Night owl"])

## Usage

The ws_form_stat shortcode can contain the following attributes:

AttributeDescriptionDefault

field_idThe field ID you wish to obtain statistics for.

typeChoose count or percent.

valueOptionally enter a value you would like to obtain statistics for.

decimalsNumber of decimals to include in the returned statistic.0

thousand_separatorThe character to use as the thousand separator.,

decimal_separatorThe character to use as the decimal separator..

## Examples

ShortcodeDescriptionExample

[ws_form_stat field_id="123" type="count"]Return the total number of submissions for field ID 123.[ws_form_stat field_id="18663" type="count"]

[ws_form_stat field_id="123" type="count" value="Early bird"]Return the total number of submissions for field ID 123 that chose the value "Early bird".[ws_form_stat field_id="18663" type="count" value="Early bird"]

[ws_form_stat field_id="123" type="percent" value="Early bird"]Return the percent of submissions for field ID 123 that chose the value "Early bird".[ws_form_stat field_id="18663" type="percent" value="Early bird"]

[ws_form_stat field_id="123" type="percent" value="Early bird" decimal="2"]Return the percent of submissions for field ID 123 that chose the value "Early bird" to 2 decimal places.[ws_form_stat field_id="18663" type="percent" value="Early bird" decimals="2"]

## Validation Field

URL: https://wsform.com/knowledgebase/validation/

The Validate field shows a list of validation errors when the form is validated.

The Validation field in WS Form PRO provides a powerful way to display a list of validation errors when a form fails to submit. This feature enhances the user experience by clearly communicating what needs to be fixed before submission, which is especially helpful for improving accessibility.

Whether you're building simple contact forms or complex multi-step forms, the Validation field in WS Form PRO is an essential tool for robust WordPress form validation. It helps your users quickly identify errors and correct them, improving form completion rates and overall accessibility.

Displaying validation errors in a consistent, accessible manner is recommended by WebAIM’s guidelines on form validation, particularly the practice of placing errors at the top of the form. WS Form’s Validation field makes it easy to implement this best practice in any WordPress form.

## Demo

### When Is the Validation Field Shown?

The Validation field appears automatically after the form has been validated, typically when the user clicks the Submit button. It gives users a clear overview of all fields that need attention.

### Why Use a Validation Field?

In addition to improving accessibility and usability, the Validation field helps ensure WordPress form validation is consistent, customizable, and easy to manage, especially in large or complex forms.

### Key Features of the Validation Field

Fully customizable message and layout

Supports full styling through the WS Form Styler

Option to show current invalid feedback with clickable focus

Scope validation to the entire form, a specific tab, or a section

Add multiple Validation fields anywhere on the form as needed

## Adding a Validation Field

To learn how to add, edit, clone, move, resize, offset, or delete a validation field, please click here.

## Field Settings

To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.

## Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

### Label

This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, Summary.

### Hidden

If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.

### Appearance

#### Message

This is the message that is shown above the validation errors.

#### Show Invalid Feedback

If enabled, the validation errors will include the current invalid feedback associated with each field, e.g. This field is required.

### Behavior

#### Focus on Click

If enabled, each validation error can be clicked on to focus on that particular field.

#### Real Time Update

If checked, the validation errors will update in real time after the field is shown.

#### Scope

This defaults to Form which means the field will show validation errors for the entire form. If you choose Tab or Section it will only show validation errors for fields contained within tab or section the field is in. This can be useful for showing validation errors on each tab of a multi-step form, or on sections containing many fields.

## Advanced

The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.

### Style

Use the Style settings to change the design of the validate field.

#### Vertical Alignment

The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:

Top

Middle

Bottom

### Mask

The mask determines the HTML used to render the Validation field. The default mask is as follows:

<h2>#validate_message</h2>

#validate_list

You can change this markup to anything you wish. The following WS Form variables can be used in this field:

#validate_message - Renders the Validation field Message (As specified in the Message setting in the Basic tab).

#validate_list - Renders the list of validation errors as an unordered list.

### Classes

For developers WS Form allows you to add your own classes to fields.

#### Field Wrapper

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

### Restrictions

Field restrictions enable you to define what can or cannot be entered into the field.

#### User Status

Choose from one of the options to filter which user status can see this field:

Any

Is Logged In

Is Logged Out

Has User Role or Capability

If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.

### Custom Attributes

This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.

To add a custom attributes key value pair:

Click the Add  icon to add a custom attribute row.

Enter the key in the left column.

Enter the value in the right column.

Click Save to save the custom attributes.

### Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.

## Variables Helper

URL: https://wsform.com/knowledgebase/variables-helper/

The Variables Helper is a resource built in to WS Form that provides easy access to our library of 200+ variables.

The Variables Helper is a resource built in to WS Form that provides easy access to our library of 200+ variables.

## Tutorial

https://www.youtube.com/watch?v=MVkgyVcYPpY

## How to Access the Variable Helper

In the WS Form layout editor, any settings that support variables will have a # (hash) icon above them. Click the hash icon to access the Variable Helper.

## Searching Variables

At the top of the Variables Helper is a search field.

Examples of keyword searches you can perform are:

Keyword
Description

random
Show all variables containing the word "random".

123
Show the #field variable for field ID 123.

#blog_date
Show information about the blog date variable and a link to the accompanying knowledge base article.

Math
Show all variables in the Math group.

## Variable Groups

The variable groups are shown as clickable tabs at the top of the Variables Helper. Click on a group tab to view the variables in that group. The #field group contains all of the variables available in your form organized by tab, section and field.

## Inserting Variables

By clicking a variable name, it will insert it into the setting you used to open the Variables Helper. You can click on any other setting in the sidebar to change which field a variable will be inserted into. You can move the cursor to anywhere in a setting and then click a variable name to insert it at that position.

Variables can be inserted into form, tab, section and field settings, as well as conditional logic and action settings.

You can also copy variables by clicking the copy icon.

## Usage Tags

Alongside each variable are usage tags. These indicate where a variable can be used in WS Form.

Tag
Description

Client-side
Can be used in form settings such as Default Value and Placeholder

Actions
Can be used in actions such as Send Email or an integration Custom Mapping.

Data Grid
These variables are intended for use in data grid rows.

Progress Help
These variables can only be used in the Help setting of Progress fields.

Text Help
These variables can only be used in the Help setting of Text or Text Area fields.

Keywords: merge tags

## Variables Reference

URL: https://wsform.com/knowledgebase/variables/

WS Form variables enable you to add dynamic content to various elements of your form such as default field values and email templates.

WS Form variables enable you to add dynamic content to various elements of your form such as default field values and email templates.

Looking for some of our most commonly used variables? Check out our Variable Cheat Sheet!

Areas where WS Form variables can be used are accompanied by a field lookup icon. By clicking this icon, a list of the available variables will be shown below the corresponding field. Clicking on a variable will insert it into the field you are editing.

All WS Form variables start with the # character. For example:

#blog_name

Some variables take additional parameters. For example:

#field(123)

If a variable takes more than one parameter, you separate those values with a comma. For example:

#email_submission(true,true,true)

If a variable parameter contains a comma, you should encase it in double quotes. For example:

#server_date_custom("d m, Y")

## WS Form Variable List

The following variables are available for use in WS Form.

Keywords: merge tags

## Vertical Range Sliders

URL: https://wsform.com/knowledgebase/vertical-range-sliders/

Use CSS to rotate the range slider and associated components.

HTML 5 does not provide a native way of displaying a vertical range slider. Instead you have to use a CSS class.

Note: We are unable to provide support for this. The CSS class below is experimental and included here for any users who require vertical sliders. Rotated range sliders have cross browser compatibility issues.

To create a vertical slide, edit the range slider field and in the advanced tab enter wsft-range-vertical into the Classes --> Field Wrapper setting.

Add the following custom CSS to your website to adjust the height of the range slider. It is possible to add this using a WS Form HTML field with the CSS wrapped in <style> tags.

Change the CSS variable --wsft-range-vertical-height (line 2) to any height you wish. It is set to 200 pixels by default.

.wsft-range-vertical {
 --wsft-range-vertical-height: 200px !important;
}

## Webex Integration

URL: https://wsform.com/knowledgebase/webex/

The Webex integration allows you to push messages from a WordPress form to Webex. You can fully configure the message sent to Webex.

The Webex integration allows you to push messages to Webex using a WordPress form.

You can fully configure the message sent to Webex with setting such as:

Message text

File attachment

Adaptive card design

... and more! You can incorporate WS Form variables into any of the message settings.

https://www.youtube.com/watch?v=aR0zLcw8meU

## Installation

The Webex plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Webex plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Webex tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Webex

In order to use the integration, you need to connect it to Webex. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Webex tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Webex account, you can create a new account here.

## Creating a Webex Form

### Automatically (Recommended)

WS Form PRO can create a form that is is pre-configured to push messages to any of your Webex spaces. The form comes with a single text field but you can add other fields that can also be pushed to Webex. This process not only creates a form but also fully configures WS Form PRO so that the form is ready to use immediately.

To create a Webex form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Webex tab at the top of the page.

Click on any of your Webex spaces to create a form.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If you chose a private Webex space you must first add WS Form as an app to that space. To add WS Form to a private space, click on the Conversation settings icon (gear) at the top of the space, then click Add App, then add WS Form.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Webex when a user saves or submits their form.

To add a Webex action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Webex from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Webex action settings are as follows:

#### When Should This Action Run?

You can choose to run the user management action when the form is saved, submitted, or both.

#### Webex Channel

Choose the Webex space you would like to push the form submission data to.

#### Text

This is the main text you would like to be sent to Webex. You can either enter static text into this field, or include WS Form variables.

If you opt to create an Adaptive Card (See below) you should still enter a value in this setting.

#### File

Choose a File Upload or Signature field to attach to the message. The file handler for that field should be set to Media Library.

#### Use Adaptive Card

Check this box if you want to use an adaptive card for your message.

If you opt to use this display method, the Text and File settings will be ignored by Webex. However, you must have the Text or File setting configured.

#### Body (Adaptive Card)

The body of an adaptive card consists of rows of text or images.

To add a body row:

Click the Add  icon at the bottom right of the Body section.

Choose a body type. Text Block or Image.

Enter a value for the body. For a Text Block, enter the text you want to be shown. For an Image block, enter the public URL to an image. WS Form variables can be used in this setting.

Choose a size.

Repeat this process for each row you wish to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### Actions (Adaptive Card)

Actions on an adaptive card consists of buttons.

To add a button:

Click the Add  icon at the bottom right of the Actions section.

Choose an action type. At present only Open URL is an option.

Enter a value for the action. This should be a URL that the browser will go to when the button is clicked. WS Form variables can be used in this setting.

Enter a title for the button.

Repeat this process for each button you wish to add.

Click the Save button at the bottom of the sidebar to save your changes.

#### To Person Email

This field can be used to send messages directly to user by their email address. If an email address is entered, the Webex Space setting will be ignored. WS Form variables can be used in this setting.

Note: The WS Form PRO Webex Integration is not created by, affiliated with, or supported by Cisco.

## Webhook Action

URL: https://wsform.com/knowledgebase/webhook/

The Webhook action allows you to push form submission data to any URL endpoint using POST, GET, PUT, or DELETE methods as well as adding returned data to your…

The Webhook action allows you to push form submission data to any URL endpoint using POST, GET, PUT, or DELETE methods as well as adding returned data to your form fields.

## Demo

## Example Use Cases

Make a request to an API for data and use the returned data to populate form fields.

Pre-load a form with statistical data from an endpoint.

Create a vehicle VIN lookup using an API endpoint.

Push a form submission to a custom endpoint.

Push a form submission to a third party that WS Form does not natively integrate with.

## Creating a Webhook Action

To create a Webhook action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Webhook from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

## Testing Webhooks

A useful way of testing your webhook request is to use the website Webhook.site. Put the unique URL provided in the URL of Endpoint setting (see below), submit your form and you will see the request on the Webhook.site.

## Configuring the Webhook Action

Note: We are unable to provide support for endpoints used with this action.

The action settings are as follows:

### When Should This Action Run?

You can choose to add the post when the form is saved, submitted, or both. If you are running the webhook action using conditional logic we suggest unchecking both of these options.

### URL of Endpoint

Enter the URL of your endpoint, e.g. https://mysite.com/my_endpoint.php.

### Request Method

Select the request method you would like to use when sending the data to your endpoint. The available options are:

POST

GET

PUT

DELETE

PATCH

### Content Type

Select the content type you would like to use when sending the data to your endpoint. The available options are:

JSON (application.json)

URL Encoded (application/x-www-form-urlencoded)

### Field Mapping

Field mapping tells WS Form which of your form fields to send to the endpoint and what the key name should be for the field's value in your request data.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, enter a key name. You can enter a simple key name, e.g. first_name or use dot notation, e.g. person[0].name.first.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Custom Mapping

You can also add custom key/value mappings that are sent to your endpoint.

To add custom mapping:

Click the Add  icon at the bottom right of the meta mapping section.

Select your form field.

In the left-hand column, enter a value. WS Form variables are supported.

In the right-hand column, enter a key value. You can enter a simple key name, e.g. first_name or use dot notation, e.g. person[0].name.first.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Header Mapping

Header mapping allows you to add additional HTTP headers to your request.

To add a header mapping:

Click the Add  icon at the bottom right of the meta mapping section.

Select your form field.

In the left-hand column, enter a header name.

In the right-hand column, enter a header value.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Process Response

If this is checked, WS Form will process Response Code Mapping and Response Field Mapping.

if this is not checked, WS Form will instruct WordPress not to block the request. Response Code Mapping and Response Field Mapping will be ignored. Note that any errors will be ignored and the webhook request will not wait for a response from the server.

### Response Code Mapping

Use the Response Mapping setting to control how HTTP status codes are handled.

To add a mapping:

Click the Add  icon at the bottom right of the response code mapping section.

In the left-hand column, choose the HTTP code you wish to map.

In the right-hand column, choose how to handle the HTTP code.

Repeat this process for each HTTP code you wish to map.

Click the Save button at the bottom of the sidebar to save your changes.

The available handlers are:

Handler
Description

Ignore
The HTTP code will be ignored and actions will proceed as normal.

Process Response Field Mapping
Response field mapping will be processed (See Response Field Mapping) below.

Throw error
WS Form will throw an error which will be shown on the form (by default). Action processed will be halted. You can also enable error emails to have the error details emailed to you.

Halt
Action processed will be halted.

### Response Field Mapping

Use the Response Mapping setting to put data returned from your endpoint into form fields. The form data must be returned in JSON format.

To add a mapping:

Click the Add  icon at the bottom right of the response mapping section.

Select your form field.

In the left-hand column, enter a key name. You can enter a simple key name, e.g. first_name or use dot notation, e.g. person[0].name.first.

In the right-hand column, choose the form field you want to map this data to.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Authentication

Select the authentication type you would like to use when sending the data to your endpoint. If you select a type, you will be prompted for a username and password.

### Timeout

The maximum amount of time in seconds to wait for a response from the endpoint.

### SSL Verify

Whether to verify SSL for the request. We recommend keeping this checked.

### Use URLs for File Fields

If checked, file and signature fields will be converted to URLs instead of file objects. Multiple files are comma separated.

### Ignore Empty Values

If checked, keys with an empty value will not be included in the request.

### Repeaters to Arrays

If checked, fields mapped in the Field Mapping setting that are contained within a repeater will be converted to an array of objects. One array element will be created per repeatable row.

Convert Arrays to Delimited Text

If checked, fields that have multiple values (e.g. Checkboxes) will be converted to comma separated values.

### Cookie Passthrough

If checked, WS Form will pass any cookies received from the form submission through to the endpoint. For security reasons this is only possible with requests made to the same hostname.

## Debug

You can use the debug console log to view information about the request and response for a webhook request.

## Website Policies Waivers

URL: https://wsform.com/knowledgebase/website-policies-waivers/

Before you launch any website, protect your own agency by having your client first sign a Website Policies Waiver form on your website.

Content and forms provided by our partner Termageddon.

Before you launch any website, protect your own agency by having your client first sign a Website Policies Waiver form on your website. This is the easiest way to create a standard within your organization to ensure you document that you discussed the importance of privacy law compliance with each and every one of your clients.

Set up policies for your clients websites using Termageddon. Termageddon generates required policies for websites and apps and automatically updates them whenever the laws change.

Disclaimer: WS Form accepts no liability in respect to the use of this service or the forms provided.

## Demo

Choose your locality to view a demo of the Website Policies Waiver for your country:

These forms work with WS Form LITE and PRO editions.

Setting up one of these Website Policies Waivers forms is easy!

## 1. Download, Install and Activate WS Form

Download the WS Form LITE or PRO plugin:

LITE (Search for WS Form on your plugins admin page)

PRO (Check out the PRO only options below!)

Install and activate the plugin in WordPress. Learn more.

## 2. Choose Your Locality

Click a country below to download the form for your locality:

US

Canada

UK

Australia

Eire

## 3. Import the Form

To import the Website Policies Waiver form:

Click Forms from the WS Form admin menu.

Click the Import button.

Choose your downloaded file to import the form. You will then be taken to the WS Form layout editor.

## 4. Change the Set-Up Fee (Optional)

The forms come pre-populated with multi-tab content and a form that you can edit as you wish.

The set-up fee is the amount you will charge your client for setting up Termageddon on your website. If you want to change the amount charged, change the fee on the following tabs of the form:

### Where To Obtain

The set up fee is mentioned in the copy of this tab in the text editor field. To edit this copy:

Click the settings icon on the text editor field.

Edit the copy in the Content setting. Optionally click the expand icon at the top of the sidebar to make the setting larger.

Click Save & Close.

### Waiver

The set up fee is mentioned in the form as one of the plans in the radio field. To edit these options:

Click the settings icon on the text editor field.

Click the Radios tab. Optionally click the expand icon at the top of the sidebar if you want to make it easier to read the radios.

Make any edits you wish to each row.

Click Save & Close.

## 5. Link to Your Policies

On the waiver tab are two checkboxes that your client will check to agree with your Privacy Policy and Terms of Use. To change the link to these policies:

Click the settings icon on the GDPR checkbox field.

Click the Checkboxes tab. Optionally click the expand icon at the top of the sidebar if you want to make it easier to read the radios.

Make any edits you wish to each row (replace # with your policy page URLs).

Click Save & Close.

## 6. Publish the Form

When you are ready to publish  your form and make it live, click the  Publish button at the top of the layout editor.

## 7. Add to a Page

The last step is to add the form to a page on your website.

Create a page on your website, then add your form using your favorite site builder:

Beaver Builder

Block Editor (Gutenberg)

Bricks

Divi

Elementor

Oxygen

## Advanced Features - PRO

The following features are available in the PRO edition of WS Form. To purchase the PRO edition of WS Form, click here.

### Add a Signature Field

You can replace the text signature field on the form with an interactive signature field.

Learn more:

Signature Field

### Add a Legal Field

Use the WS Form legal field to add your own agency Termageddon policies to the form itself. It's as simple as entering your Termageddon API key!

Learn more:

Legal Field

Check out the Termageddon Sales Tool page for more great tools for your agency.

### Include a PDF Attachment

You can include a PDF attachment of the submitted data using the WS Form PDF integration.

Learn more:

PDF Integration

Once the PDF integration is installed simply edit the Send Email action and then check the Attach PDF setting. You can even fully customize the PDF template using your own HTML if you wish. The PDF attachment is also available to download from the WS Form submissions page.

## WooCommerce Integration

URL: https://wsform.com/knowledgebase/woocommerce/

The WooCommerce integration for WS Form PRO allows you to add forms to products in your store.

The WooCommerce integration for WS Form PRO allows you to create customizable products in your store. You can use this integration to request additional information about a product before it is added to the cart. Furthermore, the integration works with popular WooCommerce extensions such as QuickView and Wishlist. Learn more.

The WooCommerce WS Form Product Integrations Extension is sold exclusively on woocommerce.com.

https://www.youtube.com/watch?v=Aa_jW837j90

Examples of using the WooCommerce integration include:

Donation or name your price products

Interactive product customization

Complex price calculations

File uploads

Customer signatures

… and more!

To view the documentation for the WS Form PRO Product Integrations WooCommerce extension, click here.

## Word and Character Counts in Help Text

URL: https://wsform.com/knowledgebase/word-and-character-counts-in-help-text/

WS Form can add word or character counters to all types of text fields and in any format you wish.

WS Form can add word or character counters to all types of text fields and in any format you wish.

Word and character counters are added to the Help Text setting of a field.

To determine how the word or character count is displayed, you simply add some WS Form variables in the help text setting of a field. To do this:

Click on the settings icon on a field.

Enter the word and/or character count variables to the Help Text setting.

Click Save & Close.

## Examples

Here are some examples of how these variables can be used in the Help Text setting.

#character_count #character_count_label / #word_count #word_count_label Example output: 15 characters / 3 words

#character_count #character_count_label Example output: 123 characters

#word_count #word_count_label Example output: 12 words

#word_count #word_count_label (Maximum: #word_max #word_max_label) Example output: 1 word (Maximum: 12 words)

You have #word_remaining #word_remaining_label remaining. Example output: You have 5 words remaining.

## Word & Character Count Variables

The word and character count variables are as follows:

## WordPress Block

URL: https://wsform.com/knowledgebase/wordpress-block/

The WS Form WordPress block makes it easy to add a form to your WordPress website.

WordPress blocks represent an element of a page such as a heading, paragraph of text or an image.

The WS Form block makes it easy to add a form to your WordPress website.

To add a form to your website:

Click the Add Block icon. This can be found at the top of the block editor and also below each existing block on the page.

To find the WS Form block, either search for WS Form or click the WS Form category in the Add Block modal.

Click the WS Form block to add it to your page.

Choose which form you would like to use in the editor sidebar.

WS Form will then show a preview of the form on your page. As with all WordPress blocks the preview is an approximate representation of how the form will look. The final output will depend on the theme and styling of your website.

Click the Preview button to preview the form on your web page.

## WP Fusion Integration

URL: https://wsform.com/knowledgebase/wp-fusion/

WP Fusion synchronizes WS Form submissions with leading CRMs and marketing automation systems, keeps user profiles in sync with CRM contact records.

WP Fusion synchronizes WS Form submissions with leading CRMs and marketing automation systems, keeps user profiles in sync with CRM contact records.

If you have the WP Fusion plugin installed you will find WP Fusion listed as an option when editing the actions of a form. This action will push the form submission to the CRM configured in WP Fusion.

## Configuring a Form for WP Fusion

It is possible to use any form created in WS Form and add an action so that it is submitted to WP Fusion when a user saves or submits their form.

To add a WP Fusion action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select WP Fusion from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

## Settings

The WP Fusion action settings are as follows:

#### When Should This Action Run?

You can choose to run the WP Fusion action when the form is saved, submitted, or both.

### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

This field is option. If you do not select an opt-in field, all forms are pushed to WP Fusion.

### Add Only

When this setting is checked, WP Fusion will only add new contacts and will not update existing ones.

### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in WP Fusion. For example, you would want to map your Email field to the Email field in WP Fusion.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding WP Fusion field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

### Custom Field Mapping

Custom mapping allows you to push custom values (including WS Form variables) to WP Fusion fields.

To create a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter the value you would like to map to a WP Fusion field.

In the right-hand column, select the corresponding WP Fusion field.

Repeat this process for each WP Fusion field.

Click the Save button at the bottom of the sidebar to save your changes.

### Apply Lists

To apply lists:

Click the Add  icon at the bottom right of the apply lists section.

Select a list.

Repeat this process for each desired list.

Click the Save button at the bottom of the sidebar to save your changes.

## WPBakery Element

URL: https://wsform.com/knowledgebase/wpbakery-element/

Learn how to add WS Form to any WPBakery Page Builder layout using the built-in WS Form element.

WS Form includes a native integration with WPBakery, making it easy to add any WS Form to a page or post built with WPBakery. Whether you're creating a contact form, quote request, registration form, calculator, survey, payment form, or any other form in WordPress, you can insert it directly into your page layout using the built-in WS Form element.

The integration is registered automatically whenever both WS Form and WPBakery Page Builder are active. No additional plugins, extensions, or configuration are required.

WS Form supports both the WPBakery backend editor and frontend editor, allowing you to build pages visually while working with your forms.

This integration is available in both WS Form LITE and WS Form PRO.

## Requirements

WordPress

WS Form 1.11.17 or later

WPBakery Page Builder

## How to Add a Form to WPBakery Page Builder

To display a form in WPBakery:

Edit the page or post where you want the form to appear.

Open the page in either the WPBakery backend editor or frontend editor.

Click Add Element.

Select the WS Form element.

Open the element settings.

Select the form you want to display using the Form dropdown.

Optionally configure the Form Element ID and CSS Class settings.

Save or update the page.

The selected form will be embedded into your WPBakery layout and rendered using the standard WS Form engine.

## WS Form Element Settings

The WS Form element provides the following configuration options.

### Form

Select the form you want to display. The dropdown lists every form available in WS Form. This setting is required.

### Form Element ID (Optional)

Adds a custom HTML id attribute to the form wrapper. This is useful when targeting a specific form with custom CSS, JavaScript, analytics, or page anchors.

### CSS Class (Optional)

Adds one or more CSS classes to the form wrapper, allowing you to apply custom styling or integrate with your site's existing CSS framework.

These settings correspond to the attributes available when embedding forms using the WS Form shortcode.

## Live Preview in the WPBakery Editor

After selecting a form, the WS Form element displays a live preview directly inside the WPBakery editor. This works in both the backend and frontend editors, making it easier to position and design your page without repeatedly switching to the published view.

If a form has not yet been selected, the element displays a placeholder reminding you to choose one from the element settings. This placeholder is only visible while editing and is never shown on the published page.

Forms are automatically re-initialized whenever the element is added, duplicated, moved, or updated, ensuring features such as conditional logic, calculated fields, AJAX submission, multi-step navigation, and other interactive functionality continue to work correctly while editing.

## Published Page Output

When the page is published, the selected form is rendered using the standard WS Form rendering engine. The WPBakery integration behaves the same as embedding a form using the WS Form shortcode, so all WS Form functionality remains available. This means you can build pages visually with WPBakery while taking advantage of the full feature set available in WS Form.

## Writing Custom HTML for Email Content and PDF Templates

URL: https://wsform.com/knowledgebase/writing-custom-html-for-email-content-and-pdf-templates/

This article outlines some of the variables that are helpful when developing templates for email content and PDF templates.

This article outlines some of the variables that are helpful when developing email content and PDF templates.

## Adding Field Values

The #field(id) variable is used to add field values to your email templates. Although not necessary, you can also use #field_label(id) to dynamically add labels for each field value.

### Example

<p><strong>#field_label(1)</strong><br />#field(1)</p>

<p><strong>#field_label(2)</strong><br />#field(2)</p>

In this example #field_label(1) is replaced with the label of the field with ID 1, and the value of the field in inserted with #field(1).

## Conditionally Showing Field Values

Sometimes you may only wish to show a field value if it contains a value. To do this, you can use the #if(condition) and #endif variables.

### Example

#if(#field(1))
<p><strong>#field_label(1)</strong><br />#field(1)</p>
#endif

#if(#field(2))
<p><strong>#field_label(2)</strong><br />#field(2)</p>
#endif

In this example, WS Form checks to see if the field with ID 1 has content. If it does, it shows the content between the #if(#field(1)) and #endif variables. This functionality is then repeated for the field with ID 2.

## Repeatable Sections

If a field is in a repeatable section, #field(id) will return the field values for each row in a comma separated list, for example:

Red,Green,Blue

You can also output custom HTML for each row by using the #section_rows_start(id) and #section_rows_end variables.

### Example

<table>

 <thead>

 <tr>
 <th width="20">#</th>
 <th>#field_label(1)</th>
 <th>#field_label(2)</th>
 </tr>

 </thead>

 <tbody>

#section_rows_start(10)
 <tr>
 <th>#section_row_number</th>
 <td>#field(1)</td>
 <td>#field(2)</td>
 </tr>
#section_rows_end

 </tbody>

</table>

In this example, the HTML between #section_rows_start(10) and #section_rows_end is repeated for each row added to the repeatable section having ID 10. The HTML can contain any of the field values contained within that repeatable section.

The #section_row_number variable adds the number of the corresponding row. An example of the output from this HTML is shown below.

You can combine this with the #if(condition) and #endif variables too.

## Variables

Some of of the commonly used WS Form variable that are used in email templates are shown below:

## Setting Up Send Email Actions to Use Custom HTML

We recommend setting the 'Message Editor' to 'HTML' in the 'Send Email' action. This will ensure any custom HTML you enter is not adjusted by the WordPress visual editor.

## Removing the Email Wrapper Template

WS Form wraps messages in a header and footer. This provides a simple email template that restricts the width of the email to 580px contained within a gray panel and adds necessary HTML tags around your message.

If you would like to remove this template and instead write your email template from <html> to </html> you can uncheck the Wrap Message in Header setting.

## WS Form Styler Sidebar Not Showing

URL: https://wsform.com/knowledgebase/ws-form-styler-sidebar-not-showing/

Fix the WS Form styler sidebar by switching to the Blank Template in your WordPress settings.

Sometimes, the WS Form styler sidebar doesn't appear. This usually happens when the WordPress template used for the form preview isn’t set up correctly.

To fix it, use the WS Form "Blank Template" instead:

In your WordPress dashboard, go to WS Form > Settings.

Under the Basic tab, find the Preview > Template option and select Blank Template.

Click Save Changes at the bottom.

After making this change, try previewing your form again. The styler sidebar should now appear as expected.

## wsf_action_email_attachments

URL: https://wsform.com/knowledgebase/wsf_action_email_attachments/

The wsf_action_email_attachments filter allows you to modify the Attachments array of absolute file paths when sending emails using the Send Email action.

The wsf_action_email_attachments filter allows you to modify the Attachments array when sending emails using the Send Email action.

The array has the following format:

array(

 // An attachment
 array(

 // Absolute path to file
 'path' => '/absolute/path/to/file',

 // Whether to delete the file after the email is sent
 'unlink' => false
 )
);

 

## wsf_action_email_bcc

URL: https://wsform.com/knowledgebase/wsf_action_email_bcc/

The wsf_action_email_bcc filter allows you to modify the BCC array of email addresses when sending emails using the Send Email action.

The wsf_action_email_bcc filter allows you to modify the BCC array of email addresses when sending emails using the Send Email action.

## wsf_action_email_cc

URL: https://wsform.com/knowledgebase/wsf_action_email_cc/

The wsf_action_email_cc filter allows you to modify the CC array of email addresses when sending emails using the Send Email action.

The wsf_action_email_cc filter allows you to modify the CC array of email addresses when sending emails using the Send Email action.

## wsf_action_email_css

URL: https://wsform.com/knowledgebase/wsf_action_email_css/

The wsf_action_email_css filter hook can be use to modify the Send Email action CSS that is used in the standard email template for sending email notifications.

The wsf_action_email_css filter hook can be use to modify the Send Email action CSS that is used in the standard email template for sending email notifications.

(Legacy filter hook name: wsf_get_email)

## wsf_action_email_email_validate

URL: https://wsform.com/knowledgebase/wsf_action_email_email_validate/

The wsf_action_email_email_validate filter allows you to validate email addresses prior to sending emails using the Send Email action.

The wsf_action_email_email_validate filter allows you to validate email addresses prior to sending emails using the Send Email action.

A detailed tutorial about using this filter can be found here:

## wsf_action_email_headers

URL: https://wsform.com/knowledgebase/wsf_action_email_headers/

The wsf_action_email_headers filter allows you to modify the array of SMTP Headers when sending emails using the Send Email action.

The wsf_action_email_headers filter allows you to modify the array of SMTP Headers when sending emails using the Send Email action. WS Form automatically sets header such as the content type, from and CC.

## wsf_action_email_message

URL: https://wsform.com/knowledgebase/wsf_action_email_message/

The wsf_action_email_message filter allows you to modify the Message when sending emails using the Send Email action.

The wsf_action_email_message filter allows you to modify the Message when sending emails using the Send Email action. The message can contain WS Form variables. The message gets wrapped in the email template prior to being sent.

## wsf_action_email_reply_to

URL: https://wsform.com/knowledgebase/wsf_action_email_reply_to/

The wsf_action_email_reply_to filter allows you to modify the Reply To setting when sending emails using the Send Email action.

The wsf_action_email_reply_to filter allows you to modify the Reply To setting when sending emails using the Send Email action.

## wsf_action_email_subject

URL: https://wsform.com/knowledgebase/wsf_action_email_subject/

The wsf_action_email_cc filter allows you to modify the Subject when sending emails using the Send Email action.

The wsf_action_email_cc filter allows you to modify the Subject when sending emails using the Send Email action.

## wsf_action_email_template

URL: https://wsform.com/knowledgebase/wsf_action_email_template/

The wsf_action_email_template filter allows you to modify the email template that is parsed prior to the email being sent out.

The wsf_action_email_template filter allows you to modify the email template that is parsed prior to the email being sent out. This will contains the standard WS Form email wrapper if the Wrap Message in Header and Footer setting is enabled, or just #email_message if it is disabled.

## wsf_action_email_to

URL: https://wsform.com/knowledgebase/wsf_action_email_to/

The wsf_action_email_to filter allows you to modify the To array of email addresses when sending emails using the Send Email action.

The wsf_action_email_to filter allows you to modify the To array of email addresses when sending emails using the Send Email action.

## wsf_action_pdf_default_font

URL: https://wsform.com/knowledgebase/wsf_action_pdf_default_font/

The wsf_action_pdf_default_font filter hook allows you to customize the default font of a PDF when it is generated.

The wsf_action_pdf_default_font filter hook allows you to customize the default font of a PDF when it is generated.

## wsf_action_pdf_default_font_size

URL: https://wsform.com/knowledgebase/wsf_action_pdf_default_font_size/

The wsf_action_pdf_default_font_size filter hook allows you to customize the default font size of a PDF when it is generated. For example: 16px

The wsf_action_pdf_default_font_size filter hook allows you to customize the default font size of a PDF when it is generated.

For example: 16px

## wsf_action_pdf_filename

URL: https://wsform.com/knowledgebase/wsf_action_pdf_filename/

The wsf_action_pdf_filename filter hook can be used to customize the filename of PDF's generated using the PDF integration.

The wsf_action_pdf_filename filter hook can be used to customize the filename of PDF's generated using the PDF integration.

The filter applies to PDF's generated as follows:

Exported from the submissions admin page.

Attached to emails when using the Send Email action.

Created from PDF links.

Added to Salesforce objects

## wsf_action_pdf_orientation

URL: https://wsform.com/knowledgebase/wsf_action_pdf_orientation/

The wsf_action_pdf_orientation filter hook allows you to customize the orientation of a PDF when it is generated.

The wsf_action_pdf_orientation filter hook allows you to customize the orientation of a PDF when it is generated.

## wsf_action_pdf_paper_size

URL: https://wsform.com/knowledgebase/wsf_action_pdf_paper_size/

The wsf_action_pdf_paper_size filter hook allows you to customize the paper size of a PDF when it is generated.

The wsf_action_pdf_paper_size filter hook allows you to customize the paper size of a PDF when it is generated.

## wsf_action_pdf_template_path

URL: https://wsform.com/knowledgebase/wsf_action_pdf_template_path/

The wsf_action_pdf_template_path filter hook allows you to change the default path for PDF templates relative to the WS Form uploads folder.

The wsf_action_pdf_template_path filter hook allows you to change the default path for PDF templates relative to the WS Form uploads path.

The default WS Form uploads path is:

/wp-content/uploads/ws-form

The default WS Form PDF template path is:

/wp-content/uploads/ws-form/pdf/templates

## wsf_action_redirect_url

URL: https://wsform.com/knowledgebase/wsf_action_redirect_url/

The wsf_action_redirect_url filter hook can be used to modify the URL the form redirects to if a Redirect action is present.

The wsf_action_redirect_url filter hook can be used to modify the URL the form redirects to if a Redirect action is present.

## wsf_action_user_lostpassword_error

URL: https://wsform.com/knowledgebase/wsf_action_user_lostpassword_error/

The wsf_action_user_lostpassword_error filter hook runs whenever the User Management integration encounters an error when trying to process a password reset re…

The wsf_action_user_lostpassword_error filter hook runs whenever the User Management integration encounters an error when trying to process a password reset request. This can be used to provide the user with a more meaningful message from third party plugins.

## wsf_action_user_signon_error

URL: https://wsform.com/knowledgebase/wsf_action_user_signon_error/

The wsf_action_user_signon_error filter hook runs whenever the User Management integration encounters an error when trying to login a user.

The wsf_action_user_signon_error filter hook runs whenever the User Management integration encounters an error when trying to login a user. This can be used to provide the user with a more meaningful message from third party plugins.

## wsf_action_webhook_http_headers

URL: https://wsform.com/knowledgebase/wsf_action_webhook_http_headers/

The wsf_action_webhook_http_headers filter hook allows you to modified the HTTP headers sent with the Webhook action.

The wsf_action_webhook_http_headers filter hook allows you to modified the HTTP headers sent with the Webhook action.

## wsf_action_webhook_payload

URL: https://wsform.com/knowledgebase/wsf_action_webhook_payload/

The wsf_action_webhook_payload filter hook allows you to change the payload sent with the Webhook action.

The wsf_action_webhook_payload filter hook allows you to change the payload sent with the Webhook action.

## wsf_activate

URL: https://wsform.com/knowledgebase/wsf_activate/

The wsf_activate action is run whenever WS Form is activated.

The wsf_activate action is run whenever WS Form is activated.

## wsf_api_call_timeout

URL: https://wsform.com/knowledgebase/wsf_api_call_timeout/

The wsf_api_call_timeout filter allows you to modify the timeout in seconds that is used when making any external API requests. This setting applies to the Web…

The wsf_api_call_timeout filter allows you to modify the timeout in seconds that is used when making any external API requests. This setting applies to the Webhook action as well as integration integrations.

## wsf_api_call_verify_ssl

URL: https://wsform.com/knowledgebase/wsf_api_call_verify_ssl/

The wsf_api_call_verify_ssl filter allows you to modify the whether SSL is verified when making any external API requests. This setting applies to the Webhook…

The wsf_api_call_verify_ssl filter allows you to modify the whether SSL is verified when making any external API requests. This setting applies to the Webhook action as well as integration integrations.

## wsf_api_submit_response_data

URL: https://wsform.com/knowledgebase/wsf_api_submit_response_data/

The wsf_api_submit_response_data filter allows you to modify the response data sent to the browser after a form is submitted.

The wsf_api_submit_response_data filter allows you to modify the response data sent to the browser after a form is submitted.

## wsf_config_frameworks

URL: https://wsform.com/knowledgebase/wsf_config_frameworks/

The wsf_config_frameworks filter runs when WS Form is preparing data for the current framework used to render a form.

The wsf_config_frameworks filter runs when WS Form is preparing data for the current framework used to render a form. It can be used to manipulate features of the framework such as breakpoints sizes.

## wsf_config_get_field_types

URL: https://wsform.com/knowledgebase/wsf_config_get_field_types/

The wsf_config_get_field_types PHP function returns an array of all the registered WS Form field types.

The wsf_config_get_field_types PHP function returns an array of all the registered WS Form field types.

## wsf_config_parse_variables

URL: https://wsform.com/knowledgebase/wsf_config_parse_variables/

The wsf_config_parse_variables filter hook can be used to add custom variables to WS Form.

The wsf_config_parse_variables filter hook can be used to add custom variables to WS Form.

For example, you could create a variable called:

#custom_company_name

And it could output:

Acme Services, LLC

These variables can be used client-side (e.g in field settings) or in Actions (e.g. in the Send Email message setting).

## Important

We recommend using the following formats in your filter hook function to avoid clashing with other existing WS Form variables:

Group ID: custom

Group label: Custom

Variable name: custom_<your variable name> (i.e. prefix with custom_)

## wsf_conversational_enqueue_styles

URL: https://wsform.com/knowledgebase/wsf_conversational_enqueue_styles/

The wsf_conversational_enqueue_styles action hook can be used to enqueue custom CSS for conversational forms.

The wsf_conversational_enqueue_styles action hook can be used to enqueue custom CSS for conversational forms.

## wsf_cookie_expiry

URL: https://wsform.com/knowledgebase/wsf_cookie_expiry/

The wsf_cookie_expiry filter hook can be used to override the Cookie Expiry setting.

The wsf_cookie_expiry filter hook can be used to override the Cookie Expiry setting in WS Form > Settings > Advanced. The returned value should be in seconds.

## wsf_currency_default

URL: https://wsform.com/knowledgebase/wsf_currency_default/

The wsf_currency_default filter allows you to set the default currency used by WS Form.

The wsf_currency_default filter allows you to set the default currency used by WS Form. Note that if you are using WooCommerce this setting is ignored. This filter is only applicable prior to WS Form first initializing its options. The currency code should be ISO 3166 (alpha-3) format.

## wsf_debug_enabled

URL: https://wsform.com/knowledgebase/wsf_debug_enabled/

The wsf_debug_enabled filter allows you to override whether the debug console is shown on the client-side of your website for forms.

The wsf_debug_enabled filter allows you to override whether the debug console is shown on the client-side of your website for forms.

## wsf_dropzonejs_image_size

URL: https://wsform.com/knowledgebase/wsf_dropzonejs_image_size/

The wsf_dropzonejs_image_size filter allows you to change the default file size for DropzoneJS previews for the File field.

The wsf_dropzonejs_image_size filter allows you to change the default file size for DropzoneJS previews for the File field.

## wsf_dropzonejs_upload_path

URL: https://wsform.com/knowledgebase/wsf_dropzonejs_upload_path/

The wsf_dropzonejs_upload_path filter allows you to change the default upload location for DropzoneJS uploads for the File field.

The wsf_dropzonejs_upload_path filter allows you to change the default upload location for DropzoneJS uploads for the File field.

The path should be relative to the standard WordPress upload folder.

For example, if you return:

my-folder

The upload path would be:

<WordPress root>/wp-content/uploads/my-folder

## wsf_enqueue_script_in_footer

URL: https://wsform.com/knowledgebase/wsf_enqueue_script_in_footer/

The wsf_enqueue_script_in_footer filter hook can be used to override the Enqueue in Footer setting in Global Settings.

The wsf_enqueue_script_in_footer filter hook can be used to override the Enqueue in Footer setting in Global Settings.

## wsf_enqueue_script_strategy_defer

URL: https://wsform.com/knowledgebase/wsf_enqueue_script_strategy_defer/

The wsf_enqueue_script_strategy_defer filter hook can be used to override the Defer setting in Global Settings.

The wsf_enqueue_script_strategy_defer filter hook can be used to override the Defer setting in Global Settings.

If set to true, a defer attribute will be added to all scripts enqueued by WS Form. The defer attribute in HTML is used with <script> tags to indicate that the script should be executed after the HTML document has been parsed, but before the DOMContentLoaded event.

## wsf_enqueue_scripts

URL: https://wsform.com/knowledgebase/wsf_enqueue_scripts/

The wsf_enqueue_js action hook runs whenever a form is present on a page and allows you to enqueue custom JavaScript.

The wsf_enqueue_scripts action hook runs whenever a form is present on a page and allows you to enqueue custom JavaScript. This action will only run once per page.

To learn how to enqueue scripts in WordPress see: wp_enqueue_script

## wsf_enqueue_styles

URL: https://wsform.com/knowledgebase/wsf_enqueue_styles/

The wsf_enqueue_styles action hook runs whenever a form is present on a page and allows you to enqueue custom CSS. This action will only run once per page. To…

The wsf_enqueue_styles action hook runs whenever a form is present on a page and allows you to enqueue custom CSS. This action will only run once per page.

To learn how to enqueue styles in WordPress see: wp_enqueue_style

## wsf_field_get_object

URL: https://wsform.com/knowledgebase/wsf_field_get_object/

The wsf_field_get_object PHP function returns a field object by ID.

The wsf_field_get_object PHP function returns a field object by ID.

## wsf_field_get_objects_by_class

URL: https://wsform.com/knowledgebase/wsf_field_get_objects_by_class/

The wsf_field_get_objects_by_class PHP function returns an array of field objects that have a particular class.

The wsf_field_get_objects_by_class PHP function returns an array of field objects that have a particular class.

This function searches the following meta keys:

class_field

class_field_wrapper

## wsf_field_get_objects_by_label

URL: https://wsform.com/knowledgebase/wsf_field_get_objects_by_label/

The wsf_field_get_objects_by_label PHP function return field objects that have a particular label.

The wsf_field_get_objects_by_label PHP function return field objects that have a particular label.

## wsf_field_get_objects_by_meta

URL: https://wsform.com/knowledgebase/wsf_field_get_objects_by_meta/

The wsf_field_get_objects_by_meta PHP function returns fields that have a matching meta key and meta value.

The wsf_field_get_objects_by_meta PHP function returns fields that have a matching meta key and meta value.

The following meta keys may contain space delimited values that are searched independently.

class_field

class_field_wrapper

## wsf_field_invalid_feedback_text

URL: https://wsform.com/knowledgebase/wsf_field_invalid_feedback_text/

The wsf_field_invalid_feedback_text filter allows you to the change the default invalid feedback text show on a field if it is not validated.

The wsf_field_invalid_feedback_text filter allows you to the change the default invalid feedback text shown on a field if it is not validated.

The default string is: This field is required.

You can use the following WS Form variables in this string:

Variable
Description

#label
The field label.

#label_lowercase
The field label lowercase.

## wsf_footer_script_attributes

URL: https://wsform.com/knowledgebase/wsf_footer_script_attributes/

The wsf_footer_script_attributes filter hook allows you to add additional script attributes to the WS Form footer script.

The wsf_footer_script_attributes filter hook allows you to add additional script attributes to the WS Form footer script. This can be helpful for adding security-related attributes, such as a Content Security Policy (CSP) nonce, or for including custom data attributes used by other plugins or integrations.

## wsf_form_checksum_check

URL: https://wsform.com/knowledgebase/wsf_form_checksum_check/

The wsf_form_checksum_check filter hook determines whether the checksum is checked when a form is imported.

The wsf_form_checksum_check filter hook determines whether the checksum is checked when a form is imported. By setting it to false you import form JSON files that were not created by WS Form when exporting a form.

## wsf_form_create_meta_data

URL: https://wsform.com/knowledgebase/wsf_form_create_meta_data/

The wsf_form_create_meta_data filter allows you to change meta data when a new form is created.

The wsf_form_create_meta_data filter allows you to change form meta data (e.g. form settings) when a new form is created.

## wsf_form_get_all

URL: https://wsform.com/knowledgebase/wsf_form_get_all/

The wsf_form_get_all PHP function returns an array of all form objects. This excludes trashed forms.

The wsf_form_get_all PHP function returns an array of all form objects. This excludes trashed forms.

## wsf_form_get_all_key_value

URL: https://wsform.com/knowledgebase/wsf_form_get_all_key_value/

The wsf_form_get_all_key_value PHP function returns an array of forms in a key value format.

The wsf_form_get_all_key_value PHP function returns an array of forms in a key value format.

$form_id => $form_label

## wsf_form_get_count_submit_by_id

URL: https://wsform.com/knowledgebase/wsf_form_get_count_submit/

The wsf_form_get_count_submit_by_id PHP function returns the submission count for a form by ID.

The wsf_form_get_count_submit_by_id PHP function returns the submission count for a form by ID.

## wsf_form_get_label_by_id

URL: https://wsform.com/knowledgebase/wsf_form_get_label/

The wsf_form_get_label_by_id PHP function returns the label of a form by ID.

The wsf_form_get_label_by_id PHP function returns the label of a form by ID.

## wsf_form_get_object

URL: https://wsform.com/knowledgebase/wsf_form_get_object/

The wsf_form_get_object PHP function returns a form object by form ID.

The wsf_form_get_object PHP function returns a form object by form ID.

## wsf_form_stat_add_count

URL: https://wsform.com/knowledgebase/wsf_form_stat_add_count/

The wsf_form_stat_add_count filter allows you to enable or disable form statistics gathering.

The wsf_form_stat_add_count filter allows you to enable or disable form statistics gathering.

## wsf_group_get_object

URL: https://wsform.com/knowledgebase/wsf_group_get_object/

The wsf_group_get_object PHP function returns a group (tab) object by ID.

The wsf_group_get_object PHP function returns a group (tab) object by ID.

## wsf_helper_get_object_meta_value

URL: https://wsform.com/knowledgebase/wsf_helper_get_object_meta_value/

The wsf_helper_get_object_meta_value PHP function returns the meta value for a meta key in an object such as a form, group, section, field or submit object.

The wsf_helper_get_object_meta_value PHP function returns the meta value for a meta key in an object such as a form, group, section, field or submit object.

## wsf_helper_get_object_property

URL: https://wsform.com/knowledgebase/wsf_helper_get_object_property/

The wsf_helper_get_object_property PHP function gets a property value from an object such as a form, group, section or field object.

The wsf_helper_get_object_property PHP function gets a property value from an object such as a form, group, section, field or submit object.

## wsf_licensing_log

URL: https://wsform.com/knowledgebase/wsf_licensing_log/

The wsf_licensing_log filter hook allows you to enable license activity logging to help determine issues when communicating with our licensing server.

The wsf_licensing_log filter hook allows you to enable license activity logging to help determine issues when communicating with our licensing server.

A full description of its use can be found here:

License Activity Logging

## wsf_licensing_log_level

URL: https://wsform.com/knowledgebase/wsf_licensing_log_level/

The wsf_licensing_log_level filter hook is used to determine what level of logging is used for the license logging feature.

The wsf_licensing_log_level filter hook is used to determine what level of logging is used for the license logging feature.

## wsf_licensing_log_path

URL: https://wsform.com/knowledgebase/wsf_licensing_log_path/

The wsf_licensing_log_path filter hook allows you to determine where the licensing activity log is written to.

The wsf_licensing_log_path filter hook allows you to determine where the licensing activity log is written to. The path is relative to the WS Form uploads directory. The directory will be created automatically if it does not already exist, provided the web server has write permissions.

The default logging path is:

wp-content/ws-form/licensing/licensing.log

A full description of its use can be found here:

License Activity Logging

## wsf_loaded

URL: https://wsform.com/knowledgebase/wsf_loaded/

The wsf_loaded action runs when WS Form is loaded.

The wsf_loaded action runs when WS Form is loaded.

## wsf_name_prefixes

URL: https://wsform.com/knowledgebase/wsf_name_prefixes/

The wsf_name_prefixes filter hook can be used to specify additional or alternative name prefixes used by #name_prefix variable.

The wsf_name_prefixes filter hook can be used to specify additional or alternative name prefixes used by #name_prefix variable.

How to Extract First and Last Names from a Full Name

## wsf_name_suffixes

URL: https://wsform.com/knowledgebase/wsf_name_suffixes/

The wsf_name_suffixes filter hook can be used to specify additional or alternative name prefixes used by #name_suffix variable.

The wsf_name_suffixes filter hook can be used to specify additional or alternative name prefixes used by #name_suffix variable.

How to Extract First and Last Names from a Full Name

## wsf_option_get

URL: https://wsform.com/knowledgebase/wsf_option_get/

The wsf_option_get filter allows you to modify the value of WS Form option values on get.

The wsf_option_get filter allows you to modify the value of WS Form option values on get.

## wsf_option_set

URL: https://wsform.com/knowledgebase/wsf_option_set/

The wsf_option_set filter allows you to modify the value of WS Form option values on set.

The wsf_option_set filter allows you to modify the value of WS Form option values on set.

## wsf_populate

URL: https://wsform.com/knowledgebase/wsf_populate/

The wsf_populate filter hook can be used to change the form population data prior to the form being rendered.

The wsf_populate filter hook can be used to change the form population data prior to the form being rendered.

## wsf_pre_render

URL: https://wsform.com/knowledgebase/wsf_pre_render/

The wsf_pre_render filter allows you to modify all forms object prior to the form being rendered.

The wsf_pre_render filter allows you to modify form objects prior to the form being rendered.

## wsf_pre_render_<form_id>

URL: https://wsform.com/knowledgebase/wsf_pre_render_/

The wsf_pre_render_ filter allows you to modify the form object prior to the form being rendered.

The wsf_pre_render_<form_id> filter allows you to modify a form object prior to the form being rendered.

## wsf_render_media_button

URL: https://wsform.com/knowledgebase/wsf_render_media_button/

The wsf_render_media_button filter allows you to control whether or not the Add Form button is added to the classic editor when editing a post.

The wsf_render_media_button filter allows you to control whether or not the Add Form button is added to the classic editor when editing a post.

## wsf_section_get_object

URL: https://wsform.com/knowledgebase/wsf_section_get_object/

The wsf_section_get_object PHP function returns a section object by ID.

The wsf_section_get_object PHP function returns a section object by ID.

## wsf_settings_button

URL: https://wsform.com/knowledgebase/wsf_settings_button/

The wsf_settings_button filter allows you to specify HTML markup for a settings button on the Settings page.

The wsf_settings_button filter allows you to specify HTML markup for a settings button on the Settings page.

## wsf_settings_static

URL: https://wsform.com/knowledgebase/wsf_settings_static/

The wsf_settings_static filter allows you to modify the static output of a setting in the Settings page.

The wsf_settings_static filter allows you to modify the static output of a setting in the Settings page.

## wsf_settings_update

URL: https://wsform.com/knowledgebase/wsf_settings_update/

The wsf_settings_update action is run when the Global Settings page is saved.

The wsf_settings_update action is run when the Global Settings page is saved.

## wsf_submit_block_ips

URL: https://wsform.com/knowledgebase/wsf_submit_block_ips/

The wsf_submit_block_ips filter hook enables you to specify an array of blocked IP addresses that are checked when a form is submitted.

The wsf_submit_block_ips filter hook enables you to specify an array of blocked IP addresses that are checked when a form is submitted. WS Form will check the users IP address when the form is rendered. If a blocked IP address is found the form won't be rendered and an optional message will be shown.

By default this filter hook applies to all forms. You can restrict this filter hook to a specific form by checking the $form->id parameter.

Note that IP address blocking is not processed when previewing a form.

## wsf_submit_block_ips_message

URL: https://wsform.com/knowledgebase/wsf_submit_block_ips_message/

The wsf_submit_block_ips_message WordPress filter hook is used to customize the message shown if a blocked IP address detected.

The wsf_submit_block_ips_message WordPress filter hook is used in conjunction with the wsf_submit_block_ips filter hook to customize the message shown if a blocked IP address detected.

## wsf_submit_block_ips_message_type

URL: https://wsform.com/knowledgebase/wsf_submit_block_ips_message_type/

The wsf_submit_block_ips_message_type WordPress filter hook is used to customize the type of message shown if a blocked IP address detected.

The wsf_submit_block_ips_message_type WordPress filter hook is used in conjunction with the wsf_submit_block_ips filter hook to customize the message shown if a blocked IP address detected. Available types are:

success

information

warning

danger

It can also be set to a blank string for no type.

## wsf_submit_block_keywords

URL: https://wsform.com/knowledgebase/wsf_submit_block_keywords/

The wsf_submit_block_keywords filter hook enables you to specify an array of blocked keywords that are checked when a form is submitted

The wsf_submit_block_keywords filter hook enables you to specify an array of blocked keywords that are checked when a form is submitted. WS Form will check all string based input again the blocked keyword array. If a blocked keyword is found, invalid feedback will be shown on the field.

By default this filter hook applies to all forms. You can restrict this filter hook to a specific form by checking the $form->id parameter.

The keyword matching is case-insensitive, meaning it doesn't matter whether the word is in uppercase or lowercase.

To avoid false positives, WS Form performs whole word matching only. For example, if “art” is a blocked keyword, it will not trigger on safe words like “partial” or “startled.” This helps ensure that valid submissions aren't mistakenly flagged.

If you need more control with keyword matching, consider using the wsf_submit_field_validate filter hook.

## wsf_submit_block_keywords_message

URL: https://wsform.com/knowledgebase/wsf_submit_block_keywords_message/

The wsf_submit_block_keywords_message WordPress filter hook is used to customize the message shown if a blocked keyword detected.

The wsf_submit_block_keywords_message WordPress filter hook is used in conjunction with the wsf_submit_block_ips filter hook to customize the message shown if a blocked keyword detected.

You can use the WS Form variable #keyword in the message to insert the matching keyword if you wish.

## wsf_submit_create

URL: https://wsform.com/knowledgebase/wsf_submit_create/

The wsf_submit_create action runs whenever a submission record is created.

The wsf_submit_create action runs whenever a submission record is created.

## wsf_submit_export_csv_header

URL: https://wsform.com/knowledgebase/wsf_submit_export_csv_header/

The wsf_submit_export_csv_header filter hook is used to modify the headers that appear in submission CSV exports.

The wsf_submit_export_csv_header filter hook is used to modify the headers that appear in submission CSV exports.

## wsf_submit_export_csv_row

URL: https://wsform.com/knowledgebase/wsf_submit_export_csv_row/

The wsf_submit_export_csv_row filter hook is used to modify the output of a row when exporting submission data.

The wsf_submit_export_csv_row filter hook is used to modify the output of a row when exporting submission data.

## wsf_submit_export_file_size_zip

URL: https://wsform.com/knowledgebase/wsf_submit_export_file_size_zip/

The wsf_submit_export_file_size_zip filter allows you to specify the minimum size in bytes that WS Form will change a Submissions export to a ZIP file instead…

The wsf_submit_export_file_size_zip filter allows you to specify the minimum size in bytes that WS Form will change a Submissions export to a ZIP file instead of a CSV file.

## wsf_submit_export_page_size

URL: https://wsform.com/knowledgebase/wsf_submit_export_page_size/

The wsf_submit_export_page_size filter allows you to modify the page size per HTTP request when exporting Submissions.

The wsf_submit_export_page_size filter allows you to modify the page size per HTTP request when exporting Submissions.

## wsf_submit_field_validate

URL: https://wsform.com/knowledgebase/wsf_submit_field_validate/

The wsf_submit_field_validate filter hook is used to validate each field when a form is submitted.

The wsf_submit_field_validate filter hook is used to validate each field when a form is submitted.

## wsf_submit_get_by_hash

URL: https://wsform.com/knowledgebase/wsf_submit_get_by_hash/

The wsf_submit_get_by_hash PHP function returns a submit object by hash.

The wsf_submit_get_by_hash PHP function returns a submit object by hash.

## wsf_submit_get_object

URL: https://wsform.com/knowledgebase/wsf_submit_get_object/

The wsf_submit_get_object PHP function returns a submit object by ID.

The wsf_submit_get_object PHP function returns a submit object by ID.

## wsf_submit_get_value

URL: https://wsform.com/knowledgebase/wsf_submit_get_value/

The wsf_submit_get_value PHP function returns a form submission value by meta key.

The wsf_submit_get_value PHP function returns a form submission value by meta key.

## wsf_submit_get_value_by_field_class

URL: https://wsform.com/knowledgebase/wsf_submit_get_value_by_field_class/

The wsf_submit_get_value_by_field_class PHP function returns a submitted field value by field class.

The wsf_submit_get_value_by_field_class PHP function returns a submitted field value by field class.

This function is useful if you want to extract submission values by class name instead of field ID.

To add a class to a field, edit a field and then enter a class name in the Advanced tab under the Classes settings. You can add a class name in either the Field Wrapper or Field class settings.

When using this function you can specify a single class name even if you have entered multiple classes in a field. For example a field that has the classes my-class-1 my-class-2 my-class-3 will be picked up if you pass my-class-2 as the class to this function.

If one field matching the class name is found, the field value is returned. If more than one field matching the class name is found, an array of the field values is returned.

## wsf_submit_get_value_repeatable

URL: https://wsform.com/knowledgebase/wsf_submit_get_value_repeatable/

The wsf_submit_get_value_repeatable PHP function returns an array of repeatable section field values for the meta key provided in a submit object.

The wsf_submit_get_value_repeatable PHP function returns an array of repeatable section field values for the meta key provided in a submit object.

## wsf_submit_get_value_repeatable_by_field_class

URL: https://wsform.com/knowledgebase/wsf_submit_get_value_repeatable_by_field_class/

The wsf_submit_get_value_repeatable_by_field_class PHP function returns a submitted field value by field class from a repeatable section.

The wsf_submit_get_value_repeatable_by_field_class PHP function returns a submitted field value by field class from a repeatable section.

This function is useful if you want to extract submission values by class name instead of field ID.

To add a class to a field, edit a field and then enter a class name in the Advanced tab under the Classes settings. You can add a class name in either the Field Wrapper or Field class settings.

When using this function you can specify a single class name even if you have entered multiple classes in a field. For example a field that has the classes my-class-1 my-class-2 my-class-3 will be picked up if you pass my-class-2 as the class to this function.

If one field matching the class name is found, the field value is returned. If more than one field matching the class name is found, an array of the field values is returned.

## wsf_submit_hidden_fields

URL: https://wsform.com/knowledgebase/wsf_submit_hidden_fields/

The wsf_submit_hidden_fields filter hook allows you to inject additional hidden fields containing values when the form is submitted.

The wsf_submit_hidden_fields filter hook allows you to inject additional hidden fields containing values when the form is submitted.

## wsf_submit_note_add

URL: https://wsform.com/knowledgebase/wsf_submit_note_add/

The wsf_submit_note_add PHP function adds a note to a submission.

The wsf_submit_note_add PHP function adds a note to a submission.

## wsf_submit_notes_get

URL: https://wsform.com/knowledgebase/wsf_submit_notes_get/

The wsf_submit_notes_get PHP function retrieves all notes associated with a submission.

The wsf_submit_notes_get PHP function retrieves all notes associated with a submission.

## wsf_submit_post_complete

URL: https://wsform.com/knowledgebase/wsf_submit_post_complete/

The wsf_submit_post_complete action runs when a form has been successfully posted.

The wsf_submit_post_complete action runs when a form has been successfully posted.

## wsf_submit_set_value

URL: https://wsform.com/knowledgebase/wsf_submit_set_value/

The wsf_submit_set_value PHP function sets a meta value in a submit object by meta key.

The wsf_submit_set_value PHP function sets a meta value in a submit object by meta key.

## wsf_submit_set_value_by_field_id

URL: https://wsform.com/knowledgebase/wsf_submit_set_field_value/

The wsf_submit_set_field_value PHP function sets a field value in a submit object.

The wsf_submit_set_value_by_field_id PHP function sets a field value in a submit object.

## wsf_submit_status

URL: https://wsform.com/knowledgebase/wsf_submit_status/

The wsf_submit_create action runs whenever a submission record is created.

The wsf_submit_status action runs whenever a submission record status is changed.

The available statuses are:

draft (In Progress)

publish (Submitted)

error (Error)

spam (Spam)

trash (Trashed)

## wsf_submit_update

URL: https://wsform.com/knowledgebase/wsf_submit_update/

The wsf_submit_update action runs whenever a submission record is updated.

The wsf_submit_update action runs whenever a submission record is updated.

## wsf_submit_validate

URL: https://wsform.com/knowledgebase/wsf_submit_validate/

The wsf_submit_validate filter hook is used to validate a form submission.

The wsf_submit_validate filter hook is used to validate a form submission.

## wsf_table_submit_column_actions

URL: https://wsform.com/knowledgebase/wsf_table_submit_column_actions/

The wsf_table_submit_column_actions filter allows you to change the actions shown for each Submissions row.

The wsf_table_submit_column_actions filter allows you to change the actions shown for each Submissions row.

## wsf_table_submit_field_type_list

URL: https://wsform.com/knowledgebase/wsf_table_submit_field_type_list/

The wsf_table_submit_field_type_list filter allows you to change the output of a field in the Submissions page.

The wsf_table_submit_field_type_list filter allows you to change the output of a field in the Submissions page.

## wsf_translate

URL: https://wsform.com/knowledgebase/wsf_translate/

The wsf_translate filter hook is called whenever WS Form translates a string related to a form.

The wsf_translate filter hook is called whenever WS Form translates a string related to a form such as:

Form settings

Tab settings

Section settings

Field settings

Action settings

This filter hook is only available if the wsf_translate_load filter hook returns true. It will also be present if compatible translation plugins such as WPML or Polylang are installed.

## wsf_translate_load

URL: https://wsform.com/knowledgebase/wsf_translate_load/

The wsf_translate_load filter hook returns true when a compatible translation plugin such as WPML or Polylang are installed.

The wsf_translate_load filter hook returns true when a compatible translation plugin such as WPML or Polylang are installed. If you need access the wsf_translate filter hook you apply your own filter and return true.

## wsf_translate_wpml_purge_on_disable

URL: https://wsform.com/knowledgebase/wsf_translate_wpml_purge_on_disable/

The wsf_translate_wpml_purge_on_disable filter hook is used to determine whether the WS Form WPML translation package is deleted when the translation is disabl…

The wsf_translate_wpml_purge_on_disable filter hook is used to determine whether the WS Form WPML translation package is deleted when the translation is disabled for a form. When a WPML package is deleted, the associated translations are also deleted. 

This filter hook returns true by default.

 

## Zapier Integration

URL: https://wsform.com/knowledgebase/zapier/

The Zapier WS Form integration allows you to integrate form submissions with 1,000's of apps.

The Zapier WS Form integration allows you to integrate form submissions with thousands  of apps.

## Installation

The WS Form Zapier plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Zapier plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zapier tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

Note: You will require one published form and at least one submission in order to add your zap.

Note: The WordPress REST API must be enabled and accessible to Zapier in order for this integration to work. Zapier pulls data from sources and therefore it must have access to your website.

### Creating A Zap

To create a WS Form zap:

If you don't already have a Zapier account, create one here.

In Zapier click the + Create Zap button.

Search for WS Form.

The New Submission trigger will be selected by default. Click Save + Continue.

Next you need to connect Zapier to your WS Form PRO plugin. Click Connect an Account.

Enter the API URL and API Key from your Zapier settings form in WS Form PRO:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zapier tab at the top of the page.

Copy and paste the API URL and API Key into the Zapier dialog.

Click Yes, Continue.

Test the connect to WS Form PRO by clicking the Test button.

Select the published form you want to trigger the zap with.

Zapier will then download sample submission records for that form, or you can skip that step and use the sample form submission. We recommend submitting a real form and then using that data for the next steps with Zapier.

Create one or more actions for your zap, and you're done!

## Fields

In addition to your form fields, the following submission fields are made available to Zapier for use in filters or mappings:

Identifier
Name
Description

id
ID
A unique identifier for the record. If a form is saved, this will be prefixed with -<count_submit> where count_submit is a number representing the number of times the form has been saved. This ensures zaps are re-assessed when a save occurs.

submit_id
Submission ID
The ID of the WS Form submission.

form_id
Form ID
The ID of the WS Form form.

hash
Hash
The hash (session ID) of the WS Form submission.

duration
Duration
The time it took in seconds from the initial form render to the last save or submit.

count_submit
Count
The number of times the form was saved or submitted.

status
Status
The status of the submission. draft represents an In Progress (saved) submission. publish represents a completed submission.

preview
Preview
A true or false value indicating if the form was saved or submitted in preview mode.

spam
Spam Level
A true or false value indicating if the form was saved or submitted in preview mode (Blank if no spam level available).

date_added
Date Added
The date / time the submission was created.

date_updated
Date Updated
The date / time the submission was updated.

date_expire
Date Expires
The date / time the submission will be purged (Blank for no expiry).

admin_url
Admin URL
The URL to view the submission in the WordPress admin.

## Zendesk Integration

URL: https://wsform.com/knowledgebase/zendesk/

The Zendesk integration allows you to create custom support ticket forms on your website that are pushed to your Zendesk account.

The Zendesk integration allows you to create custom support ticket forms on your website that are pushed to your Zendesk account.

## Installation

The Zendesk plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Zendesk plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zendesk tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Zendesk

In order to use the integration, you need to connect it to Zendesk. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zendesk tab at the top of the page.

Click Connect and follow the onscreen prompts

If you do not have a Zendesk account, you can create a new account here.

## Creating a Form for Zendesk

### Automatically

The Zendesk integration comes with an example form template that you can use to create a support ticket form in a single click.

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Zendesk tab at the top of the page.

Click on the Support Ticket template.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to Zendesk when a user saves or submits their form.

To add a Zendesk action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to a Zendesk List from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Zendesk action settings are as follows:

#### When Should This Action Run?

You can choose to run the Zendesk action when the form is saved, submitted, or both.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked, opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Zendesk. For example you would want to map your Email field to the Email field in Zendesk.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Zendesk field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Zendesk field to any value you wish, including the use of WS Form variables. For example you might want to map a license key field to a custom field in Zendesk.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Zendesk field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Tag Mapping

Tag mapping tells WS Form which of your form fields relate to the tags in Zendesk.

To map a field:

Click the Add  icon at the bottom right of the tag mapping section.

Select your form field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

Tag mapped fields need to be a choice field, such as Select, Checkbox, or Radio fields.

#### Attachments

You can also attach files and signatures to Zendesk tickets. To do this you just need to add at least one file upload or signature field to your form.

To map your file upload field to Zendesk:

Click the Add  icon at the bottom right of the attachments section.

Select your file upload field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

## Variables

The Zendesk integration introduces additional variables that you can use in actions such as messages and emails.

## Zoho CRM Integration

URL: https://wsform.com/knowledgebase/zoho/

The Zoho integration lets you push new records to CRM modules and create new forms for Zoho modules in a single click.

The Zoho integration lets you push new records to CRM modules using a WS Form action. It also allows you to create new forms from your Zoho module layouts in a single click on the add form page.

An example use of this integration would be to add sales inquiries as Leads in Zoho.

## Installation

The Zoho plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Zoho plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zoho tab at the top of the page.

Enter your license key.

Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

## Connecting to Zoho

In order to use the integration, you need to connect it to Zoho. Connecting is easy!

Click WS Form in the WordPress administration menu.

Click Settings.

Click the Zoho tab at the top of the page.

Select your domain, then click Save.

Click Connect and follow the onscreen prompts.

If you do not have a Zoho account, you can create a new account here.

### Working Modules

Because of the number of modules in Zoho, you select the modules you want to work with on the settings page. Custom modules you create in Zoho are also included in this list. When the plugin is first installed, we select the most common modules for you such as Leads, Contacts, and Accounts.

To add or change the modules you want to work with, choose the modules from the select list on the Zoho settings page.

To select more than one module:

On a Mac, hold the Command key and click the module names

On a PC, hold the CTRL-key and click the module names

Click Save after you have made any changes.

## Creating a Form for Zoho

### Automatically

WS Form can create a form for any of your Zoho module layouts in a single click. This process not only creates a form but also fully configures WS Form so that the form is ready to use immediately.

Tip: Due to the number of fields in Zoho, you may prefer creating a from scratch and then manually map your fields to Zoho.

To create a Zoho form in WS Form:

Click WS Form in the WordPress administration menu.

Click Add New.

Select the Zoho tab at the top of the page.

Click on any of your working Zoho modules.

Wait a few moments while the form is created.

That's it! Your form will be created and is ready to add to your website.

If your module does not appear, click the refresh icon in the Zoho tab.

### Manually

It is also possible to use any form created in WS Form and add an action so that it is submitted to a Zoho module when a user saves or submits their form.

To add a Zoho action:

When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.

Click the Add  icon to add a new action.

Select Add to Zoho from the Action pulldown. A series of settings will appear.

As with all sidebars in WS Form, click to the Save button at the bottom to save your changes, or click Cancel to disregard your changes.

The Zoho action settings are as follows:

#### When Should This Action Run?

You can choose to run the Zoho action when the form is saved, submitted, or both.

#### Zoho Module

Select the working Zoho module you would like to push data to.

#### Layout

Select the module layout you would like to work with.

#### Opt-In Field

Use this setting to select which of your fields to act as the opt-in field. We recommend adding a checkbox field with a single checkbox. It is always recommended that you have an unchecked opt-in checkbox on your forms to ensure you comply with GDPR requirements.

#### Update Existing Fields

If checked, existing records will be updated. This uses the Zoho upsert endpoint which allows you to insert a new record or update an existing one based on duplicate check field values.

The system checks for duplicate records using the values of the duplicate check fields.

If a matching record exists, it gets updated.

If no matching record is found, a new record is inserted.

#### Field Mapping

Field mapping tells WS Form which of your form fields relate to the corresponding fields in Zoho. For example, you would want to map your Email field to the Email field in Zoho.

To map a field:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, select your form field.

In the right-hand column, select the corresponding Zoho field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Custom Mapping

Custom mapping allows you to set a Zoho field to any value you wish, including the use of WS Form variables. For example, you might want to map a lead source to the source field in the Lead module in Zoho.

To add a custom mapping:

Click the Add  icon at the bottom right of the field mapping section.

In the left-hand column, enter a value or a WS Form variable.

In the right-hand column, select the corresponding Zoho field.

Repeat this process for each field on your form.

Click the Save button at the bottom of the sidebar to save your changes.

#### Attachment Mapping

File and signature fields can be mapped so that they are uploaded as attachments to the post when it is added.

To add a file or signature field as an attachment:

Click the Add  icon at the bottom right of the attachment mapping section.

Select your form field.

Repeat this process for each field on your form that you want to include as an attachment.

Click the Save button at the bottom of the sidebar to save your changes.

File fields that are marked as multiple will result in multiple attachments if more than one file is uploaded.

## Troubleshooting

If the connection between your website and Zoho stops working, click Disconnect then Connect to reconnect. You should also check the Zoho status page to see if there are any problems with their API / REST connections.

If any submissions to do not make it to Zoho because of a technical error, you can resend them:

Go to Submissions

Find and view the submission that did not push to Zoho

Scroll down to the action section

Click the Re-run action

## Affiliate Application

URL: https://wsform.com/template/affiliate-application/

This is the free Affiliate Application form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Applications

Available as a free form template.

## Age

URL: https://wsform.com/template/age/

This is the Age form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Average Rating

URL: https://wsform.com/template/average-rating/

This is the Average Rating form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Basic Arithmetic

URL: https://wsform.com/template/basic-arithmetic/

This is the Basic Arithmetic form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Body Mass Index

URL: https://wsform.com/template/body-mass-index/

This is the Body Mass Index form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Booking

URL: https://wsform.com/template/booking/

This is the Booking form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Booking

Requires WS Form PRO.

## Bug Report

URL: https://wsform.com/template/bug-report/

This is the Bug Report form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Contact

Requires WS Form PRO.

## Buttons

URL: https://wsform.com/template/buttons/

This is the Buttons form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Cancellation Survey

URL: https://wsform.com/template/cancellation-survey/

This is the free Cancellation Survey form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Surveys

Available as a free form template.

## Candidate Evaluation

URL: https://wsform.com/template/candidate-evaluation/

This is the Candidate Evaluation form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Car Payment

URL: https://wsform.com/template/car-payment/

This is the Car Payment form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Cascade Fields

URL: https://wsform.com/template/cascade-fields/

This is the Cascade Fields form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Check In/Check Out

URL: https://wsform.com/template/check-in-check-out/

This is the Check In/Check Out form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Checkbox Grid

URL: https://wsform.com/template/checkbox-grid/

This is the Checkbox Grid form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Clamp Font Size Calculator

URL: https://wsform.com/template/clamp-font-size-calculator/

This is the Clamp Font Size Calculator form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## College Enrollment

URL: https://wsform.com/template/college-enrollment/

This is the College Enrollment form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Applications

Requires WS Form PRO.

## Complaint

URL: https://wsform.com/template/complaint/

This is the Complaint form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Contact

Requires WS Form PRO.

## Compound Interest

URL: https://wsform.com/template/compound-interest/

This is the Compound Interest form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Conditional Logic

URL: https://wsform.com/template/conditional-logic/

This is the Conditional Logic form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Contact Us

URL: https://wsform.com/template/contact-us/

This is the free Contact Us form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Contact, Popular

Available as a free form template.

## Contact Us Extended

URL: https://wsform.com/template/contact-us-extended/

This is the Contact Us Extended form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Contact

Requires WS Form PRO.

## Contest Entry

URL: https://wsform.com/template/contest-entry/

This is the free Contest Entry form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Popular, Signup

Available as a free form template.

## Conversational

URL: https://wsform.com/template/conversational/

This is the Conversational form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Surveys

Requires WS Form PRO.

## Cost By Area

URL: https://wsform.com/template/cost-by-area/

This is the Cost By Area form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Counseling Informed Consent

URL: https://wsform.com/template/counseling-informed-consent/

This is the Counseling Informed Consent form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Health

Requires WS Form PRO.

## Cubic Meter

URL: https://wsform.com/template/cubic-meter/

This is the Cubic Meter form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Custom Email HTML

URL: https://wsform.com/template/custom-email-html/

This is the Custom Email HTML form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Customer Satisfaction

URL: https://wsform.com/template/customer-satisfaction/

This is the free Customer Satisfaction form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Popular, Surveys

Available as a free form template.

## Daily Calories

URL: https://wsform.com/template/daily-calories/

This is the Daily Calories form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Data Erasure Request

URL: https://wsform.com/template/data-erasure-request/

This is the free Data Erasure Request form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: GDPR

Available as a free form template.

## Data Export Request

URL: https://wsform.com/template/data-export-request/

This is the free Data Export Request form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: GDPR

Available as a free form template.

## Date From / To

URL: https://wsform.com/template/date-from-to/

This is the Date From / To form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Debt to Income Ratio

URL: https://wsform.com/template/debt-to-income-ratio/

This is the Debt to Income Ratio form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Disciplinary

URL: https://wsform.com/template/disciplinary/

This is the Disciplinary form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Discrimination Complaint

URL: https://wsform.com/template/discrimination-complaint/

This is the Discrimination Complaint form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Donation

URL: https://wsform.com/template/donation/

This is the Donation form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: E-Commerce

Requires WS Form PRO.

## E-Commerce

URL: https://wsform.com/template/e-commerce/

This is the E-Commerce form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: E-Commerce

Requires WS Form PRO.

## E-Commerce Advanced

URL: https://wsform.com/template/e-commerce-advanced/

This is the E-Commerce Advanced form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: E-Commerce

Requires WS Form PRO.

## Electronic Signature

URL: https://wsform.com/template/electronic-signature/

This is the Electronic Signature form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Signup

Requires WS Form PRO.

## Email Validation

URL: https://wsform.com/template/email-validation/

This is the Email Validation form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Emergency Contact

URL: https://wsform.com/template/emergency-contact/

This is the Emergency Contact form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Employee Review

URL: https://wsform.com/template/employee-review/

This is the Employee Review form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Employment Application

URL: https://wsform.com/template/employment-application/

This is the Employment Application form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Applications

Requires WS Form PRO.

## Event Registration

URL: https://wsform.com/template/event-registration/

This is the Event Registration form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Booking

Requires WS Form PRO.

## Exercise Log

URL: https://wsform.com/template/exercise-log/

This is the Exercise Log form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Health

Requires WS Form PRO.

## Feedback

URL: https://wsform.com/template/feedback/

This is the free Feedback form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Surveys

Available as a free form template.

## File Upload + DropzoneJS

URL: https://wsform.com/template/file-upload-dropzonejs/

This is the File Upload + DropzoneJS form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## File Upload + Preview

URL: https://wsform.com/template/file-upload-preview/

This is the File Upload + Preview form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## File Upload + Progress

URL: https://wsform.com/template/file-upload-progress/

This is the File Upload + Progress form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Final Grade

URL: https://wsform.com/template/final-grade/

This is the Final Grade form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## First + Last Name

URL: https://wsform.com/template/first-last-name/

This is the First + Last Name form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Form Abandonment

URL: https://wsform.com/template/form-abandonment/

This is the Form Abandonment form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Geolocation Lookup by IP

URL: https://wsform.com/template/geolocation-lookup-by-ip/

This is the Geolocation Lookup by IP form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Gift Card Order

URL: https://wsform.com/template/gift-card-order/

This is the Gift Card Order form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: E-Commerce

Requires WS Form PRO.

## Google Address

URL: https://wsform.com/template/google-address/

This is the Google Address form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Address Geolocate

URL: https://wsform.com/template/google-address-geolocate/

This is the Google Address Geolocate form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Address Test

URL: https://wsform.com/template/google-address-test/

This is the Google Address Test form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Map

URL: https://wsform.com/template/google-map/

This is the Google Map form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Routing - Full

URL: https://wsform.com/template/google-routing-full/

This is the Google Routing - Full form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Routing - Map

URL: https://wsform.com/template/google-routing-map/

This is the Google Routing - Map form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Google Routing - Simple

URL: https://wsform.com/template/google-routing-simple/

This is the Google Routing - Simple form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Google

Requires WS Form PRO.

## Grade Point Average

URL: https://wsform.com/template/grade-point-average/

This is the Grade Point Average form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Gym Registration

URL: https://wsform.com/template/gym-registration/

This is the Gym Registration form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Health

Requires WS Form PRO.

## hCaptcha

URL: https://wsform.com/template/hcaptcha/

This is the hCaptcha form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Invoice Request

URL: https://wsform.com/template/invoice-request/

This is the Invoice Request form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Sales

Requires WS Form PRO.

## Length Conversion

URL: https://wsform.com/template/length-conversion/

This is the Length Conversion form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Life Insurance

URL: https://wsform.com/template/life-insurance/

This is the Life Insurance form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Locale Variables

URL: https://wsform.com/template/locale-variables/

This is the Locale Variables form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Math Variables

URL: https://wsform.com/template/math-variables/

This is the Math Variables form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Medical Release

URL: https://wsform.com/template/medical-release/

This is the Medical Release form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Health

Requires WS Form PRO.

## Membership Application

URL: https://wsform.com/template/membership-application/

This is the Membership Application form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Applications

Requires WS Form PRO.

## Messages

URL: https://wsform.com/template/messages/

This is the Messages form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Min / Max of Fields

URL: https://wsform.com/template/min-max-of-fields/

This is the Min / Max of Fields form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Mortgage

URL: https://wsform.com/template/mortgage/

This is the Mortgage form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Mortgage + Costs

URL: https://wsform.com/template/mortgage-costs/

This is the Mortgage + Costs form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Newsletter Signup

URL: https://wsform.com/template/newsletter-signup/

This is the free Newsletter Signup form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Popular, Signup

Available as a free form template.

## Order

URL: https://wsform.com/template/order/

This is the free Order form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Popular, Sales

Available as a free form template.

## Order + Repeater

URL: https://wsform.com/template/order-repeater/

This is the Order + Repeater form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Sales

Requires WS Form PRO.

## Outcome Quiz: Pet

URL: https://wsform.com/template/outcome-quiz-pet/

This is the Outcome Quiz: Pet form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Quizzes

Requires WS Form PRO.

## Pattern Testing

URL: https://wsform.com/template/pattern-testing/

This is the free Pattern Testing form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Demos

Available as a free form template.

## Paycheck

URL: https://wsform.com/template/paycheck/

This is the Paycheck form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Percentage

URL: https://wsform.com/template/percentage/

This is the Percentage form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Personality Quiz

URL: https://wsform.com/template/personality-quiz/

This is the Personality Quiz form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Quizzes

Requires WS Form PRO.

## Points Allocation

URL: https://wsform.com/template/points-allocation/

This is the free Points Allocation form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Surveys

Available as a free form template.

## Pop Quiz

URL: https://wsform.com/template/pop-quiz/

This is the Pop Quiz form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Quizzes

Requires WS Form PRO.

## Post Variables

URL: https://wsform.com/template/post-variables/

This is the free Post Variables form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Demos

Available as a free form template.

## Prefix / Suffix

URL: https://wsform.com/template/prefix-suffix/

This is the free Prefix / Suffix form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Demos

Available as a free form template.

## Progress

URL: https://wsform.com/template/progress/

This is the Progress form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Quiz + #calc

URL: https://wsform.com/template/quiz-calc/

This is the Quiz + #calc form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Quizzes

Requires WS Form PRO.

## Radio Grid

URL: https://wsform.com/template/radio-grid/

This is the Radio Grid form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## reCAPTCHA

URL: https://wsform.com/template/recaptcha/

This is the reCAPTCHA form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Recipient Selector

URL: https://wsform.com/template/recipient-selector/

This is the Recipient Selector form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Rental Application

URL: https://wsform.com/template/rental-application/

This is the Rental Application form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Applications

Requires WS Form PRO.

## Repeater

URL: https://wsform.com/template/repeater/

This is the Repeater form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Repeater + / -

URL: https://wsform.com/template/repeater-2/

This is the Repeater + / - form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Repeater Icons

URL: https://wsform.com/template/repeater-icons/

This is the Repeater Icons form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Repeater Row Count

URL: https://wsform.com/template/repeater-row-count/

This is the Repeater Row Count form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Repeater Up / Down

URL: https://wsform.com/template/repeater-up-down/

This is the Repeater Up / Down form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Request Appointment

URL: https://wsform.com/template/request-appointment/

This is the free Request Appointment form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Booking, Popular

Available as a free form template.

## Request Quote

URL: https://wsform.com/template/request-quote/

This is the free Request Quote form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Sales

Available as a free form template.

## Return on Investment

URL: https://wsform.com/template/return-on-investment/

This is the Return on Investment form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## RGBA Sliders

URL: https://wsform.com/template/rgba-sliders/

This is the RGBA Sliders form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## RSVP

URL: https://wsform.com/template/rsvp/

This is the RSVP form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Booking

Requires WS Form PRO.

## Sales Lead

URL: https://wsform.com/template/sales-lead/

This is the free Sales Lead form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Sales

Available as a free form template.

## Save & Continue

URL: https://wsform.com/template/save-continue/

This is the Save & Continue form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Savings

URL: https://wsform.com/template/savings/

This is the Savings form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Search

URL: https://wsform.com/template/search/

This is the Search form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Select2

URL: https://wsform.com/template/select2/

This is the Select2 form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Style Checkboxes

URL: https://wsform.com/template/style-checkboxes/

This is the free Style Checkboxes form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Demos

Available as a free form template.

## Style Radios

URL: https://wsform.com/template/style-radios/

This is the free Style Radios form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Demos

Available as a free form template.

## Support Request

URL: https://wsform.com/template/support-request/

This is the Support Request form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Contact

Requires WS Form PRO.

## Survey

URL: https://wsform.com/template/survey/

This is the free Survey form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Surveys

Available as a free form template.

## Test All Fields

URL: https://wsform.com/template/test-all-fields/

This is the Test All Fields form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Testimonial

URL: https://wsform.com/template/testimonial/

This is the Testimonial form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Surveys

Requires WS Form PRO.

## Tip

URL: https://wsform.com/template/tip/

This is the Tip form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Calculators

Requires WS Form PRO.

## Travel Booking

URL: https://wsform.com/template/travel-booking/

This is the Travel Booking form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Booking

Requires WS Form PRO.

## Turnstile

URL: https://wsform.com/template/turnstile/

This is the Turnstile form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## User Information

URL: https://wsform.com/template/user-information/

This is the free User Information form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Contact

Available as a free form template.

## Vacation Request

URL: https://wsform.com/template/vacation-request/

This is the Vacation Request form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Human Resources

Requires WS Form PRO.

## Volunteer Application

URL: https://wsform.com/template/volunteer-application/

This is the free Volunteer Application form template for WordPress. To use this template, click 'Add New' from the WS Form form plugin WordPress menu.

Categories: Applications

Available as a free form template.

## Webhook Return Mapping

URL: https://wsform.com/template/webhook-return-mapping/

This is the Webhook Return Mapping form template for WordPress. To use this template, click 'Add New' from the WS Form PRO form plugin WordPress menu.

Categories: Demos

Requires WS Form PRO.

## Optional

- [Blog](https://wsform.com/blog/): Articles and product news about forms in WordPress.
- [5 Reasons to Use Mailster for Your Email Newsletters](https://wsform.com/5-reasons-to-use-mailster-for-your-email-newsletters/): In this post, we’ll look at five reasons to use Mailster to send your email newsletters from WordPress.
- [5 Ways to Build Smarter Forms in WordPress With AI](https://wsform.com/5-ways-to-build-smarter-forms-in-wordpress-with-ai/): Learn how AI transforms form building in WordPress with WS Form, letting you rapidly create complete forms, generate content, moderate submissions, and improve…
- [Add a Legal Disclaimer to WordPress Forms Using Termageddon](https://wsform.com/add-a-legal-disclaimer-to-wordpress-forms-using-termageddon/): Every business website needs legal disclaimers and policies to protect themselves from fines and lawsuits. Unfortunately, legal disclaimers and policies can be…
- [Angie Agentic AI Meets WS Form](https://wsform.com/angie-agentic-ai-meets-ws-form/): WS Form now integrates with Angie, Elementor’s agentic AI, allowing you to create and manage forms in WordPress using natural language.
- [Build Accessible WordPress Forms with WS Form](https://wsform.com/build-accessible-wordpress-forms-with-ws-form/): In this article, we’ll look at the WS Form accessibility tools and see what you can do to ensure your forms are always compliant.
- [Build Forms for WordPress with AI Using Novamira and WS Form](https://wsform.com/build-forms-for-wordpress-with-ai-using-novamira-and-ws-form/): Discover how WS Form works with Novamira to let AI create, manage, style, and embed forms in WordPress using the WordPress Abilities API and MCP.
- [Completing the Stack: WS Form and the WordPress AI Client SDK](https://wsform.com/completing-the-stack-ws-form-and-the-wordpress-ai-client-sdk/): WS Form now integrates with the WP AI Client SDK, aligning with WordPress AI Building Blocks to deliver structured, future ready AI capabilities directly withi…
- [Cool Things You Can Do with Data Grids in WS Form](https://wsform.com/cool-things-you-can-do-with-data-grids-in-ws-form/): Discover how WS Form Data Grids transform simple choice lists into powerful structured datasets for calculations, dynamic grouping, external data sources, and…
- [Create a MailChimp Signup Form with WS Form](https://wsform.com/create-a-mailchimp-signup-form-with-ws-form/): In this article, we’ll look at how to create a Mailchimp signup form both automatically and manually.
- [Create an Online Savings Calculator](https://wsform.com/create-an-online-savings-calculator/): As well as creating forms, WS Form can also be used to create useful online calculators. Learn how with this step-by-step tutorial!
- [Create Multi-Step Forms in WordPress with WS Form](https://wsform.com/create-multi-step-forms-in-wordpress/): Multi-step forms are a great way to reduce the size the form takes on a page.
- [Customize WooCommerce Product Pages with WS Form](https://wsform.com/customize-woocommerce-product-pages-with-ws-form/): In this article, we’ll see how to customize WooCommerce product pages with the WS Form PRO Product Premium Integration for WooCommerce.
- [Customize WordPress Content with PersonalizeWP and WS Form](https://wsform.com/customize-wordpress-content-with-personalizewp-and-ws-form/): PersonalizeWP is a WordPress plugin that allows you to customize your WordPress content based on your audience. Create custom rules based on profiles, segments…
- [Easy Form Tracking for WordPress with Conversion Bridge](https://wsform.com/easy-form-tracking-for-wordpress-with-conversion-bridge/): Discover how to track WordPress form conversions in minutes using Conversion Bridge and WS Form without code or complicated setup.
- [Fun with Forms: Celebrate Form Submissions with a Confetti Shower](https://wsform.com/fun-with-forms-celebrate-form-submissions-with-a-confetti-shower/): Learn about the WordPress Confetti plugin, a delightful little invention designed to make your website's interactions as fun as a surprise party!
- [Fun with Forms: Mad Libs Style](https://wsform.com/fun-with-forms-mad-libs-style/): At WS Form, we share a lot about how forms help collect information, complete calls to action, make sales, and more. But what about some good old-fashioned fun…
- [How to Add an Address Lookup on WordPress Forms](https://wsform.com/how-to-add-an-address-lookup-on-wordpress-forms/): WS Form is compatible with Google Maps, but it can do a lot more than display them. WS From includes an address lookup feature that will autofill the address f…
- [How to Add Cloudflare Turnstile to WordPress Forms](https://wsform.com/how-to-add-cloudflare-turnstile-to-wordpress-forms/): Turnstile is a new field for WS Form that improves and simplifies spam protection. It uses the Cloudflare Turnstile widget to protect forms from spam without r…
- [How to Add Icons to Form Fields in WordPress (Font Awesome, Dashicons & SVG)](https://wsform.com/how-to-add-icons-to-form-fields-in-wordpress-font-awesome-dashicons-svg/): Learn how to add Font Awesome, Dashicons, SVG, and other icons to forms for WordPress using WS Form's flexible HTML-based field, button, and option settings.
- [How to Block IP Addresses in WordPress Forms to Prevent Spam](https://wsform.com/how-to-block-ip-addresses-in-wordpress-forms-to-prevent-spam/): Learn how to block IP addresses in WordPress forms using WS Form’s built-in tools, including no-code settings and developer-friendly hooks, to effectively prev…
- [How to Block Keywords in WordPress Forms to Prevent Spam](https://wsform.com/how-to-block-keywords-in-wordpress-forms-to-prevent-spam/): Learn how to block spam in WordPress forms using WS Form’s powerful keyword filtering features, including manual entries, filter hooks, and a blocklist premium…
- [How to Build a QR Code Scanner in WordPress](https://wsform.com/how-to-build-a-qr-code-scanner-in-wordpress/): Learn how to build a QR code scanner in WordPress using WS Form to scan badges, validate RSVPs, trigger redirects, and send scanned data to APIs or services li…
- [How to Build a WordPress Donation Page with WS Form](https://wsform.com/how-to-build-a-wordpress-donation-page-with-ws-form/): In this article, we’ll look at how to create a donation page using both Stripe and WooCommerce WS Form Pro premium integrations. They work independently, so no…
- [How to Build an Effective Landing Page](https://wsform.com/how-to-build-an-effective-landing-page/): A landing page can serve many purposes, but the primary reason is to present a call to action that site visitors will want to follow through on. In many cases…
- [How to Build an Outcome Based Quiz](https://wsform.com/how-to-build-an-outcome-based-quiz-form/): Creating an outcome-based WordPress quiz form in WS Form PRO is a great way to engage your audience and provide personalized results based on their answers.
- [How to Build High Converting Forms](https://wsform.com/how-to-build-high-converting-forms/): High converting forms are crucial for sales and marketing. A form designed with conversions in mind follows different design concepts than standard forms. In t…
- [How to Build Powerful Calculator Forms in WordPress](https://wsform.com/how-to-build-powerful-calculator-forms-in-wordpress/): Build powerful calculator forms in WordPress using WS Form's #calc() variable with practical formulas, mathematical functions, and real-world examples you can…
- [How to Create an MCP Server in WordPress with the Abilities API and MCP Adapter](https://wsform.com/how-to-create-an-mcp-server-in-wordpress-with-the-abilities-api-and-mcp-adapter/): Learn how to build an MCP server in WordPress using the Abilities API and MCP Adapter, making your site’s functionality accessible to AI clients like VS Code a…
- [How to Create InstaWP WordPress Websites with WS Form](https://wsform.com/how-to-create-instawp-wordpress-websites-with-ws-form/): In this post we see how to create an InstaWP website and access the site from a form created in WS Form. Discover the single click templates that make developi…
- [How to Display WS Form Entries in a Searchable Table on Your WordPress Site](https://wsform.com/how-to-display-ws-form-entries-in-a-searchable-table-on-your-wordpress-site/): In this detailed tutorial, we'll show you how to integrate the WS Form PRO and Posts Table Pro plugins to display WS Form Entries in a searchable table on your…
- [How to Track UTM Parameters & Other Lead Source Data in WS Form](https://wsform.com/how-to-track-utm-parameters-other-lead-source-data-in-ws-form/): In this article, we’ll show you two ways you can capture UTM parameters and other lead source data with each form submission.
- [How to Use OpenAI in WordPress Forms](https://wsform.com/how-to-use-openai-in-wordpress-forms/): OpenAI is a powerful tool that can improve your WordPress forms with interactive conversations, editing, images, and more. Adding OpenAI to WordPress forms is…
- [How to Use WordPress Block Patterns to Build a Signup Page](https://wsform.com/how-to-use-wordpress-block-patterns-to-build-a-signup-page/): This tutorial demonstrates how to build a quick and easy signup page for your website using WordPress block patterns.
- [Meet the New WS Form Layout Editor](https://wsform.com/meet-the-new-ws-form-layout-editor/): If you spend your day building forms, the interface matters. Over the past few years we've received hundreds of suggestions from the WS Form community about wa…
- [Power Up Your Funnel Strategy with Groundhogg and WS Form](https://wsform.com/power-up-your-funnel-strategy-with-groundhogg-and-ws-form/): Groundhogg is a powerful marketing automation and CRM plugin for WordPress, designed to help businesses streamline their email marketing, lead management, and…
- [Push WordPress Form Submissions to Google Sheets](https://wsform.com/push-wordpress-form-submissions-to-google-sheets/): Pushing WordPress form submissions to Google Sheets can be easily achieved using WS Form.
- [Reduce Form Spam with AbuseIPDB and WS Form](https://wsform.com/reduce-form-spam-with-abuseipdb-and-ws-form/): Learn how WS Form uses AbuseIPDB IP reputation data to identify suspicious WordPress form submissions, improve spam scoring, apply country and domain blocklist…
- [Reduce Spam from WordPress Forms with WS Form](https://wsform.com/reduce-spam-from-wordpress-forms-with-ws-form/): Spam can be both annoying and harmful to your website. One of the advantages of WS Form is that utilizes several techniques to reduce WordPress spam.
- [Safely Using AI API Keys in WordPress Connectors](https://wsform.com/safely-using-ai-api-keys-in-wordpress-connectors/): Learn how to safely use AI API keys in WordPress Connectors, including best practices for OpenAI, Anthropic, Gemini, spending limits, environment variables, an…
- [The Art of the Message](https://wsform.com/the-art-of-the-message/): The words we use matter. Even the words on something as small as a button can affect whether or not someone clicks that button. Word choices can inspire or det…
- [The Right Way to Build Forms with AI](https://wsform.com/the-right-way-to-build-forms-with-ai/): Use WS Form as the form engine. Use AI to tell it what to build, how to change it, and what to inspect.
- [The Top 10 WordPress Form Plugins](https://wsform.com/the-top-10-wordpress-form-plugins/): Discover the top 10 WordPress form plugins that combine power, performance, and flexibility to help everyone from beginners to developers create smart, high co…
- [Top 2025 Black Friday & Cyber Monday WordPress Deal Lists](https://wsform.com/top-2025-black-friday-cyber-monday-wordpress-deal-lists/): This is a round-up of round-ups! As Black Friday and Cyber Monday approach, the hunt for the best WordPress deals heats up. But with so many offers scattered a…
- [Translate Forms for WordPress with WS Form](https://wsform.com/translate-forms-for-wordpress-with-ws-form/): Learn how to build multilingual WordPress forms with WS Form using WPML, Polylang, TranslatePress, and Weglot.
- [Using Forms to Increase Blog Engagement](https://wsform.com/using-forms-to-increase-blog-engagement/): In the spirit of Matt Mullenweg's birthday wish, not only do we present this post, but also set out some ideas of how WS Form can help you blog, too.
- [Website Resolutions for 2022](https://wsform.com/website-resolutions-for-2022/): It’s almost 2022. Is your website ready or stuck in the past? You built a website (or had someone build it for you), so you’re done, right? Nope. Not even clos…
- [What Does Usage Tracking in Easy Digital Downloads Really Mean?](https://wsform.com/what-does-usage-tracking-in-easy-digital-downloads-really-mean/): What does 'Join the EDD Community' mean and what data gets shared if you enable this feature in Easy Digital Downloads?
- [Why You Should Never Use Nulled WordPress Plugins](https://wsform.com/why-you-should-never-use-nulled-wordpress-plugins/): If you've come across a website that offers plugins at dramatically reduced prices or even offers it for free, then it is highly likely you've stumbled across…
- [WordPress 7 Introduces an AI Layer. WS Form is Ready.](https://wsform.com/wordpress-7-introduces-an-ai-layer-ws-form-is-ready/): WS Form is ready for WordPress 7, bringing the new AI layer into real-world use with AI-powered form creation and intelligent workflows built directly into you…
- [WordPress Form User Tracking with WS Form](https://wsform.com/wordpress-form-user-tracking-with-ws-form/): WS Form has many internal and external user-tracking features that can be enabled and customized. In this article, we’ll discuss WordPress form user tracking w…
- [WS Form Releases Version 1.10 Featuring a Powerful New Form Styler for WordPress](https://wsform.com/ws-form-releases-version-1-10-featuring-a-powerful-new-form-styler-for-wordpress/): WS Form, the next-generation WordPress form builder, is thrilled to announce the release of version 1.10.x, featuring the highly anticipated WS Form Styler.
- [WS Form Unveils Revolutionary OpenAI Powered Feature: AI Generated Forms](https://wsform.com/ws-form-unveils-revolutionary-openai-powered-feature-ai-generated-forms/): WS Form, a popular and powerful WordPress form plugin, is thrilled to announce the launch of an innovative feature that will transform the form-building experi…