{"id":18014,"date":"2020-01-21T08:52:38","date_gmt":"2020-01-21T08:52:38","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18014"},"modified":"2024-07-19T12:55:37","modified_gmt":"2024-07-19T12:55:37","slug":"jetengine-how-to-update-posts-via-front-end-form-submission-option","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/","title":{"rendered":"How to Update Posts via Front End Form"},"content":{"rendered":"\n

When it comes to updating the information in the posts, the JetFormBuilder<\/em> front-end submission functionality could be a perfect match to implement it. It works both with the default WordPress posts and the Custom Post Types<\/a>. <\/p>\n\n\n\n

JetFormBuilder <\/em>is a plugin that allows creating forms in Block Editor (Gutenberg) and displaying them in any page builder, including Elementor. JetFormBuilder <\/em>is a better alternative to the Forms <\/strong>module of JetEngine, <\/em>which is legacy now. <\/em><\/p>\n\n\n\n

We will describe the process of creating a form for post editing in both tools step by step.<\/p>\n\n\n\n

Create the Sub-page in Profile Builder<\/h2>\n\n\n\n
\n

We will create a form for editing a post from the “Events ” post type. The form will be placed on an Account sub-page of the Profile Builder<\/strong><\/a>. It is not obligatory to place the form on the Account page; it can be placed on any static page. <\/p>\n\n\n\n

Firstly, navigate to WordPress Dashboard > JetEngine > Profile Builder > Account Page<\/em> <\/strong>and create a new Subpage<\/strong>. The Subpage will contain the form for posts editing. <\/p>\n\n\n\n

Give a Title <\/strong>and a Slug <\/strong>to the Subpage. Enable the Hide from menu<\/strong> switcher to hide the page from the Profile Menu<\/strong>. The page will still be accessible by the URL. <\/p>\n\n\n\n\"creating\n\n\n\n

We will place the form on the page later.<\/p>\n<\/div><\/div>\n\n\n\n

Build the Listing<\/h2>\n\n\n\n
\n

Add the listing template<\/h3>\n\n\n\n

To access the form, the user will need to click the \u201cEdit Post<\/strong>\u201d button in the listing of posts. Then, the user will be redirected to the Subpage of Profile Builder <\/strong>that we created in the previous step. On that page, the user will fill out the form to edit the post. <\/p>\n\n\n\n

If you have not done it previously, create a Listing Template<\/strong><\/a> <\/strong>for the custom post type, the posts of which will be edited. <\/p>\n\n\n\n

Inside the Listing Template<\/strong>, add the Dynamic Link<\/strong><\/a> <\/strong>widget. To pass the URL parameters dynamically, we use the Dynamic Link <\/strong>widget. <\/p>\n\n\n\n\"configure\n\n\n\n

As the Source<\/strong> of the link, select the \u201cProfile Page\u201d option and specify the Subpage; pick the one created earlier. By clicking on this widget, the user will be redirected to the subpage of your choice. On that page, the form will be located.<\/p>\n\n\n\n

Next, name the link by providing a Label<\/strong>. We will name the link \u201cEdit Event.\u201d <\/p>\n\n\n\n

Enable the Add Query Arguments <\/strong>toggle and place this string in the Query Arguments <\/strong>field:<\/p>\n\n\n\n

_post_id=%current_id%<\/code><\/pre>\n\n\n\n
Here, \u201c_post_id\u201d if the name of the URL parameter, and %current_id% macro<\/a> is the value of the URL parameter; it fetches the ID of the current post dynamically.<\/p>\n\n\n\n
In the result, when the user clicks the link, it will look this way:<\/p>\n\n\n\n\"passing\n\n\n\n
The form will be able to fetch the ID of the edited post from the URL parameter value. <\/p>\n\n\n\n
Once you finish editing, save the changes.<\/p>\n\n\n\n
Place the listing on the page<\/h3>\n\n\n\n
The listing of posts can be placed on any page of your choice. We will put it on a subpage of the Profile Builder<\/strong>. <\/p>\n\n\n\n
We have a subpage called \u201cMy Events\u201d that will display the list of events published by the current user.<\/p>\n\n\n\n\"creating\n\n\n\n
For this subpage, we created a \u201cMy Events\u201d Page template <\/strong>in WordPress Dashboard > Elementor > Saved Templates<\/em><\/strong>. <\/p>\n\n\n\n
Inside the template, we place the Listing Grid<\/strong><\/a> <\/strong>widget and select the Listing Template <\/strong>created previously. To display posts authored by current user<\/a>, use the Query Builder <\/strong>tool.<\/p>\n\n\n\n\"placing\n\n\n\n
As a result, after clicking the \u201cEdit Event<\/strong>\u201d button in the listing on the \u201cMy Events\u201d page of Profile Builder<\/strong>, the user will land on the \u201cEdit Event\u201d subpage to edit the chosen event.<\/p>\n\n\n\n\"testing\n\n\n\n
Now, it is time to configure the form itself.<\/p>\n<\/div><\/div>\n\n\n\n
Create the Form in JetFormBuilder<\/h2>\n\n\n\n
\n
After installing JetFormBuilder<\/em>, proceed to WordPress Dashboard > JetFormBuilder > Forms > Add New<\/em> <\/strong>to enter the form editor.<\/p>\n\n\n\n
Form Fields Setup<\/h3>\n\n\n\n
Hidden field<\/h4>\n\n\n\n
Primarily, add a Hidden Field<\/strong><\/a> block to the editing area. As the Field Value<\/strong>, select \u201cURL Query Variable.\u201d In the Query Variable Key <\/strong>field, enter \u201c_post_id.\u201d<\/p>\n\n\n\n\n\n\n\n
The Hidden Field <\/strong>will retrieve the ID of the edited post from the URL parameters.<\/p>\n\n\n\n\"passing\n\n\n\n
In our case, \u201c_post_id\u201d is the name of the parameter, and \u201c8013\u201d is the parameter\u2019s value. \u201c8013\u201d is the ID of the needed post. The Hidden Field <\/strong>will retrieve \u201c8013\u201d and use it as the ID of the post that should be edited.<\/p>\n\n\n\n
If you plan to place the form on the Single Post page, replace the \u201cURL Query Variable\u201d Field Value <\/strong>with the \u201cCurrent Post ID\u201d option.<\/p>\n\n\n\n\n\n\n\n
In this case, the Hidden Field <\/strong>will retrieve the ID of the post dynamically from the current page.<\/p>\n\n\n\n
Text, WYSIWYG, and Textarea fields<\/h4>\n\n\n\n
To edit the Text<\/strong><\/a>, Textarea<\/strong><\/a>, and WYSIWYG<\/strong><\/a> <\/strong>meta fields, use the same field types in JetFormBuilder<\/em>.<\/p>\n\n\n\n
We will use the Text <\/strong>field to edit the title of the post and the WYSIWYG <\/strong>field to edit the event description, which is stored in a meta field of type WYSIWYG<\/strong>.<\/p>\n\n\n\n
Complete the Field Label <\/strong>and Form Field Name<\/strong>. Other field settings are optional.<\/p>\n\n\n\n\"fields\n\n\n\n
Checkbox, Radio, and Select fields<\/h4>\n\n\n\n
To edit multi-optional meta fields like Checkbox<\/strong><\/a>, Radio<\/strong><\/a>, and Select<\/strong><\/a>, use the corresponding field types in JetFormBuilder <\/em>forms.<\/p>\n\n\n\n
For example, our \u201cEvents\u201d post type has a \u201cCheckbox\u201d Meta Field<\/strong> named \u201cactivities\u201d.<\/p>\n\n\n\n\"enabling\n\n\n\n
<\/svg><\/div>
Warning<\/div>
Make sure to enable the Save as array<\/strong> toggle in the \u201cCheckbox\u201d Meta Field<\/strong> settings. If you didn\u2019t do it previously, enable it and update all the posts to resave the value of this meta field correctly in the database. To update the posts, edit each post, uncheck and check the needed option in the \u201cCheckbox\u201d Meta Field<\/strong> and hit \u201cUpdate<\/strong>.\u201d <\/p><\/div><\/div>\n\n\n\n
To update this meta field, we select the Checkbox Field <\/strong>block in the settings of the form and configure it in this way.<\/p>\n\n\n\n
The Fill Options From <\/strong>is set to \u201cGenerate Dynamically,\u201d the Generator Function <\/strong>is \u201cGet values list from JetEngine field options,\u201d and in the Field Name, <\/strong>we insert the name\/ID of the \u201cCheckbox\u201d Meta Field<\/strong>. This way, the Checkbox Field <\/strong>will generate options from the \u201cCheckbox\u201d Meta Field <\/strong>options. <\/p>\n\n\n\n
Give a name to the field and a label. The rest of the settings are optional. <\/p>\n\n\n\n\"configuring\n\n\n\n
Next, we add the Select Field <\/strong>block that will list categories of the related taxonomy.<\/p>\n\n\n\n
To make the Select Field <\/strong>list taxonomy terms, choose \u201cTerms\u201d in the Fill Options From <\/strong>drop-down and select the needed taxonomy below. <\/p>\n\n\n\n\"configuring\n\n\n\n
It is possible to use Radio<\/strong>, Checkbox<\/strong>, or Select Fields <\/strong>to update the taxonomy.<\/p>\n\n\n\n
Date, Time, and Datetime fields<\/h4>\n\n\n\n
To update the \u201cDate,\u201d \u201cTime,\u201d and \u201cDatetime\u201d Meta Fields<\/strong>, use the Date<\/strong><\/a>, Time<\/strong><\/a>, and Datetime Fields<\/strong><\/a> <\/strong>in JetFormBuilder <\/em>accordingly.<\/p>\n\n\n\n
In our \u201cEvents\u201d post type, we have two \u201cDate\u201d Meta Fields <\/strong>for the start date of the event and the end date of the event.<\/p>\n\n\n\n
Therefore, we add two Date Fields <\/strong>in the settings of the form.<\/p>\n\n\n\n
The most important step is to enable the Is Timestamp <\/strong>toggle in the settings of the Date Field<\/strong>.<\/p>\n\n\n\n\"configuring\n\n\n\n
Also, the \u201cDate\u201d Meta Field <\/strong>should be saved as a timestamp (enable the Save as timestamp <\/strong>toggle in the meta field settings).<\/p>\n\n\n\n\"configuring\n\n\n\n
<\/svg><\/div>
Warning<\/div>
If you did not enable the Save as timestamp<\/strong> toggle before creating posts, enable it and resave the posts to make the value of the \u201cTime\u201d Meta Field<\/strong> update in the database. To resave the posts, enter each post, re-select the value of the \u201cTime\u201d Meta Field<\/strong>, and click \u201cUpdate<\/strong>.\u201d <\/p><\/div><\/div>\n\n\n\n
Mind that if you work with the Datetime Field<\/strong>, the Is Timestamp <\/strong>toggle should also be enabled. In the Time Field<\/strong>, there is no such setting.<\/p>\n\n\n\n
It is also possible to make the available dates in the Date Field <\/strong>start from a certain date, although this setting is optional. To make the available dates in the Date Field <\/strong>start from the current date dynamically, add this string to the Starting from Date<\/strong> field:<\/p>\n\n\n\n
'%CT::CurrentDate|toDate%'<\/code><\/pre>\n\n\n\n
<\/svg><\/div>
Warning<\/div>
Mind copying the brackets too.<\/p><\/div><\/div>\n\n\n\n
To make the Time Field <\/strong>start from the current time, use this macro:<\/p>\n\n\n\n
'%CT::CurrentDate|toTime%'<\/code><\/pre>\n\n\n\n
To make the Datetime Field <\/strong>start from the current date and time, use this macro:<\/p>\n\n\n\n
'%CT::CurrentDate|toDateTime%'<\/code><\/pre>\n\n\n\n
Media field<\/h4>\n\n\n\n
To update the post thumbnail, we will use the Media Field<\/strong><\/a>.<\/p>\n\n\n\n
In the settings of the Media Field<\/strong>, select the needed User Access<\/strong>. Pick any option except the \u201cAny user (incl. Guest)\u201d because guests cannot edit posts or upload files to Media Library. <\/p>\n\n\n\n
Then, enable the Insert attachment<\/strong> toggle. When this option is enabled, the uploaded media file will also be saved to the Media Library. Note that this option works only for logged-in users.<\/p>\n\n\n\n
Next, select the Field Value<\/strong>. Since post thumbnails are stored in the format of ID, we choose the \u201cAttachment ID\u201d value. To update a \u201cMedia\u201d Meta Field<\/strong>, make sure the Value format<\/strong> of the \u201cMedia\u201d Meta Field <\/strong>matches the selected Field Value <\/strong>in the Media Field <\/strong>in the form. <\/p>\n\n\n\n\"configuring\n\n\n\n
For example, to update a \u201cGallery\u201d Meta Field<\/strong> where the Value format <\/strong>is set to \u201cMedia URL,\u201d we would select the \u201cAttachment URL\u201d option in the settings of the Media Field <\/strong>in the form.<\/p>\n\n\n\n\"configuring\n\n\n
<\/svg><\/div>
Things to know<\/div>
The Media Field<\/strong> of JetFormBuilder<\/em> can be used to update both the \u201cMedia\u201d and the \u201cGallery\u201d Meta Fields<\/strong>. <\/p><\/div><\/div>\n\n\n\n
Next, select the Maximum Allowed Files to Upload<\/strong>. To let users update the \u201cGallery\u201d Meta Field, <\/strong>set the number of allowed files to more than one. <\/p>\n\n\n\n
Then, set the Maximum Size in MB<\/strong>, defining the maximum size of each single file uploaded to the current Media Field<\/strong>. <\/p>\n\n\n\n
Finally, select the Allowed MIME Types <\/strong>to let users upload files of only certain formats.<\/p>\n\n\n\n
Repeater field<\/h4>\n\n\n\n
To update the \u201cRepeater\u201d Meta Field, <\/strong>we will use the Repeater Field<\/strong><\/a> block. Inside the Repeater Field<\/strong>, we will place the same field types as the fields inside the \u201cRepeater\u201d Meta Field<\/strong>. <\/p>\n\n\n\n
For example, our \u201cRepeater\u201d Meta Field <\/strong>named \u201cevent-addresses\u201d has only one field \u2014 the \u201cText\u201d field named \u201cevent-address.\u201d<\/p>\n\n\n\n\"repeater\n\n\n\n
Therefore, we place a Text Field <\/strong>block inside the Repeater Field <\/strong>block in the form.<\/p>\n\n\n\n
Then, we copy the name of the \u201cRepeater\u201d Meta Field<\/strong> (\u201cevent-addresses\u201d) and paste it as the Form Field Name <\/strong>of the Repeater Field <\/strong>block; also, we copy the name of the \u201cText\u201d field of the \u201cRepeater\u201d Meta Field <\/strong>(\u201cevent-address\u201d) and give the same name to the Text Field <\/strong>block in the form.<\/p>\n\n\n\n\"populating\n\n\n\n
Insert\/Update post action<\/h3>\n\n\n\n
After adjusting the form fields, navigate to the JetForm <\/strong>tab on the right menu and scroll down to the Post Submit Actions<\/strong> section. Unfold the section and press the \u201cNew Action<\/strong>\u201d button to add a new action. Select the \u201cInsert\/Update Post\u201d <\/strong>action from the list. After that, click the pencil-shaped button to edit it.<\/p>\n\n\n\n\"editing\n\n\n\n
In the Edit Action <\/strong>popup, start by selecting the Post Type<\/strong>, <\/strong>\u201cEvents\u201d in our case. Then, select the needed status of the created posts.<\/p>\n\n\n\n
After that, move to the Fields Map<\/strong> section and map the form fields on the left with the needed post properties on the right side. Start by mapping the post_id<\/strong> field with the \u201cPost ID (will update the post)\u201d property.<\/p>\n\n\n
<\/svg><\/div>
Things to know<\/div>
If you don\u2019t map the post_id<\/strong> field as described above, a new post will be created after submitting the form instead of updating the existing one. <\/p><\/div><\/div>\n\n\n\n\"configuring\n\n\n\n
Then, map the rest of the form fields with the post properties that should be populated. If you map the field with a \u201cPost Meta\u201d property, insert the Name\/ID <\/strong>of the meta field into the input field under the \u201cPost Meta\u201d property.<\/p>\n\n\n\n\"mapping\n\n\n\n
Don\u2019t forget to click the \u201cUpdate<\/strong>\u201d button to save the changes once ready.<\/p>\n\n\n\n
Preset settings<\/h3>\n\n\n\n
In the same JetForm <\/strong>tab, scroll down to Preset Settings <\/strong>and enable them. <\/p>\n\n\n\n
Preset Settings <\/strong>let the fields in the form pre-populate with the existing values in the post. Assuming the post already has all the needed information \u2014 post title, thumbnail, meta fields, etc. <\/p>\n\n\n\n
When Preset Settings <\/strong>are configured, form fields are completed with the data from the post so that the user doesn\u2019t have to fill in all the post fields from scratch but can edit only the necessary information. <\/p>\n\n\n\n
Select \u201cPost\u201d as the Source <\/strong>and \u201cURL Query Variable\u201d in the Get Post ID From <\/strong>drop-down. Specify the Query Variable Name<\/strong>: \u201c_post_id\u201d. <\/p>\n\n\n\n\"configuring\n\n\n\n
Remember that the ID of the post will be located in the URL parameters, which is why we populate it from the URL Query Variable.<\/p>\n\n\n
<\/svg><\/div>
Things to know<\/div>
If the form is to be located on the single post page, replace the \u201cURL Query Variable\u201d option in the Get Post ID From<\/strong> drop-down with the \u201cCurrent Post\u201d option. Then, the data will be pre-set from the current post data. <\/p><\/div><\/div>\n\n\n\n
Next, map all the form fields in the same way as when you previously configured the \u201cInsert\/Update Post\u201d <\/strong>action.<\/p>\n\n\n\n
General messages settings<\/h3>\n\n\n\n
Now, move to the General Messages Settings <\/strong>section and edit the messages appearing once the form is submitted.<\/p>\n\n\n\n\"adjusting\n\n\n\n
Once you are done, publish the form.<\/p>\n\n\n\n
Form adjustment in Elementor<\/h3>\n\n\n\n
Navigate to the WordPress Dashboard <\/strong>and proceed to Elementor > Templates > Saved Templates<\/em><\/strong>. <\/p>\n\n\n\n
Create a new template. We will later assign it to the \u201cEdit Event\u201d Subpage in Profile Builder<\/strong>.<\/p>\n\n\n\n\"creating\n\n\n\n
Place the JetForm <\/strong>widget inside. This widget will display the form. <\/p>\n\n\n\n
Choose the created form and proceed to edit the rest of the settings. To modify the fields’ appearance, navigate to the Style <\/strong>tab and adjust the appearance of form fields.<\/p>\n\n\n\n\"adjusting\n\n\n\n
Look through our related video tutorial<\/a> for additional guidance.<\/p>\n\n\n\n
Once done, save the changes, navigate to WordPress Dashboard > JetEngine > Profile Builder > Account Page,<\/em> <\/strong>and assign the created template to the subpage.<\/p>\n\n\n\n\"assigning\n<\/div><\/div>\n\n\n\n
Create the Form in JetEngine Forms (Legacy)<\/h2>\n\n\n\n
\n
Enable Forms (Legacy) module<\/h3>\n\n\n\n
Proceed to WordPress Dashboard > JetEngine > Forms<\/em> <\/strong>to create a new form.<\/p>\n\n\n\n
JetEngine form fields setup<\/h3>\n\n\n\n
Hidden<\/h4>\n\n\n\n
Initially, add a Hidden <\/strong>field. Select \u201cURL Query Variable\u201d as the Field Value<\/strong>. In the Query variable key <\/strong>field, enter \u201c_post_id\u201d.<\/p>\n\n\n\n\n\n\n\n
The Hidden <\/strong>field will retrieve the ID of the edited post from the URL parameters.<\/p>\n\n\n\n\"passing\n\n\n\n
In our case, \u201c_post_id\u201d is the name of the parameter, and \u201c8013\u201d is the parameter\u2019s value. \u201c8013\u201d is the ID of the needed post. The Hidden <\/strong>field will retrieve \u201c8013\u201d and use it as the ID of the post that should be edited.<\/p>\n\n\n\n
If you plan to place the form on the Single Post page, replace the \u201cURL Query Variable\u201d Field Value <\/strong>with the \u201cCurrent Post ID\u201d option.<\/p>\n\n\n\n\n\n\n\n
In this case, the Hidden <\/strong>field will retrieve the ID of the post dynamically from the current page.<\/p>\n\n\n\n
Text, WYSIWYG, and Textarea<\/h4>\n\n\n\n
To edit the \u201cText,\u201d \u201cTextarea,\u201d and \u201cWYSIWYG\u201d Meta Fields<\/strong>, use the same field types in the JetEngine <\/em>form.<\/p>\n\n\n\n
We will use the \u201cText\u201d field to edit the title of the post and the \u201cWYSIWYG\u201d field to edit the event description, which is stored in a meta field of \u201cWYSIWYG\u201d type.<\/p>\n\n\n\n\"jetengine\n\n\n\n
Give a name and a label to the fields. Other field settings are optional.<\/p>\n\n\n
<\/svg><\/div>
Things to know<\/div>
The Name<\/strong> field should contain a value with only lowercase letters in Latin, no spaces. If you want to split words, this can be done by using the \u201c-\u201d and \u201c_\u201d characters. Wrong formatted field names can result in form errors. <\/p><\/div><\/div>\n\n\n\n\"formatting\n\n\n\n
Checkbox, Radio, and Select<\/h4>\n\n\n\n
To edit multi-optional meta fields like \u201cCheckbox,\u201d \u201cRadio,\u201d and \u201cSelect,\u201d use the corresponding field types in JetEngine <\/em>forms.<\/p>\n\n\n\n
For example, our \u201cEvents\u201d post type has a \u201cCheckbox\u201d Meta Field<\/strong> named \u201cactivities\u201d.<\/p>\n\n\n\n\"enabling\n\n\n
<\/svg><\/div>
Warning<\/div>
Make sure to enable the Save as array<\/strong> toggle in the \u201cCheckbox\u201d Meta Field<\/strong> settings. If you didn\u2019t do it previously, enable it and update all the posts to resave the value of this meta field correctly in the database. To update the posts, edit each post, uncheck and check the needed option in the \u201cCheckbox\u201d Meta Field<\/strong>, and hit \u201cUpdate<\/strong>.\u201d <\/p><\/div><\/div>\n\n\n\n
To update this meta field, we select to add a \u201cCheckboxes\u201d field.<\/p>\n\n\n\n
The Fill Options From <\/strong>is set to \u201cGenerate Dynamically,\u201d the Generator Function <\/strong>is \u201cGet values list from JetEngine field options,\u201d and in the Field Name<\/strong>, <\/strong>we insert the name\/ID of the \u201cCheckbox\u201d Meta Field<\/strong>. This way, the field will generate options from the \u201cCheckbox\u201d Meta Field <\/strong>options. <\/p>\n\n\n\n
Give a name to the field and a label. The rest of the settings are optional. <\/p>\n\n\n\n\"configuring\n\n\n\n
Next, we add a Select <\/strong>field that will list categories of the related taxonomy.<\/p>\n\n\n\n
To make the Select <\/strong>field list taxonomy terms, choose \u201cTerms\u201d in the Fill Options From <\/strong>drop-down and select the needed Taxonomy <\/strong>below. <\/p>\n\n\n\n\"configuring\n\n\n\n
It is possible to use Radio<\/strong>, Checkbox<\/strong>, or Select <\/strong>fields to update the taxonomy.<\/p>\n\n\n\n
Date, Time, and Datetime<\/h4>\n\n\n\n
To update the \u201cDate,\u201d \u201cTime,\u201d and \u201cDatetime\u201d Meta Fields<\/strong>, use the Date<\/strong>, Time<\/strong>, and Datetime <\/strong>fields in JetEngine <\/em>forms accordingly. <\/p>\n\n\n\n
In our \u201cEvents\u201d post type, we have two \u201cDate\u201d Meta Fields <\/strong>for the start date of the event and the end date of the event.<\/p>\n\n\n\n
Therefore, we add two Date <\/strong>fields in the settings of the form.<\/p>\n\n\n\n
The most important step is to enable the Is Timestamp <\/strong>toggle in the settings of the Date <\/strong>field.<\/p>\n\n\n\n\"configuring\n\n\n\n
Also, the \u201cDate\u201d Meta Field <\/strong>should be saved as a timestamp.<\/p>\n\n\n\n\"configuring\n\n\n\n
<\/svg><\/div>
Warning<\/div>
If you did not enable the Save as timestamp<\/strong> toggle before creating posts, enable it and resave the posts to make the value of the \u201cDate\u201d Meta Field<\/strong> update in the database. To resave the posts, enter each post, re-select the value of the \u201cDate\u201d Meta Field<\/strong>, and click \u201cUpdate<\/strong>.\u201d <\/p><\/div><\/div>\n\n\n\n
Mind that if you work with the Datetime <\/strong>field, the Is Timestamp <\/strong>toggle should also be enabled. In the Time <\/strong>field, there is no such setting.<\/p>\n\n\n\n
Media<\/h4>\n\n\n\n
To update the post thumbnail, we will use the Media <\/strong>field.<\/p>\n\n\n\n
In the settings of the Media <\/strong>field, select the needed User access<\/strong>. Select any option except the \u201cAny user (incl. Guest)\u201d because guests cannot edit posts or upload files to the Media Library.\u00a0<\/p>\n\n\n\n
Then, enable the Insert attachment<\/strong> toggle. When this option is enabled, the uploaded media file will also be saved to the Media Library. Note that this option works only for logged-in users.<\/p>\n\n\n\n
Next, select the Field value<\/strong>. Since post thumbnails are stored in the ID format, we choose the \u201cAttachment ID\u201d value. <\/p>\n\n\n\n\"configuring\n\n\n\n
To update a \u201cMedia\u201d Meta Field<\/strong>, make sure the Value format<\/strong> of the \u201cMedia\u201d Meta Field <\/strong>matches the selected Field Value <\/strong>in the Media field <\/strong>in the form. <\/p>\n\n\n\n
For example, to update a \u201cGallery\u201d Meta Field<\/strong> where the Value format <\/strong>is set to \u201cMedia URL,\u201d we would select the \u201cAttachment URL\u201d option in the settings of the Media field <\/strong>in the form.<\/p>\n\n\n\n\"configuring\n\n\n\n
<\/svg><\/div>
Things to know<\/div>
The Media Field<\/strong> of JetFormBuilder<\/em> can be used to update both the \u201cMedia\u201d and the \u201cGallery\u201d Meta Fields<\/strong>.<\/p><\/div><\/div>\n\n\n\n
Next, select the Maximum Allowed Files to Upload<\/strong>. To allow users to update the \u201cGallery\u201d Meta Field<\/strong>, <\/strong>set the number of allowed files to more than one.\u00a0<\/p>\n\n\n\n
Then, set the Maximum Size in MB<\/strong>, defining the maximum size of each single file uploaded to the current Media field<\/strong>. <\/p>\n\n\n\n
Finally, select the Allowed MIME Types <\/strong>to let users upload files of only certain formats.<\/p>\n\n\n\n
Repeater<\/h4>\n\n\n\n
To update the \u201cRepeater\u201d Meta Field<\/strong>, <\/strong>we will use the Repeatable Fields Group Start <\/strong>and Repeatable Fields Group End <\/strong>fields. Between them, we will place the same field types as the fields inside the \u201cRepeater\u201d Meta Field<\/strong>. <\/p>\n\n\n\n
For example, our \u201cRepeater\u201d Meta Field <\/strong>named \u201cevent-addresses\u201d has only one field \u2014 the Text<\/strong> field named \u201cevent-address.\u201d<\/p>\n\n\n\n\"repeater\n\n\n\n
Therefore, we place a Text field <\/strong>between the Repeatable Fields Group Start <\/strong>and Repeatable Fields Group End <\/strong>fields in the form.<\/p>\n\n\n\n\"populating\n\n\n\n
Then, we copy the name of the \u201cRepeater\u201d Meta Field<\/strong> (\u201cevent-addresses\u201d) and paste it as the Repeatable Fields Group Start <\/strong>name; also, we copy the name of the Text field <\/strong>of the Repeater meta field <\/strong>(\u201cevent-address\u201d) and give the same name to the Text field <\/strong>in the form.<\/p>\n\n\n\n
Insert\/Update post-submit action<\/h3>\n\n\n\n
After you finish the form fields setup, scroll down to the Post-submit Actions \/ Notifications Settings<\/strong> section. Click \u201cAdd Notification<\/strong>\u201d to add new post-submit action. Select the \u201cInsert\/Update Post\u201d <\/strong>action type. <\/p>\n\n\n\n
Start by selecting the Post Type<\/strong>; we have picked \u201cEvents.\u201d Then, select the needed status of the created posts.<\/p>\n\n\n\n
After that, move to the Fields Map<\/strong> section and map the form fields on the left with the needed post properties on the right side. Start by mapping the post_id<\/strong> field with the \u201cPost ID (will update the post)\u201d property.<\/p>\n\n\n\n
<\/svg><\/div>
Things to know<\/div>
If you don\u2019t map the post_id<\/strong> field as described above, a new post will be created after submitting the form instead of updating the existing one.<\/p><\/div><\/div>\n\n\n\n\"configuring\n\n\n\n
Then, map the rest of the form fields with the post properties that should be populated. If you map the field with a \u201cPost Meta\u201d property, insert the Name\/ID <\/strong>of the meta field into the input field under the \u201cPost Meta\u201d property.<\/p>\n\n\n\n\"mapping\n\n\n\n
Don\u2019t forget to click the \u201cApply Changes<\/strong>\u201d button to save the changes once you are done.<\/p>\n\n\n\n
Notifications settings<\/h4>\n\n\n\n
Now, move to the Messages Settings <\/strong>section and edit the messages appearing once the form is submitted.<\/p>\n\n\n\n\"adjusting\n\n\n\n
Pre-set form settings<\/h3>\n\n\n\n
Scroll up to the Pre-set form field values <\/strong>checkbox <\/strong>and enable it. Preset settings <\/strong>let the fields in the form pre-populate with the existing values in the post. Assuming the post already has all the needed information \u2014 post title, thumbnail, meta fields, etc.\u00a0<\/p>\n\n\n\n
When Preset settings <\/strong>are configured, form fields are populated with the data from the post so that the user doesn\u2019t have to fill in all the post fields from scratch but can edit only the necessary information.<\/p>\n\n\n\n
Select \u201cPost\u201d as the Source <\/strong>and \u201cURL Query Variable\u201d in the Get post ID from <\/strong>drop-down. <\/p>\n\n\n\n
Specify the Query variable name<\/strong>: \u201c_post_id.\u201d Remember the post ID will be located in the URL parameters, which is why we populate it from the URL Query Variable.<\/p>\n\n\n\n\"configuring\n\n\n\n
<\/svg><\/div>
Things to know<\/div>
If the form is to be located on the single post page, replace the \u201cURL Query Variable\u201d option in the Get Post ID From<\/strong> drop-down with the \u201cCurrent Post\u201d option. Then, the data will be pre-set from the current post data. <\/p><\/div><\/div>\n\n\n\n
Next, map all the form fields in the same way as when you previously configured the \u201cInsert\/Update Post\u201d <\/strong>action.<\/p>\n\n\n\n
Form adjustment<\/h3>\n\n\n\n
Navigate to the WordPress Dashboard <\/strong>and proceed to Elementor > Templates > Saved Templates<\/em><\/strong>. <\/p>\n\n\n\n
Create a new template. We will later assign it to the \u201cEdit Event\u201d Subpage in Profile Builder<\/strong>.<\/p>\n\n\n\n\"creating\n\n\n\n
Place the Form <\/strong>widget inside. This widget will display the form. <\/p>\n\n\n\n
Choose the created form and proceed to edit the rest of the settings. To modify the fields’ appearance, navigate to the Style<\/strong> tab and adjust the appearance of form fields.<\/p>\n\n\n\n\"adjusting\n\n\n\n
Once done, save the changes, navigate to WordPress Dashboard > JetEngine > Profile Builder > Account Page,<\/em> <\/strong>and assign the created template to the subpage.<\/p>\n\n\n\n\"assigning\n<\/div><\/div>\n\n\n\n
Check in Action<\/h2>\n\n\n\n
\n
It is time to check the form in action. Find the page where the Listing Grid <\/strong>displaying the posts is placed and click the \u201cEdit Post<\/strong>\u201d button to edit one of the posts. <\/p>\n\n\n\n
Thanks to the Preset Settings<\/strong>, the form fields are now populated with the data saved inside the post. Adjust the fields and submit the form to check it in action.<\/p>\n\n\n\n\"testing\n<\/div><\/div>\n\n\n\n
That\u2019s it; now you know how to update posts via front-end form in Elementor with the help of the JetFormBuilder <\/em>and JetEngine <\/em>plugins for your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"
Follow this step-by-step guide to learn how to update information inside Posts right from the front end.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[402],"yoast_head":"\nHow to Update Posts from Front End \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Update Posts from Front End \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-19T12:55:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/creating-new-subpage-for-posts-editing-form-in-profile-builder-of-jetengine_2x.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/\",\"name\":\"How to Update Posts from Front End \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-01-21T08:52:38+00:00\",\"dateModified\":\"2024-07-19T12:55:37+00:00\",\"description\":\"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Update Posts via Front End Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Update Posts from Front End \u2014 JetEngine | Crocoblock","description":"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/","og_locale":"en_US","og_type":"article","og_title":"How to Update Posts from Front End \u2014 JetEngine | Crocoblock","og_description":"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/","og_site_name":"Help Center","article_modified_time":"2024-07-19T12:55:37+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/creating-new-subpage-for-posts-editing-form-in-profile-builder-of-jetengine_2x.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/","name":"How to Update Posts from Front End \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-01-21T08:52:38+00:00","dateModified":"2024-07-19T12:55:37+00:00","description":"Explore how to use the frontend submission functionality available within the JetFormBuilder and JetEngine WordPress plugins. Study the instruction on creating a form and its adjustment on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-update-posts-via-front-end-form-submission-option\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Update Posts via Front End Form"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/18014"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=18014"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=18014"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=18014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}