Hidden ACF front end form not saving

Question

I'm using the front end form functionality of Advanced Custom Fields which works fine when on a standard page but when it's within a div that's hidden (either using Jquery to hide it or setting css to display none) the update button stops working and no data is saved. It doesn't show any errors in the console either.

How can I get around this? It's integral that the ACF form is hidden.

This is the code I'm using to display a particular set of fields:

<?php $activity_information = array(
    'post_id' => $ID, // post id to get field groups from and save data to
    'field_groups' => array(1781), // this will find the field groups for this post (post ID's of the acf post objects)
    'form_attributes' => array( // attributes will be added to the form element
        'class' => ''
    ),
    'return' => add_query_arg( 'updated', 'true', get_permalink() ), // return url
    'html_field_open' => '<div>', // field wrapper open
    'html_field_close' => '</div>', // field wrapper close
    'html_before_fields' => '', // html inside form before fields
    'html_after_fields' => '', // html inside form after fields
    'submit_value' => 'Update', // value for submit field
    'updated_message' => '', // default updated message. Can be false to show no message
); ?>               
<?php acf_form( $activity_information ); ?>

CSS:

.reveal-area {
    display: none;
}

This is what it's generating (with the 3 dots representing all the fields):

<section class="row reveal-area">
    <div class="columns">
        <form id="acf-form" action="" method="post">
            <div id="acf-form-data" class="acf-hidden">
                <input type="hidden" id="_acf_post_id" name="_acf_post_id" value="1773"> <input type="hidden" id="_acf_nonce" name="_acf_nonce" value="6798af667b"> <input type="hidden" id="_acf_validation" name="_acf_validation" value="1"> <input type="hidden" id="_acf_ajax" name="_acf_ajax" value="0"> <input type="hidden" id="_acf_changed" name="_acf_changed" value="0"> <input type="hidden" id="_acf_form" name="_acf_form" value="cllBUjlDU09QMUtyVXBKalJ3VmVsS3lFQXpPcHEwUm5KNmdHRzVrYXRnY0RCT0xrUndDMWhQTXg4UVJzZm1xTHlVQllDWkFrV2R4ZzNmT3FQdjhnNWJSMFdaTUNHYlNjNzZ5OEcvbzBkOHROcW5BYXlRYmdQZ1R0bW93UmJyUXV0MEZQVmZkWlZSbEVGV2hqS1E2dHJxSjFxR2xuU1gxZUwydGRrR254VjZuTTRHdFV0WXBmRGJTeS9KQ2VIbkkxR0Rxcit0ZWlDck9IL2pOYk16ODVqQ28reFBNR05QSWRUc3R2Z1E2L0tnbWZrMXlhRDRCNU5ZWFk0M0MyTkpqNkZpa254NXBudk1qZk5uNytRZDN0NmFpN0FOdkFXTWRDYXNUd2gzRXJxeXNqaHJUaU1rRTJTMENiZVhsNHV6b1ZWbGUxTHJwTm1YQTEzUlozcmNrWU5mdFdYSjF3WDNINEtJWGdVREsvNTNFRzg5dHVKVGxqTmFILyt1ci9tOGNDYTYyVUk1eDB2ZUZCdEg3R3JHQmhtSWZyczkvS3diOHIwY2FwOWNISTdmWlhsK241Tmdib2UyZjlNM1o0RnhCOW5QdjRiL2t5cm1HVTlmR3BCek1mYnAyUkFRRWlmNlJqcjdTS3g2dmdUOCtvRjBWL28rcFhmOWVrV2ViV3ZkUHN4NVZuOXBIMzR4RStUQUxMTksyVnN0YjNBVnFBU1crb3pWUzA3TUpSVkJJN2RjYmxnWnUzMk95RE42b2tqc1ROdnFVRFpmRFZSU3BvaFIxOWkvS042WHh6NGlIQlRBSlBRNXJVV1pHL0ZRL2Nid3RxbmRkcjNHREd2bHlkTmFnMnUrYjhRc0FpWjhhNkx1d3JoUU5yYi9kYnNxSWllSnU1a3E5bmhCNU9mSS8xK08rZ3VLN0tsYWZYV0N0ZElqeFJ2TkNBNEhsVC9ocHAwaklIMHZGTkFjKzBuZEhrZzU4cW9TRzNNL0k3Z2puWDAyRWZoOHNaeXF1UHlOUHR6aTA1L1B1QVVWMXd3WC9ybGlQOCsyVGZRdFdDaXpsbElZbll1UVJzQ3lpQjBoaEx0cmNYbG5hdTV3bGpNSVZab1ZhSUltWXRBWnhGMVplVjVFZXNBNzMzM0dSZmx1YWErUmE2WlpnYU11WUR2VS9kU1ZPRFlVNWZMYkZkNVZtZXZLMnBSN2t2K28xVzBQbDh0ZU94MUN4VEE0VDRBU0MxSGdHc2htZjNWR1phbUlGcUtnQ0h2d1Q0cDEwUUFjM1cwQkZ4RzltWUN2YjdwSTBhcGxtYkp4a05rRG4yK3JwSERFY1A5TFRFNGpJUzBmZXZ2ZkdZWHRzcUdNaXk2QTJSbFMxdnZmOURobE5xdGdBRWtieFZjZnRFbThrWFdWa2xWaVpFSnFQOWg0NDZNWDlrOXdjQzFXS0lsUWt4T1pRWENpd246Ok07hUIWm2U5p0Q9mApuvuM=">
            </div>

            ...

            <div class="acf-field acf-field-text acf-field--validate-email" style="display:none !important;" data-name="_validate_email" data-type="text" data-key="_validate_email">
                <div class="acf-label">
                    <label for="acf-_validate_email">Validate Email</label>
                </div>

                <div class="acf-input">
                    <div class="acf-input-wrap">
                        <input type="text" id="acf-_validate_email" name="acf[_validate_email]">
                    </div>
                </div>
            </div>
        </form>
    </div>

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

@Rob Does it have to be hidden (display:none) or just out of sight of the user? You could utilise the visibility CSS rule. — ProEvilz
@ProEvilz Ideally I need it to be completely hidden. Using the visibility CSS rule leaves me with a big white space where the form sits. Its like some functionality with the form doesn't fire if it's hidden. — Rob
@Rob What about also positioning it absolute so it doesn't affect other elements? — ProEvilz

Dzmitry Makarski Dzmitry Makarski · Accepted Answer · 2019-04-24T15:34:39

When you didn't make changes in the fields of the form, ACF ignores the submitting. Normally the form has a hidden field with id _acf_changed and value 0. When you are editing a field this value changed to 1. So try to add JS script AFTER YOUR FORM:

<script type="text/javascript">
    var is_edit=document.getElementById('_acf_changed');
    is_edit.value='1';
</script>

Hidden ACF front end form not saving

1 Answers