As we already know eForm can have paginated or tabbed appearance to break your forms into multiple section. This appearance would bring in navigation buttons to navigate between tabs and pages.

If you want to provide a way to quickly jump between pages, without letting the user go through all containers, it is possible through container buttons.

Add Containers

For the container button to work, you need to have more than one container in your form and the appearance set to either Paginated or Tabbed. Please refer to this article to learn how to create different types of forms.

Add Container Buttons

• Go to Form Builder > Design and Security.
• Drag and drop or click on the Container Button element.

Now open up the settings and configure it properly.

• Give a name to the button.
• Enter the container number. Starts from 1 and any number represents nth container from start. So 1 would represent first, 3 would represent third etc.

Now save the form and try it yourself.

Some Notes

• When you use container button, it will ignore any validation on the current container.
• So make sure that leaving containers/tabs would not generate any validation error on the server. Otherwise submitting the form would yield errors. Please read this to find out how.
• If you need to just hide a container/tab, then better to use conditional logic for containers.

The post Container Buttons to jump between pages appeared first on iPanelThemes Knowledge Base.

Starting eForm version 3.6.0, text type elements can have

• Default values.
• Prefill values with respect to URL parameter (query) or user meta.
• Readonly attribute to stop user from editing.

The following elements can have such functionalities.

• Feedback & Upload > Feedback Small.
• Feedback & Upload > Feedback Large.
• Other Form Elements > First Name, Last Name, Email, Phone, Full Name, Phone Number, Email Address, Small Text, Large Text.

So that is a total of 11 elements.

Accessing the settings

Relevant settings for all of the elements can be accessed from the Interface tab of the settings window.

• Click on the element to open the settings window.
• Now click on the Interface tab.

Default Values

This for prefilling the element with some text. In case of First Name (Stored in DB), Last Name (Stored in DB), Email (Stored in DB) the data is pre-populated for logged in users by default. If this is what you need, you can safely leave the default value empty and it will still be populated.

Once you have set some value inside it, the element will be pre-populated with this if no other settings override it.

Prefill Type

The default value can be overridden by setting up a custom prefill type. There are three options.

• None: We do not intend to override/prefill the element.
• URL Parameter Based: Value will be fetched from URL query parameter.
• User Meta Based: Value will be fetched from user metadata.

In case of URL Parameter or User Meta, the values are sanitized to prevent XSS. So you don’t need to worry about security.

Key Parameter

When prefill type is set to URL Parameter or User Meta Based, you need to mention the key/parameter here.

URL Parameters

This is key of URL query string. For an URL like https://eform.live/eforms/20/?campaign_email=swashata@eform.live&campaign_source=facebook If you mention Key campaign_email the value would be swashata@eform.live and if you mention Key campaign_source the value would be facebook. The element would be prefilled by these values.

User Meta Values

You can assign any user meta key here.

The following in-built user data & meta variables are available

• ID
• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• display_name
• first_name
• last_name
• nickname
• description
• wp_capabilities (array)
• admin_color (Theme of your admin page. Default is fresh.)
• closedpostboxes_page
• primary_blog
• rich_editing
• source_domain

Apart from these, you can mention any custom meta key. You might want to use some sort of user management plugin to setup those metakeys before-hand.

Readonly

Enable this if you do not want the user to edit the value. It is great if using from URL parameters and User Meta Values. Do make the Compulsory disabled under Validation if you aren’t sure whether the field will always be populated.

The post Default, Prefill & Readonly values for text type elements appeared first on iPanelThemes Knowledge Base.

eForm v3.5 has introduced a few new features with which you can control the appearance of form elements.

• Control how labels appear: Floating or vertical.
• Control the alignment of labels.
• Show/Hide the labels.

#1: Label Alignment

You can set to either horizontal or vertical. For smaller devices or for nested columns, the appearance will always be vertical.

#2: Center Content

If enabled, then everything, including the label and form elements will be center aligned.

#3: Hide Label

If enabled, then the title and subtitle of the element will be hidden and the form element itself will take full width.

It is useful especially for freetype elements like Feedback Large, Feedback Small, First Name, Last Name etc.

When enabling, make sure to give a meaningful placeholder which would act instead of the labels.

The post Form element & label appearance appeared first on iPanelThemes Knowledge Base.

eForm always had date and time picker element. Starting eForm v3.5 it has undergone some serious changes which makes it even more powerful.

You can check the Hotel Registration Form example.

Insert Date Picker

Date Picker element can be found under Other Form Elements. Insert it in your form and start modifying it.

Interface Options

Show Current Time

If enabled, then the picker will be populated by current date/time (from server).

Picker Type

You can have either Datepicker, Timepicker or Date and Time Picker. The appearance is shown in the images below.

Only the Datepicker element currently supports arithmetic type validations.

Picker Format

Set the date/time format. If you are doing arithmetic validation (like future/past) then leave them to strict ISO, i.e, YYYY-MM-DD for date and H:i:s for time.

Validation Options

This is where the datepicker gets really handy. Do note that the arithmetic type validation is available only for Date Picker element, not time picker or date and time picker.

Compulsory

If enabled, then the element will be required.

Past

Checks if the element’s value (which is implicitly a date) is less than the given date.

• When NOW is used as a parameter, the date will be calculate in the server only, in accordance with the timezone you have set for your website.
• You can also use arithmetic like NOW+5 or NOW-10 to add or subtract days from current date.
• You have to enter date in YYYY-MM-DD (Strict ISO Standard) format, for example 2017-02-24.
• Also you can refer to other datepicker element, by entering their ID, like O12 where the element is represented by (O){12}.

This can be used for creating date ranges. This works for date pickers only, not for datetime or time pickers.

Future

Checks if the element’s value (which is implicitly a date) is greater than the given date.

• When NOW is used as a parameter, the date will be calculate in the server only, in accordance with the timezone you have set for your website.
• You can also use arithmetic like NOW+5 or NOW-10 to add or subtract days from current date.
• You have to enter date in YYYY-MM-DD (Strict ISO Standard) format, for example 2017-02-24.
• Also you can refer to other datepicker element, by entering their ID, like O12 where the element is represented by (O){12}.

This can be used for creating date ranges. This works for date pickers only, not for datetime or time pickers.

The post Date & Time Picker Element appeared first on iPanelThemes Knowledge Base.

eForm can send notification emails to administrators when a form submission occurs.

Enable Configuration

• Go to Form Builder > Result & Email > Admin Notification.
• Add your email in Admin Notification Email. You can add multiple emails separated by comma, like admin1@domain.com,admin2@domain.com.
• Configure Admin Notification from Email. If not set, then wordpress@yourdomain.tld would be used.
• Set a name for the notification from email in Admin Notification From Name.
• Setup additional header and email logo.

Edit Message

Scroll down on the same page and you will find options to set email subject and message. A bunch of format strings are available for you to use.

Just click on the help icon beside every settings to find out what those are for.

Send Full Submission

Scroll down and you will an option to Email Submission to Admin. Enable it to get the full submission.

Send on behalf of user

Enable Email on behalf of user option to get the email as sent from the user. You should also enable Just add Reply-To if your are having trouble passing through email validation (like for Yahoo emails).

When this option is enabled, you can reply directly to get in touch with the user.

It also disables sending some sensitive information like admin side URLs on the email body. So you can safely quote and reply from the email directly and your user will get it from you.

Email Footer

By default eForm sends some branding information on the admin email only. If you do not want that, just change this area. HTML is supported.

The post Send Notification Email to Admins appeared first on iPanelThemes Knowledge Base.

Starting version 3.6.1 eForm now has the capability to update or add user metadata by submitting a form. We already had user metadata registration and prefilling values from user metadata, now with this, creating a profile form has become super easy.

#1: Create a form with prefill values

To get started we create a form with some text elements. For each text element, we set prefil value from user metadata. To check how we can do it, read this article.

#2: Enable Settings

Now we can enable the settings to actually update user metadata.

• Under Form Builder, go to WP Core > User Meta Update.
• Enable the configuration.
• Now add each element on your form to the list.

Here you need to specify the element type (M for MCQ, F for Feedback & O for Others) and key (visible under {} of every form element).

For every element, you need to specify an unique meta key. It can be existing or new.

In the example form, we have already prefilled the text elements from meta values that WooCommerce uses and have setup the form to update those meta values.

• (O){0} has prefilled value from billing_first_name and under WP Core, we have (O){0} update billing_first_name.
• (O){1} has prefilled value from billing_last_name and under WP Core, we have (O){0} update billing_last_name.

And similar for other settings. You may download the form from here.

We also have an option to store array value instead of stringified value. Use this if you want to do something advanced with the metadata.

#3: Preview the form

Now preview the form and do a submission. For the first submission, the meta records will be created if not already there. For successive submissions, you will see that the data from previous submission will be populated automatically in the fields. If you change and submit again, it will saved as user meta value.

