Access Form Builder

To create a new form through form builder:

• Go to WP Admin > eForm > New Form.

To edit an existing form through form builder:

• Go to WP Admin > eForm > View all Forms.
• Hover on the form you’d like to edit.
• Click on Edit.

In both the cases, the form builder will start showing on your screen. Throughout the tutorial, we will assume you are creating a new form.

Name and Type

Form name & type

The basic configuration you will need to do first is to give a name to your form. Simply add something descriptive in the Form Name section. The name will also be used to create slug for standalone form links.

Now click on Form Type and select preferred type.

Normal Single Paged

• Form will appear with a general single paged layout.
• Ideal for small bussiness or contact forms.

Tabular Appearance

• Form elements can be grouped into tabs.
• A user will need to navigate through all the tabs and fill them up before submitting.
• You can create as many tabs as you want. Simply click on the Add Tab/Pagination button.
• You can also select if the user is able to navigate to a previously viewed tab without validating or completely filling the form elements inside the current tab.

Paginated Appearance

• Form elements can be grouped into pages.
• A user will need to navigate through all the pages and fill them up before submitting.
• You can create as many pages as you want. Simply click on the Add Tab/Pagination button.
• You can select to show a progress bar which will show the percentage of completion.

Adding Container

To get started with elements, you will need to add containers first. Containers are top level wrappers of form elements, which intends to do the followings:

• Create tabs for Tabulated Appearance.
• Create pages for Paginated Appearance.
• Create blocks for Normal Single Paged Appearance.

Simply click on the Add Containers button located on the bottom right of the screen. You can add as many as you want, anytime you want. For now, let’s just focus on one.

Once you have added, click on the Cog icon and it will bring the configuration options. Set a title, secondary title and some description and hit save.

Adding Elements

Now the fun part. eForm elements are categorized in 4 types.

• Design & Security.
• Multiple Choice Questions.
• Feedback & Upload.
• Other Form Elements.

Each of the types has its own set of form elements. Just click any of the category and the list will popup. From then, you can either click on an element, or drag it to the newly added container.

For now, we simply add a Single Option element from Multiple Choice Questions.

When you add an element, some the options will be preconfigured. This is to help you get started quickly. But all of them can be customized.

Configure Elements

Each element has its own configuration options. The common ones are:

• Element title: Show a title to the element.
• Element description text: Show a secondary title to the element.
• Label Alignment: Make the title show above or aside the element.
• Description: Richtext description to further customize element description.

Besides these, there are many other options which we will see in future.

Save and Preview

Once done editing, click on the big Save button. It will save your form. Then click on the Preview button to preview it.

Using Shortcode

Using the shortcode generator, you can publish an eForm.

• Create any page or post.
• Use eForm Shortcode Generator > Insert Form.
• Select a form and click on the OK button.
• Publish the post/page.

Using Widget

Please follow the procedure below to publish an eForm through widget.

• Go to Appearance > Widget.
• Choose a sidebar and drag the widget eForm – Insert Form.
• Customize the title of the widget.
• Choose the form which you want to show.
• If your widget area (sidebar) is of low width, then check the option Optimize for small width.

Using Standalone Link

• Go to WordPress Admin > eForm > Dashboard.
• Scroll down to Generate Embed Code for Standalone Forms.
• Select the form, select width and height.
• This would give you the following codes:
  • Permalink: Pretty URL to the form.
  • Short Link: Short URL to the form.
  • Embed Code: iFrame embed code for the form (with specified height and width).