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.
Embedded forms can be styled to match the look and feel of your website, maintaining brand consistency.
How to embed a form
Each code snippet represents a single InTouch form.
- Navigate to your form on your InTouch account
- In the form builder, click Embed Code in the left-hand side menu
- Select Copy code
- 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>
intouchForm.init({
guid: "...",
container: document.getElementById("intouch-form-container"),
serverUrl: "...",
country: "..."
});
</script>
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.
InTouch Logo
At the bottom of a form, you'll see a "InTouch" logo. We respectfully ask that you do not remove this.
Events
InTouch forms have events that you can hook into. Handlers for these events can be provided in intouchForm.init function call like this;
intouchForm.init({
//... 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.
An example conveyancing quote calculator might work like this;
- www.mywebsite.com/conveyancing-fee-quote contains 4 buttons;
- Purchase Estimate
- Sale Estimate
- Remortgage Estimate
- Transfer of Equity Estimate
- Each button links to a new webpage, that contains the relevant InTouch form;
- www.mywebsite.com/conveyancing-fee-quote/purchase-estimate
- www.mywebsite.com/conveyancing-fee-quote/sale-estimate
- www.mywebsite.com/conveyancing-fee-quote/remortgage-estimate
- www.mywebsite.com/conveyancing-fee-quote/transfer-of-equity-estimate
