Store Form Field Value In Local Storage

Get Help
, ,
#1

I’m trying to store the value of an email address field in local storage so I can trigger site tracking with ActiveCampaign. I’ve got some jquery that does the trick but if I use it as a plain script it messes with the default form submission behavior. So I need to figure out how to do this with GF-specific functionality.

Here’s the current script:

 jQuery($ => {
   $('.gravity-forms-form').on('submit', e => {
     e.preventDefault();
     let submittedEmail = $('.gravity-forms-form .ace_we input').val();
     localStorage.setItem("visitorEmail", submittedEmail);
     _track();
     e.target.submit();
   });
 });

So, I basically just need to get the value of the email address field (identified in the above via the selector .ace_we input) and store it in visitorEmail. It then calls the function _track() which I assume I can just add in the footer but I’ve included that part of the code below as it needs to be on every page outside of GF.

jQuery( document ).ready(function() {
		console.log("visitorEmail - "+localStorage.getItem("visitorEmail"));
    	if (localStorage.getItem("visitorEmail")) {
		  	_track();
		}
	});
function _track(){
	if (localStorage.getItem("visitorEmail")) {
	  	var trackcmp_email = localStorage.getItem("visitorEmail");
	  	console.log("visitorEmail is: %s", trackcmp_email);
	  	var trackcmp = document.createElement("script");
		trackcmp.async = true;
		trackcmp.type = 'text/javascript';
		trackcmp.src = '//trackcmp.net/visit?actid=XXXXXX&e='+encodeURIComponent(trackcmp_email)+'&r='+encodeURIComponent(document.referrer)+'&u='+encodeURIComponent(window.location.href);
		var trackcmp_s = document.getElementsByTagName("script");
		if (trackcmp_s.length) {
		  trackcmp_s[0].parentNode.appendChild(trackcmp);
		} else {
		  var trackcmp_h = document.getElementsByTagName("head");
		  trackcmp_h.length && trackcmp_h[0].appendChild(trackcmp);
		}
	}
}

I’d greatly appreciate some help. Thanks.

#2

I will reply to your support ticket Lloyd.

#3

It was suggested that I use either the gform_submit_button filter or gform_confirmation_loaded. The latter seems most appropriate as the former could fire when the button is clicked in error.

I’m still looking for help in getting this done though as what I’ve tried hasn’t worked.

#4

I’ve tried the below code with and without wrapping it in document ready and can’t get it to work. It seems like it should:

<script type="text/javascript">
jQuery(document).on('gform_confirmation_loaded', function(event, formId){
		jQuery(document).ready(function() {
    let submittedEmail = $('.gravity-forms-form .ace_we input').val();
		localStorage.setItem("visitorEmail", submittedEmail);
		});
});
</script>
#5

Actually, upon thinking about it, it might not work because I’m using a CSS selector to grab the value and perhaps by this point that’s no longer valid and I need to get the field value in a different way.

#6

@user5f21f84038374132

I think you solved something similarly at Storing Name Fields to Local Storage [RESOLVED]. Could you elaborate on your solution? Thanks.

#7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.