I’m trying to wrap my form fields by placing an HTML Block field before the first field and after the last field. My opening HTML Block Content is <div class="row"> and my closing HTML Block Content is the closing div.
The opening HTML Block Content is rendering as <div class="row"></div> though.
I don’t think it matters but I do have Output Default CSS turned off.
The problem with this is if the form is prevented from being submitted (validation), the form elements are redrawn(?) removing the wrapper element created by the JS above.
Hi @user561
You may try this code that will trigger when the submit button is clicked. So when it gives a validation error, your form will have the same wrapper <div class='row'></div> tag. Let me know how that goes!
$( document ).ready(function() {
// Tigger after page load
$('#gform_fields_1 > div').wrapAll( "<div class='row'></div>" );
// trigger after clicking on the button
$( ".buttonClass" ).click(function() {
$('#gform_fields_1 > div').wrapAll( "<div class='row'></div>" );
});
});