How can I connect the job position the user is inquiring about from the Job detail description page to the form submission page on Webflow?
- Add a link on the Job Detail page to the Form page using a URL parameter like /apply?job=Job-Title.
- On the Form page, use custom JavaScript to extract the 'job' parameter and insert it into a visible or hidden input field.
To pass the job position from a Job Detail page to a submission Form page in Webflow, you need to use URL parameters and configure your form to receive and display that data.
1. Link the Form Page with URL Parameters
- On your Job Detail page, use a Button or Link Block that directs users to the submission Form page (e.g.,
/apply). - Modify the link to include the job title using a URL parameter, for example:
/apply?job=Marketing-Manager
- Use Webflow’s CMS to dynamically insert the job title in the link like this:
/apply?job={Job Title} (replace {Job Title} with the CMS field reference from the collection).
2. Read the URL Parameter on the Form Page
- On the Form submission page (
/apply), you need to extract thejobparameter from the URL. - To do this, add a custom embed element before the form with JavaScript to grab the parameter and insert it into the form field.
3. Store the Value in a Hidden or Visible Form Field
- Add a Form Input field in Webflow.
- If you want users to see the job title, use a Text Field.
- To keep it hidden, use a Hidden Field component.
- Set a unique
idfor the input, e.g.,job-position.
4. Add Custom Code to Populate the Field
- Just before the closing
</body>tag in your Page Settings > Custom Code, add the following plain JavaScript (no<script>tags needed):
const urlParams = new URLSearchParams(window.location.search); document.getElementById("job-position").value = urlParams.get("job");
- This script grabs the
jobparameter and inserts it into the input field with the IDjob-position.
Summary
To connect a job position from a Job Detail page to a Form page in Webflow, (1) pass the job name as a URL parameter, (2) extract that parameter using custom JavaScript, and (3) populate a form field (visible or hidden) on the submission page. This method ensures the form captures the relevant job position automatically.
