Help Center

Knowledge base Plugins JetEngine How to Update Posts via Front End Form

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:

form fields

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.

pre-set fields values
Warning

Post ID identifies the post, in which information will be re-recorded.

Except for the “Post ID” option, there’s a list of the default post properties, which could be selected in the Fields Map.

properties dropdown list

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 fields map

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.

notification setting field map
Warning

It’s obligatory to choose Post ID for the post_id field as it is responsible for a post update.

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:

form widget settings

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:

form successfully submitted

Now, let’s double-check that the post was rewritten:

updated posts on backend

And let’s look at how it was updated on the front end, on the Continent Archive template with the Listing Grid:

posts archive updated

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.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.