CSS for Adjusting Credit Card Payment fields

  • Profile Image
    MaidCrew
    Asked on February 14, 2017 at 12:12 PM

    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

  • Profile Image
    EltonCris
    Answered on February 14, 2017 at 02:13 PM

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

  • Profile Image
    EltonCris
    Answered on February 14, 2017 at 03:30 PM

    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!