Embed Klaviyo Signup Form to GemPages page

If you're using Klaviyo's new embedded signup forms, you'll need to paste a short snippet of code on your site in order for your form to display.

This step is unique to embedded forms and is not required for popups or flyouts. Once you paste the embed code on your site, you will be able to edit your form within Klaviyo without having to worry about updating the snippet when you're ready to publish your changes.

Step 1: Access Library located in the Navigation of the editor.

Step 2: Navigate to tab Elements and find “Klaviyo Signup Form” element

Step 3: Import it to the editor by clicking on Add Element button

This element will be added to the bottom of the left sidebar.

Step 4: Drag and drop Klaviyo Signup form from the left sidebar to the editor.

Where you put the element will depend on where you would like the embedded form to appear and will vary depending on your page layout.

Step 5: Grab the form's embed code of your signup form

On your Klaviyo account, you'll need to create your embedded form using the steps outlined in their documentation on creating and styling a new form.

Once you have your form styled the way you would like, there are two places you can grab the form's embed code from:

On the Behaviors tab

When publishing an embedded form, you will see a modal that also prompts you to paste the embed code on your page.

Step 6: Paste the embed codes to Form Code field of Klaviyo Signup Form element on the left sidebar

When you paste the embed codes to the field, JS codes will process and cut out extra codes to keep the specific ID of your signup form. For example, the original embed code is <div class="klaviyo-form-XTBhiW"></div> . After you paste to the field, it only keeps the ID of the form - XTBhiW

Step 7: Save and Publish the editor then check the result on the live page.

Related Articles