VTExperts Web Form & Landing Page Builder extension allows to the creation of related module records as well. In this article, we will look at how to add related module records using tabular field entry in the form builder

Example

We will check the configuration and functionality of the extension by implementing the form for the below-mentioned example.

The primary module is “Contacts” and the secondary module is “Child” and they have one-to-many relationship (which means 1 contact record can have multiple child records)

The form will get information from the contact regarding their children, what are their names, date of birth, and any additional information.

So, we will create a web form for the Contacts module and will configure it in a manner that it can also create records in the child module.

Create the form

1. Go to the form builder and click on “+ New from” button and provide the form name
   
2. Go to the form settings and select “Contacts” as a module in general settings
   
3. Now start adding the field into the form using “Add Field” button located on the right upper corner of the window
   
4. Here in the example, two “One line input field” are added by the label of First name and Last name
   
   
   

Related module fields in the form using tabular field entry

The basic form is ready now. In the next step, we will see how to incorporate the related module fields in the form using a tabular field entry

1. Click “Add field”, then “More fields” and then select “Tabular”
   
   Form will appear as follow
   
2. In order to select the related module and field click on the newly added tabular table and open its configuration
   
3. In example, we will be selecting a related module by the name of “Child” and the field that we will be getting data filled into includes Child name (a text type field), Date of birth (a date type field) and Additional Information field (text type field)
   • Selecting the related module: Click on the tabular form to open the settings and at the bottom of the setting menu there is a “Create related record” check box, check it.
     
   • Select the related module in the drop-down list
     
   • Now specify the fields of the related module in which you want to fill in the data. In this case, the field labels that are shown by default do not match our requirements and we want to add additional fields. For this purpose, specify the field labels that you want to show in the form in “Columns” section of the tabular form configuration.
     
   • Move to the bottom of the configuration settings in the related module section. Select the CRM field in the right side and then select the appropriate label on the left side. For example, Description field on the related module is mapped to the Additional information label of the form
     

Datepicker field

1. 1. The process of mapping a date picker field is different as compared to the other fields. In this example, we are working with the Date of birth field, which is a date picker field.
      
      1. For the date type field, first we have to create a date picked field in the form. Go to “Add fields” and add a “Date picker” type field
         
      2. Click on the newly added date picked field to open its configurations. Note down the field Field id, which in this case is “FIELD11”
         
         
      3. Check the “Hide field on page load” option at the bottom of date picker field configuration and save the field
         
      4. Now go the tabular table configuration and add “|” followed by Date picker field id  next to the Date of birth label in column configuration section In this example it will be “|FIELD11″ and save the tabular form configuration
         
      5. Output of date picker field
         

Working of the form

Once done, the form will be ready to use

1. 1. It will look similar to the form shown below
      
   2. Submit the form after filling the data
      
   3. New contact is created  i.e. “Dave Crimson”
      
      
   4. In the related module tabs, you can check the related from submission and child module records created
      

Check out other features of Web Form & Landing Page Builder Here