PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Use CSS ready classes on a group of fields?

  1. 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 6 years ago on Sunday December 9, 2012 | Permalink
  2. 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 6 years ago on Sunday December 9, 2012 | Permalink
  3. 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 6 years ago on Sunday December 9, 2012 | Permalink
  4. 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 6 years ago on Sunday December 9, 2012 | Permalink
  5. Yep, this is what I get: http://kharismastudios.com/contact-test/

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

    Posted 6 years ago on Sunday December 9, 2012 | Permalink
  6. Whoops, fixed it. Had forgotten to move the field back up in the form editor. Thanks so so so much!

    Posted 6 years ago on Sunday December 9, 2012 | Permalink
  7. Richard Vav
    Administrator

    No problem, glad you sorted it

    Posted 6 years ago on Sunday December 9, 2012 | Permalink
  8. 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 6 years ago on Sunday December 9, 2012 | Permalink
  9. 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 6 years ago on Sunday December 9, 2012 | Permalink