How To Create A New Form Field When Customizing A Form


1) To add a new form field on a form, click on the "New Field" button:




Clicking on this button will generate a new form field:




2) The other way to add in a new field to a form is using the "Actions" drop-down. It will present the option to "Add Field Below":





Clicking "Field Settings" 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.


Label Name:




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




System 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: 




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.



Field Type:


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:


This form field section is specifically designed to determine whether or not a field is required to submit the form:




When set to "Yes" 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 Instructions:


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:




Enter 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 you are not familiar with CSS we do not recommend using this field:



Front-end display:




Outer Element ID:


Inside this section add 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 (using inspect view on the browser):





Now that there is a unique ID, further assign custom CSS rules to this field:



This custom CSS rule can be added inside the website Custom CSS/HEAD section which is under Settings --> Design Settings:




Show In 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 by selecting "Yes" or "No". 


** Important to note that this particular setting does not apply for all forms. Some forms may require additional customizations for variables to show up in different areas. This setting is mainly for the "Listing - Additional Details - Member" form.




Show In Input View?:


Inside this section decide whether or not the new field will show up on the form being customized by selecting "Yes"  "No" or "Yes - readonly". 


This is particularly useful in cases when there are new fields on the form that will be needed in the future, but you don't want the members to fill them out yet. 



The option to set "Yes-readonly" will block or gray-out the content shown in the field where this option is turned on:




These is an example of a field set to "Yes-readonly":




Show In Email View?:


inside this section decide whether or not the data entered in the new field will show up on emails. 

 

An example of this could be lead emails, by default members get email notifications about leads, in that notification they usually can see the lead's name, to stop the lead name from appearing, edit the Lead form and change the field to "No" for "Show in Email View".




Show In Preview View?:


Before sending any manual emails to the members the system pops up a preview of what that email will look like. This section allows you to decide whether or not the data entered in the field you created will show up on email previews:




Show In 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. 


Inside this section decide whether or not the data entered in the new field will show up in the admin: