How can I add specific job page details to the form submission in Webflow?

Published on
September 22, 2023

To add specific job page details to the form submission in Webflow, you'll need to utilize some custom code. Here's a step-by-step guide on how to achieve this:

  1. Create a form element on your specific job page: Start by adding a form element to the specific job page where you want to capture the form submission details. You can use the built-in form element in Webflow or create a custom form using HTML.

  2. Add hidden input fields: Inside the form element, add hidden input fields for each specific detail you want to capture. For example, if you want to capture the job title and job ID, you can add two hidden input fields with the respective names (e.g., job_title and job_id) and leave the value attribute empty.

  3. Get the job details from the URL: In order to populate the hidden input fields with the job details, you'll need to extract this information from the URL. You can use JavaScript to accomplish this by accessing the URL parameters. For example, if the job page URL is example.com/jobs?title=web-developer&id=123, you can use JavaScript to extract the values of title and id from the URL.

  4. Populate the hidden input fields: Once you have extracted the job details, you can use JavaScript to populate the hidden input fields with the respective values. You can access the hidden input fields by their names and set their values using JavaScript.

  5. Handle the form submission: Lastly, you'll need to handle the form submission on the server-side. In Webflow, you can use the built-in form submission handling or integrate with a third-party service like Zapier to capture the form data and send it to your desired destination.

Using this approach, whenever a user submits the form on the specific job page, the hidden input fields will be included in the form submission data. This way, you can capture specific job page details along with the form submission.

Example code:

<form>  <!-- Hidden input fields -->  <input type="hidden" name="job_title" id="job_title">  <input type="hidden" name="job_id" id="job_id">    <!-- Other form fields -->  <!-- ... -->    <!-- Submit button -->  <input type="submit" value="Submit"></form><script>  // Get the job details from the URL parameters  const urlParams = new URLSearchParams(window.location.search);  const jobTitle = urlParams.get('title');  const jobId = urlParams.get('id');  // Populate the hidden input fields  document.getElementById('job_title').value = jobTitle;  document.getElementById('job_id').value = jobId;</script>

Additional Questions:

  1. How do I create a form in Webflow?
  2. Can I use Webflow's built-in CMS to manage job details?
  3. How can I integrate Webflow form submissions with Zapier?