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.

Layout within "Credit Card" section

  1. I haven't done any custom GF dev work, so wanted to ping this group before spending too much time on a goose hunt...

    Using the Authorize Plug-In, I have a form on a client site with the special "Credit Card" field. Is there any way to modify the layout of that mutli-field section?

    Specifically, multiple donors have complained of the system being down because they are entering the CC number in the name field. I agree that the layout is confusing with credit card logos, then name, then number. Is there a way to either move the logos to between the name and number, or move the name to after the expiry/cvc info?

    Ideally, I'd like something that would be upgrade-friendly (e.g. not modifying core GF or GF+Authorize files) and as simple as possible. A layout of Name, Logos, Number, Expiry, etc would be my first choice.

    Any suggestions, pointers, etc?

    Thanks in advance!

    Posted 8 years ago on Saturday April 21, 2012 | Permalink
  2. You could rearrange some of it with CSS, like this here: http://grab.by/de3C

    If you want to share a link, I can whip that up for you if this works?

    You can also use these hooks to change the text:

    http://www.gravityhelp.com/documentation/page/Gform_card_name
    http://www.gravityhelp.com/documentation/page/Gform_card_number
    http://www.gravityhelp.com/documentation/page/Gform_card_security_code
    http://www.gravityhelp.com/documentation/page/Gform_card_expiration

    Posted 8 years ago on Sunday April 22, 2012 | Permalink
  3. Thanks - the form can be seen at http://utcatholic.org/match

    I think the CSS + language change would be helpful. Thanks for the quick response!

    Posted 8 years ago on Sunday April 22, 2012 | Permalink
  4. Right on, try dropping this into your theme's stylesheet:

    [css]
    #input_6_13_5, #input_6_13_1 {
    float: right;
    width: 70% !important;
    }
    Posted 8 years ago on Monday April 23, 2012 | Permalink