Removal of Jquery Dependency

Rob
Userlevel 6
  • Rob
  • Former Unbouncer
  • 198 replies

UPDATE [April 2, 2019]: This change has been deployed! Unbounce is no longer dependent on jQuery for form submissions 🙂

UPDATE [April 1, 2019]: The code change to remove our dependency on jQuery will be released this coming Wednesday, April 3rd.

UPDATE [March 28, 2019]: This release has been pushed back to later in the week to allow time to address some issues with a couple of community workarounds that would have broken with this update. This deploy will not be going out today (Monday, March 25th). Updates will be posted here when a new release date is determined.

Hi everyone, some exciting news to share 👋

Some of you have commented in the community about the use of jQuery on Unbounce landing pages and today we’re here to share an update (jQuery is a Javascript library we used to power Unbounce’s form submissions). As of Monday, March 25th, we’ll be rolling out an update to remove this dependency.

What does this mean for you?

Form Improvements
By removing the dependency on jQuery, your Unbounce forms will leverage your visitor’s web browser to power any form validation errors. This means a much deserved facelift to form errors and a more robust method for alerting visitors to any issues with their forms. Basically, any form validation errors will look a lot better.

This change will allow for faster iteration and a more scalable code base that will enable us to make future updates more efficiently and with less risk. Instead of using an older version of jQuery (1.4.2) to handle submissions, Unbounce forms will instead use vanilla javascript moving forward.

FAQ

