I am trying to achieve a front-end submission form.
I followed the steps on https://www.advancedcustomfields.com/resources/using-acf_form-to-create-a-new-post/ which gives me a form on the place where I want it.
I used 3 tabs (which will become more probably).
In the back-end they work like a charm, but on the front-end the tabs are not changing.
Just to make sure, did you add acf_form_head() where it needs to be?
I that’s in place, check for JavaScript errors on the page that might be interfering with ACF.
I use timber so it’s a bit different…
I added it to my header file (before wp_head) but then it seemed to output the form right there instead of where I wanted it to show.
So I created a timberhelper in my page.php
$context['submitform'] = TimberHelper::function_wrapper( 'acf_form', array(
'post_id' => 'new_post',
'updated_message' => 'Post successfully created!',
'new_post' => array(
'post_type' => 'my_post_type',
'post_status' => 'pending'
)
) );
and i then called it where i wanted it to show by using {{ submitform }} which shows it where I want it to show.
There is another function call acf_form_head() that must be called before get_header(). Without that function call the ACF JS scripts are not loaded. https://www.advancedcustomfields.com/resources/acf_form/#notes
I did but didn’t change a thing…
This is my code.
{% if post.post_title == 'Submit' %}
{{ function('acf_form_head') }}
{% endif %}
{{ wp_head }}
</head>
<body class="{{ body_class }}" itemscope itemtype="//schema.org/WebPage">
{# {% include 'partials/google-tag-manager.twig' %} #}
{% if post.post_title == 'Submit' %}
{{ function('acf_enqueue_uploader') }}
{% endif %}
I’m not familiar with this
{% if post.post_title == 'Submit' %}
{{ function('acf_form_head') }}
{% endif %}
But I suspect that the if’s are causing the function to not be called. Are the ACF scripts present in the outputed source? look for acf-input.min.js
It means if page has title ‘Submit’ include function acf_form_head.
I took it out for testing, but still doesn’t change a thing.
yes acf-input.min.js is called.
I meant I’m not familiar with the template system you’re using. My only guess is that it has something to do with it.
So, you car calling it here…
{% if post.post_title == 'Submit' %}
{{ function('acf_form_head') }}
{% endif %}
{{ wp_head }}
</head>
and acf_form_head() needs to be called before any HTML is output. This is not the case since the opening <html> tag and open <head> tag must be before this point. You are calling the function on the wp_head action, which happens after the get_header() function is called.
AH ok… so i might need to move it more up…. before ‘<html>’…
edit: just did but not changing anything….
I might be able to give you an online link to look at but I need to upload it somewhere and send you the link privately because i don’t want to publish the (htaccess) passwords here since it’s not live yet.
just tested on twentytwelve and it works there… so i assume it’s my theme…
i was using jquery v2.1.4, i now updated that to 3.1.0 and it works…
which is the required minimum version jquery ?
On a side note, since you don’t know the template system…
This is Twig, combined with Timber which ‘adapts’ twig for WordPress.
Definitely worth looking into… a lot faster than php and easier to change… since style and logic are separated.
I’m sure that ACF uses whatever version is packed with WP Core. I honestly don’t know what the min version is for ACF, but I do know that it will run on whatever comes with WP. Personally, I consider that the version that all plugins and themes should run under, but that’s just me, I won’t install a theme or plugin that loads it’s own version of jQuery because you never know when they’ll stop working. There was a recent update in WP 4.5 that was announced here https://make.wordpress.org/core/2016/03/29/jquery-updates-in-wordpress-4-5/
This reply has been marked as private.
This reply has been marked as private.
Hello, I have the same problem. I checked already everything above
– acf_form_head() placed before <html>
using WordPress 4.7.2. with jQuery 1.12.4 and ACF 5.5.9
with UIKIT 3.0.0-beta.12
There are no errors in the log.console.
The acf-tab-wrap and ul.acf-tab-group is not being rendered
I already disabled the uikit js files and css files
no success so far
any ideas?
That was the one loaded by WordPress – I updated it now to version 3.1.1 and still no change. ??
have you tried switching to a default WP theme ?
It works. Where can be the mistake in my theme? Where to start hunting the bug?
I would start by checking the jquery version of the template, see which it is using.
Then (in your theme) try to deactivate all plugins except ACF and activate them by one by one and test it after each activation. Maybe a plugin causes it.
If nothing changes, try deactivating parts/functions in your theme until you found ‘the culprit’.
Started over again and now it works. Thanks for the help! *magic*
