Embed an InTouch Form in your website

By embedding an InTouch form directly within a web page, the user can complete the form within the context of your website. This creates a more seamless and intuitive experience.

One common use case for an embedded InTouch form is for fee estimation.

Embedded forms can be styled to match the look and feel of your website, maintaining brand consistency.

This can help to establish trust and make users more comfortable providing information.

How to embed a form

Each code snippet represents a single InTouch form.

  1. Navigate to your form on your InTouch account
  2. In the form builder, click Embed Code in the left-hand side menu
  3. Select Copy code
  4. Paste the code into a HTML web page within your website

Your code snippet will look similar to this;

<div id="intouch-form-container"></div>
<link rel="stylesheet" href="https://static.intouch.cloud/forms/forms.css" />
<script type="text/javascript" src="https://static.intouch.cloud/forms/forms.js"></script>
<script type="text/javascript" defer>
guid: "...",
container: document.getElementById("intouch-form-container"),
serverUrl: "...",
country: "..."

Custom Styling & CSS

Within InTouch, a form has three colours; primary, secondary & tertiary that can be used to change the appearance of the form.

When a form is embedded on your website you can apply more advance styling via CSS. We recommend taking a look at the default CSS file located in the code snippet above and adding your own styles in-page or in another CSS file.

Always keep the default form.css file loading first, as any changes we make to the forms may result in additional styling rules being required from that CSS file.

At the bottom of a form, you'll see a "InTouch" logo. We respectfully ask that you do not remove this.


InTouch forms have events that you can hook into. Handlers for these events can be provided in intouchForm.init function call like this;

//... rest of initialisation configuration    
events: {        
onSubmitted: (formData, matterGuid) => {            
//formData is a object representing the payload of fields            
//from the form, keyed by their data marker string            
const forname = formData["matter.primaryclient.forename"];                        
//matterGuid is a unique string to identify the matter            
//e.g. cab4f320-b918-4197-9fa2-41ab2d091c65            
console.log("My form has been submitted by " + forename);
       onStepChange: (info) => {
           console.log("User has moved to step " + info.name);

Content Security Policy

We recommend that all websites have a strong content security policy. The rules you'll need to enable an InTouch form to work within your content security policy are;

Replace serverUrl with the value specified in your intouchForm.init function call.

style-src https://static.intouch.cloud/forms/forms.css;
connect-src serverUrl;
img-src data: https://static.intouch.cloud;
script-src https://static.intouch.cloud/forms/forms.js;

Quotation Calculator Scenario

Each code snippet represents a single form. For example, your code snippet might be for your Conveyancing Purchase Quotation.

To set up a quote calculator, simply add a button for each quotation scenario, linking to a separate page on your website for each quotation process.

This has SEO advantages and URL tracking advantages, and enables the InTouch form to run seamlessly.

An example conveyancing quote calculator might work like this;

  1. www.mywebsite.com/conveyancing-fee-quote contains 4 buttons;
    1. Purchase Estimate
    2. Sale Estimate
    3. Remortgage Estimate
    4. Transfer of Equity Estimate
  2. Each button links to a new webpage, that contains the relevant InTouch form;
    1. www.mywebsite.com/conveyancing-fee-quote/purchase-estimate
    2. www.mywebsite.com/conveyancing-fee-quote/sale-estimate
    3. www.mywebsite.com/conveyancing-fee-quote/remortgage-estimate
    4. www.mywebsite.com/conveyancing-fee-quote/transfer-of-equity-estimate
Each page can now be optimised for SEO purposes, as well as any relevant visitor tracking that you undertake.

<< Previous     
Powered by HelpDocs (opens in a new tab)