The instructions for creating a front-end form are quite solid when working with a standard page template.
I’m now aiming to integrate an ACF form to submit from an event using The Events Calendar (http://tri.be/). Their template / view system does not include get_header directly to place the acf_form_head above.
I tried putting it at the very top of my themes’ header.php file – with and without checks around is_single() and matching post type to no avail. The closest I got was the following 2 errors in console from ACF’s input.min.js file :
TypeError: g is undefined
input….r=4.3.4 (line 13)
ReferenceError: wp is not defined
input….r=4.3.4 (line 13)
I’m also posting this on their support forum as I’ve seen a few threads about conflicts on both. Any help you can shed would be appreciated.
are you seeing the error in the admin or on a page that the user might view? typically, i don’t use acf form fields to take input from clients. typically i will use my own form fields and then save them using the fields i’ve created using acf.
for instance, on an auction site that i have, acf is used to show the custom fields on my custom post type. one of the fields on my custom post type called “custom-post-auction-bid” is a field called “auction_cur_bid”. acf displays that current bid value when my admin access the “bid” post.
however, the data is actually written in this way, during form processing:
update_post_meta($post_id, 'auction_cur_bid', $bid);
perhaps rethinking the method of integration will allow you to avoid the conflict altogether, especially since the conflict appears to be related to client side scripting anyway.
Only on the front end.
I’m using the gallery add-on which I purchased purely for the front-end ability to batch upload photos with the standard media upload UI. The gist of the rest of process (which is working):
The last piece is having the ACF form show up on event to allow batch upload of photos which is limited by the issue described above.
I have a temporary workaround of putting a separate the photo submission form onto a separate page that populates the eventID via select field populated with past dated events. But requirement is that everything stays tied to the individual event along with comments, post-event feedback (GF) form.
acf_form, must first run
acf_form_head before any HTML is output into the template.
Are you able to modify the template which this form exists on? You mentioned that
Their template / view system does not include get_header directly to place the acf_form_head above. In this case, what do they offer you to edit?
Digging deeper I found that in addition to their specific event page types they also wrap inside a more general template – /wp-content/plugins/the-events-calendar/views/ecp-page-template.php – that you can copy into your theme and customize presentation of. That does make a call to get_header() that I can put the acf_form_head() in front of.
I’m still left with two JS errors:
TypeError: e.fn.datepicker.noConflict is not a functioncalling from wp-content/plugins/the-events-calendar/resources/tribe-events.min.js?ver=3.4.1
TypeError: g is undefinedcalling from /wp-includes/js/tinymce/tiny_mce.js?ver=359-20131026
Cross-posted onto the tri.be support forum for plugin conflict impact – http://tri.be/support/forums/topic/plugin-conlict-js-errors-from-tec-front-end-acf-form-on-an-event-template/#DiscussionForm
FYI – The Tri.be support forum found a resolution for issue with a snippet to de-register the acf-datepicker that, according to them, is conflicting with the use of standard jquery-ui-datepicker. From https://tri.be/support/forums/topic/plugin-conlict-js-errors-from-tec-front-end-acf-form-on-an-event-template/ :
What is happening is that ACF is using it’s own custom datepicker, enqueued with “acf-datepicker”. The thing is, it conflicts with WP’s ’jquery-ui-datepicker’, which is basically the same thing only it is provided by WordPress. Our plugin uses ’jquery-ui-datepicker’ to avoid conflicts just like this. Other plugins need to be using the scripts that WordPress provides, as this limits conflicts and optimizes the site loading times. Unfortunately ACF is not doing this.
With TEC 3.5.1, ACF 4.3.7 and WP 3.9 I am getting a similar JS error again.
The following snippet works to resolve a similar issue with the jquery-ui-datepicker dependancy. It does de-activate the datepicker, which in my particular use case is not needed. I’m not sure why the conflict occurs in the first place either – but hopefully it helps for another future version to resolve conflict.
wp_dequeue_script('acf-input' ); wp_deregister_script('acf-input'); wp_register_script('acf-input', '/wp-content/plugins/advanced-custom-fields/js/input.min.js', array('jquery', 'jquery-ui-core'), '4.3.7'); wp_enqueue_script ('act-input' );
The topic ‘Front-End Form with template (and The Events Calendar)’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2023 Advanced Custom Fields.