Tutorials
Setting Up Zapier for Webflow Form Submissions

Setting Up Zapier for Webflow Form Submissions

To establish a standard operating procedure for setting up Zapier to capture data from Webflow form submissions and send it to JotForm. This process will ensure that team members can effectively delegate tasks without misunderstandings, minimizing errors and maximizing productivity.

Watch Tutorial
Learn More

SOP: Setting Up Zapier for Webflow Form Submissions

Objective

To establish a standard operating procedure for setting up Zapier to capture data from Webflow form submissions and send it to JotForm. This process will ensure that team members can effectively delegate tasks without misunderstandings, minimizing errors and maximizing productivity.

Key Steps
  1. Access Webflow Form Settings
    • Log in to your Webflow account.
    • Navigate to the specific project where the form is located.
    • Locate the form element on the product page and review the input fields (e.g., first name, last name, email, phone number, message).
  2. Identify Hidden Fields
    • Check for any hidden fields in the form (e.g., CMS code) that may need to be included in the data sent to Zapier.
  3. Publish Changes
    • Once the form is set up, publish the changes to the live website.
  4. Submit a Test Form
    • Go to the live website and fill out the form with test data.
    • Ensure you submit the form and receive a confirmation message.
  5. Verify Submission in Webflow
    • Return to the Webflow dashboard.
    • Go to Site Settings > Forms and verify that the submission appears under the product page contact form submissions.
  6. Log into Zapier
    • Access your Zapier account.
    • Click on "Make a Zap" to create a new automation.
  7. Set Up Trigger
    • Choose Webflow as the app for the trigger.
    • Select the event "New Form Submission."
    • Connect your Webflow account and select the correct site and form (Product Page Contact).
  8. Test Trigger
    • Test the trigger to ensure Zapier can retrieve the latest form submission data.
  9. Set Up Action
    • Choose JotForm as the action app.
    • Select the event "Create Submission."
    • Connect your JotForm account and select the appropriate form (e.g., Contact Us).
  10. Map Fields
    • Map the fields from the Webflow submission to the corresponding fields in JotForm. Ensure that all necessary fields are included.
    • If additional fields are required in JotForm, make sure to add them.
  11. Test the Zap
    • Run a test to ensure that the data flows correctly from Webflow to JotForm.
  12. Review and Finalize
    • Once the test is successful, review all mappings and settings.
    • Turn on the Zap to start automating future submissions.
Cautionary Notes
  • Ensure that all field names in Webflow match exactly with those in JotForm to avoid mapping errors.
  • Hidden fields must be properly configured to ensure data is captured correctly.
  • Always test the setup with real data to confirm that the automation works as intended.
Tips for Efficiency
  • Document any changes made to the form structure in Webflow to maintain clarity for future updates.
  • Regularly review the Zapier integration to ensure that it continues to function correctly, especially after any updates to Webflow or JotForm.
  • Use descriptive names for Zaps and fields to make it easier for team members to understand their purpose.
Link to Loom

https://loom.com/share/cfa31a60eba44465bdbc9516c6c16a18?src=composer

‍