The.com BasicsElement Attributes
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.
Copy the src value, so the URL inside the quotations:
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.
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.