Add and Edit Form
- Arunima Kurup Prasad
- Vijay Alexander
- Amish Ladhu
Platform URL | https://[enterprise].cvtr.io/v2/forms |
|---|---|
API Endpoints | Add form via Add button/CSV file and Edit form
|
Epic | |
Document status | REVIEWED |
Document owner | @Danny Hannah @Adam Carter |
Technical writers | @Amish Ladhu @Arunima Kurup Prasad |
Related Content |
Feature Overview
Forms provide a centralised management area allowing users to Add and Edit forms which can then be associated to campaigns to allow capturing of lead information.
Adding a new form:
Navigate to ‘Forms’ in the sidebar
On the ‘Active forms' tab, click the ‘Add’ button
Adding a new form via CSV:
Adding a form via CSV allows users to quickly build a form which may have a lot of form fields that would take to long to add if undertaken manually.
Navigate to ‘Forms’ in the sidebar:
On the ‘Active forms' tab, click the ‘Add Via CSV’ button:
Download the CSV template from the blue banner:
Drag and drop, or browse for your populated CSV file:
Enter a form name and a slug:
Field Name | Required | Notes |
Name | The form name | |
Slug | The slug is the URL for your form which will format as: |
Click the ‘Save’ button. This will take you to the form builder of which follows the same building/editing process as the ‘Editing Forms’ section below. Fields will automatically be added as Text fields and can be changed if required during the editing process.
Editing forms:
Navigate to ‘Forms’ in the sidebar
On the ‘Active Forms’ tab, in the ‘Actions’ column, click the ‘Edit’ button on the form that requires changes
Form steps and navigation:
There are 5 sections when editing a form. Once the ‘setup’ step is complete, all other stages will then be accessible.
Navigating between the steps can be done by clicking the tab names, or by clicking the ‘Back’ and ‘Next’ buttons in the panel footer. The ‘save’ button will become enabled once the ‘setup’ step is completed.
Form ‘Setup’ step:
On the setup tab, complete the required fields:
Field Name | Required | Notes |
Name | The form name | |
Slug | The URL for your form which will format as: | |
Language | This is a whitepaper feature where forms with different languages can be created. More details here. | |
Embed Type | Forms can be embeded via a Javascript tag or iframe tag. If convertr ‘landing page’ functionality is being used then iframe is the correct ‘type’ to use. If embeding a form manually on your own website (likely in conjunction with whitepaper functionality) then the ‘javascript’ option is the tag type to use. | |
Auto iframe resizing | If the ‘iframe’ embed type is chosen and iframe resizing is enabled, the height of the iframe will automatically adjust itself depending on the content of the iframe, preventing scrollbars on the iframe. If disabled, the height of the iframe will have to be manually declared vis custom CSS declarations to avoid scrollbars when embeding the form. |
Form ‘Fields’ step:
Default fields:
By default, various fields will be included with a new form:
First Name
Last Name
Email Lookup
Telephone Lookup
Optin
Submit
Field options:
Each field has various settings:
Field Name | Required | Notes |
Type | The type of input. This includes standard HTML field types, ESP lookups, multiple choice fields, prepopulated lists, stanard lookups (e.g. email, telephone, address, etc.), whitepaper related fields and other miscellaneous fields. | |
Name | The name of your field (which is used as the field label once the lead is captured against this form) | |
Enable | This allows field types to be added to the form, and upon disabling, it can be hidden from view when viewing the form. | |
Required | Dictates if the form is a required field when being completed. | |
Required Message | (If required message is toggled on) | Works in conjunction with the ‘required’ toggle where a tooltip appears containing the text entered in this setting item if the user clicks ‘Submit’ on the form without competing the field specified. |
Label | Caption for your field type which will show above your input field. | |
Placeholder | A short hint to describe the expected value of an input field. | |
CSS Class | Add a custom CSS classon the field HTML container. |
Not all fields allow editing of all of the above settings, where any settings that are not available for setup will be disabled and greyed out.
Field settings:
Each field may have additional settings which can be accessed via this button. Each field type may have different settings and are documented here (awaiting documentation link).
Field Actions:
Each field has various actions:
Move
Click and drag the button to move the field into the desired position on the form. This position will be reflected when viewing the live form.
Delete
This will remove the field from the form.
Add Input
This buttons allows adding of more fields to your form.
Form ‘Thanks Page’ step:
This section is documented here.
Form ‘CSS’ step:
This tab allows custom styles to be added to the form.
Form ‘Javascript’ step:
This tab allows custom Javascript to be added to the form.
Form preview:
The form preview allows users to see any changes that have been made to the form. It will reflect any changes made in the ‘Fields Page’ tab, ‘Thanks Page’ tab, ‘CSS’ tab and ‘Javascript’ Tab.
When a change is made to the form, clicking the ‘Refresh’ button will apply any changes made to the preview output.
There is a different tab for previewing the ‘Fields Page’ and the ‘Thanks Page', each of which require clicking the ‘Refresh’ button to see any new changes made.
Summary
Functionality | User Story | |
|---|---|---|
| 1 | Forms > Add | Build a brand new form. |
| 2 | Forms > Add Via CSV | Build a form using a CSV file for occasions where lots of fields need to be added and manually building would take too much time. |
| 3 | Forms > Edit | Edit various form settings. |
| 4 | Forms > Edit > ‘Build’ Panel > ‘Setup’ Step | Set the form name, slug, and change other settings such as language, embed type and autosizing. |
| 5 | Forms > Edit > ‘Build’ Panel > ‘Fields Page’ Step | Edit the form fields to be included on the form. |
| 6 | Forms > Edit > ‘Build’ Panel > ‘Thanks Page’ Step | Edit the stage of the form to be shown once all required fields on the form have been completed and the ‘submit’ button is clicked. |
| 7 | Forms > Edit > ‘Build’ Panel > ‘CSS’ Step | Control the visual style of the form. |
| 8 | Forms > Edit > ‘Build’ Panel > ‘Javascript’ Step | Add any custom javascript to the form. |
| 9 | Forms > Edit > ‘Preview’ Panel | Preview the appearance of the form during the build process. |
User Permissions
Mention if access needs to be enabled for any user roles and attach the user matrix.