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:




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.


Field Label:




Inside the "Field Label" add the label/name of the field:



Database Variable:


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. 


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.


Type of Field:


Select from the available options:





Down is an article going over the different type of form fields that can be created with little or no coding knowledge: 


In-Depth Look Into Each Field Type


Required Field?:


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:





Placeholder Text:


Inside this section add text that will go inside the field as example text:




Front-end display:





Field Help Text:


Inside this section add text that will appear under the field:




Front-end display:




Default Field Value:


Inside this section add a pre-filled field on the form:




Front-end display:





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:




Front-end display:





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:




Front-end display:





Input View:


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. 




Display View:


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:


How To Display Custom Post Fields In The Post Details Page 


Lead Previews


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, the value submitted will display on email view, if the form submitted is supposed to trigger an email.




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.


Table View:


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: