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

    Incorrect Stripe Payment Formatting for Credit Card details?

    Asked by skinnymusicltd on March 30, 2016 at 08:32 AM

    Hello

    I am working on form: https://form.jotformeu.com/60885123545357

    On the final page where we will take payment, the formatting of the Stripe payment looks wrong.

    I would like it to look like this:

    [FIRST NAME] [LAST NAME]

    [CARD NUMBER] - [CVV]

    [EXPIRY MONTH] / [EXPIRY YEAR]

    Any ideas?

    Thanks

    Ross

    Page URL:
    https://form.jotformeu.com/60885123545357

    name first name card thanks
  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2016 at 10:28 AM

    This seems to be related to the layout of your credit card fields. Please allow me sometime to have a working CSS code, I'll get back to you as soon as I have it working in my end.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2016 at 10:36 AM

    Try using this custom CSS code in your form:

    /* Credit Card Number*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(1) {
        width: 60% !important;
        margin-right: 2% !important;
    }
    .form-textbox.cc_number {
        width: 100% !important;
    }

    /* Security Code*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(2) {
        width: 38% !important;
    }
    .form-textbox.cc_ccv {
        width: 100% !important;
    }

    /*Expiration month*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(1) {
        width: 48% !important;
        margin-right: 2% !important;
    }

    .form-dropdown.cc_exp_month {
        width: 95% !important;
    }


    /*Expiration Year*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(2) {
        width: 50% !important;
    }

    .form-dropdown.cc_exp_year {
        width: 100% !important;
    }

     

    Paste it under your CSS tab in the Form Designer Tool. See if that works. You can adjust the width values and try experimenting on it. I added tags or comments on each section of my code so that its easier to understand.You can see how it looks like in this cloned form that I have: https://form.jotform.com/60893772767978

    Let us know if you need more help on this.

  • Profile Image

    Answered by skinnymusicltd on March 30, 2016 at 10:50 AM

    Works perfectly - thank you so much Charlie!!

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2016 at 12:06 PM

    You are very much welcome. If you needed our help again, please do feel free to visit us here in the forum.

    Thank you.