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

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????

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

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

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.

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.

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!!!!!!!

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

Thank you.

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.

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