Will this impact custom code on my page that uses jQuery?
We’ve tested to make sure that Unbounce features continue to function as expected, however, since there’s no way for us to test all custom scripts, there’s a chance that some custom code may be impacted. We rely on the feedback here in the community, so if you notice your custom code functioning differently, please let me know and I will relay it to our product team. The removal of the dependency on jQuery has also been tested against the majority of community tips and scripts (https://community.unbounce.com/c/unbounce-tips-and-scripts) so if you’re using any of those, you should be all good. We recommend double checking your custom code just to be sure.

Will workarounds from the community using jQuery still function?
Popular workarounds involving custom validation rules and messages will still function as expected as will the workaround to execute code on form submission. Despite thorough testing however there is still a chance that fully custom coded solutions involving form submission may be impacted as we cannot account for 100% of custom code solutions when testing. We recommend double checking your custom code just to be sure.

Is Unbounce removing jQuery from my already published pages? What if I have other functionality that depends on jQuery?
Not to worry – this update only affects the use of jQuery for form submissions. If jQuery is included on your page with either custom code or by selecting the 1.4.2 box in the builder, it will continue to load on live pages as before. If you are intentionally including jQuery on an Unbounce page it will continue to load as expected.

Native Chrome Validation Error

image-20190208-012358

Want to take your Unbounce landing pages, popups, and sticky bars to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

37 replies

Jess
Rank
Userlevel 7
Badge +1

Hi Timothy,

I’ve created a new post here so that folks won’t need to scroll through the comments section to see updates. 🙂

-Jess

TimothyDO

Might be an idea to warn the community of the release date on this new release…

Brian_Burns
Rank

@TimothyDO,

We’re currently testing the fixes. They will most likely be deployed in the next few days baring any issues uncovered. A more concrete release plan will be established today and we’ll update here.

TimothyDO

Any update on when this re-release is?

Brian_Burns
Rank

Hey all,
We’ve decided to roll back this release temporarily due to an issue that has come up with GTM. If you republish your pages you will have the previous version with jQuery included. Before rolling forward again we’ll look to address as many of your issues as possible and will update here when we have a new release plan.

Thanks for sharing your issues here!

Jess
Rank
Userlevel 7
Badge +1

Hey folks! Please let me know if I should start a separate conversation. I’d like for each of you to have the answers that you need, but I also want to make sure that updates don’t get buried here in this thread.

It might be faster if we set up a quick meeting to make sure we’re all on the same page. 🙂

julien_level
Userlevel 5
Badge +4

Thanks @TimothyDO for the quickfix.
As we are approaching the end of the day here in France, i’m gonna wait until tomorrow to see if the expert from Unbounce fixes everything.

Julien
TimothyDO

I had you (unbounce) hook up with a thirdparty validation company to come up with new versions of the scripts they provide their customers, the majority of which make use of your service.
The code you came up with between yourselves included the following…

$(‘input[type=tel]’).bind(‘change’, function(e) {

Which would denote that you (at least at one point) thought that you’d be using the html5 tel input type…

Brian_Burns
Rank

@TimothyDO
I took a look back at an older version, released Feb 6th, and telephone fields were not being assigned type=“tel” so I don’t believe this is something new. Could you please provide a specific example if you believe this was just changed?

Thanks

TimothyDO

@julien_level Really quick dirty fix for the telephone issue… Assuming your field is called “telephone”…
$(’#telephone’).removeAttr(‘pattern’);
document.getElementById(‘telephone’).type = “tel”;

Brian_Burns
Rank

Will take a look. Thanks @TimothyDO

julien_level
Userlevel 5
Badge +4

you may be right, but strangely i’m at home and he is at the office.
I’ll deal with that after 😉
thanks

Julien
Brian_Burns
Rank

I don’t believe these issues are related to this release. Your leads seem to have had the duplicate telephone rows for quite some time. As to the second issue, I can only speculate that it may be something to do with a firewall if it’s only affecting leads from within your company.

julien_level
Userlevel 5
Badge +4

Thanks @Brian,

Other stuff i’ve noticed:

  1. When i go to “view leads” in unbounce i now have two “Telephone” rows with identical data in it. I can’t remember if it was already there before and it has an impact on my pages.

2.When i test my form with my computer and the computer of someone working with me, the lead will go into unbounce (view lead) and when i click on the lead to see if it was sent by the webhook it say yes. But i have nothin in my CRM… Strangely leads coming from outside are getting there normaly

Julien
TimothyDO

While you’re looking at the telephone field it’s not assigning type=“tel” either. So our custom validation built for this new version doesn’t recognise telephone fields… @Brian_Burns

Brian_Burns
Rank

Hey Julien,

We have a fix for the first issue coming out this morning and are looking into your second issue today.

julien_level
Userlevel 5
Badge +4

I think i’ve lost almost a day of trafic.

I’ve found that on a lot of my LP (and all variant) that people couldn’t add their phone number.
It looks like by default, all phone fields have been set to “validate phone number as american” while not being activate in the form parameters…
it took quite some time to change all form to set them up to 'validate phone number as generic".

I also had to desactivate the “custom validation” script that helped me make sure that people were entering french number (10 digits) as it doesn’t look like it’s working anymore.

I really love Unbounce but i think it’s time to really update the form parts to give more options naturally and depends less on script.

update : Wow i just tried my LP in Firefox and i get a white page after completing the form…
this is getting serious, i have to stop buying trafic for now.
here is my LP : https://www.eau-pure.fr/adoucisseur-sfte/

06

Julien
julien_level
Userlevel 5
Badge +4

hello,

I found a solution for the second problem in the multistep form script.
you have to remove this part in the JS of this script:

//add error span
errorSpan.classList.add('hide');
errorSpan.style.color = '#FFFFFF';
errorSpan.style.position = 'absolute';
var labelHeight;
if(allFields[0].querySelector('label')){
labelHeight = allFields[0].querySelector('label').clientHeight;
}else {
labelHeight = 35;
}
errorSpan.style.top = '-'+labelHeight+'px';  
formContainer.appendChild(errorSpan);

For the special characters, i have removed them from now so it looks better but it has to be a temporary solution.

Julien
Jess
Rank
Userlevel 7
Badge +1

I’m definitely keeping an eye on this! Thanks for bringing this to our attention @julien_level!

julien_level
Userlevel 5
Badge +4

Hello !

It looks like some of my LP have already received the removal of Jquery.
but i’m having trouble for two reasons:

  1. i use a script to translate the error message in french. Even for LP where the Jquery hasn’t been removed there is a problem with the encoding of the special characters. here is an example

52

  1. I’m using the multi-step script in almost all my LP now and as you can see on the picture above the error messages appear twice.

here is the LP i’m talking about (still a work in progress 🙂 ) https://recevoir.mes-devis-pratiques.fr/securdouche/a.html

and here is a LP without the removal where the translation script is also messed up since today or yesterday i don’t know : https://www.eau-pure.fr/adoucisseur-sfte/

Maybe the update is not complete but if you can keep an eye on this

thanks

Julien
Caroline
Userlevel 5
Badge +2

Thank you @Rob!

Rob
Userlevel 6

Hi @mdunsterville, we are going to be releasing this on Wednesday this week (April 3rd) 🙂

mdunsterville

Is there an updated timeline on when this is getting rolled out?

mike22rtn

Awesome! What kinds of feature updates do you guys plan on rolling out to the forms moving forward?

Phillip

WOOT, WOOT!!! 🤩

Reply


Terms & ConditionsCookie settings