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

    Changing the layout of the payment field with credit card payment

    Asked by Tenniszentrum_Arsenal 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
    JotForm Support

    Answered by Chriistian 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

    Answered by Tenniszentrum_Arsenal 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
    JotForm Support

    Answered by Welvin 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

    Answered by Tenniszentrum_Arsenal on March 19, 2017 at 02:08 PM

    Very nice solution!

    Thank you!