Support

Account

Register Login

Home › Forums › Front-end Issues › Create Front End Form using Shortcode

Solving

Create Front End Form using Shortcode

  • Is it possible to create an ACF form in a post or page using a shortcode?

    [show_acf_form form="formID"]

    The only examples I can find are placing a form in a template and I need to put one on a page and another in a widget text box.

    Alternatively, can I use my regular forms plugin (Formidable) to update the ACF fields in a post?

  • It should be possible. But I think you’d need to write your own short code function. Also, you’d have to make sure that acf_form_head(); is called before get_header(); in every template where a form could possible be added, alternately you could put the function call in header.php before any HTML output. I think the inclusion of the acf_form_head() function call is probably why ACF does not have a shortcode for adding front end forms.

    There are other form plugins that can be used and you could create your own forms. The thing you need to make sure of when updating data yourself is to make sure that the field_key entry in postmeta is also created. More info on field_key and database entries can be found on this page http://www.advancedcustomfields.com/resources/get_field_object/

    I’m pretty sure that some form plugins like Gavity Forms have add ons for ACF, don’t know about Formidable.

  • Optimally, I’d want to call acf_form_head() only when the shortcode is present, but how much overhead is there if I wanted to just add it to every page/post on the front end?

  • The call to acf_form_head() calls function acf_verify_nonce() that function tests to see if $_POST[‘_acfnonce’] is set. So if there is no form there is two quick function calls. So very little overhead at here. This is the part that has to happen before any HTML output is created.

    The real over head is that no matter the results of the above ACF goes through the process or setting up and enqueuing all the needed JavaScript that the form is going to need.

    The problem is that where the head function needs to be there wouldn’t be any way to know if it’s going to be needed, especially if you intend to include it it widgets.

    If you were only going to include it for use on single posts you could add a field to your post edit page for “Include acf_form_head()” and then before the header is rendered you could do something like

    
