[How To] Use A Cookie To Check If The Form Has Been Submitted

cookies
advanced
forms

#1

Are you getting double submitted leads or multiple leads with the same information? Would you like to ensure that someone isn’t able to submit your form twice in a row? Or perhaps only allow a single submission from any given browser session over the course or a period of time?

Cookies to the rescue! :cookie:

This script will place a cookie in the browser upon form submission. You determine how long the cookie stays there for. While it’s there, the form will be disabled and a visitor coming from the same browser session will not be able to submit.

WORD OF WARNING: For certain use cases this script could be less than ideal. For example in cases when a computer is shared, if multiple people are needing to submit the form they won’t be able to without first clearing the cookie from the browser. Use with caution!

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/already-submitted/


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1. Add A Validation Field

Add a field to your form to use for validation with the cookie. This script uses the functionality of this workaround to validate the form submission. Make sure the field is visible (the script will hide it for you).

*If the cookie is present then the field will be filled with a value. The script uses a custom validation rule where that field must be empty in order for the form to submit.

The default ID for this validation field in the script is #already_submitted.

Step 2. Add the JS

Add the script from here:
https://gist.github.com/RobertCam/67922f8cdcb0dae4f50daf3051714a24

Step 3. Edit the Script

  • Add the amount of minutes the cookie will last in the browser before expiring. This number will represent how long the form is disabled for after submission.

  • Add the ID of the validation field from step one.

  • Add the ID of the submit button

  • Add the error message to show if an attempt to double submit the form is made.

Step 4. Sit back and relax cause you’re done.



Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

#3

love, love, love this, @Rob!


#4

Can this script be modified to allow users who have filled any form on your domain/sub-domain to access the content without having to provide the same info again? Of course, the “lead” would still be created but the user is spared the frustration of redundant tasks.

Thanks,
Roy


#5

Hey Roy,

Although this isn’t the exact functionality you’re asking about, here’s a solution if you’d like to allow users to autofill information from LinkedIn.


#6

I implemented that script on my landing page. The cookie is created but the second form submission isn’t being prevented. UnBounce support reviewed my code and it was correct. Can anyone look at a copy of the page I made and see if they see anything wrong:

Lock submit button for 5 minutes

My Submit button: #lp-pom-button-111
My custom visible field: already_submitted
Timer set at: 5 (minutes)

My custom code:
// Set amount of time until cookie expires (in Minutes) and form can be submitted again
var minutes = 5;

// Add ID of field to check for submission
var fieldId = “already_submitted”;

// Add ID of submit button
var submitButton = $("#lp-pom-button-111");

// Display messgae when someone tries to double submit
var errorMessage = ‘You already signed up for Mass Notes, check your email.’;


#7

Hi @Jim To be honest I’m not sure what the specific issue is on your page. I made a copy of it in my account and re-added the script from scratch though and it seems to be working there. I’ll DM you and attach the file so you can just upload the working version into your account.


#8

It now works on my test page but not on my production page. Has to be a conflict with my other script, which is the Hubspot tracking code. Darn.

Jim Hill
User Friendly Consulting, Inc. | Solutions Specialist
Email: jim@ufcinc.commailto:jim@ufcinc.com | Office: 248-447-0102 | Cell: 574-527-4669


#9

Shoot, that’s too bad @Jim_Hill. Sorry I haven’t gotten to this sooner. Happy to take a look though. Feel free to DM the URL for your page in production and I’ll see if I can figure out what the problem is.


#10

Hey @Rob thanks a lot, very nice feature ! It seems that on my landing page it works only after refreshing it and not immediately when I submit the form again. Do you have an idea to fix this ?


#11

Hi @matt-mz I assume you’re using the form confirmation dialogue popup? Unfortunately I don’t have a solution for that use case since closing the popup doesn’t reload the page and the script executes on page load. To be honest though I haven’t spent much time looking into a solution for that so I might be able to add an improvement for this.

In the meantime the best I can suggest would be to direct people off the page after form submission so that they aren’t able to resubmit without first reloading it.

Hope this helps!


#12

You’re right @Rob I was using the popup to confirm the form submission. I’ve now switched for a 2 pages confirmation process and it works much better ! Thanks a lot ! Don’t hesitate to let me know if you find a patch with the confirmation dialogue popup :wink:


#13

Thanks @matt-mz and @Rob. I am going to switch that to a two page process. I already did that on some of my landing pages and I think it provides a better experience for users. Thanks so much!


#14

Does it matter what kind of field you use? I’ve used a hidden field with the edited field name, made the modifications to the code and direct the submission to a new page. When I test the form, I get a crossed out icon when I hover over the button, but I can still click the button, I don’t get the error msg and when the lead comes in, the field is marked true.


#15

Hi there! Thanks for the code @Rob . I’ve been looking for a solution to prevent duplicated submissions on my form, and this was very helpful!!
But I can’t make this work into mobile submissions. Here it’s only working if I submit the form on PC, not on my smartphone.
Is there a way to solve this?

thanks!


#16

Anyone to help?