Placement of Field Instructions

Would love to see an option at the application level (preferred), form level, or even field level to move all field instructions to just under the label and before the field input. The instructions often get lost below multiple choice fields, especially if there are more than two or three choices, and are not as useful if users don't see them until after they have filled in the field. I know it can be changed for each form field, but I don't want the javascript overhead of scripting the change on every single field across hundreds of scenes, views, and fields in my database.

I have tried the javascript code presented in another post to move all instructions, but it wasn't quite right. It did move the instructions up below the field label, but the instructions were repeated after each option in a multiple choice field. Close, but that won't work either.

Hi Laura,

I think the post you are referring to was one I posted a few months ago. If it is this code that you are referring to, the problem was a selector I was using was not specific enough for all field types. For some fields it was causing the instructions to be repeated multiple times. The code below is an updated version that should solve this.

$(document).on('knack-view-render.form', function(event, view, data) {
  $("#" + view.key + " .kn-instructions").each(function() {
    //find the input label for this field
    var inputLabel = $(this).closest(".kn-input").find(".kn-label");
    //append the instructions for this field after the label
    $(this).insertAfter(inputLabel);
  });
});

 

1 Like

Thanks for this @LukeFoster37230 … I just used this myself and it worked! :smiley:

This is great. Thank you!!