Layout within "Credit Card" section « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

kraft
Member

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 12 years ago on Saturday April 21, 2012 | Permalink
Rob Harrell
Member

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 12 years ago on Sunday April 22, 2012 | Permalink
kraft
Member

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 12 years ago on Sunday April 22, 2012 | Permalink
Rob Harrell
Member
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 12 years ago on Monday April 23, 2012 | Permalink