Wrap form elements using HTML Block [RESOLVED]

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.

Is there some other way to wrap the form fields?

I was able to wrap the fields using some simple JS:

$('#gform_fields_1 > div').wrapAll( "<div class='row'></div>" );

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
Sorry for the trouble. Did you use the “jQuery document ready” function and insert the code middle of it? Example:

$( document ).ready(function() {
  $('#gform_fields_1 > div').wrapAll( "<div class='row'></div>" );
});

Suppose you have already used it and not working, then better to contact support. If not, give it a try and let me know how that goes! :smile:

Hello, yes the code is wrapped in document ready.

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! :smile:

$( 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>" );
  });
});

Thanks again for your input Faisal,

This works for me:

jQuery(function ($) {
    $(document).bind('gform_post_render', function (event, formId, current_page) {
        $('#gform_fields_1 > div').wrapAll( "<div class='row'></div>" );
    });
});
1 Like