Pre-fill Form Fields with Custom Data Using JavaScript

You can automatically populate custom fields in your CRM forms or surveys using custom HTML and JavaScript. This is useful for passing data from an external source into a form before a contact submits it. The value will then be saved with the form submission record.

How to Find a Custom Field's ID

To target a specific field with your code, you first need to find its unique ID. Follow these steps:

  1. Navigate to the form editor and open the form's Preview.
  2. Right-click anywhere on the preview page and select Inspect from your browser's context menu to open the Developer Tools.
  3. Within the Developer Tools, click the mouse pointer icon (or 'Select an element' tool).
  4. Click directly on the custom field in the form preview. This will highlight the corresponding HTML element in the code panel.
  5. In the highlighted code, look for the name and id attribute properties. The value for the name attribute is the ID you need to copy for your script.

For example, if you inspect a custom field, you might see code like name="field_12345". In this case, field_12345 is the ID you would use.

Applying the JavaScript Code

Once you have the custom field ID, you can write JavaScript to set its value. You will need to determine where your data is coming from (e.g., from a URL parameter, a cookie, or a variable calculated on the page) and assign it to a variable in your script.

The basic pattern for setting the field value and ensuring the CRM recognizes the change is:

  • Use document.getElementsByName('field_ID')[0].value = yourDataVariable; to populate the field.
  • Immediately after, trigger an input event on the field using: document.getElementsByName('field_ID')[0].dispatchEvent(new Event("input"));

Replace field_ID with the actual ID you copied (e.g., field_12345), and replace yourDataVariable with the variable or explicit value containing the data you want to insert.

You can add this custom JavaScript logic to your form using the Custom HTML/JavaScript block available in the form builder.