Back to contents

JetEngine: How to update posts via front-end Form submission option

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, a JetEngine frontend 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.

Preparations

Start with creating a Custom Post Type, if you don’t have one yet. Find out how to do this in the tutorial. Create and customize meta fields in CPT according to your needs.

To showcase our posts in the Listing Grid, be sure that you have the Listing template created. Check how to do this in our tutorials about Listing template and Listing Grid creation.

Also, the last thing we need before we get to the point is to create a Single Post page. Here’s where you can learn more.

For this tutorial we created ‘Continents’ Post Type and the Listing Grid:

listing grid in archive

Form creation and setup

1 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 form the frontend later. The basic tutorial about Form’s creation can be found here. To learn more what each of the field types means, take a look at the following guide.

So, 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 the data could be re-written, 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
ATTENTION!
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

2 Step — 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 for posts with which status updates should be performed.
form notification settings

The next is to set the Field Map block, where Form fields should be assigned to the appropriate Post meta fields names.

notification setting field map
ATTENTION!
Attention! 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 frontend.

Let’s explore the next steps.

3 Step — Form adjustment in Elementor

Well, we’re almost done! At this stage, we need to add a Form widget to a Single post. Open it in Elementor and drop the widget.

form 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

4 Step — Check in action

We need to check on the frontend that our Form works properly. Open your Single post, complete the Form and submit it:

form successfully submitted

Now, let’s double-check that our Post was overwritten:

updated posts on backend

and let’s look at how it was updated on the frontend, on the Continent Archive:

posts archive updated

As you can see, these fields that we’ve edited before were successfully updated. Try this feature on your end!