Firefox, forms and Empty string passed to getElementById()

1

I’m really not sure if this is an issue with Bootstrap, an issue with Sage, or an issue with Gravity Forms.

I’m having a bizarre issue where my contact form is broken, only in Firefox. I’m using Sage (Roots 6.5.2) and Gravity Forms.

I’m not able to type into any of my fields - for example, typing into the name field yields nothing. This is only happening in Firefox, but it’s still kind of a big deal.

I noticed that the dropdown I am using is not automatically populated with a default answer and, when I select any field on my form console is showing the following warning in jquery -

Empty string passed to getElementById()

I’m going to have to pull my contact form and put something simpler there for the time being, but I have an example page with the form in question set up, if anyone wants to put eyeballs on this.

http://smutek.net/contact/ (restored original contact form semi-resolved for now - see below)

My initial searches are making me think that this is an issue related to Bootstrap, but I wanted to post here first in hopes that someone else has experienced the same issue and has some ideas.

I’m really not sure what to do about this. I tried adding jquery migrate on my dev environment, as a shot in the dark, but it didn’t help.

Any thoughts would be most welcome!

2

Just a quick update - - I have Gravity Forms set to use HTML 5 and to not output CSS because I’m using the Bootstrap CSS.

Interestingly, I just found that setting Gravity Forms to output CSS fixes this. Console still shows the Empty string warning, but the form is functional.

3

It’s possible that something isn’t playing nice with the latest jQuery version that the theme is including. Can you try commenting out this line in lib/config.php?

add_theme_support('jquery-cdn');
4

Hey Ben, I just resolved this.

I was using…

.ginput_container {
  input,
  select,
  textarea {
   @extend .form-control;
}

…in my stylesheet to pull in the Bootstrap styles. I commented that line out and added the rules in .form-control to my stylesheet and this got me going again.

Not exactly ideal.

I’ll roll it back real quick, try your suggestion, and post back.

Thanks!

5

Okay - I tried it and commenting out the line for jQuery CDN didn’t help.

I can live with my solution for now, until I have more time to fiddle with it.