Logo

Please install Yoast or RankMath to use breadcrumbs.

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.

Related Articles

Populate Custom Fields and capture in submission using Custom HTML/Javascript Logic in GoHighLevel

Automatically populating a custom field in forms or surveys using custom HTML or JavaScript, and then saving it during submission, is a simple and straightforward process. 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 […]

John Mamado

Gain Consent With Custom Checkboxes In Forms (GDPR Compliance) in GoHighLevel

The Custom Checkbox feature in Form Builder enables visitors to explicitly confirm their consent to receive communications from your business or your client’s. This is particularly valuable for ensuring compliance with GDPR regulations in regions where additional consent is mandated. Step 1: Create Custom Field Inside Of Form Builder This is your GDPR Compliance StatementPlease […]

John Mamado
Logo
Go HighLevel Onboarding, Training, Education, Coaching, Support, Products and Services. Enabling Customer Success for GHL Agencies Worldwide
Copyright Growthable LLC 2024 | All Rights Reserved

Grab our free GHL subaccount onboarding checklist ✅