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 create a 3 column form?

    Asked by planetshoes on May 24, 2016 at 11:34 AM

    something like this. Can you help me? Can only get it into 2 columns and the spacing is weird.

     

    Thanks,

    Kristian 

    Page URL:
    http://www.planetshoes.com/join?disablecache=T

    Screenshot
    create 3 a JotForm uploads jpg www column form
  • Profile Image
    JotForm Support

    Answered by Nik_C on May 24, 2016 at 01:12 PM

    I created one test form so you can check: https://form.jotform.com/61444819896976

    With adjusting the CSS code you can rearrange fields on your form, you can use our Designer too:

    1. In Designer if you go to CSS tab you can write CSS code that will adjust your fields:

    2. I pasted this code:

    .form-line.form-line-column.form-col-2 {

        margin-left : 20px;

    }

    .form-line.form-line-column.form-col-3 {

        margin-left : 320px;

        margin-top : -80px;

    }

    .form-line.form-line-column.form-col-1 {

        width : 200px;

    }

    3. And the outcome is this:

     

    Please let me know if this could work for you or if you need additional assistance.

    Thank you!

  • Profile Image

    Answered by planetshoes on May 24, 2016 at 01:42 PM

    Cant seem to get the submit button to align with the boxes

     

    http://www.planetshoes.com/join?disablecache=T

     

    Also its not responsive.

     

    Thanks for help!

    - Kristian

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 24, 2016 at 02:27 PM

    Could you please try to embed your form by using the iFrame method.

    Also please try to adjust, in your CSS code, the top and left margin for your Submit button, so it will look like this:

    The wrap around the button was overlapping the text field so you couldn't click on it at all.

    Please let me know if you have further questions.

    Thank you!

     

  • Profile Image

    Answered by planetshoes on May 24, 2016 at 04:18 PM

    I don't want the spacing to be so far apart though.

    Is there a way to have a spacing like it is now? but also make it look good on mobile.

     

    Also It won't let me enter in my email. It won't let me click in the text field.

     

    Thanks,

    Kristian

  • Profile Image
    JotForm Support

    Answered by Kiran on May 24, 2016 at 06:03 PM

    I'm checking on the issue with the form. In the meanwhile, could you try using the theme provided below to a newly created form?

    https://www.jotform.com/theme-store/theme/horizontal-flat

     

    I'll get back to you with relevant information or a demo form as soon as I complete.

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image
    JotForm Support

    Answered by Kiran on May 25, 2016 at 12:34 AM

    Please check the form below and feel free to clone it to your account to embed on your webpage.

    https://form.jotform.com/61446805055960

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image

    Answered by planetshoes on May 26, 2016 at 11:20 AM

    It looks great but its way too big. How can I chance the width and height properly?

    Trying to change the css but its very wonky.

    Also why can I only embedded it as an iframe? When I embed it as source code it looks nothing like the preview.

    Thanks,

    Kristian

  • Profile Image
    JotForm Support

    Answered by Kiran on May 26, 2016 at 12:04 PM

    Did you try embedding the form provided in my later response? 

    https://form.jotform.com/61446805055960

    This form is different from the theme. Please check this and let us know if it doesn't work. We will be happy to assist you further.

    Thanks!

  • Profile Image

    Answered by planetshoes on May 26, 2016 at 12:47 PM

    Yes I did but theres no thank you page. How do I redirect to a thank you page? Can you build that in my account so that I can create a thank you page.

     

    Thanks,

    Kristian

     

  • Profile Image
    JotForm Support

    Answered by Kiran on May 26, 2016 at 01:25 PM

    Could you let us know which cart software is being used for your website? It looks like the form is embedded using some widget or source code which is conflicting with other scripts on your web page. Could you try embedding the form using iframe embed code on your webpage and see if that works? You may get the iframe embed code for your JotForm by following the guide below:

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    The thank you page can be displayed when you submit the form using the direct link. You may clone the form to your account to embed on your web page.

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image

    Answered by planetshoes on May 26, 2016 at 02:29 PM

    Got it but now its showing a shadow around the frame when i publish it as an iFrame. When I push it as source code the shadow doesn't show but the alignment is off.

     

    http://www.planetshoes.com/join?disablecache=T#0

  • Profile Image
    JotForm Support

    Answered by Kiran on May 26, 2016 at 02:58 PM

    Please inject the following code to your JotForm to remove the border with shadow.

    .supernova .form-all, .form-all {

        background-color: #FFFFFF;

    }

    .supernova .form-all {

        border: none;

        -webkit-box-shadow: none;

        -moz-box-shadow: none;

        box-shadow: none;

    }

    You may check my JotForm with this added script.

    Hope this information helps!