Form Builder

In this article, we will cover: 

• How to create a Form Builder Template - Blank
• How to create a Form Builder Template - Product Review
• How to create a Form Builder Template - Public Post
• Current Elements
• How to Manage Form Styles
• How to set a language for a Form Builder Template
• How to edit the Submit Button
• How to edit the Post-Submit message
• How to publish changes to a Form Builder Template
• How to get the Form Embed code
• How to archive/unarchive a Form Builder Template 
• How to duplicate a Form Builder Template
• How to rename a Form Builder Template
• How to delete a Form Builder Template
• How to view the Form Builder report
• How to download the report and the media files via Form Builder View Report 
• How to add a Form Builder Feed to a TINT board

How to create a Form Builder Template - Blank

1. Navigate to the Form Builder icon
2. Click +Add button in the right-hand corner
3. In the left-hand side of the window, you will see your changes in real-time.
4. On the right-hand side, you will be able to edit the header by clicking on it to change the Title and/or Caption or you can click + New Element to add a new Element. See Current Elements to see which elements you can currently add to your form.  We will be adding more soon.  
5. To edit an element, click on the element you would like to edit and once you have finished, click Done
6. If you would like to move the elements around, you can drag and drop them in the position you like to see them in

How to create a Form Builder Template - Product Review

1. Navigate to the Form Builder icon
2. Click +Add button in the right-hand corner
3. In the left-hand side of the window, you will see your changes in real-time.
4. On the right-hand side, as you have picked Product Review, the following elements will prepopulate: Header, Star Rating, Single-Line Text, Multi-Line Text, File Upload, Line, Full Name, Email. You can delete these and you can also click on + New Elements to add new elements. See Current Elements to see which elements you can currently add to your form.  We will be adding more soon.  
5. To edit an element, click on the element you would like to edit and once you have finished, click Done
6. If you would like to move the elements around, you can drag and drop them in the position you like to see them in

How to create a Form Builder Template - Public Post

1. Navigate to the Form Builder icon
2. Click +Add button in the right-hand corner
3. In the left-hand side of the window, you will see your changes in real-time.
4. On the right-hand side, as you have picked Product Review, the following elements will prepopulate: Header, File Upload, Multi-Line Text, File Upload, Full Name, Email, Single-Line Text. You can delete these and you can also click on + New Elements to add new elements. See Current Elements to see which elements you can currently add to your form.  We will be adding more soon.  
5. To edit an element, click on the element you would like to edit and once you have finished, click Done
6. If you would like to move the elements around, you can drag and drop them in the position you like to see them in

Current Elements

Element	Options
Header - Already added and repopulated with the title and caption
Single-Line Text
Multi-Line Text
Star Rating
Full Name
Email
Line	No edit option
File Upload
Consent	This element triggers it to go into UGC Studio and making it rights requested content

 

How to Manage Form Styles 

You can manage the style for all form versions at the bottom of the page on the right-hand side.  By clicking on this it will open a new pop-up. 

Style	Options
Accent Color	Change the color here
Font	Inherit from Website is currently the option
Background	Change the color here
Corner Radius Style	Square or Rounded
Form Header
Form Fields
Submit Button	Solid and Outline have the same version of options
Success Message

How to set/change/remove a language for a Form Builder Template

Translate your page into multiple languages by adding language to your Form Builder Template.  This saved having to duplicate forms and you can have it all under one form template.

1. Navigate to your Form Builder Template that you would like to edit
2. Click on +add another or click on Language Settings
3. This will open a new popup window on the right-hand side
4. Select the language you want, either scroll or you can search for it in the search bar and then click add language.  This will put it in the language list.  If you would like to delete a language, click on the bin next to the language name. 
5. Click on Done

How to edit the Submit Button

1. Navigate to your Form Builder Template that you would like to edit
2. Click on the Settings cog in the right-hand corner
3. A new pop-up will open and here you will be able to edit the Submit Button text
4. Click Done to apply

How to edit the Post-Submit message

