How to Adjust the Layout of the Stripe Payment Field?

  • transtrumbp
    Asked on January 28, 2016 at 12:55 AM

    Hello, I've got a couple issues I need help with regarding the Stripe form.

    1. I'm trying to get the payment form formatted like the one in this thread (http://www.jotform.com/answers/720377-Some-Formatting-Questions), but when I insert the CSS, my form is not looking like the one in the other thread. I did make sure to change the ID numbers accordingly, but is there something else I need to do?

    2. I would also like the Order Total field to fit better with the form. As it is now, the box is tiny, and the USD & line don't look good.

    Here's my form URL: https://form.jotform.com/60257842695970

    Hoping someone can help!

    Thanks

  • mert JotForm UI Developer
    Replied on January 28, 2016 at 8:35 AM

    Hi there,

    I checked the other thread and try to replicate the same Stripe template on your form. Below, you can find the necessary CSS code:

     

    #input_100_cc_exp_month, #input_100_cc_exp_year{

    width: 150px !important;

    }

    input.form-textbox.cc_number{

    width: 175px !important;

    }

    span.form-sub-label-container{

    width: 200px !important;

    }

     

    After applying the code above, the result will be like the following:

    How to Adjust the Layout of the Stripe Payment Field? Image 1 Screenshot 20

     

    For further assistance, please do let us know.

    Thanks.

  • mert JotForm UI Developer
    Replied on January 28, 2016 at 8:37 AM

    Also, I moved your second question into another thread. On the following link, you can easily access it.

    http://www.jotform.com/answers/758444

     

    It will be answered right away.

  • transtrumbp
    Replied on January 28, 2016 at 11:12 AM

    Thanks for the reply and the solution! I added the CSS for both and they worked great!

  • mert JotForm UI Developer
    Replied on January 28, 2016 at 12:14 PM

    You are most welcome. For further assistance, please don't hesitate to contact us.

     

    Thanks.