Web Form

The Web Form message source type enables you to create a local and publicly accessible web form with multiple input fields. Web forms are responsive and mobile friendly. Each web form has a unique secure public URL hosted on Azure as part of the ThinkAutomation Web API and a local URL served directly from your ThinkAutomation Server. You can embed the public web form inside your own website or send a link to the form in outgoing emails. When a web user completes the form, the results are sent to your ThinkAutomation Server. The Automation will be executed for immediate processing. The Web Form can optionally display the Automation return value after the form is submitted.

Click here to view a sample webform.

Form Text

Title

Enter an optional title. This will appear in bold above the header.

Header Text

This is the text that is displayed above the form itself. You can use Markdown if required. The Markdown will be converted to HTML when the form is rendered. The Title & Header are optional. You can also adjust the text for the Submit Button.

Footer Text

The footer text defaults to 'Processed By ThinkAutomation'. If you have the ThinkAutomation Professional Edition you can change the Footer text. Set this to blank to remove the footer. The footer can contain HTML.

Confirmation Message

Enter the Confirmation Message. This is the text that is displayed after the form is submitted. If the Display In Modal Popup option is enabled then instead of the form content being replaced with the confirmation message, a popup window will show. When the user closes the popup window the form resets ready for new values.

If the Do Not Hide Form After Confirmation option is enabled, then the form will not be hidden after it is submitted. The confirmation message will be displayed and the submit button re-enabled. This allows the form to be submitted again without refreshing.

Side Pane

You can show custom content on the left or right side of the form. On the side pane tab, enable the Show Side Pane option. Select Right Of Form to show on the right-hand side of the form, otherwise it will show on the left. You can specify the number of Columns for the side pane. The total width is 12, so specifying 6 columns would mean the side pane is the same width as the form. The web form uses responsive layout, so if the side pane cannot fit on smaller devices, then it will automatically move below the form.

Any any text, Mark or HTML to display in the side pane area.

Using HTML

The Header, Footer, Confirmation and Side Pane message can use plain text, Markdown or HTML. Markdown will be converted to HTML. You can also use HTML directly. Web forms use Bootstrap 5, so any of the standard Bootstrap 5 classes can be used.

Form Input Fields

You can create any number of Form Fields. Click Add to add a field.

Enter a Name and Label Text. You can also optionally specify Help Text that will display in a smaller font below the input field.

The Field Type can be:

• Text
• Number (numeric only)
• Date
• Boolean (check box)
• HTML Editor (a full featured HTML editor - returns HTML)
• Email (only a valid email address allowed)
• URL (only a valid URL allowed)
• Telephone
• Password
• Decimal
• Currency
• Time
• Range
• Label (displays the label text only - does not return a value)
• Rating (user can select a rating by clicking Star icons)
• File (user can select a file to include with the form as an attachment)

For text field types you can specify the Max Length. The Max Lines option allows you to define the maximum lines.

You can arrange the order of fields on the form using the Up & Down buttons.

File Upload

You can add input fields of type File. This allows the user to select one or more files to upload. Uploaded files will be added to the incoming message as attachments. You can limit the allowed file types by specifying a comma separated list of allowed file extensions (or mime types) in the File Types entry.

For example:

.doc,.docx,text/plain

In the above example, the file upload will accept Word Documents and plain text files.

The value used in the file types entry will be used for the accept value of the file input type on the web form. If the File Types is blank then files of any type will be allowed.

You can also specify the maximum file size in bytes. If the Multiple option is enabled then the user will be able to upload multiple files in the same input. Enable the Required option if a file must be selected before the form can be submitted.

Field Attributes

The Attributes tab allows you to specify a default value, change case & validation rules. Enable the Validate option. When the web user completes the form they will not be able to submit it until all of the fields pass validation.

If you want the user to select possible values from a list, select the Must Be In List option and then enter the Choices. For example to show a list box showing 'Yes', 'No' & 'Not Sure', set the Field Type to 'Text', enable the Validate option, select the Must Be In List option and add Choices of 'Yes', 'No' and 'Not Sure'. The default value of the select list will be set to the Default Value entry. The list can be displayed as a select list, a button group or a radio button group. Select the display type from the Of Type entry.

Visibility

The Visibility tab allows you to define visibility rules for the current field. Disable the Visible On Form Load option if you do not want this field visible by default.

In the Change Visibility Of This Field grid you define a condition to show or hide this field. The condition can be based on values of other input fields.

