Solved

How do I add a klaviyo sign up form to my wordpress site

  • 1 December 2022
  • 3 replies
  • 4032 views

Userlevel 1
Badge +2

Hi, I want to create a landing page on my wordpress site for a klaviyo newsletter. How do I embed my klaviyo form on the wordpress site’s body. I read some articles but I am not familiar with coding. Any detailed explaination will be highly appreciated

icon

Best answer by Brian Turcotte 1 December 2022, 19:09

View original

3 replies

Userlevel 7
Badge +36

Hi @kunal and welcome to the Community!

 

I see that you are looking to create a landing page with an embedded form on your Wordpress site. Are you using an e-commerce plugin like WooCommerce with your site? If not, that’s okay, there will just be an extra step involved.

 

There are two requirements for embedding a form on your site. The first is that you must have Klaviyo.js (also known as the Active on Site tracking code snippet) installed on your site. If you are already integrated with a major e-commerce plugin, then you may already have this installed, but if not, here is a great video detailing the exact steps with a Wordpress site:

Install Klaviyo.js on Wordpress

 

Once you have this snippet installed, you can move on to install your embed form. You will have to paste the form’s embed code into your site’s HTML/source code wherever you’d like it to appear. In order to first obtain the form’s embed code from Klaviyo, you will have to publish it via these steps:

Sign Up Forms > Create Form > Choose Embed Form > Design > Publish

 

As soon as you click the Publish button at the top-right of the design page, a box will appear containing the embed HTML code:

You will then have to navigate to your Wordpress site and find where you can edit your site’s HTML. This step will depend on how your site is set up, and can’t be configured from Klaviyo’s side, but I did find this external resource about editing code in Wordpress:

https://kinsta.com/knowledgebase/edit-wordpress-code/

Based on that link, if you’re using the block editor you can just drag in a “Custom HTML” block where you’d like the form, and paste the form’s embed code from the previous step.

 

I know that you mentioned you don’t have much experience with code, so if you aren’t comfortable editing code on your site and would prefer to have an expert do it for you, you can always contact a Klaviyo partner.

 

Also, here are some more Community threads on this topic:

 

I hope this helps, and thanks for using the Community!

- Brian

Userlevel 1
Badge +2

Thank you so much! This helps a lot :)

To add a Klaviyo sign-up form to your WordPress site, you can follow these general steps:

  1. Access Klaviyo:

    • Log in to your Klaviyo account.
  2. Create a Sign-Up Form:

    • In Klaviyo, create a sign-up form that suits your needs. You can customize the design and fields to collect the information you want from your website visitors.
  3. Get the Embed Code:

    • After creating your form, you'll be provided with an embed code or a JavaScript snippet. This code is what you'll add to your WordPress site.
  4. Log in to WordPress:

    • Log in to your WordPress admin dashboard.
  5. Add the Form to Your Site:

    • Depending on your WordPress theme and the level of customization you want, you have a few options to add the Klaviyo sign-up form:
      • Widgets: If you want to add the form to a widgetized area, like a sidebar or footer, you can use the "Custom HTML" widget and paste the Klaviyo code there.
      • Pages/Posts: To add the form to a specific page or post, open the page or post in the WordPress editor. Switch to the HTML (text) view and paste the Klaviyo code where you want the form to appear.
      • Customizer: Some WordPress themes offer customizer options where you can add code to the header or footer of your site. If your theme has this feature, you can paste the Klaviyo code there.
  6. Preview and Save:

    • Preview your changes to ensure the form appears correctly. If everything looks good, save your changes.
  7. Publish:

    • If you're adding the form to a page or post, make sure to publish or update it.
  8. Test the Form:

    • Visit your website to test the Klaviyo sign-up form. Make sure it's functioning as expected and capturing user data.

Reply