Webflow sync, pageviews & more.
NEW

How can I fix the non-responsive submit button on the slider form with custom code that I cloned and pasted into my Webflow website? Additionally, can I make the slider go to the next slide so users can book a meeting via Calendly embed?

TL;DR
  • Ensure the submit button has proper event handling, correct HTML structure, and that JavaScript/jQuery is error-free and correctly linked.
  • Embed the Calendly widget in the next Webflow slider slide and use JavaScript to advance the slider programmatically upon successful form submission.

You're dealing with two issues: a non-responsive submit button in your custom slider form, and making the slider progress to the next slide after submission to show a Calendly embed. Here's how to address both problems.

1. Check Your Custom Code for Submit Button

  • Inspect your custom code to ensure the submit button has a proper event listener (e.g., onclick or addEventListener) and that it’s not being blocked by preventDefault() or an error.
  • Make sure the selector used in your JavaScript matches the actual ID or class of the submit button in the Webflow HTML.
  • If the button is inside a Webflow Form element, ensure it’s actually a type="submit" button inside a <form> element—Webflow requires that form structure to trigger native behaviors.

2. Ensure jQuery or JS is Correctly Linked

  • Webflow includes jQuery by default, but if your code relies on vanilla JS or an external slider library (e.g., Swiper.js), verify those libraries are loaded properly in the Page Settings > Before tag section.
  • Check the browser console for errors in Chrome DevTools to spot JavaScript issues that may prevent the button from working.

3. Integrate Calendly Embed in the Next Slider Slide

  • Add a Slider component in Webflow and use a separate slide to contain the Calendly embed.
  • Paste the Calendly inline embed code (only the <div id="calendly-inline-widget"> plus link script) inside an Embed element in that new slide.
  • Make sure to add loading="lazy" to the <script> tag if you’re using defer/lazy load techniques.

4. Trigger Slide Change After Submit

  • Use Webflow’s native Slider API or add custom JavaScript to manually move to the next slide after successful form submission.

  • Here’s an example using vanilla JavaScript and Webflow’s jQuery-powered slider:

  • Wait for the form to submit using Webflow.push():

    • Code to add in your Page Settings > Before tag:

      ```js

      ```

    • Replace .your-form-class with your actual form class name.

    • If you're using the native Webflow Slider, use:

      $('.w-slider-arrow-right').trigger('tap');

      instead of the slickNext() method above.

5. Fallback Option: Manual Next Pointer

  • If the form submission still doesn't trigger the slider, consider hiding the submit button after click and showing a manually styled "Next" button to trigger the next slide after a simulated delay.

Summary

Fix the submit button by ensuring your custom code uses correct form structure and event handling. To show the Calendly booking screen after submission, embed it in the next slide and use JavaScript to programmatically advance the Webflow slider upon form submission.

Rate this answer

Other Webflow Questions