Hey there, digital creators and data enthusiasts! If you're anything like me, you're probably on a relentless quest to refine every touchpoint of your user's journey, right? I've recently figured out how to add a custom Klaviyo form to my Webflow site, and let me tell you, the power and flexibility it adds to my signup game is a game-changer.
So why keep the good stuff to myself? I'm sharing the secret sauce to adding a custom Klaviyo form in Webflow, step-by-step. Whether you're a seasoned dev or a non-techie, this guide is tailored for you. So grab your coffee, and let's dive in. ☕
Step 1: Design Your Form in Webflow
First things first, let's give our form some style. Open your Webflow editor and navigate to the page where you want to place your form.
html
Copy code<div class="form-block w-form"> <form id="custom-email-form"> <label for="custom-name">Name</label> <input type="text" name="custom-name" placeholder="First name" id="custom-name" required> <label for="custom-email-address">Email Address</label> <input type="text" name="custom-email-address" placeholder="Your email" id="custom-email-address" required> <input type="submit" value="Submit"> </form> </div>
Pro Tip: Add a class like placeholder or field-label-3 to style your form inputs and labels.
Step 2: Add Your Custom JavaScript
Navigate to your project settings, and under the 'Custom Code' tab, you'll find the '< / head > code' section. This is where we'll add our custom JavaScript code.
Here’s how the JavaScript magic happens:
javascript
Copy codedocument.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('custom-email-form'); if (form) { form.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form); const name = formData.get('custom-name'); const email_address = formData.get('custom-email-address'); //... rest of the code }); } }); Step 3: Set Up the Klaviyo API
We're not just building a pretty form; we'll make it functional. We'll use Klaviyo’s API to send the form data. If you haven't set up your Klaviyo account, go ahead and do it now.
javascript
Copy codeconst options = { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ data: { type: 'subscription', attributes: { custom_source: 'Webflow signup form', profile: { data: { type: 'profile', id: 'YOUR_KLAVIYO_PROFILE_ID', attributes: { email: email_address, first_name: name, } } } }, relationships: { list: { data: { type: 'list', id: 'YOUR_KLAVIYO_LIST_ID' }}} } }) }; Replace YOUR_KLAVIYO_PROFILE_ID and YOUR_KLAVIYO_LIST_ID with your actual Klaviyo IDs.
Step 4: Fetch It
Finally, the fetch API will do the heavy lifting. It takes the URL and options we’ve defined and makes the POST request to Klaviyo's API.
javascript
Copy codefetch('https://a.klaviyo.com/client/subscriptions/?company_id=YOUR_COMPANY_ID', options) .then(response => { if (response.ok && response.status === 202) { // Success message } else { // Error message } }) .catch(err => { console.error('Something went wrong:', err); }); Step 5: Test and Deploy
Run a few tests to ensure everything is working as expected. Once you’re satisfied, hit publish. Your Webflow project is now integrated with Klaviyo.
And there you have it! You've successfully created a custom Klaviyo form in Webflow. You’re not just capturing emails; you're capturing opportunities. 🚀
Stay curious, and keep building amazing things!
Written with GPT -> This is more of a document to remember how I did things. Maybe I'll edit it one day.