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.

CSS issue: Order form is displayed broken.

  1. Hello,

    I'm creating an order form including credit card input section.
    But when I let the form display, some fields, especially credit card input section, are displayed broken
    http://wisteriawine.com/shippinginformation2

    Examples:
    1. Input field for "Zip / Postal Code" is displayed half line below.
    2. Input fields for "Card Number", "Expiration Date" and "Security Code" are displayed at the left side of the dot lined box.+ Input field for "Cardholder Name" is hidden within the dot lined box.
    3. "I am more than 20 years old..." is displayed single line below.

    How can I fix these layouts? I would appreciate it if you would give me concrete instructions.
    I'm not so familiar with CSS style sheet. I understand the basics of CSS, but don't have enough knowledge to fix this issue.

    When I let the form display with the preview mode, it isn't displayed broken. But when I integrate the form with existing customized theme, it's displayed broken.

    When I set the CSS off from [Forms]->[Settings]->Select "No" at the "Output CSS" the form isn't displayed broken.(But at the same time, icons like "AMEX", "VISA" disappear.)

    I think this issue has something to do with CSS settings, but I don't know how and from where I fix this issue.

    What I did:
    I added to the wrapper below at the last part of the "wp-content/plugins/gravityforms/css/forms.css"
    and tried to fix the layout. but I couldn't. (Maybe I just don't know what values I should set. At lease I set "width: auto;", but it didn't display like what I wanted.)

    body .gform_wrapper .gform_body .gform_fields #field_2_1.gfield .ginput_container {
    border: 1px solid red;
    }

    (I also don't understand to where I should put the my CSS codes. I put the code "l/wp-content/themes/wisteriawine/style.css" first, but it didn't work at all. So I added temporarily my CSS codes at the end of the "wp-content/plugins/gravityforms/css/forms.css", which you are not supposed to do, (,because the changes will be overwritten when auto-updates..)

    The "wisteriawine" is a folder for customized theme, I assume, a customized .css is probably applied in the form page now, but I couldn’t determine, which one was the target css. (When I let the HTML source codes of http://wisteriawine.com/shippinginformation2, lots of xxx.css files are displayed. But I couldn’t find which was the one I was looking for. At least I found there wasn’t "l/wp-content/themes/wisteriawine/style.css"…)

    [Miscellaneous]
    - I tried to fix this issue by referring the instructions below, but I couldn’t fix it.
    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    [Basic information]
    Browser: I use Chrome, IE.
    Gravity Forms v1.6.11

    Any help or advice would be much appreciated.

    Thanks!

    Posted 7 years ago on Wednesday January 9, 2013 | Permalink
  2. I think the main problem is coming from your theme (which is based on the Themeforest Inspiration theme) adding additional markup to the Gravity Forms shortcode output. If you look in the source of the page, you will see extra < br > and < p > tags inside the output of the Gravity Form. The quick fix is sometimes to wrap the [gravityform] shortcode in the [raw] [/raw] shortcode. Some themes include a shortcode which affects the processing of all shortcodes on the site, and that's where the extra markup comes from. You can read more about that problem here:

    http://www.gravityhelp.com/forums/tags/raw
    http://www.gravityhelp.com/forums/tags/themeforest

    Additionally, it appears you are using an old version of WordPress with the latest Gravity Forms. Would it be possible to upgrade your WordPress to the latest 3.5 version, after testing all your themes and plugins for compatibility?

    Remove the CSS from the Gravity Forms forms.css file, enable the output of CSS in the Gravity Forms settings (I think you have already done that) and wrap your Gravity Form shortcode in [raw] shortcode tags and I think you will have more success styling your form.

    Posted 7 years ago on Wednesday January 9, 2013 | Permalink
  3. Hello Chris,
    Sorry for the delayed answer.
    Yes, it worked! Almost all of the layouts have been fixed by wrapping the [gravityform] shortcode in the [raw] [/raw] shortcode. Thank you!

    Posted 7 years ago on Monday January 21, 2013 | Permalink

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