Form Builder

In this article, we will cover: 

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. On 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 do Form Builder Blank - Form Builder - 2nd November 2023.gif

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 do Form Builder Product Review - Form Builder - 2nd November 2023 (1).gif

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

How to do Form Builder Public Post - Form Builder - 2nd November 2023 (1).gif
Current Elements

Element Options
Single-Line Text
Multi-Line Text
Website
Star Rating
Single Choice

When you click on edit (3 options which is the default - you will be able to add more and will see the following:

Multiple Choice
Dropdown
Header - Already added and repopulated with the title and caption 
Heading
Paragraph
Full Name
Email
Phone 
Spacer

To add spacing to your form

Line  No edit option
File Upload
Image

Community Sign Up

Acceptance - This element is to collect consent/acceptance for things such as being put on a mailing list, reading, and agreeing to a legal document that is not hosted on TINT.  This is not to be confused with Rights Management Consent as this will not trigger content to go into UGC Studio. This is for tracking purposes. In the report, the column for this element will show true if ticked and will be blank if not ticked

In the report

Rights Management Consent - This element triggers it to go into UGC Studio and making it rights requested content with the Green Rights Approved banner

 

Smiley Scale

Date - The format is standardized to ISO8601 format (YYYY-MM-DD) but the input will be familiar to the user in their locale and with a calendar (browser permitting)

Birthday - This is the same as Date except that this element will autocomplete with the user's birthday (if available) 

Single Matrix

Single Matrix - Form Builder - 11 June 2024.gif

 

 

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
Font Inherit from Website is currently the option
 Font Size  Change the font size here
Background Change the color here
Corner Radius Style Square or Rounded 
Form Header
Form Headings

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 add another language form - Form Builder - 10th November 2023.gif

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 Submit Button - Form Builder - 10th November 2023.gif

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 to 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 edit the Post-Submit message - Form Builder - 3rd November 2023 (1).gif

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

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 to find the embed code.  We have separated it into 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"></div>

How to get the Form Embed code - Form Builder - 11th December 2023.gif

Language

The preset option is Inherit from Website. With this option, the system will look for the lang parameter on the website.  Most websites have <html lang="LANGUAGE_CODE"> as their first element. For example, here's a snapshot from our TINTup.com website:

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

For example: 

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

How to get the Form Embed code with language - Form Builder - 11th December 2023.gif

How the language option works when searching for a language to use:

  1. Check for an exact match: The system will first attempt to find the exact locale chosen within the configured set of languages. If this match is found, it will use that locale for the website's content.

  2. Check for base language match: If the exact match is not found, the system will then check for a match with the base language regardless of the country code. If this match is found, it will use the base language for the website's content.

  3. Check for wildcard match: If neither of the above matches are found, the system will then check for a match with the base language and any country code. This wildcard match will ensure that the system can identify and use the most appropriate base locale.

  4. Fallback to configured language: If no matches are found, the system will use one of the configured languages in the form as a fallback option. This ensures that the website can display content in a language that is appropriate for the user's locale even if the exact language code is not explicitly specified.

A language option example

Let's look at a scenario where a website is set to display the user interface in the es-XL locale. To accommodate this request, the system would search for any Spanish locale configuration and utilize it to display the interface in Spanish. If no specific Spanish locale is found, the system will default to one of the configured languages.

For example, if a form is configured with the following languages:
French (Canada) -fr-CA
Spanish (Spain) - es-ES
English (United States) - en-US

If a user attempts to access the form using the es-XL locale, the system would first search for the exact match, es-XL, which doesn’t exist.  Then it would search for a broader match, es, but no specific configuration for this locale would be found as the form only has es-ES as a Spanish option. Finally, it would search for a wildcard match, es-*, and locate the es-ES configuration to display the form.

Another scenario would be, if a user attempts to access the same form using the ak-GH locale, the system would follow the same steps. Because this language does not exist at all as a selection in the form, the system would default to one of the configured languages, such as fr-CAes-ES, or en-US. While this may not be the exact language requested, it ensures that the user can at least access the form and complete their task.

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 archive a Form Builder Template - Form Builder - 3rd November 2023 (1).gif

How to bulk archive Form Builder Templates

  1. Select the Form Templates you would to archive by using the tickboxes
  2. A small pop-up will appear at the bottom of the list
  3. Click Archive
  4. The Form Templates will deactivate and disappear.  It might end up on another page if you have more than a page worth of Form Templates but the Form Templates will remain selected

Form Builder - How to Archive a Form Template - 13th March 2024.gif

How to bulk unarchive Form Builder Templates boards

  1. Select the Form Builder Templated you would like to unarchive by using the tickboxes
  2. A small pop-up will appear at the bottom of the list
  3. Click Unarchive
  4. The Form Builder Templates will unarchive and go back to the position it was in before deactivation

Form Builder - How to UnArchive a Form Template - 13th March 2024.gif

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 duplicate a Form Builder Template - Form Builder - 3rd November 2023.gif

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 rename a Form Builder Template - Form Builder - 3rd November 2023.gif

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 delete a Form Builder Template - Form Builder - 3rd November 2023.gif

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 View Report - Form Builder - 16th November 2023.gif

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 download the report and the media files via Form Builder - Form Builder - 16th November 2023.gif

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 mceclip0.png
  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 set up 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

How to add a Form Builder Feed to a TINT board - Form Builder - 7th November 2023.gif

How to edit a label on a Form Builder feed

By default, the label for the feed itself will be the name of your Form when you set up the feed but you can change this to whatever you wish.  

  1. Go to the feed you would like to edit
  2. Click on the Settings cog
  3. Click on Edit Name
  4. Rename the feed to what you would like it to be 
  5. Click on the tick to confirm or the x to cancel
  6. Your feed should be renamed

Form Builder - How to edit the label on a Form Builder feed  - 15th December2023.gif

How to delete a Form Builder feed

  1. Go to the feed you would like to edit
  2. Click on the Settings cog
  3. Click on Remove Feed
  4. A pop-up notification will appear with Are you sure? All content on this social feed will be deleted and cannot be recovered. Re-adding the exact feed will not recover these posts.  You will be presented with two buttons - No, Keep Feed or Yes, Delete Feed
  5. The feed should disappear if you pressed Yes, Delete Feed

How to delete a Form Builder Feed - Form Builder - 15th December 2023.gif

How to pause or unpause a Form Builder feed

You can pause or unpause your Form Builder feed if you don't want to ingest content or want to restart ingesting content.

To Pause the feed:

  1. Go to the feed you would like to pause 
  2. Click on the pause icon to pause the feed
  3. A popup box will say Are you sure? All content on this social feed will be paused and no new content will be ingested until its is un-paused
  4. Click on Yes, Pause Feed
  5. This will Pause the feed

To Unpause the feed:

  1. Go to the feed you would like to unpause
  2. Click on the Play icon to unpause the feed
  3. This will unpause the feed

Pause and unpause a Form Builder feed - Form Builder - 2023.gif

How to switch on or switch off auto-moderation on a Form Builder Feed

If you would like to change the method of moderation (auto or manual) that you originally set up on the feed, it is possible to change this on the feed itself

  1. Go to the feed you would like to change
  2. Click on the lock icon to change the moderation of the feed.  The lock will be open or closed depending on whether the feed is on auto or manual moderation
  3. If auto-moderation is being switched on: A popup box will say Are you sure? By unlocking this feed, the content will now be unmoderated, and will be marked as visible as to the public automatically and Click on Yes, Unlock Feed

_How to switch off & on auto moderation Form Builder Feed - Form Builder Feed - 24th January.gif

How to pre-populate fields on the Form Builder Form

By adding the following parameter data-form-values="" into the form builder embed, selected fields can be pre-filled. Insert the desired values within the quotes as a query string.

For example, data-form-values="first_name=John&last_name=Doe" would pre-fill the first name as John and last name as Doe, assuming that the form element id for first name is first_name and the form element id for last name is last_name

Depending on your goal, you might seek to automate this process which would require further coding.  It's important to remember that the desired values must be encoded for URLs.

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

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.