then all forms will appear on list. you can edit, delete, enable, disable or duplicate your form. In order to create a new form. just click on “add new form” button
then a popup will appear asking you to set a form name. just set a name to your form
then the editing panel will appear. you will find three zones. 1) on the left, you will fin the form elements. you can drag and drop or just click to add to the form. 2) On the right, you will the form setting panel. you can customize options to your form and form elements. 3) On the center, you will find the form preview and you will see how it will look like on frontend.
Just click in one form element to add to the form or drag and drop the element to form area. then you will see the field on form preview panel
Then on the right panel, you will see a tab is shown. this is the tab for customizing your field selected. just set all your options that fit to your needs. well, you will see the next tabs:
label: you can customize the label of form element which are always next to input.
Input: you can customize your input
Help block: you can customize the help block of form element.
Validators: you can set validation option to your form elements.
C. Logic: you can add conditional logic to your form elements
More: you can add padding, margin and add custom css
then add all your form elements and DO NOT FORGET the “submit” button. this is important for sending the data of your form. Just drag and drop the submit button from left to right on the preview form. that’s all. check the print screen
then in order to customize the form style, just to go the form tab on right, and set the options that fit your needs. you will find the next tabs:
Skin: you can customize the skin of the form. adding colors, background, changing fonts, and so on.
Wizard: you can enable the multi-step form (wizard) and you can have multiple form in one
Finally, just save your form pressing the “save form” button on the right.
When you save for first time, a popup will appear showing the shortcode
copy the shortcode and paste to your page:
Then you will see form on frontend working fine
here a quick video of how the form is created:
then you will see popup showing url of frontend, widget code and iframe code to use it.
you can go to the url in order to see it on frontend or use preview option.