-
BBC2016Asked on April 18, 2016 at 1: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:
-
Chriistian Jotform SupportReplied on April 18, 2016 at 3: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.
-
Chriistian Jotform SupportReplied on April 18, 2016 at 5: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. -
BBC2016Replied on April 23, 2016 at 1: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!!!!!!!
-
Mike_G JotForm SupportReplied on April 23, 2016 at 2: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.
-
Mike_G JotForm SupportReplied on April 23, 2016 at 9: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.
-
Mike_G JotForm SupportReplied on April 23, 2016 at 9: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.