Hide a Field on Front-End

Guides Front-End Forms Hide a Field on Front-End

#Using Form Initialization

We can hide a field directly within the acfe_form() call using the map argument. In fact, this setting acts like the acf/prepare_field hook scoped in the form, so returning false for a specific field key will hide it.

You’ll find more PHP integration code examples for front-end forms here.

acfe_form(array(
    'name' => 'my-form',
    'map'  => array(
        
        // hide field
        'field_621a65cc5521e' => false
        
    )
));

#Using Form Hook

An alternative method is to use the acfe/form/load_form hook to add rules within the map argument like in the example above. This method should be used when relying on the [acfe_form] shortcode.

add_filter('acfe/form/load_form/form=my-form', 'my_form_load');
function my_form_load($form){
    
    // hide field
    $form['map']['field_621a65c15521d'] = false;
    
    // return
    return $form;
    
}

#Using Prepare Hook

An another method is to use the native acf/prepare_field hook. As explained in the ACF documentation, it is possible to hide a field by returning false.

Note that you don’t have the form context here, so the field will be hidden everywhere on the front-end. You can use is_page(), is_singular() and other WP templates functions if you need to target a specific page.

Here is a usage example:

add_filter('acf/prepare_field/name=my_field', 'my_prepare_field');
function my_prepare_field($field){
    
    // hide on front-end
    if(!is_admin()){
        return false;
    }
    
    // return normally
    return $field;
    
}

#Using Inline Field HookPRO

When registering field groups with add_local_field_group(), we can directly set a callback on the acf/prepare_field using the Inline Hooks (See documentation). Here is usage example:

$field = array(
    'label'     => 'My Text',
    'key'       => 'field_my_text',
    'name'      => 'my_text',
    'type'      => 'text',
    'callback'  => array(
    
        'prepare_field' => function($field){
            
            // hide on front-end
            if(!is_admin()){
                return false;
            }
            
            // return normally
            return $field;
            
        }
    
    )
);

#Using Form HTML Render

It is possible to only display specific fields in a form render, and thus hide the one of your choice using the Form HTML Render setting. Head over the Form UI, under the HTML tab. Enable the Custom Render and you’ll be able to write custom html. Here, you can enter the fields keys/names of your choice.

Dynamic Form

#Using Advanced Settings

We can also hide a field from the front-end directly from the Field Group UI, using the Advanced Settings. Usage example:

  • Order
  • Label
  • Name
  • Key
  • Type

Change field settings based on location

1
1
1
+
1
1
+

#Using Field Visibility WidgetPRO

A more simple solution is to use the Field Visibility Widget, which allow to hide a field directly from the Field Settings, using a dropdown.

  • Order
  • Label
  • Name
  • Key
  • Type