Support

Account

Home Forums Front-end Issues Frontend form Edit Post link

Solved

Frontend form Edit Post link

  • I’ve almost got things working really well right now. But on the single post page the results from a user submitting a front-end form to my custom post type, I would like to have an “Edit Submission” button that takes them back to the front-end form they just filled out (still populated with the entries they’d made).

    Right now I seem to have the form showing up on the single page itself, below the contents I created from the original submitted form.

    I’d much rather have it be something more like:
    <a href="&action=edit">Edit this post</a>
    (again, I want the editing to take place on the frontend, not the backend. Is that possible with a link?

  • Hi @brotsky_pixie

    I think you can do it by checking the $_GET variable up. If you have the “&action=edit” parameter in the URL, you can check it like this:

    if( isset($_GET['action']) && $_GET['action'] == 'edit' ){
        // Show the form
        acf_form();
    }

    This page should give you more idea about it: http://php.net/manual/en/reserved.variables.get.php.

    I hope this helps 🙂

  • This didn’t seem to work for me, but I didn’t spend much time looking through the link you provided. I had, in the meantime, cobbled together another solution that may work for someone else as well:

    Goes below your single-post display, within the post loop

    <div class="edit-form">Edit this submission</div>
    <div class="form-off"><?php acf_form(); ?></div>
    
    <script>
    $ = jQuery;
    	$(".edit-form").click(function(){
    		$(".form-off").toggleClass("form-on");
    		$(this).toggleClass("form-on");
    	}, function() {
    		$(".form-off").toggleClass("form-on");
    	});
    </script>

    In your stylesheet

    .form-off {
    	visibility: hidden;
    }
    
    .form-on {
    	visibility: visible;
    }

    This may not be the most elegant way to do things, but it worked for me.

  • Brotsky_Pixie,

    I love your front-end editing solution! it works almost perfectly. However, when the form is hidden a very large blank space is still shown. The blank space appears to be the length of the form.

    Do you know how can I fix this?

  • Hi @mirajadesign

    I do know about your design, however you may use some custom CSS classed to set the visibility to hidden or height to zero when the form is hidden.

    Hope this helps.

  • Thanks. I figured out that I needed to use this code instead:

    .form-off {
    	display:none;
    }
    
    .form-on {
    	display:block;
    }
  • I followed what James was saying and used the $_GET method. Here’s how I made it work, hopefully it will help someone:

    (I’m assuming you know how to create WordPress page templates, and know how to create ACF submit forms)

    1. Add a button on your single.php that sends the post id with $_GET to a page that we will create next:

    global $post;
    $postID = $post->ID; ?>
    		
    <a href="./page-with-form/?post=<?php echo $postID; ?>">Edit Post Button</a>

    2. Create a page template with the ACF form in it. This page from the ACF documentation has an example on how to edit a specific post with a form. You’ll just have to set the post id dynamically in this case. This is what my form looks like:

    <?php acf_form(array(
        'post_id'	   => $post_id, //Variable that you'll get from the URL
        'post_title'   => true,
        'post_content' => true,
        'fields' => array('_thumbnail_id', 'ask_for_donations'),  //The name of the custom fields I want to show on the form              
        'submit_value' => 'Update Content',
        'return' => '%post_url%' //Returns to the original post
    )); ?>

    3. To read the post id that has been passed on the URL (will look like: ?post=number) add the following line on the page template somewhere before the form starts:
    $post_id = $_GET["post"];

  • @brotsky_pixie This works for me in terms of showing the edit form but I can’t get the edit submission div to be clickable and change the class to display the form. Anybody have any ideas what I’m doing wrong?

  • I have a while loop that displays the list of custom posts with ACF. There’s a ‘Edit Post’ button beside every list item.

    The ‘Edit Post’ button should pop up a modal on click. However, I am unable to target the post_id for the different list items. I am assuming this is covered under “Displaying within an AJAX Modal’ in https://www.advancedcustomfields.com/resources/acf_form/. But I can’t figure out where the acf_enqueue_uploader(); should sit, or how my JS file shile be configured.

    Can someone help?

    while($userRecipes->have_posts()) {
              $userRecipes->the_post(); ?>
                <li class="recipe" data-id="<?php the_ID();?>">
                  <a href="<?php the_permalink()?>"><h3 class="recipe-title"><?php echo esc_attr(get_the_title()); ?></h3></a>
                  <span type="button" data-toggle="modal" data-target="#myModal" class="edit-recipe"><i class="fa fa-pencil"></i> Edit</span></a>
                  <span class="delete-recipe"><i class="fa fa-trash-o"></i> Delete</span>
                  <div class="recipe-page-display">
                    <img class="recipe-page-image" src="<?php the_field('food_images'); ?>">
                    <div><?php echo wp_trim_words(esc_attr(get_the_content()), 50); ?></div>
                </li>
            <?php }
    <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <div id="primary">
            <div id="content" role="main">
              <?php 
                acf_form(array(
                'post_title' => true,
                'post_content' => true,
                'post_id'       => $post_id, This is where it fails
              )) ?>
              <span class="edit-recipe"><i class="fa fa-times"></i> Cancel</span>
            </div>
          </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
  • OMG thank you @ireth92

    I have been looking for this solution and now I find it in your post. I appreciate it!

    By the way, in my case I had to add another dot to the button link
    <a href="../page-edit-item/?post=<?php echo $postID; ?>">Edit Post</a>

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

You must be logged in to reply to this topic.