Support

Account

Home Forums Front-end Issues Adding ACF fields to frontend form

Solving

Adding ACF fields to frontend form

  • Hello,
    i have a multivendor website for Tours , so users can register and launch their tours and get paid , so i use Advanced CustomFields to add some Extra Checkbox Fields , as you can see in the image below in the admin dashboard :
    CheckBOX Options on ADMIN DASHBOARD

    but i need this options to be used by Users Too from the frontend Dashboard :
    This is the Users Frontend Dashboard - i need the checkbox options to show here too

    this page is in my theme files with name “Edit-tours.php” so i want to add those ACF checkbox options to this page but i don’t Know how to do this ?
    so when users check one of this options will be displayed in the Tour Page just like this :

    this is how the options displayed when i check them from the backend

    Please help me i’m stuck for more than 3 days ! 🙁
    Thank’s

  • You have to use a front end form. The documentation is here.

    Basically, you change the settings below to fit your needs and add the acf_form($settings); where you want the form to appear.

    It involves programming, so you have to have access to the WordPress theme files.

    If you want this to appear on the Edit-tours.php page you have to add the coding to that file.

    This: <?php acf_form_head(); ?> goes at the top of your file ahead of get_header();.

    $settings = array(
    
    	/* (string) Unique identifier for the form. Defaults to 'acf-form' */
    	'id' => 'acf-form',
    	
    	/* (int|string) The post ID to load data from and save data to. Defaults to the current post ID. 
    	Can also be set to 'new_post' to create a new post on submit */
    	'post_id' => false,
    	
    	/* (array) An array of post data used to create a post. See wp_insert_post for available parameters.
    	The above 'post_id' setting must contain a value of 'new_post' */
    	'new_post' => false,
    	
    	/* (array) An array of field group IDs/keys to override the fields displayed in this form */
    	'field_groups' => false,
    	
    	/* (array) An array of field IDs/keys to override the fields displayed in this form */
    	'fields' => false,
    	
    	/* (boolean) Whether or not to show the post title text field. Defaults to false */
    	'post_title' => false,
    	
    	/* (boolean) Whether or not to show the post content editor field. Defaults to false */
    	'post_content' => false,
    	
    	/* (boolean) Whether or not to create a form element. Useful when a adding to an existing form. Defaults to true */
    	'form' => true,
    	
    	/* (array) An array or HTML attributes for the form element */
    	'form_attributes' => array(),
    	
    	/* (string) The URL to be redirected to after the form is submit. Defaults to the current URL with a GET parameter '?updated=true'.
    	A special placeholder '%post_url%' will be converted to post's permalink (handy if creating a new post)
    	A special placeholder '%post_id%' will be converted to post's ID (handy if creating a new post) */
    	'return' => '',
    	
    	/* (string) Extra HTML to add before the fields */
    	'html_before_fields' => '',
    	
    	/* (string) Extra HTML to add after the fields */
    	'html_after_fields' => '',
    	
    	/* (string) The text displayed on the submit button */
    	'submit_value' => __("Update", 'acf'),
    	
    	/* (string) A message displayed above the form after being redirected. Can also be set to false for no message */
    	'updated_message' => __("Post updated", 'acf'),
    	
    	/* (string) Determines where field labels are places in relation to fields. Defaults to 'top'. 
    	Choices of 'top' (Above fields) or 'left' (Beside fields) */
    	'label_placement' => 'top',
    	
    	/* (string) Determines where field instructions are places in relation to fields. Defaults to 'label'. 
    	Choices of 'label' (Below labels) or 'field' (Below fields) */
    	'instruction_placement' => 'label',
    	
    	/* (string) Determines element used to wrap a field. Defaults to 'div' 
    	Choices of 'div', 'tr', 'td', 'ul', 'ol', 'dl' */
    	'field_el' => 'div',
    	
    	/* (string) Whether to use the WP uploader or a basic input for image and file fields. Defaults to 'wp' 
    	Choices of 'wp' or 'basic'. Added in v5.2.4 */
    	'uploader' => 'wp',
    	
    	/* (boolean) Whether to include a hidden input field to capture non human form submission. Defaults to true. Added in v5.3.4 */
    	'honeypot' => true,
    	
    	/* (string) HTML used to render the updated message. Added in v5.5.10 */
    	'html_updated_message'	=> '<div id="message" class="updated"><p>%s</p></div>',
    	
    	/* (string) HTML used to render the submit button. Added in v5.5.10 */
    	'html_submit_button'	=> '<input type="submit" class="acf-button button button-primary button-large" value="%s" />',
    	
    	/* (string) HTML used to render the submit button loading spinner. Added in v5.5.10 */
    	'html_submit_spinner'	=> '<span class="acf-spinner"></span>',
    	
    	/* (boolean) Whether or not to sanitize all $_POST data with the wp_kses_post() function. Defaults to true. Added in v5.6.5 */
    	'kses'	=> true
    			
    );
    			
    
    	acf_form($settings);
  • Thank you for your reply
    i have inserted the full code you give in your reply in my theme file user-edit-tours.php , i have edit the ‘id’ => ‘acf-form’, to the id of my custom field , also i have added the <?php acf_form_head(); ?> <?php get_header(); ?> – at the top of the file but i didn’t see the custom field on the frontend dashboard i only see A button “UPDATE” when i click on that button the page refresh and nothing happend , mu custom fields are Multi Checkboxes Options .

    i really appreciate your help…

  • Can you show me your code for the settings?

  • You need to find the ID of your field group.

    Go to Tools in the Custom Fields menu, check the group that the fields are on and click the button that says generate php.then look for your field group ID It will start with ‘group_’.

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

The topic ‘Adding ACF fields to frontend form’ is closed to new replies.