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

    Align fields with payment box.

    Asked by adornedwithpolish on October 07, 2016 at 01:12 AM

    I was previously given a CSS code to inject which allowed all of my fields to line up with the "Credit Card Details" fields in the mobile view but now they don't. The desktop view is fine. Can you please help me fix the mobile view?

    Page URL:
    https://www.jotform.us/form/62779351983168

    Screenshot
    align fields Mobile css code credit card
  • Profile Image
    JotForm Support

    Answered by seth on October 07, 2016 at 02:14 AM

    Hello, I inspect your form and css codes. You want to align all fields with credit card information. This brings out a lot of css work to do since there are a lot of fields to align with credit card information. I recommend you to clear all your css code and try to shrink the credit card information to left instead of aligning other fields to right. In this way you have to control a few items rather than controlling all other elements on the form except credit card fields.

    Hence give this a try:

    1) Clone your form, then clean your css injections.

    2) Then shrink your credit card fields to left:

    3) Preview your form:

    If this approach solves the issue please let us know. I suggest try to style smaller parts to bigger parts of your form, in other words it is better to style credit card fields instead of the remaining parts of the form.

    If you have other questions or if this is not useful for you, please contact us again.

  • Profile Image

    Answered by adornedwithpolish on October 07, 2016 at 12:25 PM

    Thank you for your reply. My preferences would be to align the fields with the Credit Card Details as opposed to shrinking as suggested above. Before I was given the CSS code below to inject and it worked just fine. I have since added more fields which I have to assume is the reason it is not working any more.

     

    @media only screen and (max-width: 480px) {

    #id_32{

        width: 100% !important;

    }

    #customFieldFrame_32{

        height: 80px !important;

        width: 100% !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr td:first-child span{

        width: 200px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr td:first-child span:last-child{

        width: 90px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr+tr td:first-child span{

        width: 135px !important;

    }

    #id_30 table.form-address-table tr:first-child +tr+tr+tr td:last-child span{

        width: 135px !important;

    }

    .form-line{

        padding: 0px 2px 0px 2px !important;

    }

    #id_42{

        margin-left: 60px !important;

        width: 50px !important;

    }

    }

  • Profile Image
    JotForm Support

    Answered by david on October 07, 2016 at 02:36 PM

    Try enabling mobile responsiveness for your form, rather than trying to line up everything using CSS:

    https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive

    I removed previous formatting from my test form and enabled mobile responsiveness, after that, everything appeared to be properly aligned:

    https://www.jotformpro.com/form/62805575688976

    You can clone my copy if that is how you would like yours to look:

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL