How to embed a form into my website?
You can embed our form into your website in two ways.
Using our default embed code
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>There are several options available:
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.
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.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>data-form-align) will be available.