1. Pre-fill Calendly embed using form data

  1. Give IDs to your form fields, click trigger element, and target div for Calendly embed.
  2. Define variables for each field.
  3. To initiate Calendly embed after a form is submitted, use the IX Trigger option of the Attributes Form Submit to trigger a click event on an element.

Code for <head> tag

<!-- [Attributes by Finsweet] Form Submit Actions -->
<script defer src="<https://cdn.jsdelivr.net/npm/@finsweet/attributes-formsubmit@1/formsubmit.js>"></script>

<!--Calendly-->
<script type="text/javascript" src="<https://assets.calendly.com/assets/external/widget.js>"></script>

Code for </body> tag

/* Prefill Calendly on Form Submission */
document.addEventListener("DOMContentLoaded", function() {
    var nameInput = document.getElementById("contact-name"); //Name Field
    var emailInput = document.getElementById("contact-email"); //Email Field
    var calendlyTarget = document.getElementById("form-calendly-widget"); //Target div for calendly embed

    // Add Calendly on form submission
    document.getElementById("calendly_trigger").addEventListener("click", function() {
        var nameValue = nameInput.value;
        var emailValue = emailInput.value;
        Calendly.initInlineWidget({
            url: '{{YOUR_CALENDLY_URL}}?hide_landing_page_details=1&hide_event_type_details=1',
            parentElement: calendlyTarget,
            prefill: {
                name: nameValue,
                email: emailValue
            },
        });
    });

    // Remove Calendly on form reset (optional for form reset)
    document.getElementById("reset-form-button").addEventListener("click", function() {
        calendlyTarget.innerHTML = '';
    });

});

NOTE: use this for the Calendly target div or create a div inside Webflow and add the same attributes and styles

<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false"></div>

Adding data-auto-load=”false” to the target div is important in order to make it work

Untitled

2. Pre-fill Calendly embed when redirected to a new tab

We will use cookies to store the data and then prefill it on the thank you page

  1. On the form page, save the values of the form fields inside cookies so we can pass it to other pages when needed.