WPEForm No-Code Drag and Drop WordPress Form Builderwpeform.io
Sign up

Add and configure elements in the form builder

Adding elements in a form page is very straight forward. You click on the ADD NEW ELEMENT button and you are presented with a list of elements to choose from.

Add new element
Add New Element to Form

Select the element you want to add and it will added to the page.

Element Interface

The image below shows different parts of the element interface.

Elements Interface
Elements Interface
  1. Configuration: Click this button to enter the configuration window.
  2. Duplicate: Create a duplicate of this element and add after it.
  3. Move: Quickly relocate this element to another page, pool or inside another element.
  4. New: Add a new element after this element. This will bring up the Add Element Window.
  5. Delete: Permanently delete this element. Warning, this cannot be undone.

Rearrange elements

There are several ways to re-arrange elements within the builder interface.

Drag and Drop Elements
Drag and Drop
1

Drag the element by clicking and holding the drag handle as shown in the image. This will pop up droppable zones in the builder interface. Drop anywhere and the element will be re-arranged.

Relocate Element to Another Page
Relocate to Another Page
2

You can also drop the element on top of a page to quickly put the element inside that particular page.

Relocate with the Move Button
Relocate with Move Button
3
Finally you can click the Move button. This will bring up all possible pages, pools and other elements where you can move it.

Editing element configuration

Simply click on the configuration button and it will bring up the Config Window. You will see various settings like Appearance, Interface, Attributes, Score, Validation etc.

Element Config Window
Element Config Window
1

Appearance: This is where element title, subtitle, answer hint and other visual settings goes. Most inputs support Rich Editor.

2
Interface: This is where element specific settings goes. Like options list for Single Option Element, placeholder for Single Line Input etc.
3
Attributes: Set default value, URL parameter and meta based prefil values from here.
4
Score: Setup how element value contributes to different scores and outcomes.
5
Validation: Setup all validation related options from here.

To learn individual element's configuration, please see the Form Elements section of this guide. The same is also available right within the plugin, if you click the HELP button below the config window.

Nested elements

Some elements in the form builder, allow other elements to be nested inside it. For example, the Row, Column, Group etc.

Nested Elements
Nested Elements

You can very easily move elements to and from with the same drag and drop concept.

Some elements allow only a specific sets of elements to be nested inside it. For example, Row element would allow only Columns inside it. Slider Group will allow only Slider inside it. If you do not see the green drop-zone when trying to drag and drop an element, it is because, the group element does not support the child element.

That's all about elements. Now you know how to create and manage pages and elements with WPEForm. Feel free to browse around to learn advanced setup like conditional logic, quiz etc. And if you have any questions, please use the link below to get in touch.