Webflow integration
LaunchList widget works seamlessly with Webflow. You can use the Embed widget or build your form to integrate the widget. You'll need a paid Webflow account to add scripts.
Step 0 - Get form key
To integrate the embed widget on the Webflow website, first, you need a LaunchList form key which you can get from the integration page.
Embed Widget
Step 1 - Add a widget script into <head> section
In your Webflow dashboard, go to Project settings > Custom Code, paste the below script into the Head Code section and save the changes. Or follow the instruction provided by Webflow.
<script src="https://getlaunchlist.com/js/widget.js" defer></script>
Step 2 - Add the form code into the Webflow embed element
- Go to Webflow designer
- Open the Add panel and add an Embed element to the Webflow canvas
- Paste the below code and save the modal
- Make sure you have replaced the FORM_KEY with your key from Step 0
<div class="launchlist-widget" data-key-id="FORM_KEY" data-height="180px"></div>
- Once saved, you'll see the widget on your Webflow website. Publish the changes to make it live.
Custom Form
Step 1 - Add a widget script into <head> section
In your Webflow dashboard, go to Project settings > Custom Code, paste the below script into the Head Code section and save the changes. Or follow the instruction provided by Webflow.
<script src="https://getlaunchlist.com/js/widget-diy.js" defer></script>
Step 2 - Create a form in Webflow designer
On a designer canvas, click on the plus button to Add panel (A) and add a Form Block from the Forms section
Drag a Form block onto the canvas where you want the form to appear.
Or follow this tutorial to create a basic form. You can customize however you like. You can ignore the video after 2.30 minutes (Step 4. Success & error and Step 5. Form Submissions).
YouTube Link
Step 3 - Add class to form
- Select your form from the elements navigator
- On the right sidebar, add a class launchlist-form on your form
Step 4 - Set input fields name
- Select your form input from the designer canvas
- On the right sidebar, in Text Field Settings set Name of email input to email
- If you are using multiple fields, make sure you have a unique Name for each input
Step 5 - Point form action endpoint
- Select your form from the elements navigator
- Click on the Settings icon on the right sidebar
- On the Form Settings panel enter the below URL. Make sure, you replace the FORM_KEY with your form key from Step 0
https://getlaunchlist.com/s/FORM_KEY
- Choose the method to POST
Once saved, you'll see the widget on your Webflow website. Publish the changes to make it live.
GIF instruction
