Theme Request in creating a form without labels

  • Profile Image
    bbturkcom
    Asked on January 03, 2018 at 09:21 AM

    How can I make my form like this picture?

    with nolabels

    1514989217nolabel.PNG

  • Profile Image
    liyam
    Answered on January 03, 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.

  • Profile Image
    bbturkcom
    Answered on January 04, 2018 at 01:34 AM

    Thanks a lot liyam, I'm going to try this.

  • Profile Image
    bbturkcom
    Answered on January 04, 2018 at 04:02 AM

    I add CSS but the labels become visible again when I publish the form

  • Profile Image
    liyam
    Answered on January 04, 2018 at 04: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. :)