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

The unique form slug

Render & map fields of the following field groups

Add actions on form submission

Click the "Add action" button below to start creating your layout
0 Custom action

Set a unique action slug.

0 Email action
0 Option action

(Optional) Target this action using hooks.

Fill inputs with values

0 Post action

(Optional) Target this action using hooks.

Click to initialize TinyMCE

Fill inputs with values

0 Redirect action

(Optional) Target this action using hooks.

The URL to redirect to. See "Cheatsheet" tab for all available template tags.

0 Term action

(Optional) Target this action using hooks.

Click to initialize TinyMCE

Fill inputs with values

0 User action

(Optional) Target this action using hooks.

Click to initialize TinyMCE

Fill inputs with values

Apply field groups locations rules for front-end display

Whether or not to create a <form> element

Form class and id

class
id

Add class to all fields

wrapper class
input class

Whether or not to create a form submit button. Defaults to true

The text displayed on the submit button

HTML used to render the submit button.

HTML used to render the submit button loading spinner.

Whether to include a hidden input field to capture non human form submission. Defaults to true.

Whether or not to sanitize all $_POST data with the wp_kses_post() function. Defaults to true.

Whether to use the WP uploader or a basic input for image and file fields. Defaults to 'wp' Choices of 'wp' or 'basic'.

Determines element used to wrap a field. Defaults to 'div'

Determines where field labels are places in relation to fields. Defaults to 'top'.
Choices of 'top' (Above fields) or 'left' (Beside fields)

Determines where field instructions are places in relation to fields. Defaults to 'label'.
Choices of 'label' (Below labels) or 'field' (Below fields)

Override the native field groups HTML render

Extra HTML to add before the fields

Render your own customized HTML.

Extra HTML to add after the fields

Hide the general error message: "Validation failed. 1 field requires attention"

Hide the successful notice when an error has been thrown

Do not prompt user on page refresh

Choose where to display field errors

Add class to error message

Hide form on successful submission

A message displayed above the form after being redirected. See "Cheatsheet" tab for all available template tags.

HTML used to render the updated message.
If used, you have to include the following code %s to print the actual "Success message" above.

Retrieve actions output

Last Term Action
{action:term:ID}23
{action:term:post_title}Term
{action:term:admin_url}https://www.acf-extended.com/wp-admin/term.php?tag_ID=23
{action:term:permalink}https://www.acf-extended.com/taxonomy/term
See {term} for all available tags

Term Action Named my-term
{action:my-term:ID}23
{action:my-term:post_title}Term
{action:my-term:admin_url}https://www.acf-extended.com/wp-admin/term.php?tag_ID=23
{action:my-term:permalink}https://www.acf-extended.com/taxonomy/term
See {term} for all available tags

Retrieve actions output

Last User Action
{action:user:ID}1
{action:user:user_login}login
{action:user:user_email}[email protected]
{action:user:user_url}https://www.website.com
{action:user:permalink}https://www.acf-extended.com/author/johndoe
See {user} for all available tags

User Action Named my-user
{action:my-user:ID}1
{action:my-user:user_login}login
{action:my-user:user_email}[email protected]
{action:my-user:user_url}https://www.website.com
{action:my-user:permalink}https://www.acf-extended.com/author/johndoe
See {user} for all available tags

Retrieve actions output

Last Email Action
{action:email:from}Contact
{action:email:to}[email protected]
{action:email:reply_to}[email protected]
{action:email:cc}[email protected]
{action:email:bcc}[email protected]
{action:email:subject}Subject
{action:email:content}Content

Email Action Named my-email
{action:my-email:from}Contact
{action:my-email:to}[email protected]
{action:my-email:reply_to}[email protected]
{action:my-email:cc}[email protected]
{action:my-email:bcc}[email protected]
{action:my-email:subject}Subject
{action:my-email:content}Content

#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