The post Update/Add User Meta through eForm appeared first on iPanelThemes Knowledge Base.

With eForm v3.6.2 all of text elements and some of MCQ elements now have the capability of storing and fetching data from user meta values. This makes it possible to make a profile update form with eForm.

Before we start, see for yourself what we will be creating. You can also download the form and start modifying right away.

#1: Setup the form

For this form to setup, we use the following elements.

• MCQ Single Option for favorite fruit. We store the data in eform_favorite_fruit usermeta.
• MCQ Multiple Option for favorite places. We store the data in eform_favorite_places.
• MCQ Dropdown for favorite movie series. Data is stored under eform_favorite_movies.
• MCQ Thumbnail Selection for selecting a peaceful image. It is stored under the key eform_favorite_peaceful.
• Primary First Name, Primary Last Name, Primary Email to set the corresponding meta (first_name, last_name, user_email). For security, we disable updating user_email.
• Other Elements Email Address for storing Secondary Email under secondary_email metakay.
• Feedback Element Large Feedback to getting and setting profile description under built-in description key.

#2: Setup Prefill

For all elements, prefill can be set under Element Settings > Interface. We go through every element and setup

• Prefill Type to User Meta Based Values.
• Key to corresponding keys we have decided.

#3: Make the Form Update meta values

Upto this, the form will prefill the elements from the meta values it gets from user data. But to actually update it when the form submits, one more step is necessary.

• Go to WP Core > User Meta Update.
• Enable the configuration.
• Add every element to the list with corresponding element type and key and setup the metakey to update for.

Make sure you leave the “Store array instead of string” turned off, because we are modifying some built-in metadata in this form.

For a complete custom form you can keep it enabled and eForm will properly get and set the values.

The post Create User Profile Update form with eForm appeared first on iPanelThemes Knowledge Base.

With eForm v3.5 we have removed old themes and introduced new themes. As a consequence, the naming of the theme (internally) was changed. We did our best to auto-upgrade for forms, but in shortcodes, like in user portal it has to be updated manually.

The Issue

Your user portal page breaks and shows up like this.

Even the login form shows up like this.

Solution

The solution is simple. Edit the page and look into the shortcode.

There you will find the theme parameter. Change it to material-default to apply the teal material theme.

You can completely remove the shortcode and use the generator again to choose a theme of your choice.

The post User Portal broke after upgrading to 3.5 appeared first on iPanelThemes Knowledge Base.

Starting eForm version 3.5 a new element was introduced, the repeatable element.

As the name suggests, it can be used to allow your users to add rows of predefined elements on your form. You can check out a demo here and download the from from this link.

Add a repeatable Element

Repeatable Element can be found under Other Form Elements (O) under the form builder. Open it and scroll down to the bottom. There you will see the newly created repeatable element.

Drag the element on to your form and you are ready to go.

Interface Options

Under the settings window of the element, you will see INTERFACE.

• Button Text: Used to populate the add button.
• Sortable: If enabled, then user will be able to sort the repeated rows.
• Deletable/Addable: Enable this to actually make the element repeatable. If you want a fixed set of elements without the capability of deleting, then disable this.

Validation Option:

Under the same settings window, you will see VALIDATION. Here you can set

• Initial number of elements.
• Minimum number of elements.
• Maximum number of elements.

The delete button stops functioning when the element reaches minimum number and the add new button stops functioning when maximum is reached. You should make sure Initial number of elements is greater than or equals to minimum number of elements and lesser then or equals to maximum number of elements.

Adding Groups inside repeatable

Repeatable elements work by duplicating your predefined group. Every group can contain any number of the following elements:

• Radio Element.
• Checkbox Element.
• Dropdown (select) Element with Multi select.
• Textinput with a number of validation.
• Textarea.
• Password.
• Date, Time & DateTime Pickers.

Configuring groups

Open the settings of the repeatable element. You will see the settings window.

Now navigate to “OPTIONS” section of the window and you will see ITEM GROUP LIST.

Click on ADD NEW ELEMENT and new item in your group will be created. Following configuration options are available.

• Title: Form element title.
• Type: Form element type.
• Size: Column size of the element.
• Req: Whether the element is compulsory (required) or not. This is the primary validation rule.
• Options: Here you will enter choices for MCQs and placeholders for text inputs. We will discuss about it more.
• Filter: Other validation filters specific for some of the types. We will see more about this.
• Clear: Whether to clear columns before this element. Useful when building layouts and the height of the elements does not match. For example, if you wish to create a 4 column layout, then after every 4th element, i.e, on 5th element, 9th element etc, you would want to enable this.

