Place field description right below the field label

I'm trying to add a
on a field label to get 2 lines on it, but it is not working. I tried using both
and
, but none of them worked.

Would it be possible to use the Description filed and to place it right below the Field Label instead? How could this be achieved using custom CSS?

  • Kris
    • Support

    Hi kamhangmak

    Hope you are doing good today.

    I really like this idea to have possibility to make order here. I will mark this thread as feature and feedback. I hope more people will be voting for this idea on this thread. And more people liking this idea, more chances our developers will work on this and will include this feature in our future releases.

    As for now I enter your site and I modify your form. The Service got now Description in description field again.
    I also add this code in your additional css section in your theme:

    #checkbox-1 .forminator-field {display: flex; flex-flow: column-reverse;}
    #checkbox-1 .forminator-field--label { order: 2; }
    #checkbox-1 .forminator-field--helper { order: 1; }

    I also create draft page in this subsite and I paste the form shortcode. In preview mode you can see all works fine and description is now right below the field label.

    Now you can paste this form shortcode in correct page.
    Hope this help :slight_smile:

    Kind Regards,
    Kris

  • Kris
    • Support

    Hi kamhangmak

    You should then remove my code I added in Additional css section in your theme (Appearance - Customize):

    #checkbox-1 .forminator-field {display: flex; flex-flow: column-reverse;}
    #checkbox-1 .forminator-field--label { order: 2; }
    #checkbox-1 .forminator-field--helper { order: 1; }

    and add this one:

    .page-id-2 #checkbox-1 .forminator-field {display: flex; flex-flow: column-reverse;}
    .page-id-2 #checkbox-1 .forminator-field--label { order: 2; }
    .page-id-2 #checkbox-1 .forminator-field--helper { order: 1; }

    Kind Regards,
    Kris

    • Leighton
      • Front-End Developer

      Hello kamhangmak,

      Please, paste the following code in your form Custom CSS section:

      .forminator-field {
          display: flex;
          flex-direction: column;
          -webkit-flex-direction: column;
      }
      .forminator-field .forminator-label {
          order: 1;
      }
      .forminator-field .forminator-date,
      .forminator-field .forminator-input,
      .forminator-field .forminator-textarea,
      .forminator-field .forminator-row--inner {
          order: 3;
      }
      .forminator-field .forminator-field--helper {
          order: 2;
      }

      Kind regards,
      Leighton

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.