Make it easy for your visitors to contact you. Build highly customized contact forms, adding and arranging various field types in an even more modular approach.
The Form below contains some of the various field types that are available within this tool. In this example we've opted for the new Floating labels style for the majority of our fields.
PLEASE NOTE: The example form below is not configured to send email and should not be used for support.
The Form tool combines the previous Form and Form Pro tools from Foundry v2 into a sinlge powerhouse solution. This new tool takes things up a notch, adding more features, a more modular layout stystem, and much more, opening up even more possibilities.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
The Form tool provides a helpful setup checklist within Edit Mode to assist you in setting up your email and SMTP settings. These are some of the most important things to get correct in configuring your form. This setting is on by default. We highly recommend gong through the checklist. Once complete you can then hide it from view in Edit Mode.
Enabling this feature shows an example of the Alert dialoges in Edit Mode. This helps you when styling these items within the Form's settings palette.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
It is highly recommended that you use your host's SMTP server for sending the emails from your contact form. In fact some hosts require you to use SMTP when sending emails through a form.
When this setting is enabled you'll be presented with fields asking for your SMTP server information. All of this information must be completed correctly.
Please consult with your host if you run into problems configuring your SMTP server. We cannot assist you with this as it varies from one host to the next.
These settings are mandatory. They must be completed and correct to receive emails from the Form tool. Be sure to double-check all of these settings before publishing your page. These items are covered in the Edit Mode Form Setup Guide as well.
This is the name of the recipient of the email that will be sent by the form. This is generall the name of the owner of the site.
This is the email address of the recipient of the email that will be sent by the form. This should be an email address where you wish the form content to be delievered to.
When enabled the Form will use the visitor's Name, from the form, as the From Name. This means the email will appear to be from this person in the receipient's email app.
If not enabled you will be able to manually enter a name. All emails sent from this form will appear to be sent to the form's receipient from the manually provided name.
This is the email address of the server will use to actually send the form's contents. This should be an email address that shares a domain name with the site where this form resides.
If you're building a site for yourself for example this would be your email address. If the site is www.myawesomesite.com then the email address you use should be related to that domain and contain the myawesomesite.com domain name. For example: john@myawesomesite.com
Some hosts will allow you to use an unrelated email address, but this is becoming less common. It is more reliable to use an associated email address.
The Form tool will use the visitor's supplied email address as the Reply-To address. This ensures thaty when you reply to emails sent via the form that it will go to the visitor as intended.
Enabling this feature will send a copy of the form submission not just to the receipient that you've specified in the required settings above, but also to the visitor's email address that they supplied when submitting the form.
Here you can enabled up to four different BCC email addresses. This means you can have the form submission sent to up to four other people in addition to the form receipients supplied in the required email setting section.
This setting, when enabled, will place the Name and Email fields in the form side-by-side in a row together. This is to make the layout more clean and condensed. If you've disabled the Name field for your form this setting will have no effect and the Email field will take up a full row on its own.
When disabled the Name and Emal field get their own separate rows.
This feature is enabled by default.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
Allows you to add a Name field to your form for the visitor to submit their name. This is useful so you know who it is you're replying to when the form has been submitted.
The Form tool does not require you to use this field, but we highly suggest it.
This is the text that will be used as a label in the form for the Name field.
This is the text that will be used as placeholder text in the background of the Name field. The placeholder simply gives the visitor an idea of what is expected of them for that field.
You can choose from 3 different types of form field labels:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
The Email field is required for all forms. It is required because it is used for the Reply-To address for the email that is sent via the form.
This is the text that will be used as a label in the form for the Email field.
This is the text that will be used as placeholder text in the background of the Email field. The placeholder simply gives the visitor an idea of what is expected of them for that field.
You can choose from 3 different types of form field labels:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
This is the symbol that will be added to the field label to indicate that this field is required. As previously stated, this field is always required.
The Subject field is required for all forms. It is required because it is used for the subject line within the email that is sent via the form. By default the subject can be user submitted, from the visitor when they fill out the form. Alternatively you can opt to have a predefined subject line that you create, or a drop down that you've pre-populated with preset subjects.
This is the text that will be used as a label in the form for the Subject field if you're using the User Submitted or Preset Drop Down Subjects.
This is the text that will be used as placeholder text in the background of the Subject field if you've opted to use the User Submitted Subject field. The placeholder simply gives the visitor an idea of what is expected of them for that field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
This is the symbol that will be added to the field label to indicate that this field is required. As previously stated, this field is always required.
Here you can customize the text on for the label of the Submit button. The submit button is used to send the content of the form if all required information has been provided.
Enabling this feature adds the appropriate ARIA Label to the Submit Button for accessibility.
When enabled you'll be given a field for the ARIA Label text.
This feature is enabled by default.
Here you can adjust the size of the Submit button using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
When you want to have the Submit button take up the full-wdith of its parent container you can use the block button feature. This setting can be toggled on or off at each of the 6 responsive breakpoints. This is handy for setting a block button for mobile at the Small and Extra Small breakpoints.
The Submit Button has several different style modes to choose from. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
Provides color pickers for styling the Submit Button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs.
When using Preset mode for your Button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.
Used to add a decorative shadow to the Submit Button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
Allows you to choose which side of the Submit button's text you wish to place the icon. You can choose from left, right or place the icon in a floating badge on the top right corner of the button.
When using the Badge setting you'll also be provided settings for styling the background and icon color as well as a shadow for the badge. You'll be able to choose from using a preset color palette option for the background or custom color picker.
Here you can choose whether you'd like the content of the Name and Email fields included in the body of the sent email. Both are enabled by default.
This is the message that will be displayed to the visitor when the form has sucessfully been submitted. Sucessful submission will trigger the message whether the server succeeds in transmitting the email or not, as the form itself has no way to know if the server sucessfully transmits the sent email.
This feature allows you to provide the visitor with content if the form is succesfully submitted. When enabled this feature adds a button to the Success Message.
That button can be linked to a page on your site, hidden or not, or linked to a resource such as a ZIP file in your Resources.
When enabled you're provided controls to customize the text on the button as well as set the link.
This is the message that will be displayed to the visitor when the server fails to send the form content.
This section provides you controls for setting the style of various items within your form. Each of these items allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided the option of choosing a custom style using a color picker.
The items that you can customize using these presets / color picker tools are as follows:
This section provides you controls for setting the style of the Success Message and elements within it or related to it. Each of these items allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided the option of choosing a custom style using a color picker.
The items that you can customize using these presets / color picker tools are as follows:
You can choose from several different style modes for the Success Message Gated Content button. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
Provides color pickers for styling the button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs.
When using Preset mode for your Button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
Here you can adjust the size of the button using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
You can customize the font weight for both the form field text and the labels.
Enabling this feature adds some specialized javascript to the page which can help in preventing spam bots from successfully filling out the form, and thus cutting down on form spam.
Thwarting bots in this way, using javascript, means that for the form to be submitted the visitor must have javascript in their browser enabled. Nowadays it is pretty uncommon for most visitors to turn off javascript though, so I think it is pretty safe to use this feature for protecting against bots. That said, I have made it an optional feature because of this, and made it disabled by default. If you’re getting spam from your forms though, you might try enabling this new feature.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Note: Choosing the Floating Label Type will disable the Height setting for the Text Area field type.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
Allows you to adjust the height ot the Text Area field. This value is measured in rows. This is disabled when using the Floating Label Type.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
Enabling this feature gives you the ability to set a start value for the Number field. You'll be given a setting to configure the Start Value when enabled. This value, if not changed by the visitor, will be submitted as-is. If not enabled no value is assigned to the number field unless the visitor provides one.
You can enable, and set a minimum and / or maximum value for your number field. When enabled you'll be given field(s) for setting these minimum and maximum values.
When enabled you'll be given a field to set a step value for your number field. Having a step value assigned to the field means that when the visitor clicks the up or down arrows on the field to change the value. the value will change in incrments of your assigned step value.
The step value only affects the increasing or decreasing of the field value via the up and down arrows. The visitor may still manually type any number they like,
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
This advanced feature allows you to create a custom text pattern using regular expressions. When enabled you'll be given a field to create your own regular expression.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
The Select field type not only has settings for the field, but it also contains child items of its own as well. These Child Items also have a couple of settings.
This is the text that will be shown as the individual item's label within the Select drop down.
The select item's value is what will be shown in the sent email. Generally the value and label are the same. You can opt to provide a separate value from the label that is shown to the visitor. This custom value will be sent in the form's email instead of the label. This setting is enabled by default.
When the "Label & Value Are The Same" feature is disabled you'll be given this field to provide a unique value that will be sent in the form's email.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
Presents the normal checkbox as a styled switch when enabled. This is a purely cosmetic feature and does not change how the checkbox itself functions.
When enabled this setting allows you to place more than one Checkbox side-by-side in the layout.
Some checkboxes are more important than others for out visitors. Because of this we've made it easy to change the size of each checkbox individually. We recommend using this feature sparringly.
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
Enabling this feature sets the individual checkbox to true by default. If the visitor does not change the checkbox's status it will be submitted as checked when the form email is sent.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Each Radio Item is a label unto itself. You can add an overaching Legend Label to the entirety of the Radio group item by enabling this feature.
This is the text that will appear as the Legend Label for this Radio group.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
The Radio field type not only has settings for the field, but it also contains child items of its own as well. These Child Items also have a couple of settings.
This is the text that will be shown as the individual item's label within the Radio group.
The radio item's value is what will be shown in the sent email. Generally the value and label are the same. You can opt to provide a separate value from the label that is shown to the visitor. This custom value will be sent in the form's email instead of the label. This setting is enabled by default.
When the "Label & Value Are The Same" feature is disabled you'll be given this field to provide a unique value that will be sent in the form's email.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
By default we provide a regular expression here to check and make sure what the visitor enters is a valid phone number. This advanced feature allows you to create a custom text pattern of your own as well using your own regular expressions.
If you would like a phone number field without needing the visitor to match a specific phone number format you might opt for using a Text field type instead.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option. By default we've set the Note for the Phone field type to match the regular expression we've set for the Pattern.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
The Floating option places the label within the field. When the visitor clicks on a field, or the field gains focus, the label floats up to the top of the field in smaller type.
This label type is the most space saving overall, and provides a modern feel for your forms.
The placeholder text is not used with this option.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
This is the internal unique ID for this individual field. It is important that every field has a unique ID name. Additionally Field Names should not contain spaces or special characters.
Most often it is a good idea to keep field names to one word. If you need to use more than one word you can use an underscore to separate the words.
Normally the Date field provides a normal form field, that when clicked triggers a popup calendar for the visitor to pick a date or range of dates from.
Enabling Inline Mode inserts the calendar directly into the form itself instead triggering a popup for date selection.
Determines your preferred popup location when the date field is clicked.
Here you can choose the number of columns and number of calendars shown for the date picker. The default is 1 for each. While more than 2 is possible, we generally recommend capping both at 2.
By default the Date field type allows your visitors to pick a single date. Enabling this feature will allow visitors to select a range of dates instead.
When enabled you'll also be able to choose the minimum and maxiumum number of dates the visitor can select from the calendar.
Here you can choose how the date will be formatted in the Date field and sent form email.
Allows you to customize what day of the week is considered the start of the week in the calendar display.
Adds a reset button to the calendar to let the visitor clear any date(s) they may have selected.
Only applied when using more than one caledar in a Layout. When enabled each calendar will have a previous and next control for navigating months. When disabled the date picker as a whole will have just one previous and next pair of arrow controls.
Selecting a date, when not using a range selector, will automatically apply the date to the Date field. When disabled the apply button will need to be clicked to apply the date. This is enabled by default.
When enabled this feature will add the week number for each week on the calendar for the visitor to reference.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option. By default we've set the Note for the Phone field type to match the regular expression we've set for the Pattern.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
The Date picker, specifically the calendar portion, has a lot of elements that can be styled using Foundry preser color palette features, custom color pickers and more. These are handled similarly to other areas of Foundry and how the presets and color pickers work there, so we'll just touch on which aspects are customizable here:
Adds a soft shadow to the calendar. You're able to customize the shadow color when you've enabled this feature.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
You can have ONE and only ONE Attachment field per form.
This is the text that will appear as the label for this field.
When enabled the label above will be added to the sent email along with the visitor's provided content for this field.
You can choose from 3 different types of form field labels. These are applied only to the User Submitted or Preset Drop Down Subject field types:
The label if place above the field, with the placeholder text inside of the field.
The label if place above the field, with the placeholder text inside of the field, as in the Standard label type. The difference is that this variant also includes an icon that is appended to the beginning of the field.
Removes the label from the Attachment field.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. This setting will determine which library you'll be using for the optional icons that can be added to fields within the Form. By default the Icon Library setting is set to Bootstrap.
A preset list of icons relating to the icon library you've chosen. These will be applied to the field when you choose the Standard with Icon label type.
If you don't see an icon in the list above that you want to use, you can supply the unique icon ID from your preferred icon library here. The icon library options, and their unique IDS, can be found here:
You can choose to have the Attachment field be the normal, standard field size, or instead make it the large preset size.
If you want to require that the visitor fill out a field you can do so by enabling this feature. This will prevent the form from being submitted unless they have provided the appropriate content for this field.
When this is enabled a "Required Indicator" will be added to the label for this field.
This is the symbol that will be added to the field label if you've chosen to enable the "Require this Field" option above.
Enabling this feature will add a small note below the field for your visitors. You can use this to provide them instructions regarding this field.
This is the text that will appear as the note below this field if you've enabled the above option. By default we've set the Note for the Phone field type to match the regular expression we've set for the Pattern.
Enabling this feature allows you to add a static note to the sent email that resides just below this field's data within the sent email.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
The Form tool allows you to use many of Foundry's modular layout tools within it for creating unique forms. We've included the following tools for use within the Form as child items:
All of these tools within the Form work just as they do outside of the Form. Please refer to each of these tool's individual documentation pages for instructions and reference on how to use them.