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.
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.
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:
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:
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.
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.
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.
The next is to set the Field Map block, where Form fields should be assigned to the appropriate Post meta fields 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 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.
Select the Form you’ve set up before and customize it according to your tastes and needs. Here’s what we’ve got:
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:
Now, let’s double-check that our Post was overwritten:
and let’s look at how it was updated on the frontend, on the Continent Archive:
As you can see, these fields that we’ve edited before were successfully updated. Try this feature on your end!