Support

Account

Register Login

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>

  • @ireth92 Great job. Thanks.

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

The topic ‘Frontend form Edit Post link’ is closed to new replies.