ACF Custom fields, and Wordpress Timber front end forms

Question

I'm trying to create a custom form on the front end so that logged in visitors can post their own content.

Using ACF pro and Timber.

In my page.php file I have

$new_post = array(
'post_id' => 'new_post',
'post_title' => true,
'post_content' => true,
'field_groups' => array(26), // Create post field group ID(s)
'form' => true,
'return' => '%post_url%', // Redirect to new post url
'html_before_fields' => '<div class="foobar">',
'html_after_fields' => '</div>',
'new_post' => array(
    'post_status' => 'draft',
    'post_type' => 'vlog'
),
'submit_value' => 'Create Post'
);

$context['vlogform'] = acf_form($new_post);

and in page.twig, I have placed

{{vlogform}}

The form renders - but its stuck in a silly place, not where I want it. Its stuck above the html element...

Any pointers?

Thanks, Rob

** Edit **

This doesn't work

$context['vf_form'] = Timber\Helper::ob_function('acf_form', $new_post);

but this does...

ob_start();

acf_Form($new_post);

$context['vf_form'] = ob_get_clean();

Materially, what is the difference?

Thanks, Rob

Answer 1

This might be a little late, but I've managed to fix this issue by using an argument that they have added recently. I found this googling for it, so for future seekers this might come in handy.

So, in the args array, add the following:

$args = array(

  'echo' => false,

);

Answer 2

So as other answers have mentioned acf_form() outputs the form when it is called.

To prevent the form from rendering at the top of the document, pass over your form arguments from the controller (page.php) to the view

acf_form_head();
get_header();

$context = Timber::context();
$context['post'] = new TimberPost();

$context['form_args'] = [
    'post_id' => 'new_post',
    'post_title' => true,
    'post_content' => true,
    'field_groups' => [26], // Create post field group ID(s)
    'form' => true,
    'return' => '%post_url%', // Redirect to new post url
    'html_before_fields' => '<div class="foobar">',
    'html_after_fields' => '</div>',
    'new_post' => [
        'post_status' => 'draft',
        'post_type' => 'vlog'
    ],
    'submit_value' => 'Create Post'
];


Timber::render('example-view.twig', $context);

get_footer();

Then in your view, use timbers function()helper method to call acf_form()

{{ function('acf_form', form_args) }}

src: https://timber.github.io/docs/guides/functions/#function

I am using latest Timber (via composer) and ACF Pro 5.9.1

On older versions of Timber, I took advantage of a similar helper method (TimberHelper::function) in the controller which is now deprecated

Answer 3

The problem is that acf_form is also echoing when called in the PHP file. You can either look for an alternate function (is there something like get_acf_form that returns the HTML but doesn't echo?) OR use Timber's output buffer wrapper:

$contect['vf_form'] = Timber\Helper::ob_function('acf_form', $new_post);

... this will store the data in the vf_form attribute, but not suppress it from echoing until called in Twig