How to embed a form into my website?

You can embed our forms into your website in two ways.

Option 1: Using our default embed code (recommended)

By using our default embed code, you simply add one line of code into your HTML. You can copy the embed code right from the forms list.

The embed code looks something like this:

<div class="deftform" data-form-id="XXXX-XXXX-XXXX-XXXX" data-form-width="100%" data-form-align="center" data-form-auto-height="1"></div><script src="https://cdn.deftform.com/embed.js"></script>

Options

data-form-width
Can be either in percent or pixel unit. So something like 50% or 500px will work. By default, it is 100%.

data-form-height
Essentially the same as the width, only for the height. You should omit this is you want the form to automatically set the height.

data-form-auto-height
Determines if the form height should be set automatically. This will also work if elements are added, either via the conditional logic, or when error messages are visible, making the form longer.

data-form-align
This will align the form inside your container. Available options are left, center and right.

data-form-init
If not set, it defaults to 1, meaning forms will automatically initialize on page load. If set to 0, forms will not automatically initialize. To manually initialize a form, call window.initDeftform() from your JavaScript. This will target all forms that haven't been initialized. If you have multiple forms on one page, you may call the function like that: window.initDeftform(number). number being the number (1, 2, 3 etc) of the form in your DOM. You can also re-init forms by calling window.reinitDeftform() from your JavaScript.

Adding multiple forms on the same page

If you want to add the same form, or generally multiple forms on the same page, be sure to include our script only once per page.

Option 2: Manually embedding via iframe

Another option is to embed the form manually via iframe. The code should look something like this:

<iframe src="URL-TO-YOUR-FORM" style="border:none;width:100%;height:500px;"></iframe>