1. Navigate to your Form Builder Template that you would like to edit
2. Click on the Settings cog in the right-hand corner
3. A new pop-up will open and here you will be able to edit the post Submit message. You will have three options:
   Show Success Message - click on edit Success Message and this will open another pop-up window for you change the Title and Message
   Redirect to URL - put in the URL where the form needs to be redirected to
   Hide the form - this will hide the form once the submit button has been hit
4. Click Done to apply

How to publish changes to a Form Builder Template

1. Navigate to your Form Builder Template that you would like to edit
2. Click on the green Publish button in the right-hand corner.  If the Publish button is blacked out, it means that there's nothing has been changed to publish
3. This will reflect the changes on any embedded form for this Form Builder Template

How to get the Form Embed code

1. Navigate to your Form Builder Template that you would like to edit
2. Click on the Settings cog in the right-hand corner
3. A new pop-up will open and here you will be able find the embed code.  We have separated it in two sections as if you already have a TINT board on the webpage, you will not need the first section of code.

An example of the embed code:

<script async src="https://www.tintup.com/app/dist/tint.js"></script>
<div data-team-id="360919" data-form-id="186" data-form-locale="en_US"></div>

If you have multiple languages, if you click on the dropdown and choose a different language, the data-form-locale element in the script will change.  

How to archive/unarchive a Form Builder Template 

1. Navigate to the Form Builder icon
2. Click on the ... next to the Form Builder Template 
3. Click on Archive. If already archived, click on Unarchive
4. The status will change from ACTIVE (green) to ARCHIVED (grey)

How to duplicate a Form Builder Template

1. Navigate to the Form Builder icon
2. Click on the ... next to the Form Builder Template 
3. Click on Duplicate
4. A new pop-up will appear on the right-hand and you will be able to edit the name of the Form Builder Template here
5. Click Cancel to cancel create the duplicate or click on Create to create the duplicate Form Builder Template
6. The duplicate Form Builder Template will appear in the list

How to rename a Form Builder Template

1. Navigate to the Form Builder icon
2. Click on the ... next to the Form Builder Template 
3. Click on Rename
4. A new pop-up will appear on the right-hand and you will be able to edit the name of the Form Builder Template here
5. Click Cancel to cancel the changes or click on Edit to apply the name change

How to delete a Form Builder Template

You will need to archive the Form Builder Template before you can delete the template. 

1. Navigate to the Form Builder icon
2. Click on the ... next to the Form Builder Template 
3. Click on Delete
4. A popup box will appear asking Are you sure? This action will permanently delete your Form. Are you sure you still want to continue? Click Cancel to cancel the action on deleting the Form Builder Template or click Ok to go ahead with deleting the Form Builder Template

How to view the Form Builder report

1. Navigate to the Form Builder icon
2. Click on the ... next to the Form Builder Template 
3. Click on View Report

How to download the report and the media files via Form Builder View Report

1. Click on ... next to the Form Builder template that you would like the report for
2. Click on View Report
3. Click on Download 
4. This will bring up a popup window on the right-hand side
5. Then pick the date range and if you want to download the media files at the same time.   
6. Click Export which will open a small pop-up saying downloading your submission file.  Please beware that this could take a few minutes if you have a lot of submissions and/or media files. 
7. Once complete, it will say click to download
8. Click on the link and this should trigger it to download to your device

How to add a Form Builder Feed to a TINT board

1. Go to your TINT board and locate the CONTENT panel found on the left-hand side of the page. The Content panel is where you add connections to your TINT.
2. Click on the Form feed
3. A new popup will open on the right side.  Click on SELECT FORM to select the Form Builder Template that you would like to setup the feed for
4. You will have three options: Media, Author Name and Post Body.  Pick the combination that you like to see.  Unlike an Experience Builder feed, you have the option to select Media since you can place multiple file uploaders in your form. 
5. Once you have done this, click Add Social Feed
6. Your feed will appear in seconds on the left-hand side under the Content panel

 

If you have any additional questions regarding Form Builder, please contact Technical Support at support@tintup.com.