How To Create A New Form Field When Customizing A Form
To add a new form field on a form, click on the "Add Field" button:
Clicking on this button will generate a new form field:
Clicking on the Gear Icon will display further settings:
To turn on and require validation rules for a form field, please read this article:
To clone a form field, please go to Actions >> Clone Field:
In-Depth Look into Each Setting
** In general, customizing forms is not something we recommend if you are not a developer, however, these instructions should help if it is a very simple change like changing the text of the field or adding a custom field.
Inside the "Field Label" add the label/name of the field:
This section is the area where the variable name is added. The variable is how this particular data will be stored in the database of the site.
Important information to keep in mind:
- If a field is created without this information, when members submit the information, it will never be stored or saved.
- It's important to note that all existing form fields have a database variable and those should not be changed unless doing so for a very specific purpose knowing all consequences that can happen by doing so.
The variable goes here:
This variable name will also display in the front-end in the code view:
It's important to know that all database variables should only contain lowercase characters and there should be no spaces in the variable name, if using more than one word for the variable please use underscores to separate them.
All database variables must be unique:
Type of Field:
Select from the available options:
In this article In-Depth Look Into Each Field Type, we go over the different types of form fields that can be created with little or no coding knowledge:
This form field section is specifically designed to determine whether or not a field is required to submit the form:
When enabled, this is how it looks on the front-end, a red asterisk * will appear:
Inside this section add text that will go inside the field as example text:
Field Help Text:
Inside this section add text that will appear under the field:
Default Field Value:
Inside this section add a pre-filled field on the form:
The difference between the Placeholder Text and Default Field Value is that if a website visitor submits the form without making any changes to the field, the value-added on Placeholder Text will not be saved while the value-added on the Default Field Value will be saved in the database.
Additional Field CSS Class:
Inside this section add custom CSS classes to enhance the design of the fields. This is particularly useful for developers/web designers. If not familiar with CSS we do not recommend using this field:
If need to gray out a field, add "readonly" after the CSS class:
Outer Element ID:
Inside this section add a custom ID element to the field. This is particularly useful for developers/web designers, as this allows the adding of additional CSS to this specified form field:
Inside this section decide whether or not the new field will show up on the form being customized.
If disabled, the field added will not be displayed on the form. This is particularly useful in cases when there are new fields on the form that will be needed in the future, site owner doesn't want the members to fill them out yet.
Below the display settings, there are some fields called "Alt. Field Label".
They allow adding a new field label name for each display setting.
For example, the main field label is "Courses".
The Input View (Form) is going to be renamed "Completed courses".
The Display View (Front-end) is going to be renamed "Latest Courses".
The other fields labels (Lead PReviews, Include in Emails, Table View) are empty, so they will use the main field label.
Inside this section decide whether or not the data entered in the new field will show up in the front end of the site.
Important to note that this particular setting does not apply to all forms. For example, enabling or disabling this setting for Contact Us form will not make any difference as there is no front-end view for this form on the site (after submitting). This would apply however if a custom field is added to a feature form like Classifieds or member form like Contact Details.
A good example about the functionality of this setting can be found in the article down below:
Inside this section decide whether or not the data entered in the new field will show up on Lead Previews.
This setting applies to only lead forms like Website - Lead Form - Get Matched. If this setting is enabled and member is set to receive a preview email when a lead is submitted, the field specified will display as it can be seen down below:
This can be helpful in instances where the site owner might not want to share all the details of a lead submitted to encourage the member to visit the website or even purchase the lead.
Include In Emails:
Like the previous setting, if enabled, it shows data when the form is rendered in an email and for accepted leads.
A good example to enable this setting would be for the Contact Us form as when it is submitted, it does send out an automated email to the admin of the site.
Many times after submitting a form, that data is collected in a module of our system. That module then displays the data in an organized fashion so that the admin of the site can easily manage it. We use tables to organize the data in our modules.
This can be helpful to enable for Contact Us form as the information submitted can be viewed via the Emails >> Forms Inbox: