How to wrap field groups?

• amitbiswas06

• August 1, 2016 at 4:54 am

I need to wrap each field group with custom div and class. Is that possible?
I have read this thread where the core files was edited –

https://support.advancedcustomfields.com/forums/topic/ability-to-add-unique-divs-around-field-groups-when-using-acf_form/

Is this included in core feature now? Or we need to hack the core to achieve this result?

• James

• August 1, 2016 at 4:07 pm

Hi @amitbiswas06

Could you please tell me where do you want to do it? If you want to do it in the front end form, you can always set the form to false and use separated forms for each field group like this:

<form id="post" class="acf-form" action="" method="post">

<div id="field-group-1">
<?php
acf_form(array(
    'form' => false,
    'field_groups' => array('99'),
));
?>
</div>

<div id="field-group-2">
<?php
acf_form(array(
    'form' => false,
    'field_groups' => array('11'),
));
?>
</div>

<div class="acf-form-submit">
    
    <input type="submit" class="acf-button button button-primary button-large" value="Update">
    <span class="acf-spinner"></span>

</div>

I hope this helps 🙂

• amitbiswas06

• August 1, 2016 at 4:28 pm

Perfecto!! That is what I am doing actually. But this returns the duplicate hidden fields –

<div class="acf-hidden" id="acf-form-data">
<div class="acf-hidden">

These two divs are getting duplicated with each form group. But I never find any trouble with it though. However I am trying to delete duplicate hidden divs with jQuery. Something like this –

var $div = jQuery('form div.acf-hidden');
	
	if ($div.length > 1) {
	  $div.slice(2, 100).remove();
	}

The above solution allows me to create a multi-step form with custom styling and effects.