Gravity Forms Stripe Add on Minified CSS

Update! I’ve got a vastly improved Gravity Forms stylesheet, including the credit card field, these days. 9% faster performance than the default GForms CSS and absolutely gorgeous. Get it for free here!

I’m a big fan of Gravity Forms, but don’t care all that much for the massive stylesheet(s) they tack on to their forms. To that end, here’s the latest installment of my “Minified Stylesheets for Gravity Forms” series.

This one specifically deals with the Gravity Forms Stripe Add-on (the official one from Gravity Forms themselves, requires a developers license).

Here’s the final product:

screenshot of an elegant credit card form; simple, easy to use
The final product, assuming you use the fonts and styles listed below.

Here’s the CSS:

.gform_card_icon_container {margin-bottom:15px;}
.gform_card_icon_container:after {content:"";display:table;clear:both;}
.gform_card_icon_container div {float:left; padding:5px 10px; }
.gform_card_icon_container div:before {position:relative; top:10px; margin-right:5px;}
.gform_card_icon_amex:before {content:url(img/cc/amex.svg);}
.gform_card_icon_discover:before {content:url(img/cc/discover.svg);}
.gform_card_icon_mastercard:before {content:url(img/cc/mastercard.svg);}
.gform_card_icon_visa:before {content:url(img/cc/visa.svg);}
.gform_card_icon_container + input {width:560px;}
.gform_card_icon_container + input + label {margin-bottom:50px;}
.ginput_cardinfo_left {width: 180px; float:left;}
.ginput_cardinfo_right {top: -10px; position: relative;}
li.gfield span.ginput_card_expiration_container label {margin-top: 15px;}
.ginput_cardextras + span.ginput_full input {width: 432px; margin-top:30px;}

This calls a few SVG images, which can be downloaded here.

It also works particularly well with the font Open Sans and my minified Gravity Forms stylesheet.

Up Next: A Stroll Through Easy Digital Downloads: A Beginner's Guide