-
BBC2016Asked on April 15, 2016 at 12:07 AM
you guys just helped me with my other registration form and it looks amazing - can u help me with the aligning and spacing on this form too?????? http://buildingbridgescoalition.org/registration-form/
if u can provide css code like before that would be a BLESSING!
HEADERS AND TITLES SHOULD BE BLUE LIKE THE ONE THAT SAYS BILLING INFO: I WANT IT TO LOOK LIKE MY FORM ON THIS PAGE ( http://buildingbridgescoalition.org/moreinforsvp/ ) AS MUCH AS POSSIBLE. JUST DIF FORM FIELDS ON PART OF IT.
Attached is what i am trying to do with my form here: http://buildingbridgescoalition.org/registration-form/
i need some serious help!? THANK U IN ADVANCE FOR BEING TERRIFIC AND AMAZING!!!
-
BBC2016Replied on April 15, 2016 at 12:12 AM
I MADE A BIG MISTAKE - SORRY HERE IS THE CORRECT IMAGE/FORM I AM TRYING TO MAKE.
SEE ATTACHED HERE.
-
Kevin Support Team LeadReplied on April 15, 2016 at 1:50 AM
As far as I can see on other threads related to the same, this should be the CSS code that you will need to inject on your form:
.form-payment-total {
width: 150px !important;
left: 159px !important;
margin-top: -20px !important;
}
input.form-textbox.cc_ccv {
width: 200px !important;
margin-left: 10px;
}
select#input_13_cc_exp_year {
width: 200px !important;
margin-left: 10px;
}
li#id_10 {
margin-left: 7px;
}
[data-type="control_phone"] .form-sub-label-container:first-child {
display: none;
}
[data-type="control_phone"] .form-sub-label-container {
width: 100%;
}
Regarding to the color of the text this should be the CSS code that will change it:
.form-payment-total, #ccTitle13{
color: #0070B3;
font-size: 16px;
font-weight: 600;
font-family: 'Open Sans', Arial, sans-serif;
padding-bottom: 15px;
}
This guide will help you to inject the CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
Do get back to us and let us know the result of injecting this CSS code.
-
BBC2016Replied on April 18, 2016 at 1:40 AM
This ididn't work at all.......althought the 2nd code did change the color but the top code didnt work.
Maybe I wasn't clear - I need the css code to make this image attached look exactly like my form: http://buildingbridgescoalition.org/registration-form/
I keep messing iwth it and I can't get my form to look like the image below - can u provide me with a code to make it look like the pic below???
-
beril JotForm UI DeveloperReplied on April 18, 2016 at 3:32 AM
First of all, I've deleted some CSS errors on your form.
In addition to that, can you add the CSS code below?
#cid_13 span.form-sub-label-container {
width : 200px !important;
}
Feel free to contact us anytime, we will be glad to assist you.
-
BBC2016Replied on April 20, 2016 at 1:08 AM
this looks nothing like the image I was asking about - I was just trying to get my current form here: too look like this image I made. I just cant get the box sizes and everything to look the same- can u help me???
https://www.jotform.com//?formID=60548442926158#design
I WANT IT TO LOOK JUST LIEK THIS:
-
beril JotForm UI DeveloperReplied on April 20, 2016 at 9:37 AM
There are so many CSS code in tour form. Because of that reason, there is conflict between your codes.
To solve that issue, I 've deleted the whole code on your cloned form and added the code below:
#cid_13 .form-sub-label-container {
width : 200px!important;
margin-right : 15px!important;
}
#input_13_quantity_1005_0 {
width : 50px !important;
position : relative !important;
top : -30px !important;
margin-left : 349px !important;
}
input.form-textbox.cc_ccv {
width : 200px !important;
}
input.form-textbox.cc_number {
margin-right : 03px;
width : 200px !important;
}
#input_13_cc_exp_month {
width : 200px !important;
margin-right : 03px;
}
#input_13_cc_lastName {
margin-left : -45px !important;
}
#id_5 {
width : 200px !important;
}
#input_5 {
width : 200px !important;
}
#first_4 {
width : 200px !important;
}
#last_4 {
width : 200px !important;
margin-left : -40px !important;
}
#first_9 {
width : 200px !important;
margin-right : 03px;
}
#last_9 {
width : 200px !important;
margin-left : -40px !important;
}
#id_10 {
width : 200px !important;
margin-right : 03px;
}
#input_10_area {
width : 50px !important;
margin-left : 25px;
}
#input_10_phone {
width : 130px !important;
margin-left : 25px;
}
#input_11 {
width : 430px !important;
}
.form-payment-total {
width : 100px !important;
margin-left : 359px !important;
margin-top : -20px !important;
}
.form-payment-total, #ccTitle13 {
color : #0070B3;
font-size : 16px;
font-weight : 600;
font-family : 'Open Sans', Arial, sans-serif;
padding-bottom : 15px;
}
#label_10 {
margin-left : 25px;
}
#input_6_addr_line1 {
width : 422px !important;
}
#input_6_city {
width : 200px !important;
}
#input_6_state {
width : 200px !important;
}
#input_6_postal {
width : 200px !important;
}
#input_6_country {
width : 200px !important;
}
.form-product-container {
width : 100% !important;
}
#cid_13 label.form-product-container {
font-family : open sans;
}
#cid_13 span.form-product-item {
width : 400px !important;
}
#sublabel_area , #sublabel_phone {
margin-left : 25px;
}
#sublabel_last {
margin-left : -33px;
}
#sublabel_cc_lastName {
margin-left : -33px;
}
In addition, to that, I've changed the position of your text fiellds.
You can clone and check it.
https://form.jotform.com/61103287721954
Here is how it works on my side:
if you need additional assistance we will be happy to assist you.