• Wix integration
  • Custom Form

Wix integration#

LaunchList widget works seamlessly with Wix. Wix does not support embed forms, so you can build your waitlist form to integrate the widget. Follow the below guide to integrate the widget.

Step 0 - Get form key
To integrate the widget on the Wix website, first, you need a LaunchList form key which you can get from the integration page.

Custom Form#

Step 1 - Create a form

1. Go to the site Editor
2. Click on + Add button → Contact & Forms and select the form you want to use
3. Drag and move where you want to display the waitlist form
4. Click Form Settings → Submit Message and choose Link to external URL
5. Click Choose a Link, and a popup will be opened
6. Select Web address and paste the below URL with your FORM_KEY

https://getlaunchlist.com/s/FORM_KEY

7. Close the Form Settings and Publish your website

Step 2 - Get the form ID from HTML page Go to the published website page.

1. Right-click on the form and choose Inspect Element
2. Copy the id in <form> tag

Step 3 - Add a JavaScript code

1. Go to Settings in your site's dashboard
2. Click the Custom Code tab in the Advanced section
3. Click + Add Custom Code at the top right
4. Paste the below script into the text box
5. Enter a name for your code and choose All pages on Add Code to Pages
6. Select Body - end on Place Code in dropdown and click Apply to save

Please make sure you replace the FORM_ID and FORM_KEY from the below script.

<script type="text/javascript">
// on page load get a form where LaunchList form is integrated and process it
window.addEventListener('load', function() {

    var form = document.getElementById('FORM_ID'); // PASTE YOUR FORM ID FROM STEP 2 HERE
    buildForm(form);
    
    // If you are using multiple forms, uncomment the below code and replace form id
    // var form2 = document.getElementById('comp-l6yp3ben');
    // buildForm(form2);
    LaunchList();
});
 
// function to process form
function buildForm(form) {
    // add LaunchList class and form action
    form.classList.add("launchlist-form");
    form.setAttribute('action', 'https://getlaunchlist.com/s/FORM_KEY'); // REPLACE THE FORM_KEY FROM STEP 0 HERE
    form.setAttribute('method', 'POST');
    form.setAttribute('target', '_blank')

    // submit form
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        form.submit();
        // reload page
        window.location.href = window.location.href;
    });
}
 
// Function to track referrals
function LaunchList() {
 
    // Get query string from URL
    var loc = window.location.toString();
    queryString = loc.split('?')[1];
 
    // Get all the forms with .launchlist-form class
    let forms = document.querySelectorAll(".launchlist-form");
    // let forms = document.querySelectorAll("._3Xz9Z");
 
    // Update the form with referral id
    forms.forEach(form => {
 
        // Get the action URL of the form
        let action = form.getAttribute("action");
 
        // Check if the query string is present
        if (
            queryString !== null &&
            queryString !== undefined &&
            queryString !== ""
        ) {
 
            queryParams = "?" + queryString;
            // update action url with query params
            form.setAttribute("action", action + queryParams);
        } else {
            // update action url without query params
            form.setAttribute("action", action);
        }
    });
}
</script>

Once published, you'll see the working widget on your Wix site.