Skip to main content

Adding Additional Fields in Stack Forms and Surveys with Custom HTML/JavaScript

Enhancing your forms and surveys with additional fields using custom JavaScript can be a bit tricky. However, with the right approach, you can effectively implement these custom fields while ensuring the security of your data.

Understanding the Process​

When you add extra fields using HTML elements and custom code, these fields will appear in the form preview. However, they won't be included in the form submission by default due to security measures. This is to prevent any unauthorized data from being submitted.

Workaround Solution​

To include these custom fields in your form submissions, you can use a workaround that involves creating a placeholder custom field. This placeholder will store the data from your custom fields.

Steps to Implement the Solution​

  1. Create a Custom Field in the Builder

    • Set up a custom field with a relevant name that will serve as a placeholder for your data.

  2. Retrieve the Custom Field ID

    • Open the form preview.
    • Right-click on the page and select 'Inspect.'
    • Use the mouse pointer tool to select your custom field.
    • Copy the ID from the name and ID properties.

    Example: If your custom field is named xxTrustedFormCertUrl, use the above steps to find its ID.

  3. Hide the Custom Field

    You have two options to hide the custom field in the preview:

    • Native Hidden Feature: In the builder, mark the custom field as hidden. This will keep it invisible in the preview while your custom field remains visible.

    • Custom CSS Hidden: Use the following CSS to hide the custom field:

      .menu-field-wrap:nth-child(x) { 
          display: none; 
      }

      Replace x with the position number of your custom field in the list. For example, if it's the fourth field, use x = 4.

    Note: For surveys, always use the Custom CSS hidden approach. For forms, both methods are effective.

  4. Transfer Data Using JavaScript

    • Add the following JavaScript code to move data from your custom field to the hidden placeholder: 
      document.getElementsByName('customFieldId')[0].value = myData;    
      document.getElementsByName('customFieldId')[0].dispatchEvent(new Event("input"));
    • Replace customFieldId with the ID of your custom field.

By following these steps, you can ensure that any additional fields added through custom JavaScript/HTML are securely included in your form submissions. This method maintains the integrity and security of your data while allowing for enhanced customization.