What action should I assign to a form in Webflow's custom code component to make it submit and function like a regular Webflow form?
TL;DR
- To have a form function like a standard Webflow form, use Webflow's native form block and maintain default attributes.
- Set the action attribute to "/" and method to "POST," ensure success and error states use Webflow classes, and test custom scripts to avoid conflicts.
To have a form in Webflow's custom code component submit and function like a standard Webflow form, you need to ensure it's aligned with Webflow’s built-in form functionalities.
1. Use Webflow's Form Element
- Ensure your form starts with Webflow's native form block. This is critical for Webflow to process submissions with built-in functionalities like form submissions dashboard and integrations.
2. Validate Form IDs and Classes
- Check your form's ID and class attributes. Keep them consistent with Webflow's conventions.
- Maintain default data attributes (
data-wf-form) for form processing.
3. Set the Action and Method Attributes
- Ensure the
actionattribute is set to “/” or left empty. This default behavior encourages Webflow's form submission handling. - Set the
methodattribute to “POST” to allow data to be sent for processing.
4. Integrate Form Success and Error States
- Use the
w-form-doneclass for a success message element andw-form-failfor an error message element. - Wrap success and error messages within the form element for proper display following submissions.
5. Add Custom Code Cautiously
- Embed JavaScript carefully if you're adding custom validation or functionalities. Ensure it doesn't overwrite Webflow's default form behavior.
- Test any embedded scripts independently to ensure no conflicts arise with Webflow's form handling.
Summary
To make a Webflow form using the custom code component function like a regular Webflow form, ensure you start with a native form block, set correct action and method attributes, and use default Webflow classes for success and error states. This ensures seamless integration with Webflow's form processing system.