This article will show you how to transform plugin forms via the Subscribe editor.
Every form can be transformed to any plugin form via the editor. Plugin form properties (type, action, name, campaign) are defined using data tags. Those tags can be added manually to the HTML or via the configuration settings on the right rail when selecting the form.
To define CRM form actions via HTML, use:
For lead form
data-gjs-sf-plugin-type="import-lead"For order form
data-gjs-sf-plugin-type="import-order"For upsale form
data-gjs-sf-plugin-type="import-upsale"To define CRM campaign ID on all forms
data-gjs-sf-campaign-id="CAMPAIGN_ID"To define CRM plugin name on all forms (this is plugin setup id, required to identify plugin type and config)
data-gjs-sf-plugin-name="PLUGIN_SETUP_ID"This is useful if you want to create a template project that can be fully set up via the template wizard.
Lead form in a template project would look like this:
<form data-gjs-sf-plugin-type="import-lead" data-gjs-sf-campaign-id="{{campaign-id}}" data-gjs-sf-plugin-name="{{sf-wiz-crm-setup}}">
<!-- ADD INPUT FIELDS -->
</form>
If you set up an empty token for 'campaign-id' then the campaign ID can be set in the tokens instead of the form configurator. Same principles can be applied to other forms, like order and upsell forms.
Form inputs
Form input names should be the following:
Lead Form:
- firstName
- lastName
- address1
- address2
- city
- country
- state
- zip (or postalCode)
- emailAddress
- phoneNumber
Order Form:
-
billShipSame (checkbox or radio
- Radio yes = 1, no = 0
- Checkbox checked is 1
- billFirstName
- billLastName
- billAddress1
- billAddress2
- billZip (or billPostalCode)
- billCity
- billCountry
- billState
- cardNumber
- cardSecurityCode
- cardMonth
- cardYear
Note: Order and upsell forms can optionally have one or more 'product' input fields. Those products will be submitted along with cart and other products.
Form setup in Subscribe block editor
Setting up a form is also possible using Subscribe Form Setup interface available when there is a form element in your project.
1. Once a form element has been created either through dragging a form block to the project or by creating one with HTML in the code editor, click on Locate Form button.
2. To display the settings available for this form, click on the Gear icon. This tab will display all the available setup options for your form.
3. To display the individual settings for each input field inside your form, click on the desired input.
4. Select the gear icon to display the customizable properties available to it. Update properties accordingly.
Other Resources