$queried_object = get_queried_object();
if (isset($queried_object->ID)) {
    // assumes a true/false field
    if (get_field('include_acf_form_head', $queried_object->ID)) {
        acf_form_head();
    }
}

    I can’t think of a single way this could be done with widgets.

  • Well, for my specific purpose, I can include a method for setting a “flag” to call acf_form_head(). However, I was kind of hoping I could create a “generic” plugin that allowed ACF users to include forms on pages using a shortcode.

    Is there anything in acf_form_head() that requires being called before the page is rendered? Because the JavaScript can be loaded in the footer.

  • Also, can you specify which form you want via an ID or slug? And can you create new posts? It appears from what I’m seeing in the docs that the acf_form functionality only edits the metadata for the post/page it’s displayed on.

  • To answer the first question, the test for a submission must be done before any HTML output is created, so before the page is rendered, otherwise it will creat a PHP error “cannot modify headers, output already sent by …’

    The second question, in order to show a front end form on a different post type than it is attached to you need to specify the field group keys that should be shown.

  • I would like to suggest the following public functions for developers:

    acf_prepare_form( formId )

    All it does is add the appropriate JS setup code/links to the header or footer so that forms can be rendered.

    acf_render_form( formId )

    All it does is render the form and any necessary JS code for validations, etc…

    acf_process_form( formId )

    All it does is process the form data and does not output any HTML, just error codes if there is an error.

    Of course, they may already exist, I’ll have to dig through the code and see how forms work in ACF.

  • I will bring this to the developer’s attention. I can see where it might be useful to always check for a form submission but only include the scripts if a form is actually added to the page.

    Like you say though, it may be possible to do this by calling the different function individually. acf_form() is probably geared more toward the average user.

  • Hey!

    Bit older topic but I thought I’d share this plugin for future googlers etc.

    We needed the ability to add acf_form as a shortcode in a project we’re working on so I just coded a plugin that achieves this. It’s completely self-reliant so no need to add acf_form_head yourself and it only adds it if there’s a shortcode in the post_content.

    To use it just install it like any other plugin and then use [show_acf_form] in the editor (currently only supports the regular post_content editor).

    It takes *all* options that acf_form takes. To set array values just comma-separate them. To set associative array values use | to separate key=>value pairs.

    Example:
    [show_acf_form id="tavlingsansokan-form" field_groups="1496,1451" post_id="new_post" new_post="post_type|tavlingsansokningar,post_status|publish" submit_value="Skicka" updated_message="Ansökan mottagen"]

    It can be found here: https://github.com/jonathan-dejong/acf-form-shortcode

  • Hey Jonathan…this is almost exactly what I am looking for… But… Do you have an example that works to simply update a simple custom field? Just a text field. I don’t need to create new posts with an acf_form. I just need to update a field.

    To explain…I have setup a project art approval post type. They fill out the form by confirming their name and email and clicking the “Approve” button. Right now I go in and fill the field in manually with their name. Doing so hides the form section and displays a new, previously hidden section that basically says something like “Dee Buttersnaps approved this project….”, where the name is the value of said custom field.

    Having a form that pulls that value, saves it so it can be displayed…would be so helpful. Right now I get several form submissions from people thinking they don’t go through because I can’t always manually update right away.

  • Hi Kahil.

    Yes since the shortcode takes *all* options the regular acf_form does you can just as easily use it to update a single text field.

    [show_acf_form fields="123" submit_value="Save" updated_message="field saved"]

    this example would update just a single field with the ID of 123

  • @jonathan Will you be releasing and uploading this plugin to WordPress.org? Supporting and updating it? I tried to install it and got the following error that showed up twice right after activating:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, class ‘Acf_Form_Shortcode_Admin’ does not have a method ‘enqueue_styles’ in /home/wp-content/21/3843821/html/wp-includes/plugin.php on line 525

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, class ‘Acf_Form_Shortcode_Admin’ does not have a method ‘enqueue_scripts’ in /home/wp-content/21/3843821/html/wp-includes/plugin.php on line 525

    P.S. Bonus points for the Seinfeld reference on your site.

  • @kahil I will probably upload it to wordpress.org when I’ve fine tuned it a bit. Currently it’s in a rough form (as you noticed by the silly php warnings) and I’d like to test it a bit first and possibly add some stability and features.

    .. So, what’s the deal with airplane food?

  • @jonathan is it possible to use the filed names rather than IDs? The ACF setup as it is now doesn’t make it easy to find the specific id of a single field. Nearly every snippet used with ACF uses the field name.

  • @kahil you can use either the post Id (the ID of the field/field group) OR the field key (or fieldgroup key). The same functionality as with using the acf_form() function. If you’re using acf-json I’d make sure to use the field keys because the ID’s would not exist on a site which only loads the fields from the json file.

  • @jonathan I honestly have no clue what you’re talking about…lol…

    I am new to trying to use acf_form. Never was viable for my use before. I thought your plugin took care of everything in the background programatically and all I would have to do is use the shortcode.

    I just need it to update one or two fields and email me as a notice. I’m pretty familiar with ACF and I don’t see any way to get the specific field ID number. Only the field group. The only identifier for a specific field I have ever had to use with the plugin is the name. In this case, “approved_by”.

    So does your plugin load the text fields on the front end? I haven’t been able to see a demo or get it working for myself…just going on your description.

  • Ok…scratch that. I did get it to work as needed using the field key. Works great! Would recommend letting it use the field name like all the other ACF shortcodes and php snippets do just for continuity.

    Also… An admin interface for it would be great as well so people can specify things for like optionally sending an email. Things like email address it gets sent to, the subject, etc. Things like applying classes or IDs to each field so we can more easily make it match themes. Maybe….if it is possible…allow people to do a shortcode for each specific field so they can be placed and organized individually. Maybe something like…

    [acf_form] [acf_field="123"] [acf_field="456"] [acf_submit value="Save"] [/acf_form]

    Then, something you can do on the git page is start a running list of examples to help people out…then later on a landing page site for the plugin, etc.

  • Good to hear 🙂

    Actually when I say that it takes all the options from acf_form() that means you can look here: https://www.advancedcustomfields.com/resources/acf_form/

    The limitations are the same as well so I can’t support adding fields by field name since the function can’t. The shortcode I created is in it’s most basic form just a wrapper for acf_form().

    I’ll take your suggestions under consideration. A landing page for the plugin is a bit over the top tho as of right now 🙂

    I think the next step is to see if I can’t make it work seamlessly with any editor and also add some more documentation to the github repo.

  • I’ll let you know how it all works out on my end and if I run into any bugs.

    The suggestion for a landing page site eventually was mainly to allow you to do a little more on the explanation and demo side. And to house more examples.

    The suggestion regarding styling…those classes seem to be set for the fields. Right now I am easily styling using my stylesheet, but I thought it might make it a little easier if there could be something done in your shortcode to inject a class or id. Either through a theme’s stylesheet or a text field you put into an admin settings page, users could create their own styles to apply to said classes and IDs.

    As for theme support…I personally am using Enfold on my site. I believe it is a pretty popular theme for novice and advanced users. I think the devs have some sort of API to include in their theme builder section.

  • Regarding the email option request…I did find this if it helps.

    https://github.com/cpham/acf-contact-form

  • This reply has been marked as private.

  • @kahil

    Thanks for all the feedback. You should probably jump over to the github repo tho if you want to take things further so we don’t highjack this thread.

    As for styling you have two options. You can set the id parameter to get a custom ID for the form. And you can set extra classes on the form element by passing it to the form_attributes parameter as an array.

    [show_acf_form id="mycustomid" form_attributes="class|mycustomclass"]

    As for the email alert I kinda think it’s outside the scope of what an ACF Form Shortcode plugin should do. You can however easily create the functionality yourself. Here’s a working (not tested) example using your field keys. Just update the “mycptslug” strings. 

    
<?php
function send_email_on_submit( $post_id, $post, $update ){

	// If this is just a revision, don't send the email.
	if ( wp_is_post_revision( $post_id ) )
		return;
    
    $post_title = get_the_title( $post_id );
	$post_url = get_permalink( $post_id );
	$subject = __('A design has been approved');

	$message = 'A design has been approved:\n\n';
	$message .= 'Name: ' . get_field('field_57210e7e7a217', $post_id) . '\n\n';
	$message .= 'Email: ' . get_field('field_573b9511ba9f5', $post_id) . '\n\n';
	$message .= $post_title . ": " . $post_url;

	// Send email to admin.
	wp_mail( get_option('admin_email'), $subject, $message );
    
    
}

add_action( 'save_post_mycptslug', 'send_email_on_submit', 10, 3 );

  • [show_acf_form id=”item-available-form” field_groups=”924,739″ post_id=”new_post” new_post=”post_type|trading_post,post_status|pending,tax_input|item_type” submit_value=”Submit Item” updated_message=”Updated Message”]

    I am having an issue with tax_input. How would I input that into the shortcode? It is a nested array…

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Create Front End Form using Shortcode’ is closed to new replies.