Different Types of repeatable element

With eForm version 3.6.5 (at the time of writing) there are a total of 16 types of repeatable elements. Since many of them have very similar Options and Filters, we will discuss them together.

Option 1[num=10]
Option 2[num=20]

Choice 1
Choice 2

minCheckbox="1" maxCheckbox="2"

Option 1[num=10]
Option 2[num=20]

Choice 1
Choice 2

Please select[empty]
Option 1[num=10]
Option 2[num=20]

minSize="1" maxSize="10"

min="10" max="100"

future="1800-01-01" past="NOW"

Now you know how to configure repeatable elements properly. Start using it and let us know if you have any troubles.

The post Repeatable Elements with eForm appeared first on iPanelThemes Knowledge Base.

To get started with eForm, you will need to create a form first. The system comes up with a few forms pre-installed and you can check them out if you want a quick start. For in-depth informaiton, please read this.

Access the form builder

To create a new form through form builder:

• Go to WP Admin > eForm > New Form.
• Select a template or start from blank.
• Give a name and change other settings.
• Click on create 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.

Form type

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.

Some useful Settings

Here are some useful settings for each form types.

• Wrap Inside: Works for simple form appearance. If disabled, then the shadowed container won’t be shown.
• Block Navigation to previous Tab/Page: For Tabular & Paginated appearance. If enabled, then the previous action won’t work.
• Can Navigate to any Tab: If enabled then user can freely navigate to any tab for tabular appearance.
• Scroll to the page top: If enabled then the page will scroll to the top of the form when changing pages/tabs.
• Scroll to element on validation error: If enabled, then page will scroll to the element which has caused some validation error.

Adding Containers

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.

Configuring 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.

Rearranging Form Elements

• Simply drag and drop elements throughout the layout to rearrange them.
• Drop over a container tab to place to the specific container.
• Drag and position containers tabs to rearrange them.

Duplicate Form Elements

• Click on the copy button to duplicate an element.
• Click on the copy icon of containers to duplicate an entire container.

Delete an Element or Container

• Drag an element and drop to the bottom to delete an element.
• Click on the delete button to delete an entire container.

Saving and Previewing Form

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

The post Creating your first form through eForm appeared first on iPanelThemes Knowledge Base.

With the latest version 3.6 it is now possible to let users navigate to any tab by clicking the tab above the form. Previously, this would block users from jumping steps and would take user to the next step instead.

Activate the settings

• Go to Form Builder > Form Type.
• Choose Tabular Appearance.
• Enable Can Navigate to any Tab.

Some rules

• Make sure none of the elements in your form is compulsory.
• If you need any compulsory (required) elements, then put it in the last tab.
• In the last tab only the validation kicks in.
• If you have any required elements except the last tab, then after submission, an error would be generated, leading the user to the required element.

The post Let user navigate to any tab in eForm appeared first on iPanelThemes Knowledge Base.

With eForm you can add as many containers as you want. Each of the container can hold as many elements that you require and you can easily rearrange across or within containers.

Every container has different appearance for different types of forms.

• It will appear as tab for tabular appearance.
• For paginated appearance it will appear as page with a large heading on top.
• For simple appearance, containers will appear throughout the page separated by container headings.

Basic Container Operations

You basically need to click on the Add Container button to add more containers. Every form starts with atleast one container. If you delete all the containers, then you have to add another one before you can add an element.

You can also rearrange containers by clicking on the tabs on top of every container.

To add an element, simply click on an element or drag and drop the element to your desired container.

You can also rearrange elements by holding down the rearrange tool of the elements.

To move elements across different container, drag an element and drop on the tab of the desired container.

To delete an element from a container, drop on the Recycle Bin icon.

Container Toolbar

Below every container, there is a toolbar from where a bunch of operations can be done.

Container Configuration

Click on the Settings icon of a container and it will open up the configuration window.

The following options are available.

• Title: The title of the container. Appears within tab for tabular forms and as primary heading for other types of form.
• Subtitle: The subtitle of the container.
• Icon: Icon of the container.

Additionally you can also apply conditional logic for the container.

Appearance

The appearance of the container can be controlled from Form Types.

Under Form Type choose any of the options to set different appearance.

Tabbed Appearance

Paginated Appearance

Single Paged Appearance

The post Container configuration options under eForm appeared first on iPanelThemes Knowledge Base.

While, eForm works well with most of the caching plugins, but sometimes, things like file-uploader breaks when the pages are cached aggressively. eForm by default minifies the HTML output, so in some cases, due to double compression some functionality may break.

