Incorrect Stripe Payment Formatting for Credit Card details?

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

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.

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.

Works perfectly - thank you so much Charlie!!

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

Thank you.