Prerequisites

The.com BasicsElement Attributes

Intro

Create a Klaviyo account or log in. On the dashboard, click on Signup Forms.

You'll have the option to install a code snippet or create a signup form yourself.

Get the Code Snippet

Click Install Code Snippet to view how to add the code to your website. The snippet should look something like the following. Note that "YOUR-UNIQUE-ID" will be a string of letters unique to your Kalviyo account.

<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR-UNIQUE-ID"></script>

Copy the src value, so the URL inside the quotations:

https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR-UNIQUE-ID

Install the Code Snippet

In The.com Page Sheet editor, create a new Script Element and paste the code into the Source attribute and click the Async attribute to toggle the value to "Async" (notice that in the original code snippet, the script tag has the word "async" in it, which is why we toggle this setting).

Nothing will appear to happen since we don't have a form created. Go back to the Klaviyo page and click Check my Install. You should get a green success message.

Now you will create and publish a form.

Create a Signup Form

Navigate back to the Signup Forms menu and click Create Signup Form. Design your form however you want. Your form can be a Popup, Flyout, or Embed. Once your form is done, click Publish.

Popout or Flyover

If your form is a popout or flyover, then you are done. When your page loads, the form will appear as a popup or a flyover on your page.

Embed Form

After clicking Publish, you will see a popup telling you to add the embed code to the webpage. Alternatively, you can access this code by clicking on the "Behaviors" tab when editing your form.

Copy the class value from the code snippet (klaviyo-form-RVEwHK in this example).

In your Page Sheet, create a Div Element where you want the form to live, paste the code into the Class attribute, and refresh the site preview to see your form render. Deploy the page and your form will be live.