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?

If your submit button inside a slider form isn't responding, and you want the slider to advance after submission to display a Calendly embed, here's how to troubleshoot and implement the correct custom code behavior.

​

1. Verify the Submit Button Function

​

• Make sure the submit button has type="submit".
• Check that your form is inside a form block element in Webflow. Without that, Webflow won’t handle form behavior correctly.
• If you added custom JavaScript, confirm that there are no JS errors in your browser’s console (Inspect Element > Console tab).
• Look for interferences such as a preventDefault() function not followed by manual submission logic (form.submit()).

​

2. Check Custom Code Dependencies

​

• If you cloned this slider with custom code, that code may override default Webflow form submission.
• Some sliders or forms rely on jQuery or other libraries to function correctly. Ensure they're loaded if your clone depends on them.
• Confirm the code uses a click or submit event listener targeting the correct element (e.g., $('#form-id').on('submit', function(e) { ... })), and that the event isn't stopped midway.

​

3. Add Script to Advance the Slider on Submit

​

To make the slider advance after a successful submission, use Webflow’s built-in form success detection.

​

• Webflow adds a hidden div.w-form-done once the form submits successfully.
• Use custom code to listen for form submission and trigger next slide action:

​

<script>
  Webflow.push(function() {
    $('.w-form-done').on('DOMNodeInserted', function() {
      // Move to next slide
      $('.w-slider-arrow-right').trigger('tap'); // or use .click() if needed
    });
  });
</script>

​

• Be sure to add this code inside the Before </body> tag section of your Page Settings or in an Embed component on the page.
• Replace $('.w-slider-arrow-right') with the actual class or ID of your right arrow if it differs.

​

4. Embed Calendly in the Next Slide

​

• In the next slider Slide 2, add an Embed component with Calendly’s embed code.
• Make sure Calendly’s container has a fixed height, or it may be invisible due to 0 height.
• Example: set a Div Block with a class like calendly-container, and apply min-height: 600px.

​

Summary

​

To fix the unresponsive submit button and advance your slider to reveal a Calendly embed:

• Confirm the form element structure and submit button type.
• Ensure custom code doesn’t block submission.
• Use JavaScript to detect form success and trigger slide movement.
• Embed Calendly in the following slide with proper sizing.

​

This integrates a functional multi-step flow using Webflow’s slider and embedded scheduling.