This tutorial shows how to connect Hulk Apps forms to Klaviyo so that data entered into forms on your Shopify store get stored inside of Klaviyo.
This process is not very well documented by Hulk Apps or Klaviyo which is why I've made this guide for you to follow.
Links
Klaviyo Profiles and Properties Glossary - https://help.klaviyo.com/hc/en-us/articles/360053679071-Profiles-and-Properties-Glossary
Transcript
Hey, Scott Austin here in this video, I'm gonna show you how to connect a Hulk apps form to Klaviyo email. Both of those apps are ones that I commonly use in Shopify stores. And the process is actually not that well documented. Therefore, I'm making this video, that'll help you get through the process. So here on the customer facing side on the website, this is a Hulk apps form. You can see here in my forms, builder in Hulk apps in, in the app section of my Shopify admin, I've got one form and it it's this one here, right? Which is one we're looking at on the website. So I'm just gonna put in some data here.
And these are all fields that are easy to add inside of form builder, putting in some dummy content. This one had some conditional logic. So that, yes, there's a couple more extra fields. And what you'll see here is that I'm gonna submit the form and, and I'm gonna get an email. My email also from Hulk Apps saying, Hey, you know, we've got your information. So that's all done on the Hulk Apps side. Now, if I go into Klaviyo and go under this listed segment that I created called athlete applications, you can see there's one athlete application in there. And that's the one that I just submitted test four. So that user information that was just on that Shopify page through the Hulk apps form created a Klaviyo account. And that Klaviyo account also has the information in the form. So here you can see the, the username that I entered the first and last name are showing up the phone numbers showing up and all these other fields that I filled out are in what's in Klaviyo called custom properties.
And we're also showing that they consented through the Hulk apps form and the form ID of athlete application. So let me show you how that all works, how we get that all working together. The first thing you have to do is inside of form builder, you have to, and this is Hulk apps form builder. You have to be on the paid level. So there's a free level and a paid level. And this integration only works on the, the paid level. But once you have the paid level going on, you can go to more. And under email service provider, you'll see an entry for connecting MailChimp. And there's another one here before for connecting Klaviyo. And what you have to do is you have to go into your Klaviyo account. So you go into your Klaviyo account under settings or account here, and then settings, you have API keys and you want to create a new API key, a private one.
And I, I created one and I named it Hulk apps. And then I showed myself the key. I copied that information. And then I went back into Hulk apps and just pasted it. So once you connect through a key that works your Hulk Apps to Klaviyo, what happens is inside of your form builder. You get some additional functionality. So let's go back to our form under my current forms and what you'll see here. When I go to edit under this first section of connect, I've got a mail integration element. Now, if you don't have Klaviyo enabled or MailChimp enabled, it doesn't show up, right? But if you, once you enable one or the other, then you get the option to select Klaviyo. And then you can say what list you want these users to go into. So I created a new list in Klaviyo for the purpose of this form.
You could have it go to your generic newsletter list if you wanted to also, all right, so you, so you have to connect the two apps at the app at the app level, by getting the API from Klaviyo, adding that into Hulk Apps. And then at the form level, you have to enable the Klaviyo mail integration at the form. And then beyond that, what you have to do is at the content level under these form elements, right? These are all the form elements that build out this form. You have to let's click on one and see the options down here. I've got this Klaviyo field, right? So the first name field I know is first underscore name, all small letters in Klaviyo. Now here's the challenging part about this? I don't know of a place that list out what the Klaviyo let's just call these field names or field IDs are I have, and I'll include this link in, in the, the description here.
I have this page on Klaviyo that shows me the profile properties, glossary, but you'll see here for, you know, first name. It just says first name. It doesn't say that it's small letter, first name underscore small letter, you know, kind of stuff. So it doesn't give you the exact format for most of them, for some of them like the consent one. It does all right. Consent method. So it's a little bit of a learning curve to figure out what are the right fields to use. So lemme you a couple of them, right? So first name is just first name, all small letters with an underscore last name, same thing. Last underscore name, all small letters, email automatically gets connected. Phone number is phone underscore number, all small letters. And then the other thing that I do and, and the rest of these are custom fields.
We're still talking about in a second. The other thing I do is I add a couple hidden fields, which you're able to do once you're on that paid level of hu caps forms, you can add hidden elements. So they don't show up in the form to the customer on the Shopify side of your site, but it allows you to transfer data during that form submission. So I add two, one of them is consent method, and you can see the Klaviyo field that I use is dollar sign, consent, underscore method. And then the other one is form. And for that one it's dollar sign consent underscore form underscore ID, right? And those are the ones that showed up in Klaviyo. Let's go back to here, go back to our list and segment for the athlete application, click on the data we submitted and under here, where is it at?
Oh, channels, right? Show consent details right here. That's where this Hulk Apps form and athlete application data came from those hidden fields inside of Hulk apps. So those are the standard fields that I add. And then what I do is these are all the custom properties that show up inside of the form and for custom properties, those are easier to do cause you don't have to map them to any existing Klaviyo property. All you have to do is give them a unique name and they'll show up. So let's just look for example, on the Instagram one. And all I said was the Klaviyo field is Instagram. If you put in a field here that doesn't exist in Klaviyo, it just makes it a custom property. So that's one where you'll know if you like put in first name and you capitalize it or something, it'll show up under custom properties instead of connecting to the actual Klaviyo property that you want it to connect to.
So it's one way to troubleshoot. If you're, you're setting up your Klaviyo properties correctly inside of Hulk Apps, but all this other information that you're gathering, you can save all that information inside of Klaviyo. So that becomes part of that customer's profile. And you can do all sorts of personalization and, and things off of that. So you can add, you know, any number. And I connected all these fields in, in this situation into Klaviyo custom properties, which is why all these are showing up here. So that's how we connect Hulk apps to Klaviyo. Hopefully that helps you out.
Thanks for watching.