How to create a 3 column form?

  • Profile Image
    planetshoes
    Asked 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 

  • Profile Image
    Nik_C
    Answered 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
    planetshoes
    Answered 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
    Nik_C
    Answered 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
    planetshoes
    Answered 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
    Kiran
    Answered 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
    Kiran
    Answered 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
    planetshoes
    Answered 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
    Kiran
    Answered 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
    planetshoes
    Answered 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
    Kiran
    Answered 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
    planetshoes
    Answered 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
    Kiran
    Answered 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!