Platform URL | https://[enterprise].cvtr.io/v2/forms | ||||||||
|---|---|---|---|---|---|---|---|---|---|
API Endpoints | Add form via Add button/CSV file and Edit form
| ||||||||
Epic |
| ||||||||
Document status |
| ||||||||
Document owner | |||||||||
Technical writers | |||||||||
Related Content |
...
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:
...
DO THIS
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 still 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:
...
First Name
Last Name
Email Lookup
Telephone Lookup
Optin
Submit
Field settingsoptions:
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 |
| 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. |
...
Settings
Each field may have additional settings which can be accessed via this button.
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:
Provide an overview of the feature and describe:
users who can access the page on the platform
widgets available to the users
functionalities available: Listing page, add, edit, delete, download etc. with screenshots
for add/create modals, provide details of the fields to be submitted to complete the action
E.g.
...
Name
...
Required
...
Notes
...
Agency Name
...
...
Name has to be unique
...
First Name
...
...
...
Last Name
...
...
...
Email(s)
...
...
It is possible to add multiple mail ids
...
Telephone
...
...
...
Notes
...
...
search and filter options available on table columns, if any
custom table views, pagination, if available
\uD83D\uDDD2 Summary
...
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.
\uD83D\uDDD2 Summary
Functionality | User Story | ||
|---|---|---|---|
| 1 | Pending Batches | Users can see the table listing of all the files ready to be sentForms > Add | Build a brand new form. |
| 2 | Pending Batches > Configure | Redirects the user to the batch CSV integration config | |
| 3 | Pending Batches > View | Allows the user to which leads are queued to be sent | |
| 4 | Pending Batches > Batch now | Allows the user to override the schedule and push the file through immediately | |
| 5 | Sent Batches | Users can see the table listing of all the files that have been sent | |
| 6 | Sent Batches > View | Allows the user to which leads have been sent | |
| 7 | Sent Batches > Download | Users can download the file that have been sent | |
| 8 | Table Filtering | Allows the user to filer the table values using Advertiser Id, Advertiser Name, Campaign Id, Campaign Name and Label | |
| 9 | Custom Tables | A user can add, remove and reset columns for custom tableForms > 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. |
\uD83D\uDDD2 User Permissions
...