Changing the layout of the payment field with credit card payment

Hi!

My form is nearly finished but I don't really like the layout or design of the payment widget of Stripe.

First I do not like the line up on the right side.

Then I think the field for the amount is a bit to small.

And if the text "Kreditkartendaten" would be on the left side and mor down it would look much better.

Is there a way to change the layout?

Thank you.

Hi there,

Do you mean you want the text Kreditkartendaten to look as below?

If so, please inject the following CSS to your form.

#ccTitle91 {

    text-align: left;

    position: absolute;

    left: 20px;

    width: 140px;

    white-space: nowrap;

}

.form-address-table {

    margin-top: 50px;

}

If you need further assistance, let us know.

Regards.

Thank you for your help!

This is already much better for me.

I will short "Kreditkartendaten" to "Kreditkarte", but here a pic how it would be perfect for me:

Would this be possible?

Inject the following custom CSS codes to that form:

@media only screen and (min-device-width: 1025px) {

#ccTitle91 {

    position: relative;

    margin-left: -153px;

    margin-top: 25px;

    display: block;

}

#cid_91 > div > table > tbody > tr:nth-child(2) {

    margin-top: -30px;

    position: relative;

    display: block;

}

}

This is for large views only, mobile stays the same. 

Here's our guide on how to inject the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

Very nice solution!

Thank you!