CSS for Adjusting Credit Card Payment fields

Hey Jotform Superheroes... gotta question.

I'm working on Stripe integration for a form and was wondering if I can get some help on two fronts. I pulled this pic from another thread/question and was wondering if its possible to get CSS code for making my CC fields render like this... pic below.

Also... within the same CC fields, I've tried to inspect my form's code to ascertain the "field name" of the buyer's first & last name so I can insert their name into email notifications, subject line, etc.. but every time I try to insert what I think is the right value/field name {}, Jotform removes the field value from my email format/code. Can you clue me in on what field names (for both their first and their last name - separately) I should be using for insertion into emails.

Thanks a bunch!

Shawn

We will try this and get back to you with a solution. Stay tuned!

Unfortunately, with the current structure of the HTML code of the CC field, it is a little complex to achieve the style that you want. It is doable but it is not cross browser compatible and it is not good for mobile.

However, I come up with a different solution and that is to arrange them in 2 columns and make them mobile responsive.

Inject this CSS codes in your form http://pastebin.com/raw/tBdpaSkD

Result:

Desktop:

Mobile:

With regards to using the first name and last name on CC fields, you need to use suffix to separate them.

Example:

If your product field variable is {myProducts}, use firstname and lastname suffix to fetch the first and last name value.

{myProducts:firstname}

{myProducts:lastname}

Here's a full guide: https://www.jotform.com/help/231-How-to-Strip-Payment-Labels-and-Separate-Payment-Info-on-Email-Alerts

Hope this still helps!