Show Field Labels Above The Input

In this guide, we will explain how to show the label above the input field.

Drag and drop some Formyoula fields with a JavaScript field.

Click the pencil icon of the JavaScript field and paste the code.

Please use the below JavaScript code:

// Update label
$( '.input_label' ).removeClass( 'col-sm-2' ).addClass( 'col-sm-12' ).css( 'text-align', 'left' );
// Update input
$( '.input_content' ).removeClass( 'col-sm-10' ).addClass( 'col-sm-12' );
// Remove class if multichecklist and radio input
$( '.multiple' ).removeClass( 'col-sm-12' );
$( '.radio_input' ).removeClass( 'col-sm-12' );

Note: We add these lines if the form includes Multi Check List and Radio Select.

// Remove class if multichecklist and radio input
$( '.multiple' ).removeClass( 'col-sm-12' );
$( '.radio_input' ).removeClass( 'col-sm-12' );

Click Advanced and set “0” in JavaScript Load Delay. Then save the changes.

Try the form.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