Changing the layout of the payment field with credit card payment

  • Profile Image
    Tenniszentrum_Arsenal
    Asked on March 18, 2017 at 03:41 PM

    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.

     

  • Profile Image
    Chriistian
    Answered on March 19, 2017 at 03:58 AM

    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.

  • Profile Image
    Tenniszentrum_Arsenal
    Answered on March 19, 2017 at 04:27 AM

    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?

  • Profile Image
    Welvin
    Answered on March 19, 2017 at 12:09 PM

    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

  • Profile Image
    Tenniszentrum_Arsenal
    Answered on March 19, 2017 at 02:08 PM

    Very nice solution!

    Thank you!