Embed code are a few lines of html and javascript that you can use to embed an Easy Forms’ form into your own website. This is the easiest way to display a form on your site and the method least susceptible to errors. But also, one of the most important things about the form widget is that every time you make a change to your form in the form builder, the embedded form will automatically update.
The Form Widget is designed to work on any web page. The Embed code basically creates an iFrame on the fly and the form is loaded in it. And, since it creates the iFrame, it can also resize it and that means there's no need to update the code every time you make some change. But also, when you keep a form inside an iFrame, you also prevents it from conflicting with existing JavaScript or CSS elements on your page.
Right now Easy Forms offers two options for publishing a form in your web site:
Usually, the first option is the one you should use.
You can populate a field with URL parameters. Just make sure to use the Field ID or Field Alias as the parameter key, then the value assigned to this parameter will appear in the field.
The Embed code has two parts:
The embed code allows you to set some options of the form on the fly:
'id': 132'container': 'c132''width': '100%''height': '846px''autoResize': !0'theme': 1'customJS': 1'record': 1'addToOffsetTop': '-60'
'defaultValues': {
'text_0': 'This is my default value'
}
Note that fields of type checkbox and radio button are selected by using boolean values. For example:
'defaultValues': {
'text_0': 'This is my default value',
'checkbox_0': true
}
The Form Widget contains a large number of features and options that can be configured inside an external JavaScript File.
Note: To load a JavaScript File you must go to Forms -> Actions -> Settings -> UI Settings.
By default, a jQuery object is available. So you can interact with the Form in a very simple way by using the following lines of code:
$( document ).ready(function() {
// Here we can interact with the Form
});
The Form element - formEl - is a jQuery object to which you can access for get information and/or manipulate it directly. For example, we're going to know the high of our form with the following lines of code:
$( document ).ready(function() {
console.log('The form height is', formEl.height());
});
Certain events are triggered when the Form does something.
A very basic example for detecting when a form fail would be:
$( document ).ready(function() {
formEl.on('error', function(event){
// Track a server validation error
// What happens here would be dependent on your analytics product!
});
});
In addition to the events, Easy Forms offers two event handlers that allow you to go backward and forward a page on a Multi-Step form ready to use using JavaScript. For example, now we're going to see how to forward a page without pressing the button "Next" using the auto-advance feature.
By default, when you create a Multi-Step Form, two navigation buttons are added automatically: "Previous" and "Next" at the bottom of the form. These buttons allow you to navigate through the form until you reach the last page where usually the Submit button is placed.
Note: Easy Forms lets you add multiple Submit buttons on different pages or parts of the form.
However, in certain use cases you can may want to advance directly to the next page without pressing any buttons. For this we will make use of the “nextStep” event handler.
Note: Some use cases in which this feature is useful are surveys and/or tests where is not allowed to change response and lets to complete the survey as soon as possible.
For example, with the following lines of code, we are going to tell our Form that each time a radio button is selected, the form will forward to the next page:
$( document ).ready(function() {
$('input[type=radio]').on('change', nextStep);
});
Finally, if you want to hide the navigation buttons you can add the following lines in the CSS Theme assigned to your form:
.previous, .next {
display: none !important;
}
By having the jQuery object, we can make use of jQuery.when().done() to load multiple javascript objects and make use of them once they are ready to use. Let’s see the following example.
For example, with the following lines of code we will show a jQuery UI DatePicker in the Date fields of the form:
$( document ).ready(function() {
$.when(
$('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),
$.getScript( "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})
).done(function(){
$('body').css('padding-bottom', '200px'); // Padding for show the datepicker
$('input[type=date]').each(function () {
$(this).attr('type', 'text').after(
$(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')
.datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
altField: this,
altFormat: "yy-mm-dd"
})
)
.hide();
});
});
});
As you can see: