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

    Preview Before Submit widget: Layout and button not correct

    Asked by melodicsounds on April 11, 2016 at 02:20 PM

    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...

  • Profile Image
    JotForm Support

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

    In my first post, could you please try enabling the mobile responsive option in the Form Designer Tool.

    After that, the only problem that I'm seeing is the buttons. How do you want the buttons to be formatted in the mobile view?

    Here's my updated CSS code, the code referring to the preview containers button is at the last part and is bolded:

    @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;

        }

        /* Preview containers margin */

        #previewContainer > ul > li > #previewButtons {

        margin-left: 20% !important;

        margin-right: 20% !important;

    }

       /* Buttons */

        #previewContainer > ul > li > #previewButtons > button {

            width: 100px !important;

        }

    }

     

    This is how it looks like:

     

    Let us know if that works. Again, here's my updated cloned form: https://form.jotform.com/61016127995963