What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CSS for Adjusting Credit Card Payment fields

    Asked by MaidCrew 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

    Page URL:
    https://form.jotform.com/70415108017142

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 14, 2017 at 02:13 PM

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

  • Profile Image
    JotForm Support

    Answered by EltonCris 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!