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

    Credit card details in payment tool incorrect layout in mobile view

    Asked by melodicsounds on April 11, 2016 at 01:06 PM

    2 things:

     

    a). In my form: https://form.jotform.com/60967271989980 while being on mobile... in the Stripe fields, the "Tarjeta de Crédito" and "Código de Seguridad" are really confused ... they look really bad.. can we insert some CSS or how to fix so it looks good like in the desktop? The Security Code should be smaller... and the subtext should be below the field. 

    Same with "Mes de vencimiento" thees a / that makes the subtext move down.

     

     

    b). In the same form if in your "Description" field you have a big big text or a long text, while being on the preview widget its look really messed up... there is no responsive in there... the screen goes as big as the text lenght... see pictures:

     

    In this pic you see the really long text making all the form become bigger to the right.

     

    see the submit button becoming big to the right...

     

    Help with all this please.

    problem Mobile JotForm uploads preview
  • Profile Image
    JotForm Support

    Answered by Charlie on April 11, 2016 at 03:05 PM

    Could you please try the following to resolve the first problem in your credit card text boxes:

    1. First, enable the mobile responsive in your Form Designer Tool:

     

    2. After that, navigate to your CSS tab and paste this custom CSS code:

    @media screen and (max-width: 640px), screen and (max-device-width: 780px) and (orientation: portrait), screen and (max-device-width: 780px) and (orientation: landscape){

        /* Credit Card Number*/

    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(1) {

            width : 70% !important;

        }

        .form-textbox.cc_number {

            width : 95% !important;

        }

        /* Security Code*/

    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(2) {

            width : 28% !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;

        }

        .form-dropdown.cc_exp_month {

            width : 93% !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;

        }

    }

    Here's a screenshot to where you need to paste the code:

     

    Here's my cloned form: https://form.jotform.com/61016127995963. You can clone it to have it in your account. To clone my form, you can follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL. Let us know if the credit card details now shows correctly in your mobile view. This is how it should look like:

     

    For the 2nd problem regarding the preview before widget, I went ahead and opened a separate thread for it. Please refer to this link instead: https://www.jotform.com/answers/815563. We will address that one there.