Support

Account

Home Forums Front-end Issues How to show ACF Repeater in front end form

Solving

How to show ACF Repeater in front end form

  • I have repeater with 3 subfields. How to show these fields in front end form.

  • Hi @madhan2085

    You can show the repeater field like showing the other fields. You can also set the ‘fields’ option to show only certain fields like this:

    acf_form(array(
        'fields' => array('field_1234567890abc', 'field_abcdefghij123'),
    ));

    Where ‘field_1234567890abc’ and ‘field_abcdefghij123’ are the field keys.

    I hope this helps 🙂

  • Hi James,

    Now i can able to show the form in front end. But the data’s from form fields are not loading.

  • I think its something to do with javascripts.. below is the code used in page template. Is this code right?

    <?php
    /**
     * Template Name: Manage Products
     *
     * @package Listable
     * @since Listable 1.0
     */
    acf_form_head();
    
    get_header();
    
    global $post; ?>
    
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    		<script type="text/javascript">
    			(function($) {
    				// setup fields
    			acf.do_action('append', $('#popup-id'));
    			})(jQuery);	
    		</script>
    			<?php /* The loop */ ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    				<? acf_form(array(
    				‘form’ => true,
    				‘post_id’ => ‘user_’ . $user_id,
    				‘field_groups’ => array(‘field_57aad46f04ccc’),));
    			?>
    			<?php endwhile; ?>
    			<?php  acf_enqueue_uploader();?>
    		</main>
    		<!-- #main -->
    	</div><!-- #primary -->
    
    <?php
    get_footer();
  • Hi @madhan2085

    I believe you don’t need to use this code if you don’t use AJAX to load the form:

    <script type="text/javascript">
        (function($) {
            // setup fields
        acf.do_action('append', $('#popup-id'));
        })(jQuery);	
    </script>

    Regarding your issue, it seems there’s something wrong with this code:

    ‘field_groups’ => array('field_57aad46f04ccc'),

    A field group’s key is formatted like this: group_1234567890abc. If you want to restrict the fields, please use the following code instead:

    ‘fields’ => array('field_57aad46f04ccc'),

    If you want to do it for a field group, you can use the field group ID like this:

    ‘field_groups’ => array(99),

    You can get the ID in the field group editor page’s URL. For example in this link:

    http://example.com/wp-admin/post.php?post=99&action=edit

    ’99’ is the field group ID.

    I hope this makes sense 🙂

  • Hi,

    Still not solved after changes you have recommended. I have attached the screen. still data is not loading.

  • Hi @madhan2085

    Could you please open a new ticket and provide temporary admin credentials to your site? Don’t forget to add the URL to the form and the field group at fault on the backend. You can open a new ticket here: https://support.advancedcustomfields.com/new-ticket. Also, please don’t forget to explain the issue again and provide the link to this thread.

    Thanks 🙂

  • I’m Also having a hard time showing data’s from form fields. Any tips on how to append the values to the front end form?

  • @madhan2085
    Your template doesn’t look right!

    I’ve removed the script as I assume you’re not using ajax.
    Also, you don’t need the form declared in the loop
    Finally, you’re using a user ID as the post ID but not declaring the user ID:

    <?php
    /**
     * Template Name: Manage Products
     *
     * @package Listable
     * @since Listable 1.0
     */
    acf_form_head();
    
    get_header();
    
    global $post; ?>
    
    <div id="primary" class="content-area">
    	<main id="main" class="site-main" role="main">
    
    	<?php 
    	acf_form(array(
    		‘form’			=> true,
    		‘post_id’		=> ‘user_’ . $user_id, #where is this being declared?
    		‘field_groups’	=> array(‘field_57aad46f04ccc’),
    	));
    	?>
    
    	</main><!-- #main -->
    </div><!-- #primary -->
    
    <?php
    get_footer();

    If this is storing against a user, you also need to get the logged in user ID, maybe this might work for you:

    <?php
    /**
     * Template Name: Manage Products
     *
     * @package Listable
     * @since Listable 1.0
     */
    acf_form_head();
    
    get_header();
    
    global $post; 
    $user_id = get_current_user_id();
    ?>
    
    <div id="primary" class="content-area">
    	<main id="main" class="site-main" role="main">
    
    	<?php 
    	acf_form(array(
    		‘form’			=> true,
    		‘post_id’		=> ‘user_’ . $user_id, #where is this being declared?
    		‘field_groups’	=> array(‘field_57aad46f04ccc’),
    	));
    	?>
    
    	</main><!-- #main -->
    </div><!-- #primary -->
    
    <?php
    get_footer();
  • this worked for me all the values are now showing in the front end but the problem is all the fields under that post is now visible. Is there a way for me to show only the field that I selected?

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

The topic ‘How to show ACF Repeater in front end form’ is closed to new replies.