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?

You’re dealing with a non-responsive submit button inside a custom-coded slider form in Webflow and want the slider to advance once it’s submitted to display a Calendly embed. Here's how to identify and fix the issue.

1. Check Button Type and Form Setup

• Ensure the submit button inside your custom form has type="submit".
• Confirm the button is placed correctly inside a <form> tag (not nested improperly).
• Verify that your form is not missing a required action or event listener if your code relies on JavaScript/jQuery.

2. Identify JavaScript Conflicts or Errors

• Open Chrome Developer Tools (F12) and go to the Console tab to look for JavaScript errors.
• Conflicts with Webflow's native scripts or missing dependencies (like jQuery) can break submit functionality.
• Make sure you're not using event.preventDefault() in custom JS without handling the submit event manually.

3. Use Custom Code to Control Slider Movement

To move the Webflow slider to the next slide after submission:

• Add an id (e.g., #custom-form) to your form.
• Add JavaScript in your Page Settings > Before tag area:

<script>  const form = document.getElementById('custom-form');  form.addEventListener('submit', function(e) {    e.preventDefault();    // Replace this with actual form submission logic if needed    // Simulate a delay or submit to endpoint if needed, then move to next slide    const slider = document.querySelector('.w-slider');    const nextButton = slider.querySelector('.w-slider-arrow-right');    nextButton.click();  });</script>

• If you're using a Calendly embed in the next slide, insert an Embed element and place the Calendly code inside (using the Calendly inline widget script, with loading="lazy").

4. Ensure Calendly Embed Loads Correctly

• Calendly widgets may not reinitialize on slider transitions. Wrap the Calendly code in a function and re-invoke if necessary using the slider’s onSlide event.
• You can also delay loading Calendly until the slide becomes visible to improve performance.

5. Test Responsiveness and Submission Flow

• Test the full flow: form fill → submit → slider transition → Calendly load.
• Use different devices and screen sizes to ensure mobile responsiveness.

Summary

To fix your submit button issue, validate the form and button setup, ensure there are no JS errors, and use custom JavaScript to transition to the next slide after successful submission. Then embed your Calendly widget in the following slide to complete the booking flow.