Solved

Submit Klaviyo Newsletter form and Contact form with one button

  • 24 February 2021
  • 3 replies
  • 1398 views

Badge +2

Hello there!
Currently developing an app with React and on the contact component I have two forms.
The first one is Klaviyo newsletter signup form and the other is custom contact form build with emailjs.
At the moment you have to fill the email address in the Klaviyo form and then fill the other information in the custom form (like name, phone, country) and click on “Subscribe” for the Klaviyo and “Send” for the custom form.
Ideally I want to do both things at once, maybe by clicking on the “Send”  button, to send the contact form email and subscribe at the same time.

I’ve tried to grab the email address from the custom form and setting it up as a value of the Klaviyo form but this doesnt work. 

The custom form is also collecting the selected options and sending them as well.
URL: http://quick-quote.ivaylotsochev.com/
GitHub contact component.

icon

Best answer by caroline 24 February 2021, 18:34

View original

3 replies

Userlevel 5
Badge +8

Hi there,

You may want to check out the response @cbarley left on the post, Implement Embed Klaviyo forms in SPA apps like GatsbyJS / ReactJS.

I’ll also post his response below.

Hope that helps!

Best,

Caroline

 

 

Hey @karan.tipl, This is a great question. I have also made some React apps and hoped to use Klaviyo embed forms (nothing with Gatsby, but the same general ideas apply).

The short answer is that our forms don’t play nicely with Single Page Applications that use browser-side routing.

The long answer is that after testing any way to get this to work (creating a custom hook to call the Klaviyo.js tracking code, or the forms code that we add to a page with a Klaviyo form on it), it isn’t possible to programmatically refresh the form at this time. The product team is aware of this issue, though, I just don’t have a timeframe available for you on a fix for that.

If you’re using something like react-router, since we don’t re-fire the klaviyo.js script on those page changes, and you can’t programmatically force that without doing a hard-refresh, a Klaviyo embed form might not be the best solution for you.

We do have the ability to redirect existing sign up forms to Klaviyo from the frontend, so in your case, using a custom form and passing those submissions to Klaviyo is your best bet. We also have a server-side version of our Lists API, so if you had the ability to pass the data to your server, then call our Lists V2 API to subscribe somebody to that list, that would also work!

 

- Connor Barley, Klaviyo Solution Architect

 

Userlevel 1
Badge +2

@caroline  This solution too won’t work as APIs from ReactJS apps throws CORS error.

Userlevel 5
Badge +8

Hi @karan.tipl,

Could you clarify which solution you’re referring to? Using a custom form and passing those submissions to Klaviyo, or using the server-side version of our Lists API?

Best,

Caroline

Reply