On the Form Configuration page you have the opportunity to sort the fields in the form, as well as create additional tabs for the fields.

With the help of the special field "Section" you can visually separate the fields within one tab.

Display Fields Rules

Using the rules for displaying fields, you can customize the display of fields in the form, depending on the condition. Multilevel nesting of dependent fields is allowed. This functionality will be useful both for adding and editing records inside the system, and when using in public forms.

 

Custom JavaScript in the form

Sometimes you may need to perform additional validation of the entered data or convert the entered values. You can solve such tasks using your own JavaScript. To embed your code, click on the "Add JavaScript" button. You can execute the code when the form is displayed or when the onSubmit event is called.

JavaScript when displaying a form can be used to process entered values on the fly.

Simple example on input event to put extra value in another field.

$('#fields_495').on('input', function() {
   var val=$(this).val();
  
   $('#fields_496').val(val+'test')
})

See list of available events that you can use here: https://api.jquery.com/category/events/
For dropdowns you can use .change(), for input you can use .focusout() or .keyup() etc.

The code on the onSubmit tab is used to process values that have already been entered.

Example code that displays an error and stops submitting the form if both fields are empty:

if($('#fields_281').val()=='' && $('#fields_229').val()=='')
{
  alert('Enter address or just zip code');

  //to enable Save button
  $('.btn-primary-modal-action').prop('disabled',false);

  //to stop form submit
  return false;  
}

Example to validate Start/End date

var start_date = $("#fields_175").val()
var end_date = $("#fields_176").val()

if(start_date.length>0 && end_date.length>0)
{
    start_date = new Date(start_date)
      end_date = new Date(end_date)
  
      if(end_date<start_date)
    {
      alert('Error: End Date should be after Start Date');
      
      $('.btn-primary-modal-action').prop('disabled',false);
      return false;
    }
}