Form Settings

The “Form” block contains a variety of settings both for styling and functionality purposes that allow you to make the form fit your theme’s style. Below, we will find all form settings that you can configure.

Form

The form settings contain information about the form.

Setting NameDescription
Form IDThis is the Form unique ID.
Form CSS SelectorYou can use the Form ID CSS Selector to apply custom CSS to your form.
Form NameYou can define a custom name to your form here.

Design

Form Settings

Define design settings related to the form.

Setting NameDescription
Max WidthSet the max width of the form.

Fields Settings

Define design settings related to the form fields.

Setting NameDescription
Space between fieldsSet the vertical space between form fields.

Label Settings

Define design settings related to the form field labels.

Setting NameDescription
Text ColorSet the label text color.
Font SizeSet the label font size.
Label PositionSet the label position.

Define whether it will appear at the top of on the left side.
Required Field IndicationSet whether to display an asterisk next to required fields.

Input Settings

Define design settings related to form input fields.

Setting NameDescription
Text ColorSet the input text color.
Placeholder Text ColorSet the input placeholder text color.
Background ColorSet the input background color.
Font SizeSet the input font size.
PaddingSet the input padding.
BorderSet the input border.
Border RadiusSet the input border radius.

Actions

Define what actions to perform after the form has been successfully submitted.

You can read detailed documentation on each supported integration on the Integrations documentation page.

Behavior

Define behavior settings related to the form.

Setting NameDescription
Enable Anti-Spam HoneypotEnabling this adds an anti-spam protection against bots trying to submit your form.

This should reduce any spam submissions you get so we recommend having it enabled.

Submission

Define settings related to the submission.

Setting NameDescription
Submission ActionDefine what action to perform after the form has been successfully submitted.

Choose between displaying a message to the user or redirecting the user to a specific URL.
Message After SuccessSet the success message.
Redirect URLEnable storing submissions on your server.
Store SubmissionsEnable to store submissions on your server.
StateSelect whether to store the submission as Published or Trashed.
Reset FormSet whether to reset the form when it’s successfully submitted.
Hide FormSet the URL to redirect the user.

Validation

Define error message validation settings.

Setting NameDescription
Error Font SizeSet the error message font size.
Error Text ColorSet the error message text color.
Required Field MessageSet the message that will appear when the form is submitted and the required fields are not filled.
Invalid Email MessageSet the message that will appear when an invalid message is entered.
Honeypot Field Trigger MessageSet the message that will appear when the form is submitted but the honeypot field is triggered.

Success Message

Define success message settings.

Setting NameDescription
Text alignmentDefine the alignment of the success message.
Font SizeSet the font size.
Font TypeSet the font type.
Font WeightSet the font weight.
Font StyleSet the font style.
Text ColorSet the text color.
Background ColorSet the background color.
PaddingSet the padding of the message.
MarginSet the margin of the message.

Smart Tags

Email Notification fields as well as the “Message After Success” accept Smart Tags. Some submission-based Smart Tags can be found below.

{fpf all_fields}

Hide labels: {fpf all_fields –hideLabels=true}

Exclude empty values: {fpf all_fields –excludeEmpty=true}

Exclude certain fields: {fpf all_fields –excludeFields=text1,dropdown2}

Exclude certain field types: {fpf all_fields –excludeTypes=text,hidden}

Display a field’s value: {fpf field.FIELD_NAME}. Where FIELD_NAME is the Field Name.

Was this helpful?