-
MasalamediaAsked on August 28, 2015 at 5:17 PM
I have a stripe payment module at the bottom of my event registration page. The default appearance is not what I am hoping for in two ways:
a) Can't figure out how to get the CVC security code box to display to the immediate right of the CC# box;
b) Can't figure out how to get the Exp. month and Exp. year to appear side-by-side, even though there is plenty of room.
Please advise. Thanks
-
Elton Support Team LeadReplied on August 28, 2015 at 6:53 PM
Inject this CSS codes to your form, this should correct it.
.form-address-table td[colspan="2"] .form-sub-label-container {
width: 55%;
margin-right: 0;
}
.form-address-table td[colspan="2"] .form-sub-label-container + .form-sub-label-container {
width: 40%;
margin-right: 0;
}
.cc_number {
width: 90% !important;
}
.cc_exp_month {
width: 90% !important;
}
/*override others*/
#input_11_cc_exp_month {
width: 90% !important;
}
.form-textbox.cc_number {
width: 90% !important;
}
Please paste it at the most bottom part. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form
It should give you the following:
If you see any problems, let us know.
Regards!
-
MasalamediaReplied on August 28, 2015 at 8:56 PM
That seems to work! Thanks!
I'm also struggling on the same form to get the phone area code and phone number to appear side-by-side. It isn't an issue when the form is viewed on its own (e.g. http://form.jotformpro.com/form/51885054009961) but when its embedded on my website (http://achievecg.com/staging/register/) it looks like some responsive formatting takes over when the page shrinks past a certain point. You'll notice that all the field labels go to the top instead of to the left when the browser window goes below 1300px.Any ideas how to keep my areacode/phone number fields side-by side and get less re-formatting?
-
abajan Jotform SupportReplied on August 29, 2015 at 12:25 PM
The answer to your last question has been moved to a new thread. Please see my reply there: http://www.jotform.com/answers/650557
Thanks
-
MasalamediaReplied on August 30, 2015 at 12:50 PM
-
MasalamediaReplied on August 30, 2015 at 2:49 PM
NOTE - the provided CSS correctly achieves the goal of putting the CC information in the right place... BUT now my address lines are too short!
-
Ashwin JotForm SupportReplied on August 31, 2015 at 6:09 AM
Hello Masalamedia,
Injecting the following custom css code in your form will solve this problem:
#cid_4 .form-address-table td[colspan="2"] .form-sub-label-container {
width: 100%;
margin-right: 0;
}
I have already fixed this in your form. Please take a look at your form and see if the address field is being displayed as expected.
Thank you!
-
MasalamediaReplied on August 31, 2015 at 12:46 PM
Hi Ashwin - yep, that solved it. Many thanks.
Having fields line up on the right side is generally more aesthetically pleasing than a variety of mismatched right margins. Shouldn't the templates be designed to line up by default?
-
Ashwin JotForm SupportReplied on August 31, 2015 at 2:07 PM
Hello Masalamedia,
You are welcome. I am glad to know that your issue is resolved.
The issue is caused because of the custom css injected to change the look of the form fields. If you create a new form without any custom css code, form fields will appear as expected.
Thank you!