So solve this, you need to add the following RegularExpression Exception under Page Caching and CSS/JS minification.

• wp-content/plugins/wp-fsqm-pro/
• wp-content/plugins/wp-fsqm-pro/(.*)
• /eforms/(.*)

This should take care of standalone form pages and plugin files. If you have changed the base endpoint of standalone, then you need to change /eform/ to /your-base-endpoint/.

Additionally add the URL of the posts/pages where forms are published through shortcodes.

The post Adding Exception to Caching Plugins appeared first on iPanelThemes Knowledge Base.

eForm version 3.7.1 now supports MailerLite newsletter integration. As of before it is really easy to set it up.

Add the Form Elements

Make sure you have the following three form elements in your form. Also make them required.

• Other Form Elements > Primary First Name.
• Other Form Elements > Primary Last Name.
• Other Form Elements > Primary Email.

Enable The Integration

• Go to Integration > MailerLite and enable it.
• Add the API key and Group ID.
• You can get the keys and IDs here.

Test it out

Now submit the form and see your email being added to your mentioned group.

The post MailerLite Integration with eForm appeared first on iPanelThemes Knowledge Base.

eForm version 3.7.1 now supports Enoirmail newsletter integration. As of before it is really easy to set it up.

Add the Form Elements

Make sure you have the following three form elements in your form. Also make them required.

• Other Form Elements > Primary First Name.
• Other Form Elements > Primary Last Name.
• Other Form Elements > Primary Email.

Enable The Integration

• Go to Integration > Enormail and enable it.
• Add the API key and List ID.

Access this link while being logged in and generate and copy an API key.

Access this link while being logged in click on settings (Instellingen) of your list. It will show the List ID.

Test it out

Now submit the form and see your email being added to your mentioned group.

The post Enormail Integration with eForm appeared first on iPanelThemes Knowledge Base.

eForm shows an asterisk (*) for compulsory questions. If you do not want to show this, then simply add the following CSS.

.ipt-eform-content .ipt_uif_question_required {
	display: none;
}

The post Remove asterisk from eForm question labels appeared first on iPanelThemes Knowledge Base.

With eForm v3.6.2 all of text elements and some of MCQ elements now have the capability of storing and fetching data from user meta values. This makes it possible to make a profile update form with eForm.

Before we start, see for yourself what we will be creating. You can also download the form and start modifying right away.

#1: Setup the form

For this form to setup, we use the following elements.

• MCQ Single Option for favorite fruit. We store the data in eform_favorite_fruit usermeta.
• MCQ Multiple Option for favorite places. We store the data in eform_favorite_places.
• MCQ Dropdown for favorite movie series. Data is stored under eform_favorite_movies.
• MCQ Thumbnail Selection for selecting a peaceful image. It is stored under the key eform_favorite_peaceful.
• Primary First Name, Primary Last Name, Primary Email to set the corresponding meta (first_name, last_name, user_email). For security, we disable updating user_email.
• Other Elements Email Address for storing Secondary Email under secondary_email metakay.
• Feedback Element Large Feedback to getting and setting profile description under built-in description key.

#2: Setup Prefill

For all elements, prefill can be set under Element Settings > Interface. We go through every element and setup

• Prefill Type to User Meta Based Values.
• Key to corresponding keys we have decided.

#3: Make the Form Update meta values

Upto this, the form will prefill the elements from the meta values it gets from user data. But to actually update it when the form submits, one more step is necessary.

• Go to WP Core > User Meta Update.
• Enable the configuration.
• Add every element to the list with corresponding element type and key and setup the metakey to update for.

Make sure you leave the “Store array instead of string” turned off, because we are modifying some built-in metadata in this form.

For a complete custom form you can keep it enabled and eForm will properly get and set the values.

The post Create User Profile Update form with eForm appeared first on WPQuark Knowledge Base.

With eForm v3.5 we have removed old themes and introduced new themes. As a consequence, the naming of the theme (internally) was changed. We did our best to auto-upgrade for forms, but in shortcodes, like in user portal it has to be updated manually.

The Issue

Your user portal page breaks and shows up like this.

Even the login form shows up like this.

Solution

The solution is simple. Edit the page and look into the shortcode.

There you will find the theme parameter. Change it to material-default to apply the teal material theme.

You can completely remove the shortcode and use the generator again to choose a theme of your choice.

The post User Portal broke after upgrading to 3.5 appeared first on WPQuark Knowledge Base.

