How can I integrate Webflow and Salesforce, including styling, success message, and hidden form fields, while keeping the overall functionality of a standard Webflow form? Any tips on the best way to proceed?

You want to integrate Webflow forms with Salesforce, ensuring that styling, success messages, and hidden fields still behave like normal Webflow forms. Here's how to proceed while maintaining native Webflow functionality.

1. Create and Style the Form in Webflow

• Design your form using Webflow’s built-in form blocks so it matches your site’s styling.
• Include all necessary input fields, buttons, and hidden fields using Webflow’s Form Block.
• Add hidden fields by dragging in a regular form input, setting display: none, and giving it a name attribute that matches a Salesforce field (e.g., “Lead Source”).

2. Set the Form to “Custom Action” Mode

• By default, Webflow submits forms via its own mail handler.
• To send data to Salesforce, you need to override the form’s action URL.
• Go to the Form Settings Panel, and set:
• Action: Use your Salesforce Web-to-Lead endpoint (you generate this from Salesforce).
• Method: POST
• For example, Salesforce provides a URL ending in something like /servlet/servlet.WebToLead?encoding=UTF-8.

3. Generate Web-to-Lead HTML in Salesforce

• In Salesforce:
• Go to Setup > Web-to-Lead.
• Use the form generator to select Lead fields.
• Salesforce will provide you with a raw HTML form.
• Extract only the field names and hidden fields from this code (e.g., oid, retURL, etc.).
• Do not copy the raw HTML form into Webflow; just use its field names and values inside Webflow’s native form.

4. Match Field Names in Webflow

• For each Webflow form input:
• Click the field in Webflow Designer.
• Under Element Settings > Name, input the exact name attribute from the Salesforce generated form (e.g., first_name, email, company).
• This ensures Salesforce captures the data correctly.

5. Handle the Success Message Natively

• Salesforce’s Web-to-Lead usually redirects to a confirmation URL (retURL hidden field).
• If you want to keep Webflow’s standard success message, you need a workaround:
• Instead of using the Salesforce retURL, intercept the form submission with JavaScript and use an AJAX request to POST the data to Salesforce.
• On successful response, trigger Webflow's native success state via JS ($('.w-form-done').show() and $('.w-form-fail').hide()).

6. Use Hidden Fields for Metadata

• Add hidden fields to pass tracking or source data like utm_source or page URL.
• Set the default value with custom code using JS on page load.

Example:

document.querySelector('input[name="source_url"]').value = window.location.href;

7. Test Thoroughly

• Publish your Webflow site and submit test leads.
• Verify:
• Data appears correctly in Salesforce.
• Hidden data like utm fields are included.
• Webflow success message still shows.
• Styling and responsive behavior are intact.

Summary

To integrate Webflow with Salesforce while keeping native styling, success messages, and hidden fields:

• Design the form in Webflow, then update form field names using Salesforce’s Web-to-Lead tool.
• Use a POST method with the correct Salesforce Action URL.
• To keep native success behavior, use AJAX submission with custom code.
• Populate hidden fields via JavaScript on page load for tracking.

This method strikes the balance between native Webflow UX and direct Salesforce integration.