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

    How to swap position of Stripe credit card information fields and other form fields on the form?

    Asked by BBC2016 on April 18, 2016 at 01:48 AM

    How can I make the product section look like this image attached and how do I get product section at the TOP of the form/page??????

    I can't do this - I am frustrated :( Can u give me css code to make this happen????

    Id like everything to match the image I made - the header color, font, form field titles, everything, box size, spacing. Is this possible for one of you SMART and AMAZING MASTERMINDS to help me do????

    MY FORM RIGHT NOW: http://buildingbridgescoalition.org/registration-form/

    HOW I WANT IT TO LOOK BUT I CAN"T DO IT:

    css code workaround size credit card field css inject custom css custom css
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 18, 2016 at 03:26 AM

    There appears to be a lot of css that needs to be applied to achieve your requirement. Please allow me some time to investigate this issue further and I will let you know once I have the CSS available for your form.

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 18, 2016 at 05:26 AM

    I have now modified the css on your form to fit your requirement. However, please note that there are fields that are different or missing from the form when compared to the image so some labels may need to be added to make it more similar.

     

    Here's the css that I added to make the form look more similar to your example.

    .form-address-table input, .form-address-table select {

        width : 200px!important;

    }

     

    #input_5,#input_11 {

        width : 440px;

    }

     

    .form-sub-label-container {

        width : 200px!important;

        margin-right : 30px!important;

        margin-left : 0px!important;

    }

     

    .form-address-table td {

        width : 200px!important;

        padding-left : 0px!important;

    }

     

    input.form-textbox.cc_number {

        margin-right : 10px;

    }

     

    .form-dropdown.cc_exp_month {

        margin-right : 10px;

    }

     

    #input_13_cc_exp_month, #input_13_cc_exp_year {

        padding : 3px;

        height : 30px;

        border-radius : 6px;

        margin-left : 0;

        border : 1px solid #ccc;

        font-size : 1em;

        line-height : 1.071em;

        -moz-box-shadow : 0 1px 2px #eee inset;

        -webkit-box-shadow : 0 1px 2px #eee inset;

        box-shadow : 0 1px 2px #eee inset;

    }

     

    #input_13_cc_exp_month {

        width : 200px!important;

    }

     

    li#id_4, li#id_9, li#id_5,li#id_10,#id_6 ,li#id_11 {

        position : relative !important;

        top : -270px !important;

        margin-bottom : 0px;

        margin-top : 0px;

    }

     

    #id_13 .form-address-table {

        position : relative !important;

        top : 900px !important;

    }

     

    #product-name-input_13_1001 {

        margin-right : 240px;

    }

     

    #product-name-input_13_1002 {

        margin-right : 208px;

    }

     

    #product-name-input_13_1003 {

        margin-right : 239px;

    }

    .form-payment-total {

        max-width : 430px;

        text-align : right;

        position : relative;

        top : -50px;

    }

     

    hr {

        position : relative;

        top : -50px;

    }

     

    span.form-product-item {

        width : 450px!important;

    }

     

    #input_13_quantity_1005_0 {

        position : relative;

        left : 370px;

        width : 50px;

        bottom : 20px;

    }

     

    .form-product-item:nth-of-type(4) .form-sub-label {

        position : relative;

        left : 310px;

        width : 50px;

        bottom : 0px;

    }

    .form-line {

        width: 600px;

    }

    You can also check out this demo form where I tested the css: https://form.jotform.com/61081235234951 

    If you need further assistance, please let us know.
    Regards.

  • Profile Image

    Answered by BBC2016 on April 23, 2016 at 01:41 AM

    I hope this doesnt come out wrong but umm this doesnt look like my image I made up. Can u help again??

     

    SOme fields u made are indented - others are not on the proper line. Spacing is too wide between lines.

     

    Can u look at it again for me??

     

    Please - THANK U!!!!!!!

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 23, 2016 at 02:18 AM

    I will try to see what I can do and will get back to you as soon as I have a solution. 

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 23, 2016 at 09:20 AM

    I have made a clone version of the form embedded on the website you have provided. 

    https://form.jotform.com/61132623473954

    I have removed all the CSS codes I have found under Preferences>Form Styles>Custom CSS tab.

    Then, I have changed the form width from 780px to 560px through Preferences>Form Styles>Properties.

    I have also shrunk the Email field and Phone number field. After that, I have merged the Phone number field to the Email field. (Please see the screencast below)

    I have also added a "Text" that says "PERSONAL INFO:"

    I have also added a header that doesn't have any text in it. 

    Then, I have added CSS codes to the form. You can check the codes by clicking this link.

    I hope this is what you're trying to accomplish.

    If you have any questions about any of the information given, please feel free to let us know. Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 23, 2016 at 09:22 AM

    I almost forgot you can use this link, https://form.jotform.com/61132623473954, to create a clone version of my form to your account. 

    How-to-Clone-an-Existing-Form-from-a-URL