Then from the If Condition Is True Make This Field entry select Visible or Hidden.

As a user completes the form all of the visibility conditions will be evaluated when any input value is changed.

Pre-Populating Field Values

In addition the the Default Value that you can set for each field you can also pre-populate field values via the form URL. Adding &x-{fieldname}=value to the form URL will set its default value on form load. For example: If you have field name Company you could pre-populate its value by adding x-Company=Test%20Customer to the form URL. Pre-populating field values can still be done if the field is hidden.

Theme

The web form uses Bootstrap for its responsive layout. Select the Show In Bordered Card option to show the form inside a bordered card. Use the Color list to select a color scheme for the card. You can also change the Background & Foreground colors. The Foreground color can only be changed if not using a bordered card. Specify a Header Image URL to display an image above the title.

You can also specify a Custom Style Sheet Link URL. You can use this to override the default Bootstrap styles. If a custom style sheet is used then the Background/Foreground colors are ignored.

Click the Preview button to display a local preview of how the form will look.

Redirect

You can optionally specify a Redirect URL. This is a URL the web user will be redirected to on completion of the form. If a redirect URL is specified then the Confirmation Message will not be displayed to the user. If you want to conditionally redirect after the confirmation message is show use the Create Web Form Redirect action.

Allowed Origins

Specify the website URLs that are permitted to embed and submit this web form. These domains will be used to validate the Origin header of incoming form submissions, and will also be applied to the Content-Security-Policy (frame-ancestors) header to control which sites may host the form in an iframe. Leave this field blank if you want to allow the form to be embedded and submitted from any domain.

Enter full URLs (e.g., https://www.example.com). Multiple entries may be separated by commas.

If the Reject If Origin Header Is Blank option is enabled, form submissions will be rejected when no Origin header is present. This is an additional security control to prevent automated or same-site submissions that do not supply origin information.

WhosOn Live Chat

WhosOn is Parker Software's live chat and visitor tracking solution. See: https://www.whoson.com. If you are a WhosOn user you can add the WhosOn page tag to your form so that visitors to the form show in real time in your WhosOn Client. You can optionally Show Chat Button on your form. Your WhosOn Server & Domain details are specified in the ThinkAutomation Server Settings.

Captcha

You can add a Google reCAPTCHA box to your forms to ensure human only responses. Go to reCAPTCHA (google.com). Use the Admin Console to create a reCAPTCHA. Set the type to reCAPTCHA v2. In the domain enter api.thinkautomation.com. Select the reCAPTCHA keys section and enter your Site Key and Secret Key. You can also change the text that will be displayed if a user submits a form without first completing the Captcha.

Custom

You can optionally add any custom HTML on the Custom tab. This can contain JavaScript enclosed in <Script> tags. Any custom HTML is rendered just before the closing </body> tag. This can be used to set custom default values for form fields. For example, assume we have 'FromDate' and 'ToDate' input fields, and we want to set the default from date to two years before today and the to date to today:

<script>
const today = new Date();
const twoYearsAgo = new Date(today.getFullYear() - 2, today.getMonth(), today.getDate());
document.getElementById("FromDate").value = twoYearsAgo.toISOString().split('T')[0];
document.getElementById("ToDate").value = today.toISOString().split('T')[0];
</script>

Public Form URL

This entry shows the unique public URL for the web form. You can link to this from your website, send it in outgoing emails or embed it into your web site pages using an iframe tag. Whenever a web visitor completes the form the Automation assigned to the Message Source will be executed with the form contents. Click the Disable button to disable access from the public URL.

Local Form URL

This entry shows the unique local URL for the web form. This URL connects directly to your ThinkAutomation Server and can be used on your local network. The local web form looks and operates the same as the Public web form except that the form contents are posted directly to your ThinkAutomation Server - bypassing the Public API.

Friendly Path

By default the URL path for the web form will be /form followed by ?taid={uniquekey}. You can change this to a more friendly path, such as /mycompany/customers/addform. The path must be unique. ThinkAutomation will check that the path is valid and unique before saving.

Returning The Automation Return Value

Enable the Wait For & Include Automation Return Value With The Confirmation Message option if you want the Automation Return Value included in the confirmation message. If this option is enabled then the form response will wait for the Automation to complete. You should then configure your Automation to return the text, markdown, html or a file that you want displayed in the form confirmation. The max wait time is 60 seconds, so if your Automation may be long running then the Wait For option may not be applicable.

You can also include a redirect in the Return value if you want another Web Form or URL shown after the form is submitted. See the Create Web Form Redirect action.

Returning Files

If the Wait For & Include Automation Return Value With The Confirmation Message option is enabled and the Automation Return value is a single local file path (or a variable containing a file path) then the file content will be read and returned. You can return whole html pages, images, PDF files etc. The response Content-Type will be set according to the file extension. The web form will redirect to a new page showing the file content.

Returning Files From The Embedded Files Store

If you are using the Embedded Files Store action to save files to the Embedded Files Store database, you can return file content directly from the Embedded File Store. Use the Embedded Files Store action with the Get Info operation. Assign the results of the Get Info operation to your Automation Return value. The ThinkAutomation Server will then read the file content directly from the database and return the content.

The Web API has a limit of 5mb for the content returned from an Automation.

Providing A Link To The Automation Results

If your Automation is long running, or you want to provide a static link to the Automation results that a user can access later, you can use the %Msg_ResultsUrl% variable. Your Automation could include this variable in an outgoing email. A user can click the link to view the Automation results at a later date. The %Msg_ResultsUrl% URL is unique for each processed message and contains a secure hash. The link will work for as long as the Message is stored in the Message Store. You do not need to enable the Wait For & Include Automation Return Value In The Confirmation Message option to use the %Msg_ResultsUrl%.

How it Works

When you save the Message Source your ThinkAutomation Server uploads the form details to the ThinkAutomation Web API Gateway server. The Web API Gateway acts as a secure tunnel between the public web form and your on-premises ThinkAutomation instance. Your ThinkAutomation server makes an outbound connection to the Web API Gateway server. Once saved, the web form can be used immediately. Any changes you make will be updated. See: Using The Web API for more information.

When a web user completes the form, the ThinkAutomation Web API sends the results to your ThinkAutomation Server. The message body will be Json containing the form fields. For example:

{
    "fname": "Alice",
    "lname": "Bamber"
}

You can then use Extract Field actions to extract the data from the message and perform any other Automation actions. If your ThinkAutomation Server is not active when a web form is submitted it will be queued by the ThinkAutomation Web API for up to 48 hours. Any uploaded files will be added to the message as attachments.

Additional Headers

The following headers will be added to the ThinkAutomation message headers:

Header	Details
RemoteHost	The IP address of the web user submitting the form.
User-Agent	The browser user-agent of the web user submitting the form.
Origin	The origin header of the web user submitting the form.

You can access these values in your Automations (using the Set Variable action with the Extract Header Value operation). The RemoteHost is available using the built-in variable %Msg_FromIp%. For example, you could use the GeoIP Lookup action to lookup the country for the user's IP address, or use the Get Browser Info action to get the browser name.

Security

Each web form URL is unique to your ThinkAutomation instance and Message Source and contains a secure hash. The web form is hosted on Microsoft Azure and is served via HTTPS only - meaning all form submissions are encrypted. The ThinkAutomation Web API sends completed forms to your ThinkAutomation Server over a secure WebSocket connection. The Web API gateway server does not keep copies of submitted forms. If your ThinkAutomation Server is not active then any form data is stored in a queue for up to 48 hours and sent when your ThinkAutomation Server becomes active. This storage queue is encrypted.

Embedding The Form In Your Website

You can add the form to any of your web pages using an iframe tag. For example:

<div class="container-sm pt-4">
    <div class="row">
        <div class="col-7 mx-auto">
            <div class="card">
                <iframe style="height:900px;border:0;padding:0;margin:0;" title="Reseller Form" src="https://api.thinkautomation.com/form?taid=5033f425cf79df15d03275fa6220954590ca1c720cc0959dAIXShPj1fv5f0Vnr9dFg2Zlc%2bQgXEi%2fS"></iframe>
            </div>
        </div>
    </div>
</div>

Once the form is embedded any changes you make to Message Source Web Form properties will be updated on the form on your site. If you delete the Message Source from your ThinkAutomation settings you will need to remove the embedded link from your site.

If you are embedding the web form into your own site, ensure to add your site URL to the Allowed Origins entry.

Note: If using a CMS such as WordPress you may need to disable Lazy Loading on the iframe.

You can also post your own existing web forms to ThinkAutomation for processing. See: Web Forms-Custom.

---