How to create a 3 column form?

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

Thanks,

Kristian 

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!

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

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!

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

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. 

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. 

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

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!

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

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. 

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

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!