How to Update Posts via Front End Form
Follow this step-by-step guide to learn how to update information inside Posts right from the front end.
When it comes to updating the information in the posts, the JetEngine front-end submission functionality could be a perfect match to implement it. It works either with the default WordPress posts or the Custom Post Types. Let’s dive into the process to learn how it can be done step by step.
Form Fields Setup
During this stage, we need to create a form and equip it with the necessary fields and settings so that we can submit changes from the front end later. The tutorial about form creation can be found here. To learn more about what each of the field types means, take a look at the following guide.
Proceed to JetEngine > Forms and create one. Give it a name, and add as many fields as you need. For this tutorial, we created a few:
Also, in order for the data to be rewritten, we need to enable the Pre-set form field values and adjust the settings. Their purpose is to add the default preset values to the Form fields.
Except for the “Post ID” option, there’s a list of the default post properties, which could be selected in the Fields Map.
Post Meta stands for meta fields created for the Posts. If this option is selected, a new field where the meta field key should be inserted will appear.
Form Notifications Settings
Let’s proceed to the part which explains how to implement the frontend submission. Add a new Notification type. In the Type: block, select the Insert/Update Post. It allows overwriting posts fields, which need to be selected in the blocks located below:
- in the Post Type block, choose the post for which the fields will be updated;
- in the Post Status block, you need to select posts with which status updates should be performed.
The next is to set the Field Map block, where Form fields should be assigned to the appropriate post meta field names.
Please note that if you select the Post Meta option, an additional field will appear. Here you need to fill in the meta field key. This option pulls the values from the meta fields you’ve set (as shown in the screenshot above).
The described above are just basic fields for the feature demonstration. You can create as many fields in the Form as you need and allow their update via re-recording from the front end.
Form Adjustment in Elementor
Add the Form widget to the Single post template. Open it in Elementor and drop the widget.
Select the Form you’ve set up before and customize it according to your tastes and needs. Here’s what we’ve got:
Check in Action
We need to check on the front end that our form works properly. Open a post, complete the Form and submit it:
Now, let’s double-check that the post was rewritten:
And let’s look at how it was updated on the front end, on the Continent Archive template with the Listing Grid:
As you can see, these fields that we’ve edited before were successfully updated.
Furthermore, there is a useful How to edit posts via Front-end Form and delete directly via the listing page video tutorial about editing the event posts if the user got rescheduled and deleting posts when they are canceled.
Try this feature on the front end.