Embed a Form on a Website

You can easily integrate a form sequence into a website using the HTML <iframe> tag. This will display the form within a frame on a webpage. Any redirects and submit functions on the form will be displayed within the frame. The user does not need to navigate away from the webpage to complete the form.

Embedding a form using the <iframe> tag allows you to maintain the form separately from the website. You can update the form in Forms Builder and the updates will appear on the website as long as the URL of the sequence remains the same.

You can use CSS to style the <iframe>. You can apply borders, scroll bars, set up responsive behavior, and so on. The default CSS settings for the <iframe> element in most browsers are:

iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}

Procedure

  1. Build your form sequence and access it from the Sequence List.

  2. Create or edit a page on your website. Add an <iframe> tag in the body of the webpage.

  3. In the <iframe> tag, specify the width and height of the frame and the URL of the form in the Sequence List.

    Example 

    <iframe width="80%" height="700px" style="border: 1px solid green" src="https://<server>:<port>/#/renderer/511">

  4. Save the webpage and publish it to your website.

  5. When users access the webpage, they’ll see the form referenced from the Sequence List in a frame on the webpage.

    IFrame example