Home › Forums › Front-end Issues › 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?
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?
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">×</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>
The topic ‘Frontend form Edit Post link’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.