Form Integration
In this article, we're going to discuss the Form Integration Element and its settings.
The primary purpose for creating our Form Integration Element was to give users a singular Element to manage the output of forms across our supported providers. Supported form integration types include:
- Embed
- WPForms
- Gravity Forms
- Contact Form 7
When first adding your Form Integration Element, you will see the following control groups:
![Form Integration](https://s3.amazonaws.com/docs-content.theme.co/cornerstone/elements/form-integration/images/form-integration-01.png)
Take note that the Type is Embed by default, with the Content field directly below for you to place your embed code if this is your desired method of output. Additionally, controls for Width, Max Width and Margin are all available to assist with simple placement adjustments.
If a Type other than “Embed” is selected, the embed input will be replaced by a selection of options relevant to each specific form plugin (e.g. form select, title display, et cetera).
Using Parameters
Using Dynamic Options you grab a list of forms for a given plugin. The following Dynamic Options are available.
- WPForms
dynamic:wpforms
- Contact Form 7
dynamic:contact_form_7
- Gravity Forms
dynamic:gravityforms
And this is what it would look like as a simple select parameter using WPForms.
{
"form": {
"type": "select",
"label": "Form",
"options": "dynamic:wpforms"
}
}
You would then place {{dc:param:form}}
into the Form
area of WPForms on the Form Integration Element.
![Form Integration with Parameters](https://s3.amazonaws.com/docs-content.theme.co/cornerstone/elements/form-integration/images/form-integration-with-parameters.png)
You can also add onto this adding in a select for the form type. And Dynamic Options for each form type.
{
"form_type": {
"type": "select",
"initial": "embed",
"options": [
{
"value": "embed",
"label": "Embed"
},
{
"value": "wpforms",
"label": "WPForms"
},
{
"value": "contact-form-7",
"label": "Contact Form 7"
},
{
"value": "gravity-forms",
"label": "Gravity Forms"
}
]
},
"embed": {
"type": "code",
"height": 5,
"when": "eq(form_type, 'embed')",
"lint": "html"
},
"wpforms": {
"type": "select",
"label": "WPForms",
"options": "dynamic:wpforms",
"when": "eq(form_type, 'wpforms')"
},
"contactform7": {
"type": "select",
"label": "Contact Form 7",
"options": "dynamic:contact_form_7",
"when": "eq(form_type, 'contact-form-7')"
},
"gravityforms": {
"type": "select",
"label": "Gravity Forms",
"options": "dynamic:gravityforms",
"when": "eq(form_type, 'gravity-forms')"
}
}
You would then place in the Form type into the Type
control in Cornerstone with {{dc:param:form_type}}
. And each type could use the valid Dynamic Content select for it's type. So {{dc:param:wpforms}}
would go into the WPForms section Form
control like the previous example.
See something inaccurate? Let us know