This JavaScript code snippet serves the purpose of pre-populating Calendly form fields embedded on a WordPress Website through WpForms. When a user submits the form, the script dynamically fetches customized data set in the WpForms Confirmation Message. Subsequently, it updates the iframe src code using JavaScript, ensuring a seamless integratio…

Prepopulate-calendlyform-from-wpforms.js

< script >
    document.addEventListener('DOMContentLoaded', function() {
   
        var wpformsSubmitBtn = document.querySelector('.calendlypopup');
        // Run the code after 1.5 second when Submit button is clicked in WpForm.
        wpformsSubmitBtn.addEventListener('click', function() {

            setTimeout(function() {
                // Get the current src attribute of the iframe
                var iframe = document.querySelector('.calendly-inline-widget iframe');
                var currentSrc = iframe.getAttribute('src');

                // Fetching Confimration Message from WpForms Submission
                var confirmationDiv = document.getElementById('wpforms-confirmation-2121'); // replace it with your wpform confimration message ID
                if (confirmationDiv) {
                    var pTag = confirmationDiv.querySelector('p');
                    if (pTag) {
                        var newParamValue = pTag.textContent; // Get the text from the p tag
                    }
                }
                // Updates Iframe Code of Calendly
                var newSrc = currentSrc + newParamValue;
                // Update the src attribute of the iframe
                iframe.setAttribute('src', newSrc);
            }, 1500);
        });
    }); 
</script>

read me - How to make it work?.txt

STEPS

1) Edit the WpForm > Go to Setting > Click on General > Scroll down and add class "calendlypopup" in the Submit Button CSS Class Field.
2) Now you have to copy the fields id in WpForms which you want to populate in Calendly. In this example, I will be pre-populating Name and Email Fields. For Name go to Fields and click on Name Field input there you will see Id in (ID # 00) format. Only save the ID number in Notepad. Repeat the same step for the Email Field.
3) Now go back to settings > Click on Confirmation> Select confirmation Type (Message) > In Confirmation Message Box add the following text &name={field_id="75"}&email={field_id="105"} - Replace the name id 75 and email id 105 with yours. Save the Form.
4) Now open the form in the front end and do a test submission in the form. Once submission is done you will see a confirmation message. Inspect the page with the developers tool and search for wpforms-confirmation you will see an ID like this "wpforms-confirmation-2121" In your case id number will be different. Copy it.
5) In the Js code replace wpforms-confirmation-2121 id with your form confirmation message id.
6) Hide the confirmation message from users by adding following css code #wpforms-confirmation-2121{visibility:hidden !important;font-size:0px !important;} replace the ID with your form confirmation message ID.
7) The Last Step is to add/run JS code in the website using the JS Snippet Plugin.