CSS Form Styling

I have a form at http://azwm.com/arizona-mortgage-application/

(You'll need to view the source to answer this question, because...)

I can't see the code and I have no control over it. I can only style the form from the WP theme stylesheet.

Because of this reason, and because I don't fully understand CSS, I am having a lot of trouble.

It's a multi-part form.

On the last section, there is one large "address" field, according to the way this WP plug-in is designed. Then within the large address field, there are subfields for First, Last, Street Address, Zip code etc.

The field labels are fine, but the field SUBLABELS are messed-up. Right now, the words "first" and "last" and "street address" and "zip code" don't like up underneath the fields they are supposed to line up with. Also, I need to change the font size to 12 pixels.

I've been messing with it for two hours and I just can't figure it out.

If you can help, I'd very much appreciate it. Thank you!
Who is Participating?
gwkgConnect With a Mentor Commented:
span#input_3_38_3_container label {padding-left:50px;} // First
span#input_3_38_6_container label {padding-left:50px;} // Last
label#input_3_39_1_label {padding-left:50px;} // Street Address
span#input_3_39_3_container label {padding-left:50px;} // City
label#input_3_39_5_label {padding-left:50px;} // Zip


span#input_3_38_3_container label, span#input_3_38_6_container label, label#input_3_39_1_label, span#input_3_39_3_container label, label#input_3_39_5_label, label#input_3_39_5_label

Paul MacDonaldDirector, Information SystemsCommented:

Well, there is no class defined for those items.  I don't know if one exists, if you can create one or if you can modify what's there.

Try something like:
     <label class='gfield_label' for='input_3_38.3'>First</label>

If that makes the font big, try something like:
     <label class='ginput_left' for='input_3_38.3'>First</label>

mikegeorge2Author Commented:
Ugh is right. That suggestion won't work, because I only have control over the style sheet. If it's not in the style sheet, I can't touch it.

This is another way to look at the form code. These are the stylesheet elements. Does this help?

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Paul MacDonaldDirector, Information SystemsCommented:
You could try to create a default entry for labels - any defined classes ought to override the default behavior - and see what that does.  Model the CSS for a label on gfield_label, making whatever changes are necessary for font size, etc, and see if that works.
Jason C. LevineNo oneCommented:
Hi mikegeorge2,

Did you know that you can disable the default Gravity Forms CSS on a per forms basis?  It might be easier for you to do that and write a completely customized CSS file in place for the form than to try to beat your head against the Gravity forms stuff...
mikegeorge2Author Commented:
Thank you so much...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.