What’s up Stack! I am having a major problem with a javascript form that I have implemented on my company’s website. The problem is the form is not inheriting anything from the stylesheet. All of our corporate websites are built using wordpress. For this particular website, we are using the divi theme with a child theme for customization. I have all the javascript files and php files that they call up on ftp and the form itself works just fine, but it is a complete jumbled mess visually. I ended up setting up the same form in another test environment without divi and the form ended up being styled to match the different theme being used. So I know the problem is divi, but does anyone have any advice on how to get this form styled whilst still using divi?
Here is the URL for the site in question: http://www.haines.com/university/
Under select a class, when you click the date link in any of the classes, the form opens up.
2
Answers
From what I’m seeing, your template is using dynamic class in its CSS. For exemple :
That means you cannot re-use their style, except if you know how to retrieve this kind of id.
In that case, the easiest thing should be to copy/paste the CSS you want, and apply it to your form like that :
That should be done for every style you need (input, label etc.)
Ok, a few things going on here. I see that you’re still actively changing the code, so this might not all apply currently.
First, you’re re-using ids. You can’t do that; an id is meant to be unique, and will cause issues if it is not. Change studentclasssignup to a class instead.
Secondly, you’re putting the css on the div, when you want the input styled. You want the css on a child of the div. If you change to a class, you can style a child like this:
.studentclasssignup > input {
<whatever>
}
Or with an id it would be:
#studentclasssignup > input {
<whatever>
}
But again, do not reuse IDs.