Support

Account

Home Forums Feature Requests Wrap field groups in unique divs with acf_form() (working feature code included)

Solving

Wrap field groups in unique divs with acf_form() (working feature code included)

  • I was doing some last minute testing on a site tonight, and I wanted to add some visual separation between between the field groups being shown on the front-end of the site.

    I couldn’t find a way to do this without updating the core acf pro files, so I did and if there was a way to do this already please point me in the right direction. I’d have suggested these through github, but the version hosted there isn’t the 5.1.0 that I’m using.

    My use case is that I have several field groups based on input content type. Tabs could be used here, but the content lends itself better to being stacked rather than tabbed to make it easier for users to enter info. Think “Event name with sub fields for location, date and time, and details” in one group, and “Menu items with price field (in repeater field)” in the next section of field groups, and “Images (repeater field)” as the final section of the set. Using the current acf_form() function just outputs each field one after the other, even though they are fields from three different field groups.

    My updates add an argument for the array passed to acf_form() called wrap_field_groups, which defaults to false. Setting it to true will cause the form to wrap each field group with a div with an id equal to the group’s key and a class of acf_form_field_group_wrap.

    You could then target the id of a specific group wrapper, or style them all using the class.

    You’d implement it like this:

    $args = array(
        post_id' => 'new',
        field_groups' => array(107, 106, 105, 99), //as many as you needed
        wrap_field_groups' => true
    );
    acf_form($args); 

    I updated the following two files to impliment this:

    /api/api-template.php
    /api/api-helpers.php

    It would be great if this could be implemented in the plugin core, or if a filter could be added for something like this.

    I’ve attached a zip containing the two files I’ve updated, and you can see the updates at the following line numbers (or just diff them against fresh ones from 5.1.0).

    api-template.php lines:
    1137
    1250 – 1256
    1269 – 1274

    api-helpers.php lines:
    393-397

  • +1 this is great, thanks

    did you ever get any response about integrating your ideas into the plugin core?

    in ACF4 field groups were wrapped which allowed for much more flexibility in the visual display of front end forms

  • It would also be ideal if there was another parameter in acf_form that let you toggle display of the field group name as well – this would kind of emulate how the “style” option works for field groups in the backend .. ie Standard (WP Metabox) with field group title or Seamless (no metabox) and no field group title

  • I never heard back about it, and for this project I just hacked plugin core and disabled updating (not the best move, but it needed to be done).

    There is a “Wrapper Attributes” field now that lets you specify a class (among other things) in the ACF pro plugin, but I haven’t checked to see if it adds the class when using the acf_form() function, and it is only available to each input, not the whole group. I also haven’t checked to see if anything has been added to make each field group output uniquely ID’d either, so maybe something like what I suggested has been added and I just don’t know about it.

    I like your suggestions too, and think that there are quite a few features that could be added on this front. I feel like this is probably one of the less used abilities of the plugin though, so I can understand why it wouldn’t get frequent feature updates. If it was available on github I wouldn’t mind making updates like these and submitting pull requests but I’m using the pro plugin.

  • cool thanks .. if I make any additional enhancements to what you posted here i’ll share them on this thread

  • ok here are my core hack updates to allow for wrapping of field groups and optional display of field group titles in front end forms

    usage:

    $args = array(
        wrap_field_groups' => false // don't wrap [default]
        wrap_field_groups' => true // wrap without title
        wrap_field_groups' => 'show_title' // wrap with title
    );
    acf_form($args);

    api-field.php
    line 474 – 480

    // ACF5 core hack BEGIN
    // are we opening or closing a field group?
    if( $field['field_group_wrap'] === true ) {
    	echo $field['value'];
    	return;
    }
    // ACF5 core hack END

    api-template.php
    line 1273 – 1275

    // ACF5 core hack BEGIN		
    'wrap_field_groups'		=> false,
    // ACF5 core hack END

    line 1386 – 1401

    // ACF5 core hack BEGIN
    // check for field group wrap
    if( !empty( $args['wrap_field_groups'] ) ){
    	$wrapper = array(
    			'field_group_wrap' => true,
    			'value' => '<div id="'.$field_group['key'].'" class="acf_form_field_group_wrap">'
    	);
    
    	if ( 'show_title' === $args['wrap_field_groups']) {
    		$wrapper['value'] = '<div id="'.$field_group['key'].'" class="acf_postbox acf_form_field_group_wrap">
    									<h3 class="acf_form_field_group_title">'.$field_group['title'].'</h3>';
    	}
    
    	$fields[] = $wrapper;
    }				
    // ACF5 core hack END

    line 1408 – 1416

    // ACF5 core hack BEGIN
    // check for field group wrap
    if( !empty( $args['wrap_field_groups'] ) ){
    	$fields[] = array(
    		'field_group_wrap' => true,
    		'value' => '</div><!-- end field group -->'
    	);
    }				
    // ACF5 core hack END
  • That’s looks great!

    My only suggestion would be checking for a false value (even though it’s the default if the setting is omitted) in api-template.php on lines 1386 – 1401 using something like this:

    
        if( !empty( $args['wrap_field_groups'] ) && $args['wrap_field_groups'] !== false  ){
            ...
    

    Otherwise passing a value of false would still cause the wrappers to be output.

  • cool thanks, i’ll add that in!

  • I really really wish this was integrated into the core. I need to be able to keep acf up to date and can’t seem to figure out how to accomplish this without implementing your updates…

  • As a not so great alternative I added a class to each field of a particular group and used jquery to wrap these elements within a div.

    $('.group1').wrapAll('<div class="field_group field_group_1">');

  • Hey all, any news about this being implemented into the core?

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Wrap field groups in unique divs with acf_form() (working feature code included)’ is closed to new replies.