Solved

Embedding Forms on Specific Posts using WordPress

  • 17 April 2021
  • 6 replies
  • 1152 views

Badge +2

Hello,

 

I have never had this much trouble getting forms to work. I have used other providers in the past and got it working pretty fast.

 

I am using Colibri Pro (theme) for WordPress.

 

I only want the forms to show on specific blog posts.

 

Couple questions:

 

  1. The Code Snippet 

I was able to place this on my homepage. But I can’t (or don’t know) how to place this on other pages. For example when I go to my Blog Pages I don’t get the same interface where I can place code. (it tells me this is where Latest Posts are posted). 

But maybe the code snippet only needs to be in the homepage?

 

  1. The Embed Code

I have tried to place this in a number of ways and nothing has worked. Latest attempt was as a custom field using a short code.

 

Any help appreciated.

 

 

icon

Best answer by julie.accardo 17 April 2021, 16:05

View original

6 replies

Badge +2

Hi @ed1984,

 

The snippet of code that needs to be added to your Wordpress theme is outlined in the help center article I linked above. You would need to make a minor modification to the snippet of code by adding your Klaviyo site ID (linked help article shows you where to locate the site ID) prior to adding it to your Wordpress theme. This snippet of code adds Javascript to your theme so that Klaviyo forms can run on your website.

 

As for specifics of where to paste the javascript snippet within your Colibri Pro theme, I would recommend leaning on the community of users that are using Colibri Pro, reaching out directly to Colibri Pro for assistance, or leveraging one of our agency partners who have front end web designers that could assist.

 

Best,

Julie

 

 

I was able to get it to work.

Just to explain how for someone who has the same issue and isn’t comfortable with web development.

 

Under ‘Signup Forms’ in Klaviyo, you will see a ‘Install Code Snippet’. This needs to go where you want your forms to show. There is an easy to use plugin called Insert Headers and Footers that will allow you to paste that code in Header and Footer and plugin puts that code in the right place of the Header or Footer. You will find the plugin in WordPress under Settings once you install and activate the plugin.

Once you finish this, your form will show anywhere on your site.

If you use embedded forms like myself, there is one extra step. And that extra code will be available when you are creating/publishing your form. That needs to get into the post where you want to embed the form. 

 

Userlevel 5
Badge +34

Hi @ed1984,

 

I’ve listed below the resources we have around how to manually add Klaviyo’s signup form JS, how to configure the signup form to appear on a specific blog URL, and how to troubleshoot signup form integration errors.  You should be able to manually install the Klaviyo JS in your WordPress Colibri pro code and then target your popup form to only show on the blog URL. Here’s our help center article on how to troubleshoot integration errors

 

Happy to let other community members chime in that are actively using the Colibri pro theme, however, after searching online I came across this review and it appears that the WordPress customer support team (in their final post at the bottom of the thread) recommends adding javascript by using wordpress custom css feature or by adding it to a child theme.

 

Best,

Julie

Badge +2

I know very little web development….”recommend adding javascript” ? What does this mean? Somehow modifying the embed code I received which I assume is html? I do have CSS hero..but not sure if this allows you to add JavaScript too?

 

 

 

 

Badge +2

Hi @ed1984,

 

I’ve listed below the resources we have around how to manually add Klaviyo’s signup form JS, how to configure the signup form to appear on a specific blog URL, and how to troubleshoot signup form integration errors.  You should be able to manually install the Klaviyo JS in your WordPress Colibri pro code and then target your popup form to only show on the blog URL. Here’s our help center article on how to troubleshoot integration errors

 

Happy to let other community members chime in that are actively using the Colibri pro theme, however, after searching online I came across this review and it appears that the WordPress customer support team (in their final post at the bottom of the thread) recommends adding javascript by using wordpress custom css feature or by adding it to a child theme.

 

Best,

Julie

I know very little web development….”recommend adding javascript” ? What does this mean? Somehow modifying the embed code I received which I assume is html? I do have CSS hero..but not sure if this allows you to add JavaScript too?

Userlevel 5
Badge +34

Hi @ed1984,

 

The snippet of code that needs to be added to your Wordpress theme is outlined in the help center article I linked above. You would need to make a minor modification to the snippet of code by adding your Klaviyo site ID (linked help article shows you where to locate the site ID) prior to adding it to your Wordpress theme. This snippet of code adds Javascript to your theme so that Klaviyo forms can run on your website.

 

As for specifics of where to paste the javascript snippet within your Colibri Pro theme, I would recommend leaning on the community of users that are using Colibri Pro, reaching out directly to Colibri Pro for assistance, or leveraging one of our agency partners who have front end web designers that could assist.

 

Best,

Julie

Userlevel 5
Badge +34

Hi @ed1984,

 

Thank you for following up with the solution! I’m sure this will be very helpful for future community members if they encounter the same issues themselves!

 

Best,

Julie

Reply