Does anyone know of a workaround to auto-populate a form field in Webflow based on which page the viewer clicked "apply" on?

Published on
September 22, 2023

Sure! In Webflow, you can achieve auto-population of a form field based on the page a viewer clicked "apply" on by utilizing custom code and Webflow's interactions. Here's a step-by-step guide on how to implement this workaround:

  1. Set up your form: Create a form in Webflow and add a text input field that you want to auto-populate based on the clicked page.

  2. Add custom code: In your Webflow project, go to the Project Settings tab and click on the Custom Code section. In the Footer Code section, add a JavaScript code to handle the auto-population functionality. This code will be triggered on the pages where you want to auto-populate the form field.

  3. Get the URL parameter: Within the JavaScript code, you need to retrieve the URL parameter that represents the page the viewer clicked on. Use the URLSearchParams function to parse the URL and get the specific parameter value.

    ```javascript
    var urlParams = new URLSearchParams(window.location.search);
    var clickedPage = urlParams.get('clickedPage');
    ```

  4. Auto-populate the form field: Use JavaScript to find the form input element and set its value to the clickedPage variable.

    ```javascript
    var formField = document.getElementById('form-field-id');
    if (formField) {
    formField.value = clickedPage;
    }
    ```

    Replace 'form-field-id' with the actual ID of your form input field.

  5. Trigger the code: To make the auto-population happen when the user clicks the "apply" button, you need to add an interaction to the button element on the clicked pages. In the interaction, select the "Run a JavaScript" option and enter the code to trigger.

    ```javascript
    customCode();
    ```

    Replace customCode with the name of the JavaScript function you used in step 4.

  6. Publish your site: Once you have implemented the code and set up the interactions, publish your Webflow site for the changes to take effect.

By following these steps, you will be able to auto-populate a form field in Webflow based on the page the viewer clicked "apply" on. Remember to adjust the IDs, class names, and any other variables according to your specific use case.

Additional questions:

  1. How do I use custom code to auto-populate a form field in Webflow?
  2. Can Webflow auto-populate form fields based on the clicked page?
  3. Is it possible to populate a form field in Webflow using URL parameters?