How to add additional fields through Custom HTML/Javascript in Forms and Surveys in GoHighLevel

Incorporating extra fields using custom JavaScript can be challenging. Customers have the option to use HTML elements to insert custom code for additional fields.

After implementing the logic in the builder, users can view these fields in the preview. However, they won’t be included in the submission for security reasons; allowing this could expose the system to vulnerabilities by permitting arbitrary data to be passed through the submission.

Workaround Solution

If a customer creates a field named My Own Field using custom JavaScript or HTML and stores the input in the myData variable, they must also create a corresponding holder custom field for each field added via Custom HTML/JavaScript. This holder field will serve as a container for the data whenever changes are made in My Own Field.

Steps to Implement the Solution

1. Create a Custom Field in the Builder:

   – Ensure the custom field is created with a relevant name to act as a holder for the data from “My Own Field.”

2. Retrieve the Custom Field ID:

   – Go to the Preview of the form.

   – Right-click on the page and select ‘Inspect.’

   – Select the mouse pointer tool.

   – Click on the “Custom Field.”

   – Copy the ID from the name and ID properties.

Example: If you created a custom field named `xxTrustedFormCertUrl`, follow the above steps to get its ID.

3. Mark the Custom Field as Hidden:

There are two approach to hide the custom field in the preview

1. Native hidden feature

In the builder, mark the custom field as hidden so it won’t appear in the preview. The actual My Own Field  will still be visible.

        2. Custom CSS Hidden

.menu-field-wrap:nth-child(x) { 

    display: none; 

}

here x in the css code stands for the element number to hide. Example if customField is 4 in the list of field the value of x = 4   

NOTE: For Surveys always use Custom CSS hidden approach and for forms both works

4. Transfer Data Using JavaScript:

   – Add the following JavaScript code to transfer the collected data from “My Own Field” to the newly created hidden custom field:

document.getElementsByName(‘customFieldId’)[0].value = myData; document.getElementsByName(‘customFieldId’)[0].dispatchEvent(new Event(“input”));

HTML

Replace `customFieldId` with the ID of your custom field.

By implementing this code, the data captured through My Own Field  will be stored in the hidden custom field during the submission process.

This workaround ensures that additional fields added through custom JavaScript/HTML are securely included in the form submission.