Solved

How can I pass a custom event through a legacy form?

  • 21 July 2021
  • 6 replies
  • 532 views

Userlevel 1
Badge +2

Hi! I’ve hit a bit of a wall with creating a custom event to trigger a email flow. Here’s the situation:

  • We created a Klaviyo Legacy Form to capture customer info. This uses FormData. We used this option because we needed the form to have dynamic hidden fields (based on the user’s answers to a quiz).
  • We would like to create a custom event that sends a “submits form” event to Klaviyo to trigger a flow each time someone submits the form. (Creating a flow that is triggered based on someone being added to a list does not work for our use case, as we want someone to get this email flow if they submit the form multiple times).
  • We’ve been told the best way to create this custom event is through custom API, but this requires a JSON-object to pass the event over. Normally, it would not be a problem to add code to send JSON through FormData, but it appears that Klaviyo views a FormData-object as an endpoint.

Based on the information above, does your team have any insight on how to create a custom event trigger for submitting a form using the Legacy Form?

 

**Note, I am not the developer; I’ve been working with an agency that does our development and they’ve hit a wall. I’ve relayed the information to the best of my abilities based on what they’ve described, but if there are flaws in my lingo/phrasing, please let me know!**

icon

Best answer by jallain 22 July 2021, 18:27

View original

6 replies

Userlevel 4
Badge +11

@aereid If you are submitting the legacy form to the https://manage.kmail-lists.com/ajax/subscriptions/subscribe endpoint with the FormData, nothing about that needs to change.

 

All you will want to do to create a custom event is to leverage _learnq and feed it any data that you want to record about the event. If you already have our onsite javascript, _learnq should be available to you. 

https://apidocs.klaviyo.com/reference/javascript-client-library

Userlevel 1
Badge +2

Thank you @jallain, that seems to have done the trick!

Badge +2

@aereid @jallain Hi! I’m trying to achieve the same thing with my implementation of Klaviyo right now, but it doesn’t seem to work. I am also using legacy forms, and I’ve tried to do the following (track the data upon form submission):

<script>
$("#email_signup").submit(function() {

var email = $('#k_id_email').val();

var _learnq = _learnq || [];
_learnq.push(['identify', {
'$email': email
}]);

_learnq.push(['track', 'Report Requested', {
'Report_Requested' : 'Name of Report'
}]);

});
</script>

However, nothing shows up in Klaviyo. I would really appreciate any help as I’m currently unable to troubleshoot this.

Userlevel 4
Badge +11

@arianavmac is the identify call working? If not, make sure that the email variable actually has a valid email address assigned to it.

 

If the identify call is working, you’ll want to pass the track invocation as a callback to identify in the fourth argument position. Here’s an example:

 

function onIdentifyCompleteCallback () {
_learnq.track("Custom Event");
}

_learnq.identify(identityProperties, undefined, undefined, onIdentifyCompleteCallback)

The identify request needs to complete before you can use _learnq to track an event, passing the track call as the fourth argument in this way will ensure it happens at the correct time.

Badge +2

@jallain I’m running into another issue where the the legacy form sometimes redirects to page with another form asking for the email, first name, and last name. But this only seems to happen sometimes. Since this is happening though, I don’t think the code you shared above (or any code) will run on form submission because of the redirect. Thanks in advance for the help! 

Userlevel 4
Badge +11

@arianavmac you may want to open a new topic instead of adding to this one since it seems like you are facing a different issue. feel free to tag me in it and I can help you there. it sounds like there may be some attribute on the form that you’ll need to remover like data-ajax-submit or something like that.

Reply