Starting eForm version 3.5 a new element was introduced, the repeatable element.

As the name suggests, it can be used to allow your users to add rows of predefined elements on your form. You can check out a demo here and download the from from this link.

Add a repeatable Element

Repeatable Element can be found under Other Form Elements (O) under the form builder. Open it and scroll down to the bottom. There you will see the newly created repeatable element.

Drag the element on to your form and you are ready to go.

Interface Options

Under the settings window of the element, you will see INTERFACE.

• Icons on Elements: Disable to hide icons from all repeatable element group items.
• Hide Label: Enable to hide labels from all group items.
• Button Text: Used to populate the add button.
• Sortable: If enabled, then user will be able to sort the repeated rows.
• Deletable/Addable: Enable this to actually make the element repeatable. If you want a fixed set of elements without the capability of deleting, then disable this.

Validation Option:

Under the same settings window, you will see VALIDATION. Here you can set

• Initial number of elements.
• Minimum number of elements.
• Maximum number of elements.

The delete button stops functioning when the element reaches minimum number and the add new button stops functioning when maximum is reached. You should make sure Initial number of elements is greater than or equals to minimum number of elements and lesser then or equals to maximum number of elements.

Adding Groups inside repeatable

Repeatable elements work by duplicating your predefined group. Every group can contain any number of the following elements:

• Radio Element.
• Checkbox Element.
• Dropdown (select) Element with Multi select.
• Textinput with a number of validation.
• Textarea.
• Password.
• Date, Time & DateTime Pickers.

Configuring groups

Open the settings of the repeatable element. You will see the settings window.

Now navigate to “OPTIONS” section of the window and you will see ITEM GROUP LIST.

Click on ADD NEW ELEMENT and new item in your group will be created. Following configuration options are available.

• Title: Form element title.
• Type: Form element type.
• Size: Column size of the element.
• Req: Whether the element is compulsory (required) or not. This is the primary validation rule.
• Options: Here you will enter choices for MCQs and placeholders for text inputs. We will discuss about it more.
• Filter: Other validation filters specific for some of the types. We will see more about this.
• Clear: Whether to clear columns before this element. Useful when building layouts and the height of the elements does not match. For example, if you wish to create a 4 column layout, then after every 4th element, i.e, on 5th element, 9th element etc, you would want to enable this.

Different Types of repeatable element

With eForm version 3.6.5 (at the time of writing) there are a total of 16 types of repeatable elements. Since many of them have very similar Options and Filters, we will discuss them together.

Option 1[num=10]
Option 2[num=20]

Choice 1
Choice 2

minCheckbox="1" maxCheckbox="2"

Option 1[num=10]
Option 2[num=20]

Choice 1
Choice 2

Please select[empty]
Option 1[num=10]
Option 2[num=20]

minSize="1" maxSize="10"

min="10" max="100"

future="1800-01-01" past="NOW"

Now you know how to configure repeatable elements properly. Start using it and let us know if you have any troubles.

The post Repeatable Elements with eForm appeared first on WPQuark Knowledge Base.

To get started with eForm, you will need to create a form first. The system comes up with a few forms pre-installed and you can check them out if you want a quick start. For in-depth informaiton, please read this.

Access the form builder

To create a new form through form builder:

• Go to WP Admin > eForm > New Form.
• Select a template or start from blank.
• Give a name and change other settings.
• Click on create 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.

Form type

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.

Some useful Settings

Here are some useful settings for each form types.

• Wrap Inside: Works for simple form appearance. If disabled, then the shadowed container won’t be shown.
• Block Navigation to previous Tab/Page: For Tabular & Paginated appearance. If enabled, then the previous action won’t work.
• Can Navigate to any Tab: If enabled then user can freely navigate to any tab for tabular appearance.
• Scroll to the page top: If enabled then the page will scroll to the top of the form when changing pages/tabs.
• Scroll to element on validation error: If enabled, then page will scroll to the element which has caused some validation error.

Adding Containers

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.

Configuring 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.

Rearranging Form Elements

• Simply drag and drop elements throughout the layout to rearrange them.
• Drop over a container tab to place to the specific container.
• Drag and position containers tabs to rearrange them.

Duplicate Form Elements

• Click on the copy button to duplicate an element.
• Click on the copy icon of containers to duplicate an entire container.

Delete an Element or Container

• Drag an element and drop to the bottom to delete an element.
• Click on the delete button to delete an entire container.

Saving and Previewing Form

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

The post Creating your first form through eForm appeared first on WPQuark Knowledge Base.