-
bbturkcomAsked on January 3, 2018 at 9:21 AM
How can I make my form like this picture?
with nolabels
-
liyamReplied on January 3, 2018 at 11:06 AM
You can hide the labels of your form using CSS, this method is better than keeping your labels empty. With your existing form, I have used this CSS code:
.form-all {
background-color: #000 !important;
}::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #c0c0c0;
}
::-moz-placeholder { /* Firefox 19+ */
color: #c0c0c0;
}
:-ms-input-placeholder { /* IE 10+ */
color: #c0c0c0;
}
:-moz-placeholder { /* Firefox 18- */
color: #c0c0c0;
}input, textarea {
background-color: #2C3E50;
border: #2C3E50 !important;
}label {
display: none;
}.form-submit-button {
background: #F2D7D5 !important;
}If you need to know how to inject CSS codes into your form, please follow the steps from this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Note: I have tried doing the CSS to appear it similar as your screenshot which should affect your background color and place holder colors if it's alright with you. But if what you wish is to just hide the labels, you can just insert this code:
label {
display: none;
}Here is an existing form I created from your form which I copied: https://form.jotform.com/80023978672968
If you have other questions, please let us know.
-
bbturkcomReplied on January 4, 2018 at 1:34 AM
Thanks a lot liyam, I'm going to try this.
-
bbturkcomReplied on January 4, 2018 at 4:02 AM
I add CSS but the labels become visible again when I publish the form
-
liyamReplied on January 4, 2018 at 4:21 AM
I have fixed it for you. I added !important right after the value setting on your CSS code.
If you have additional questions, please let us know. :)