How can I dynamically redirect to a CMS created after form submission in Webflow?
- Add a unique identifier (e.g., CMS slug) to each collection item and capture it via a form input.
- Use JavaScript to intercept form submission, extract the identifier, and redirect to the corresponding CMS item URL (
/collection-name/slug).
To dynamically redirect users to a CMS item (collection page) after a form submission in Webflow, you need to combine Webflow form handling with custom JavaScript and either a unique field or reference selector.
1. Set Up Unique Identifier in CMS
- In your CMS Collection, ensure each item has a unique slug (e.g.,
article-title,product123) or another field that can be used to identify the desired item. - You might also create a Reference field (if selecting from another collection) or a visible field like a drop-down or text input in the form that corresponds to the CMS item slug.
2. Add Custom Attributes to Form Input
- In the Webflow Designer, select the relevant form input (e.g., a dropdown or text input).
- Use Custom Attributes (under the Settings panel) to add identifiers if needed.
- For example, name the input
slug,project-id, or similar.
3. Capture Form Submission with JavaScript
Use Webflow’s form submit event to intercept the form before default redirect behavior.
In your Webflow project, embed the following logic in a custom code block included on the same page as the form, or in Page Settings > Footer Code:
Example logic:
On successful form submit, extract the input value
Build the CMS URL based on the slug field
Redirect to that CMS item’s dynamic route (
/collection-name/slug)Sample code (minified for clarity):
Important: Replace
collection-namewith your actual Collection Page slug.```javascript
```
Adjust
name="slug"to match the input’s name attribute or selector in your form.
4. Use Custom Success Callback (Optional)
- Alternatively, use Webflow’s native success message block for a cleaner UX.
- In the success message embed custom JavaScript similar to the above to handle redirection after receiving form submission confirmation.
5. Test the Workflow
- Publish the site and test your form submission end to end.
- Ensure redirection works correctly for different CMS slugs and user input is sanitized or validated, as needed.
Summary
To redirect dynamically to a CMS item after form submission in Webflow, use a form input that captures a unique identifier (like a slug), then apply custom JavaScript to redirect users to the correct CMS collection page using that value.