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.

Gravity Forms Styling in WPTouch Pro

  1. Hello,

    I've got a small problem with Gravity Forms and WPTouch Pro.

    This is the page with the form I'm having issues with:
    http://nlightonline.com/marketing-consult-mlp/

    The form works properly both in desktop and in the mobile theme, but when on the mobile theme the first half of the 'First Name' and 'Last Name' fields are cut-off and don't show up properly. This doesn't affect the way the form functions, just the way it looks.

    How do I fix this for the mobile theme (I'm seeing this issue when using an iPhone).

    I have another, more complex, form that you can look at to see the same issue here:
    http://nlightonline.com/apply-for-a-job/

    This one isn't as important because I'm not using it in my mobile marketing campaign, but I assume the fix would help both forms.

    Thanks a ton.

    PS - here is a link to the exact same topic thread I started on the WPTouch Pro Forums:
    http://www.bravenewcode.com/support/topic/gravity-forms-styling-in-wptouch-pro

    Posted 8 years ago on Friday December 31, 2010 | Permalink
  2. Okay, I found the issue. It's a problem caused by the plugin/theme CSS. On line 1 of the style-min.css file here:

    http://nlightonline.com/wp-content/plugins/wptouch-pro/themes/classic/iphone/style-min.css

    there is a rule that sets a negative 11px text indent on any UL or OL element inside the "post" container. These kind of blanket CSS rules are pretty sloppy (but sadly not uncommon), so your form is inheriting that rule and the left side of the inputs/labels are being cut off.

    .post ul,.post ol{font-size:90%;color:#555;text-indent:-11px;line-height:130%;margin-right:15px;margin-left:20px;margin-bottom:10px;}

    What you'll want to do is override that rule (and a padding issue) with something like this.

    body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields {text-indent:0!important; margin:0; padding:0}
    
    body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields li {padding-left:0!important}

    here's my test screenshot: http://grab.by/89gU

    Give that a shot and you should be good to go.

    Posted 8 years ago on Saturday January 1, 2011 | Permalink
  3. Thank You So Much Kevin!

    You are now my hero for the day. :)

    Posted 8 years ago on Saturday January 1, 2011 | Permalink
  4. Kevin I have one more question that has a similar answer.

    On the more complex form:
    http://nlightonline.com/apply-for-a-job/

    whenever there is a list of options they show up stair stacked with the checkbox covering the first letter of the option it represents.

    I'd like them to line up properly, but this isn't really mission critical because I'm not marketing this form for mobiles. So any help is appreciated.

    Posted 8 years ago on Saturday January 1, 2011 | Permalink
  5. It's related to the same thing. You just need to override the negative text-indent property for those radio/checkbox lists as well.

    body.wptouch-pro .post .gform_wrapper .gform_body ul.gfield_checkbox,
    body.wptouch-pro .post .gform_wrapper .gform_body ul.gfield_radio {text-indent:0!important}

    Screenshot: http://grab.by/89jP

    Posted 8 years ago on Saturday January 1, 2011 | Permalink
  6. Great support, Thank you!

    Posted 8 years ago on Sunday January 2, 2011 | Permalink
  7. Nick
    Member

    Is there any way to make the reCAPTCHA more mobile friendly? On an iPhone in portrait it's a little too wide. Or maybe a way for a form to show reCAPTCHA on regular browsers but some other method on mobile?

    Posted 8 years ago on Thursday March 10, 2011 | Permalink
  8. the reCaptcha field is provided via a third party service and we don't control the sizing, just include it in the forms with what few options they offer in regards to themes, etc.

    There isn't a way to exclude the reCaptcha based on the platform either. What you can do is try the Really Simple Captcha plugin. If you have that installed, it will show up as an option for your captcha field in the form editor. It's quite a bit more compact than the default reCaptcha field.

    http://wordpress.org/extend/plugins/really-simple-captcha/

    Posted 8 years ago on Thursday March 10, 2011 | Permalink

This topic has been resolved and has been closed to new replies.