Use CSS ready classes on a group of fields?

Gravity Support Forums » Plugin Support » Gravity Forms

houseofgrays
Member

I found a user with a similar issue in the forums, but the solution was communicated by email, so I apologize. And thanks in advance!

I'm helping a friend move her (broken/crappy) Contact7 form from here: http://kharismastudios.com/contact/

I've got it set up with Gravity Forms here: http://kharismastudios.com/contact-test/

I just can't figure out how to use the Two Column ready class to put the paragraph text field on the right side.

This is the code the original form uses:

<div id="composeInputs">
<p><label>Your Name</label>
[text* your-name] </p>

<p><label>Your Email</label>
[email* your-email] </p>

<p><label>Subject</label>
[text your-subject] </p>
</div>
<div id="composeTextarea">
<p>Your Message</label>
[textarea your-message] </p>
</div>

Posted 12 years ago on Sunday December 9, 2012 | Permalink
Richard Vav
Administrator

OK so to start you need to move your paragraph text field up above the three text fields you want to appear beside it and give it the css class name gf_right_half next give your other three text fields the css class name gf_left_half

Now when you preview your form you should find your layout pretty much matches the old form

Posted 12 years ago on Sunday December 9, 2012 | Permalink
houseofgrays
Member

I had tried that first before posting and it created huge gaps in the other fields below and made all the widths different. Any ideas?

Posted 12 years ago on Sunday December 9, 2012 | Permalink
Richard Vav
Administrator

Could you make the change again so I can see it live and then I can offer advice from there. When I make the changes in the chrome dev panel this is what I see http://imgur.com/9oehM

Posted 12 years ago on Sunday December 9, 2012 | Permalink
houseofgrays
Member

Yep, this is what I get: http://kharismastudios.com/contact-test/

Thanks so much for your help so far!! :D

Posted 12 years ago on Sunday December 9, 2012 | Permalink
houseofgrays
Member

Whoops, fixed it. Had forgotten to move the field back up in the form editor. Thanks so so so much!

Posted 12 years ago on Sunday December 9, 2012 | Permalink
Richard Vav
Administrator

No problem, glad you sorted it

Posted 12 years ago on Sunday December 9, 2012 | Permalink
houseofgrays
Member

The only thing I'm wondering is...is there a way to set the tab index so the Message/Paragraph field is tabbed to last, even though it's technically the second field in the form?

Posted 12 years ago on Sunday December 9, 2012 | Permalink
Richard Vav
Administrator
If i remember correctly there is a filter for the tabindex but I think it only sets the starting number so I think your only option for changing the tab order would be to use some jquery like so
```
jQuery(document).ready(function() {
    jQuery("#input_1_2").attr('tabindex','2');
    jQuery("#input_1_4").attr('tabindex','3');
    jQuery("#input_1_5").attr('tabindex','4');
  });
```
Posted 12 years ago on Sunday December 9, 2012 | Permalink