To display Google Maps, Leaflet Maps, or Mapbox via the Map block field of the JetFormBuilder plugin, install and activate the JetEngineplugin (at least 3.0.3 or higher versions) and enable its Map Listing Module.This tutorial explains how to display Google Maps.
Fill in the appropriate fields of the Account Information and Payment Information Verification windows.
Navigate to the APIs & Services tab of Google Cloud Platform Console and press the “Create Project” button. Scroll down, select the Maps Javascript API (and other necessary services), and press the “Enable” button.
Navigate to the Keys & Credentials tab and press the “SHOW KEY” button to get the API key.
Copy the data from the Your API Key field.
JetEngine Settings
Navigate to the WordPress Dashboard. Open the JetEngine > JetEngine > Maps Settings tab. Paste the copied API Key into the API Key field.
Map Field Usage
Navigate to the JetFormBuilder tab and create a form.
Open the form and add the necessary fields.
Find the MapField block and drag-n-drop it onto the form. Unroll the VALUE FORMAT settings and type/paste the coordinates that define the center of the map.
Unroll the ZOOM settings and select the necessary zoom option.
Zoom settings determine how much the map will zoom in after the user specifies a location (via coordinates, address, or point on the map), which is then used as the center of the map. The zoom settings range from “1” to “18,” with a value of “1” providing the least amount of zoom and “18” showing the most area in the map field.
Unroll the Map Settings and toggle the necessary map size.
Add the form to a post or a page to see how the map looks on the front end.
That’s all about setting map zoom by a specific area.
This tutorial covers the creation of two forms that use calculations to instantly change the numbers according to the selected options in the JetFormBuilder form.
Creating a Form with the Calculation of Ingredients for a Recipe
Create a CCT and the Repeater custom field
Let us clarify first which setup is needed. We have the “Recipes” post type, in which we created the Repeater meta field. The Repeater meta field has two text fields: one for the ingredient name and the other for its size.
To learn how to create a Custom Post Type, proceed to this tutorial.
To discover more about the Repeater custom meta field, proceed to this article.
Fill in the Repeater field in posts
Next, we filled in this Repeater field in posts of the “Recipes” post type with the ingredient names and sizes.
Configure a form
Go to the JetFormBuilder tab and click the “Add New” button or press to edit the existing form.
In the form, we added the Select Field to create the selection of portions.
To add options, select the “Manual Input” option in the Fill options from field and click the “Manage Items” button. We added five portions as options. You may add as many options as needed.
Next, we added the Repeater Field to the form. Make sure to insert the exact name of the Repeater Field in the form as named the Repeater meta field in the post type. When the names are the same, the preset will successfully pull the current post’s Repeater data.
The Default Value of the Repeater Field should be pulled from the current post so the options are displayed in the form dynamically on each post.
Next, we added the fields into the Repeater Field. We added one Text Field for the size and another for the ingredient title. Make sure to name these fields precisely as they are named in the post-type Repeater meta field. These fields are needed only to pull the values used in the Calculated Field. Eventually, these two fields can be hidden since all data will be inserted into the Calculated Field.
To hide these Text Fields, we added custom classes to both of them. The “size-hidden-field” class is added to the “size” Text Field of the Repeater Field, and the “ingredient-title-hidden” custom class is added to the second Text Field.
Let us proceed with the Calculated Field in the Repeater Field. We switched the Value Type to “as String” so the text values from the Repeater meta field can be processed, as well as the calculations with the “size” Text Field and “portion” Select Field.
The formula is:
%ingredient-title%-' + ' ' +'%portions%'*'%size%'
The macros are wrapped in single quotation marks per the requirements of the Calculated Field and string values in it. And ‘%portions%’*’%size%’ multiplies the number chosen in the Select Field by the size of the ingredient saved in the post-type Repeater meta field.
This is all with the form setup. To save the changes, hit the “Publish/Update” button.
The last detail is to remove unneeded buttons from the form’s Repeater Field since the user should not add any data but only see it, and the repeater’s Text Fields since their values are displayed in the Calculated Field. To remove them, some CSS code needs to be used.
Add the CSS code
NOTE
Before proceeding with the tutorial′s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the How to Backup and Restore a WordPress Website with a Plugin article.
In the Appearance > Customize > Additional CSS tab, there is an area in which CSS snippets can be added.
Therefore, we added the following code. If you added other custom classes to the Text Fields in the form that aren’t mentioned in this tutorial, ensure to write those classes into the CSS code accordingly.
After adding the CSS, we hit the “Publish” button to save the changes.
Add the PHP snippet to enable preset for guest users
By default, the preset values in the form fields are visible only for the logged-in users, which means the ingredients in the form on the front end will not be displayed for the guest users. If you want to show the form with the ingredients on the front end for all users, the following snippet needs to be added to the Code Snippets plugin or the functions.php file of your current theme. Ensure to use the child theme to keep the custom code after the theme update.
After saving the snippet, the form will have the preset values available for all users.
Check the results on the front end
To output the form on the front end, we added the JetForm widget to the Single Post template of the Recipe post type, selected the recently created form from the Choose Form drop-down, and clicked the “Update” button to save the changes.
The next example of the form is more complex since it has dynamic values, conditional blocks, and ternary operators in the Calculated Fields to create a Cat-Human and Human-Cat age calculator.
At the end of the tutorial, you can download this form and check it on your website. For now, let’s go through the creation process.
Firstly, we added the Select Field, which will determine the direction of how the age is calculated from cat to human age or from human to cat age.
Therefore, we manually added those options to the Select Field.
Set up the first block of columns
Next, we added three columns to the form. Let us see what each column represents.
To the first column, we added the Calculated Field with the “as String” Value type. The Calculated Field has such a ternary operator:
In the second column, we have the Conditional Block, which consists of several fields and depends on the options of the fields in the third column.
The idea is that the field input for the year value needs to appear in the second column if the respective “Year and Month” option is selected in the Select Field in the third column. In this way, we can create one field for entering a year in the second column and another field for entering a month value in the third column.
For a better understanding, here is the result on the front end of this part of the form. If the “Year and Month” option is selected in the third column, the input field will appear in the second column for entering the year value. The Select Field with “Year,” “Month,” and “Year and Month” is also added to the second column.
To create such a scenario, we added the following rule to the Conditional Block by clicking the icon highlighted in the screenshot below.
The “Show if” Function is based on the “Format to input the number,” which is the Select Field from the third column in which the user can select which value he wants to enter: the age as a month, as a year, or both year and month. The value for the “Year and Month” option is “both,” so we entered it into the Value to compare field.
The first field in the Conditional Block is the Select Field named “selectodin.” This Select Field lets users pick year, month, or year and month options like in the Select Field in the third column. This second column will be hidden once the user selects “Year” or “Month” since each option requires only one input field, which will be provided in the third column.
These are the options added to the Select Field in the second column.
The next field in the second column is the Number Field for inputting the year value.
And the Calculated Field in which the “Year” text is inserted to identify that the year value should be entered into the Number Field on the left side.
These are not all settings for these two fields. The other settings depend on the fields from the third column that have not been created yet.
So, these are the fields in the third column. Let us also check the settings of each of them.
The first is the Select Field named “selectdva.”
The field has the “Year,” “Month,” and “Year and Month” options, which let users select the input format of the age, whether it is in years, months, or years and months.
This Select Field also applies the following dynamic value based on the Select Field from the second column. To set it, click the “+ Add Dynamic Value” button.
In the Edit Dynamic Value pop-up, we set such settings.
In the Value to set field, we entered the Select Field name from the second column wrapped in single quotation marks and percentage signs (‘%selectodin%’). This is to get the value from the field dynamically.
The Apply type is set to “Always.”
In the Field drop-down, we picked the label of the same Select Field from the second column, which was entered in the Value to set field.
The Operator is “Not Equal,” and the Value to compare is “both.”
This dynamic value means that the “selectdva” Select Field in the third column will automatically get a value selected in the “selectodin” field in the second column.
Let us see the result of this dynamic value on the front end to understand better the settings explained previously.
When we pick the “Year and Month” option in the right select field, the same select field automatically appears on the left side, and the input number field for the year value is displayed.
We selected the “Year” option in the left select field.
And the selected value is automatically transferred to the selected field on the right, and the second column with its fields is hidden.
Let us proceed with further settings in the form. The next field added to the third column is the Number Field to accept a year or month value. We also added a “1” Min value to the field to accept only positive numbers starting from one.
The field on the right from the Number Field is the Calculated Field, which shows the unit that is entered into the Number Field. This Calculated Field is based on the Select Field in which “Year,” “Month,” or “Year and Month” can be selected to display a relevant option.
Its formula is:
'%selectdva%' === 'year' ? 'Year' : 'Months'
It means showing the “Year” text if the “Year” option is selected in the “selectdva” Select Field; otherwise, it displays the “Months” text.
The value type is set to “as String.”
The last field of this third column is the “converted-years” Calculated Field. It has the following formula:
As this field is only needed for calculating in year format, this Calculated Field is set to be Hidden. However, its value will be used in other calculations later in the form.
As the setup of fields in the third column is completed, we can return to the fields in the second column and apply the needed dynamic values.
We added the dynamic value to the Select Field in the second column by clicking the “+Add dynamic value” button.
Here are the settings for the Dynamic Value in detail. This dynamic value inserts the value from the “selectdva” Select Field in the third column into this Select Field in the second column.
So, we entered the Select Field name wrapped in single quotation marks and percentage signs (‘%selectdwa%’) into the Value to set field, and the Apply type is set to “Always.”
In the Field drop-down, we picked the label of the same Select Field, which was entered into the Value to set field. The Operator is “Equal,” and the Value to compare is “both.”
On the front end, it results in the same value in both select fields.
Next, to the Number Field in the second column, we also added the Dynamic Value.
The Edit Dynamic Value pop-up has these settings.
The Value to set is “0”, and the Apply type is “Always.”
The Field has the Select Field label from the third column. It has the same label as the field in the second column, but you can use a unique label to identify the needed field easier.
The Operator is “Equal,” and the Value to compare is “both,” which is the value of the “Year and Month” option.
The idea is that this Number Field must have “0” as a value if the Select Field in the third column has “Year” or “Month” selected.
Setting up the second block of columns
Now, we can get to the second set of columns and fields in them. These three columns are used for calculating and displaying the results: the cat or human age.
In this set of columns, the first one has these fields.
The “label-dva” Calculated Field is used to show the selected direction’s label. The formula is:
It is based on the very first Select Field in the form in which users select how the age needs to be calculated: from cat to human or from human to cat.
The second Calculated Field in this column calculates the resulting age in years.
We used a formula for calculating the cat-to-human and human-to-cat years found on the Internet and only added our meta field names:
We also switched on the Hidden toggle since this field is only needed for calculating, and its results will be displayed via other fields.
Moving on to the next column, we have the Conditional Block that will show the age in years. The idea is that this block will be displayed if the “Year and Month” option is selected in the field in the third column, so the field in the second column shows the years, and the field in the third column shows the months. By clicking on the randomize icon, you can add the needed condition. But we will add it later since the field on which the condition is based will be created in the next column.
This Conditional Block has the following fields inside.
The first one is the “selectodin-result” Select Field with the Dynamic Value, which also will be added later.
The options of this field can be configured by clicking on the “Manage Items” button.
These are the options of the Select Field.
And the next field in this column is the Calculated Field with this formula:
Math.trunc(%result-years%)
The “Math.trunc” returns the integer part of a number so that an integer can display the year value. We also set the Value Type to “as Number” and kept the Hidden switcher disabled to make the calculated value visible on the front end.
Let us move on to the fields in the next column.
In the last column of the form, we have the “selectdva-result” Select Field with the Dynamic Value.
The Dynamic Value is based on the “selectodin-result” Select Field from the previous column. This is needed to automatically add a value from the “selectodin-result” which was picked into the current ‘selectdva-result’ Select Field.
This is why we added ‘%selectdva-result%’ into the Value To Set field to pull its value dynamically.
The Apply type is “Always.”
As the Field, we also picked the “selectodin-result” Select Field from the previous column. Again, you can write a clearer label of the field to identify it more easily.
The Operator is “Not Equal.”
Into the Value to Compare, we entered the “both” value from the “selectodin-result” field options.
And the following field is the Calculated Field with the formula:
The “Math.max” will return the largest value between 0 and the number calculated in the formula.
We set the Value type to “as Number,” and kept the Hidden switcher disabled to show the result of this Calculated Field on the front end.
As the fields in this column are completed, we can return to the fields in the previous column to set up the needed conditions and dynamic values.
Click on the Conditional Block randomizeicon to add the condition.
The condition is “Show if,” where the Field is the “selectdva-result” from the third column, which has the “Format to output the number” label.
The Operator is “Equal,” and the Value to compare is “both.”
In this way, this column will appear if the “Year and Month” option is selected in the “selectdva-result” Select Field.
Next, we need to add the Dynamic Value to the “selectodin-result” Select Field.
The Dynamic Value is set up the following way.
In the Value to set field, we entered the Select Field name wrapped in single quotation marks and percentage signs (‘%selectdva-result%’). This is to get the value from the field dynamically.
The Apply type is “Always.”
We inserted the same “selectdva-result” field in the Field with the “Format to output the number” label. The Operator is “Equal,” and the Value to Compare is “both” since it is a value of the “Year and Month” option.
Lastly, we can add the label identifiers of which value is displayed in the results.
We added two columns to the Conditional Block in the second column.
In these columns, we transferred the Calculated Field by dragging it via the dots icon.
And in the second column, we dragged the duplicated Calculated Field with the ‘label-one-input’ label, which displays the label of the field input for a year.
And this is how we created a field for a year in the column that shows the year result.
In the same way, we added two columns to the third column, which displays the result. Then, duplicate the Calculated Field and insert it into the third column.
Do not forget to change the field name (“selectdva-result,” in our case) so the formula will show the labels based on that field.
The result of duplicating and dragging the fields is that the results now have the labels for the calculated results.
This concerns the form setup for calculating the age of Cat to Human and Human to Cat.
Let us check the result on the front end
Now we can add the form to the needed page using the JetForm widget or Form block and save the page by hitting the “Update” button. More details can be found in the Adding the Form Block tutorial.
On the front end, we can see the form.
Here, you can download the form and check it on your WordPress website.
For that, proceed to the JetFormBuilder > Forms tab and press the “Import Form” button. Then, push the “Choose Files” button, upload the form, hit the “Start Import” button, and you’ll move to the form editing page.
That’s all. In the first half of the tutorial, we described how to create a form for the recipe ingredients calculation, and in the second half – how to set a form for the Cat into Human age calculation and vice verse. It’s possible with the JetFormBuilder WordPress plugin.
Open the existing form in the WordPress Dashboard > JetFormBuilder directory. Or, press the “Add New” button to build a new form.
If you haven’t added a Checkbox Field beforehand, you can find it in the block inserter or by typing the “/” symbol right in the form.
Once added, adjust the Checkbox Field settings located on the right side of the screen.
Now move to the block in the form itself. The “Manual Input” source is set as default for the field. You can change it if needed.
Press the “Manage Input” button to open additional settings.
Here, add desired items by completing the Label and Value fields. You can also fill in the Calculate field if needed.
Click the “Add New Option” to create an additional field option whenever needed.
After building the desired options, push the “Update” button.
Migrating from Checkbox Field
Now, you can upgrade your Checkbox Field by clicking on it and the first icon in the toolbar above the field.
Here, you can pick the block into which you want to transform the Checkbox Field. Among the options are default Columns, Text Field, Conditional Block, Radio Field, Select Field, or Group.
Why You Need a WordPress Front-End Post Submission Form
Allowing users to submit posts right from the front end makes the work with the WordPress website even more efficient than it was before. Engage users to add more and more exciting posts.
Using this feature, you can allow users to submit their products and ads to the marketplace website, enter a competition, submit art gallery work, and, certainly, post guest articles on your blog.
Create a WordPress form and select needed post-submit actions to freshen your website. Use the JetFormBuilder plugin to simplify the process.
Top WordPress Front-End Post Submission Form Features
Create two forms, one for posts submitting and the other for their editing;
Add the only fields you need and connect them with the created meta fields, terms, and other vital post elements;
Style up the form to meet your requirements;
Set the post-submit actions to update the post, redirect to the page, and send an email about the form submission right to the admin’s email;
Use Conditional Logic to show or hide certain fields under the set conditions;
Adjust JetFormBuilder presets so that users do not fill in fields that they have already completed before.
How to Create a WordPress Custom Front-End Form
Before we start, make sure you have the following plugins installed and activated:
JetFormBuilder — build a form, edit the post submit actions, and add a captcha if needed;
JetEngine — create a CPT, add custom meta fields and taxonomies;
JetEngine Profile Builder module — make an account page, add posts, and edit post templates;
Elementor — add the created form into the editor to finalize the customization, style up the page, and publish it right away. Or use Gutenberg block editor, as it is fully compatible with the JetFormBuilder plugin; it’s up to you.
Create custom post type
Proceed to the WordPress Dashboard > JetEngine > Post Types. Add a new custom post type by pushing the “Add New” button, or open the one that you have created earlier.
Once the custom post type editor is opened and General Settings are adjusted, scroll down to the Meta Fields tab.
As your form will include fields for completing, some of them will repeat the CPT meta fields you edit here. That’s why you need to set up the needed fields.
Let’s take a look at the example fields.
NOTE
Please ensure that the needed Supports are enabled in the Advanced Settings tab. We especially need Title, Excerpt, Thumbnail (Featured Image), and Custom Fields in the described case.
After implementing the changes, press the “Add/Update Post Type” button.
Add taxonomies to custom post type
Now let’s build some categories for the CPT posts. Move to the WordPress Dashboard > JetEngine > Taxonomies. Open the taxonomy you have already created, or click on the “Add New” button to build a new one.
Take into consideration that the taxonomies you build should be connected with the previously mentioned post type. To do so, choose the needed option in the Post Type field.
Don’t forget to press the “Add/Update Taxonomy” button after all the settings have been adjusted.
Create profile page with JetEngine Profile Builder
The next step is enabling the Profile Builder. Navigate to the WordPress Dashboard > JetEngine > JetEngine, toggle the Profile Builder and press the “Save” button. Now the feature is activated.
Set the Profile Builder according to your needs, or import the premade configurations. Head to the Skins Manager and unfold the Presets. They add pages and templates automatically.
Select the desired preset and hit the “Import” button.
User profile with editable content — allows registered users to publish and edit forms. We import this preset as we work with the posts only;
Editable user settings page for user profile — adds user settings subpage to Profile Builder.
So we select the first option. Move to the WordPress Dashboard > Pages to check if the new page was created. The “Account” page is now displayed here.
Besides, you can check the WordPress Dashboard > Templates > Saved Templates. Here, if the Preset was imported, the new templates would appear.
Also, you can see one added listing if you proceed to the WordPress Dashboard > JetEngine > Listings.
Go to WordPress Dashboard > JetEngine > Profile Builder to adjust the settings.
Check that the “Account” option is selected as the Account Page; enable the Users page, and Single user page if desired.
You can also adjust the following fields, but it’s unnecessary in the described case.
Open the Account Page tab.
Work on the initial fields and add some subpages to the account page. Check the following video to learn how to do it without any effort.
Take a look at the example subpage settings. We fill in a Title and Slug.
NOTE
The Slug should contain no capital letters, spaces, or special symbols. Use only Latin letters and “-”, “_” symbols to separate the words. Stick to this step as it is necessary for the proper saving of information in the database.
Select a Template by typing its name in the particular field and move to the following Hide from menu toggle. It should be left disabled if you want to display the current subpage as a menu item in the Profile Menu widget.
Moreover, you can select user roles for which the page will be available in the Available for the user role field.
After building all the required subpages, push the “Save” button.
Add new form for submitting posts
Go to WordPress Dashboard > JetFormBuilder > Add New.
Give a title to the form and delete the default fields, except for the Hiddenone.
Make sure that its Form field name is set to ‘post_id’ in the General tab and the “Current Post ID” is selected as a Field Value in the Field Settings; we’ll need it later.
Hit the plus-shaped button to add a new block. Add all the needed fields to the form.
Firstly, we add a Heading Field. This one will serve as a section title.
We begin the section with a couple of Text Fields. We suggest you fill in the Form field name with the same meta field values you have added to the CPT meta fields. This way, you will not get confused when connecting fields.
NOTE
Mind enabling the Is Required toggle for the fields you want to make obligatory.
The following fields we place in the form are Select Fields. We choose the “Terms” option in the Fill Options From field and define the needed Taxonomy as a source.
Thus the user will select between categories and attach a post right to the needed one.
We add one more Heading Field and add one more Select Field. This time we set the “Manual Input” source in the Fill Options From field.
Fill in the Label and Value fields for all the options you want to add in the selector.
Hit the “Update” button to save the result.
Another feature we will use in the current form is the Conditional Block. We continue building the form with the Text Field displayed under the set conditions.
Let’s press the arrow-shaped button to proceed to the editor and hide the block when the “Live online” option is selected.
In the first, Type field select the “Hide the field if…” option and move to the Field. Here you should choose the compared field.
Pick the “Contain text” Operator and define the needed Meta Field Name as the Value to Compare.
To find out more info about the conditional logic in JetFormBuilder form fields, watch our video with the detailed use case.
Mind pushing the “Update” button after implementing the changes.
We add two more Text Fields and move to the next section. It will be separated from the previous one by another Heading Field.
Place the Radio Field in the form editor. In the Fill Options From drop-down menu, we choose the “Manual Input” and push the “Manage Items” button.
As the new window is displayed, press the “Add New Option” button and fill in the Label and Value fields.
For example, we will adjust two such fields; one is for the “price,” and the other is for the “free” option. However, you can add other options you need as your form may differ from the one described in the tutorial.
Mind clicking the “Update” button after making the changes.
The following field we add is another Conditional Block with the Text Field inside it.
The main goal now is to hide the Text Field we have added once the “Free” option in the previous field is picked. So select the Conditional Block and click on the arrows-shaped icon to open the settings window.
Push the “New Condition” button to work on the first condition. Select the “Hide this field if…” as a Type and select the field you want to hide in the Field drop-down list.
Also, set the “Contain text” option in the Operator field and define the Value to Compare.
One more condition we need to set is displaying the following field if the “price” option is picked. So, push the “New Condition” button one more time.
Choose the “Show this field if…” Type and select the needed option as the Field.
The Operator should be picked as “Contain text,” and Value to Compare is “price” now.
Save the changes by clicking on the “Update” button and continue to add new fields if needed.
We add one more Heading Field for the next logical part of the form.
We also place the Media Field for users to upload the desired images to the post. Don’t forget to work on its Field Settings in case of need.
The last part of the form will include another Heading Field, Textarea Field, and a WYSIWIG Field representing the excerpt and the content of the future posts.
Don’t forget to finalize the form with an Action Button and adjust it as desired.
However, the form is not ready yet. To adjust it thoroughly, head to the JetForm tab.
Work on the Form Settings and Captcha Settingsif needed and proceed to the Post Submit Actions tab.
Customize post submit actions
The first action we will adjust is “Insert/Update Post”, you can pick it from the drop-down menu. It is essential in the current form, so mind adjusting it correctly.
Press the pencil-shaped button to edit the action.
Select the needed Post Type in the appeared pop-up and set the Post Status to “Published.”
In the Fields Map, there are the fields you have added to the form. It will link the form fields with the specific meta fields.
Leave the “post_id” field empty and work with the following fields.
We select the “Post Title” as the Event title and move to the Organizer field. This field should be connected with the matching meta fields you have created earlier during the post type editing.
To connect them, choose the “Post Meta” option in the first selector and complete the second field with the needed Meta Field Name.
As you remember, the next Type of event, Event category, and Format of the event fields represent taxonomies. That is why we pick “Post Terms” and specify the taxonomy in the following drop-down menus.
Complete the following fields with the corresponding source values.
When you get to the Media Field, you should select the “Post Thumbnail” option as a source. We choose the “Post Excerpt” and “Post Content” options in the following Textarea and WYSIWYG fields.
That’s it with the “Insert/Update” Post Submit Action, so hit the “Update” button.
Then click on the “+ New Action” button to add another Post Submit Action, “Send Email.” Whether you want to adjust it to get a notification once the user has added the new post is entirely up to you.
Complete the fields with the required data and press the “Update” button.
The last post submit action is “Redirect to Page.” If desired, you can create one by pushing the “+ New Action” one more time.
Complete the Redirect to field. The new field may appear depending on the source you choose. For instance, we select the “Static page” option, so we complete the Select page field with the desired page.
Moreover, you can work on the Add query arguments to the redirect URL and Add hash to the redirect URL fields.
Don’t forget to press the “Update” button once all the adjustments have been made.
Navigate to the General Messages Settings,where you can change the default notifications or leave them “as is.”
Finally, click on the “Publish”button to save the form.
Create form for posts editing
There is no need to create one more similar form that will edit posts, as we can duplicate the one for post submitting we have just built.
Head to the WordPress Dashboard > JetFormBuilder > Forms and hover on the newly created form. As the “Duplicate” button appears, click on it, and the copy will be added to the list.
Now you can press the “Edit” button displayed once you hover over the copy.
Change the title of the form and proceed to the Hidden Field.
Leave the General tab of the block settingsand move to the Field Settings.
Select the “URL Query Variable” option in the Field Value drop-down menu and paste the “_post_id” value in the Query Variable Key field.
Besides, work on the Advanced tab to add the CSS Class Name.
If you work with Gutenberg only, you can also install and activate the JetStyleManagerplugin to style up the form according to your wishes. However, we consider the case with Elementor so that we will adjust the style settings a little bit later, right in the Elementor editor.
Also, remember to change the Field Label of the Action Button.
Go to the JetForm tab to work on the general form settings. Customize the Form Settings and Captcha Settings if needed and move to the Post Submit Actions.
Configure post submit actions
We also need to adjust the “Insert/Update Post” action, so press the pencil-shaped icon to open the editing window.
This time choose the “Post ID (will update the post)” option in the post_id field of the Fields Map.
All the other fields should be left without changes. Click on the “Update” button to save the changes.
The following post-submit actions can also be left or deleted as they are not necessary for the correct work of the form.
Go to the Preset Settings and activate the Enable toggle. We do it to save the data that was already completed in the fields. So, there is no need to retype the info once the user gets to the editing.
Set the “Post” as Source as we are working with CPT, and select the “URL Query Variable” option in the Get post ID from list.
We need to paste the ‘_post_id’ value into the Query variable name to get the information from this particular post.
The following selectors are the same form fields we have added before. So now we build a connection between form fields and default/custom meta fields.
Select the “Post ID” option for the ‘post_id’ field, set “Post Title” as ‘event_title,’ and pay attention to the following ‘organizer’ field.
This one refers to the custom post type meta field. That’s why we need to pick the “Post Meta” option and define the required Meta Field Name in the appeared field.
The following ‘type_of_event’ source in the form was selected as the taxonomy, so set the “Post Terms” option in this field. Then define the needed taxonomy in the selector.
Repeat the same steps for similar fields.
Besides, pay attention to the ‘select_an_image,’ ‘summary,’ and ‘event_description’ fields of ours.
The first field is connected to the “Post Thumbnail,” the second to the “Post Excerpt,” and the third one to the “Post Content.”
Mind changing the General Messages Settings default values and save the form by pressing the “Update” button.
Add forms to templates
Go to the WordPress Dashboard > Templates > Saved Templates and open the “Add Post” template editor.
The Profile Menu is already added to the page. These subpages are taken from the Account Page settings we have edited in the Profile Builder.
If you remember, we have added four subpages; however, the “Add New Post” and “Edit Post” are set to be hidden from the menu, so there are only two subpages.
Drag the JetForm widget to the page. Select the form for the post submitting in the Choose Form drop-down menu.
You can also adjust other features in the Form Settings and work on the Style tab settings if needed.
Mind pushing the “Update” button once all the adjustments have been made.
Let’s check the result on the front end. To do so, we have added a special Button in the header that links to the Profile page.
By pressing the “Dynamic Tags” button next to the Link field, you can select the “Profile Page URL” option under the JetEngine title.
Pick “Add New Post” as Profile Page in the appeared tab and leave the default “Queried User” Context.
Hit the “Update” button to save the changes.
Return to the WordPress Dashboard > Templates > Saved Templates and select the “Edit Post”template for editing now.
Now the same steps should be taken. Add the JetForm to the page and pick the second form we created, responsible for post editing.
Proceed to customize Form Settings and the Style tab to get the desired form appearance. You can copy and paste the style of the “Add Post” form to receive a similar page appearance.
Press the “Update” button to save the template.
To see the data you have put in the form on the front end, head to the WordPress Dashboard > JetEngine > Listings.
Find the User Posts Item listing created after we have imported the preset. Now we push the “Edit with Elementor” button to open the editor.
Begin with the Listing Item Settings. Press the arrow on the Elementor Dashboard and open the Listing Settings tab.
Ensure that the Listing source is set correctly and the needed option is selected in the From post type selector.
For instance, we select the “Posts” as the Listing source and specify it in the following drop-down menu.
Now you can push the “Update” button and refresh the page to pull the example post from the source.
NOTE
Check whether the picked source contains any posts. Otherwise, there will be no data seen in the listing item.
As it is preset, the listing already includes Dynamic Image, Dynamic Field, and Dynamic Link widgets.
Leave the default widgets or add more items according to your wishes.
Currently, we will delete the “Edit Post” Dynamic Link button. To meet our needs, we add the Dynamic Terms widget to pull out the event’s format, the Dynamic Field widget to display the date and time, price, and a summary of the event.
Don’t hesitate to add the widgets you need at the moment. The data will be pulled out automatically and show the required post information if you are using dynamic widgets.
We also set the Fallback for the ‘price’ field if the event is defined as free. Besides that, we have enabled the Customized Field Output to complete the Field format with the default value displayed before the price number.
As we have deleted the “Edit Post” button, let’s add one more Dynamic Link. Begin with finding and selecting the “Profile Page”from the Source menu.
The Profile Page field should also be completed; this time, pick the “Edit Post” option.
Besides, don’t forget to change the Label.
NOTE
For the correct work of the link, head to the Add Query Arguments toggle and enable it. Once done, paste the ‘_post_id=%current_id%’ argument in the Query Arguments field.
The ‘_post_id’ is the same key we have entered during the form customization, and the ‘current_id’ is the macro that returns the current post ID.
Proceed to other settings and style up the listing according to your preferences.
Once everything is ready, don’t forget to update the listing item by pushing the same name button.
Return to the WordPress Dashboard > Templates> Saved Templates and open the “User Post” template editor.
Make certain that this template looks precisely like the rest of the templates you are working with.
Though this time, instead of the form, we add the Listing Grid widget and pick the “User Posts Item” in the Listing field.
Then you can also change the Column Number and Posts number and work on the gaps in the Style tabs.
That’s it; push the “Update” button.
Proceed to your website and click on the button to open the form.
Now you can complete all the fields and submit a new event. Pay attention that we create an online event, so the location becomes hidden once we select the “Live online” option.
The same situation is with the price of the tickets. If we choose the “Price” option in the radio field, the “Enter min. price” field appears. And once the “Free” option is selected, there are no additional fields for completing.
Once you push the button, the post becomes live. The redirection also works fine, as we are on the Account page now.
Let’s press the “Edit” button and work on the post we have created.
You may also notice a post URL at the bottom of your screen on hover. The post ID is displayed as a slug.
All the information is already completed in the editor as we used Presets. That’s why you don’t need to enter the data again; you can just change the desired fields.
So, as you can see, after the form submission, the information has been changed.
Now let’s check the entered information in the CPT you are currently working with. So, we head to the WordPress Dashboard > Events and open the editor of the post we have just added and edited.
You can see that the fields are completed with up-to-date information. We nailed it; not only the meta fields are completed with data, but also the taxonomy tags, featured image, excerpt, and the content of the post.
That’s it; the form has been completely set, and now you know how to create a WordPress post submission and editing form.
Booking forms allow business owners to streamline the online booking routine. Add a multi-step WordPress booking form to the website for all booking requests to land in the same place.
A dedicated booking form can be used to arrange a flight reservation, a room reservation, hotel accommodation, and more. To create a WordPress simple booking form, you’ll need the JetFormBuilder Pattern and some time. Customize the form fields and add a payment gateway to it if necessary.
Top WordPress Booking Form Features
Use the shortcode to add a WordPress simple booking form to posts, pages, widgets;
Choose Your Stay. A Select field for choosing the desired location;
Number of Nights. A Select field for picking the number of days to stay;
Check-in Date. A Date field for filling in the arrival day;
Time. A Time field for filling in the arrival time;
Price per Night. A Range field with prices per night;
Kind of Trip. A Checkbox field for indicating the journey type;
Children. A Radio field to submit the number of children;
Extra Services. A Checkbox field for picking additional services;
Total Price. A Calculated field with the set formula to calculate the total price;
Next/Previous button. A Form Break Field that splits form into steps.
Step 2 – Personal information
Name. A required Text field for filling in the customer’s name;
Last Name. A required Text field for filling in the customer’s last name;
Phone. A required Text field for filling in the phone number;
Gender. A Radio field for indicating the customer’s gender;
Additional Information. A Textarea field for providing extra details about the booking;
Next Guest. A Repeater field for submitting the +1 guest’s details;
Next/Previous buttons. A Form Break Field allows you to switch between the form steps.
Step 3 – Additional information
Leave a Comment. A Textarea field for providing extra details about the booking;
Choose File Button. A Media field to upload additional files if needed;
Submit. A Submit field to submit a WordPress simple booking form.
How to Create a Custom WordPress Booking Form
Building an online booking system is a multi-structured task. Needless to say that in this situation, you may want the user not only to look at the available booking options but also have a possibility to reserve preferred apartments. That’s why you may like WordPress Booking Form Pattern from the JetFormBuilder plugin.
Create a new form
Begin the work from JetFormBuilder > Add New and give a name to the form.
You can delete the default Hidden, Text, and Submit Fields. We don’t need them as we will work with Pattern that already includes other essential fields for booking.
Place a Booking form pattern
The Pattern is a layout that can be customized and styled up. It includes fields that can likely be used to meet specific needs.
Although mind that to style the form, you may need to install the JetStyleManager plugin. It will allow you to apply any desired changes to the form appearance.
Navigate to adding the new block by clicking on the “Plus” icon on the top left side of the WordPress Editor. Open the Patterns tab and choose the “JetForms” option from the drop-down menu. Find and place the Booking Form on the page.
This pattern comprises three parts. Let’s take a closer look at each of them and the inserted fields.
Above all the sections, there is a Hidden Fieldthat the users will not see. Apply it if you need to use the data for calculations.
General Information consists of the following fields:
Select Fields—allow customers to select the type and duration of stay;
Range Field—lets users set out the wished price per night;
Checkbox Fields— for several options to choose from, responsible for kind of a trip and extra services provided;
Radio Field—gives options where only one can be picked. In this case, it is to inform if the user is traveling with children;
Calculated Field — counts the total price drawing attention to the previously input data;
Form Break Field—divides form into parts that are displayed separately. Click on it and change its label of progress to show it under the step indicator.
Personal Information is responsible for the guest data input and encloses such fields:
Text Fields— for the personal identification details needed for the execution of entrance;
Textarea Field— additional information a user would like to add;
Repeater Field—provides the form with a repeatable block that will double itself when the user clicks on it, works for adding guests that travel together with the user filling out the form;
Form Break Field—enables a user to proceed to the next part of the form.
Additional Information is the last part of the Form Pattern that involves a couple of other fields:
Wysiwyg Field—admits a user to type the desired styled information or some other content;
Media Field— set for uploading some pictures needed for the convenient booking. For instance, it can be a photo of required documents;
Submit Field— the final point on the way to sending a WordPress Booking Form.
Edit or delete all the desired fields. It is possible as they are not preset.
Work on the JetForm settings
JetForm Settings are capable of changing the layout of the whole form.
Form Settings embrace the following:
Fields Layout — defines the relation of the field label and the field bar. Choose “Column” if you want to put the label above the bar, and “Row” if one line is desired;
Required Mark — lets you adjust a symbol that is used to determine the necessary fields;
Submit Type — enables setting a “Page Reload” or “AJAX”option that will not reload the page;
Enable form pages progress — if you work with the Form Break Field you can add a step indicator to the form parts.
Captcha Settingscan also be set up to meet all the requirements. You can learn about it in detail from our reCAPTCHA video overview.
Post Submit Actionsare the most vital part of the booking form creation process. They define in which way information will be processed after the form submission.
Edit this action according to your requirements. If you want to send a reply to the customer, you can also add an Email Text Field to the form. When you have finished editing, push the “Update” button.
One more post-submit action that can be added to the booking form is “Insert/Update Post,” which creates or edits the existing post type to insert data to the post automatically when a customer fills in the form.
To adjust this section properly, you may need to install and activate the JetEngine plugin. It will help to create meta fields for all the input data.
Create meta fields for all the fields that require input information and click on the “Add Meta Box” button. Once you are done, return to the form and open the “Insert/Update Post” Submit Action edit window.
Select Post Type where the data will be inserted, its Status, and Fields Map. The last tab is accountable for the meta fields you have just created. Type the Meta Field Names in the corresponding fields. Update the action.
Preset Settings. You may also enable the preset setting for this Booking pattern to add recurring data. Thus, the form would be more user-friendly.
Payment customization
Let us also enable a possibility to pay for the apartments. To do this, proceed to JetFormBuilder > Settings > Payments Gateways.
Enable Gateways to start working with payments and toggle Test Mode to check the function before the actual charge. Put the Client ID and Secret Key, read more about how to get them.
Besides PayPal, you can use Stripe Payments to enable another payment option on the website.
Go back to the form editor and enable PayPal Checkout in the Gateways Settings. Consider editing it consequently.
Client ID and Secret Key — the same values that were input earlier in the JetFormBuilder Settings;
Currency Code — shows what currency will be used for the payment;
Before payment processed and On successful payment — in charge of what options will be performed. These are Post Submit Actions that you have configured for the form.
On failed payment — pick actions to be performed when the payment is failed ;
Create payment order notification –choose here the associated post-submit action;
Price/Amount field — set where to pull the price from;
Payment success and failed messages — type in the notifications displayed to users in the relevant situations.
Update settings to attach PayPal to the WordPress booking form with payment. Work on the Preset and General Messages Settings supplementary if needed, and click on the “Publish” button once you are done editing the form.
Now let’s check how to add the newly created form to the page.
Add a form to the page
Head to Pages > Add New. You can add the form to Gutenberg or create an Elementor Booking Form. Put the JetForm block on the page.
The Booking Form is already displayed with the step indicator above. If you have changed their Labels of Progress, they will be shown here.
If you want to change the “Last Page” label, you need to add one more Form Break Field after the Submit Field in the form editor and give it a name.
There you can also change Form Settings. However, if you have already applied these settings while creating the form with JetFormBuilder, there is no need to do it one more time. Those settings will override these.
Moreover, you can add some CSS classesin the Advanced Settings if needed.
Let’s publish the page and check it on the front-end.
That is it. We’ve created a WordPress simple booking form that’s ready to cover customer reservations.
Profile forms allow users to provide their details after registration. Such forms usually ask people to share more than just first and last names; location, occupation, family status, and other questions can be there. Filled forms are a quick way to reach out to website users.
Profile Pattern is a WordPress form pattern having three different question groups: Basic, Additional, and Settings. Use it to hatch a ready-made WordPress profile form. To collect as much client info as needed, add extra field blocks to it.
Add a profile form to the single user page using the shortcode or widget/block;
Inform users about successful profile updates via email and notification on the website;
Update user profile info on the site right after the form submission.
WordPress Form Pattern Structure
Choose File button. A Media field for uploading the user profile picture.
1 – Basic
First name. A required Text field for filling in the user’s first name;
Last name. A required Text field for filling in the user’s last name;
About me. A Textarea field where users can provide additional information.
2 – Additional information
Location. A Text field for filling in the country;
Languages. A Text field for filling in the languages the user can speak;
Email. A required Text field for filling in the user email;
Phone. A required Text field for filling in the phone number.
3 – Settings
Password. A Text field for entering the password for the first time;
Confirm Password. A Text field for entering the same password for confirmation;
Update. A Submit field to submit a WordPress profile form.
How to Create a WordPress Profile Form
Once you build a WordPress website that allows users to register, you need to give them the possibility to enter their personal information and update it when desired. In this case, you may want to create a WordPress Profile Form. Feel free to use the Profile Form Pattern from the JetFormBuilder plugin, including all necessary fields.
Add a new form
Initially, navigate to JetFormBuilder > Add New. The first stage is to give a title to the form.
Three fields are set beforehand. These are Hidden, Text, and SubmitFields. Delete them as we will use the Pattern with all the required fields for a profile update.
Attach a Profile form pattern
The main advantage of the Pattern is already embedded fields that will speed up the process of form creation. Now we pick a Profile Form Pattern that will serve as a layout for the form.
Push the “Plus” icon to add a Pattern. From the drop-down menu, pick a “JetForms” option. There you can find a Profile Form Pattern; click on it to apply it to the form.
The pattern embraces the following fields:
Paragraphs that conditionally divide the form into sections;
Media Fieldlets users upload their profile photos;
Text Fieldsare responsible for the input of requested information;
Submit Field serves as a confirmation button for the form.
If desired, there is an opportunity to edit or delete these fields and add new blocks to the WordPress Profile Form.
Adjust JetForm settings
Change default settings of the form to set its suitable layout.
Fields Layout is in charge of the interrelationships between the field label and the field bar. “Column” option places label above the bar, and “Row” displays them in one line;
Required Mark is responsible for changing a default asterisk into another symbol;
Submit Type affords to choose between Page Reload and AJAX that will not reload the page;
“Enable form pages progress” toggle works for forms that are divided into parts by the Form Break Field. It appends a step indicator to the top of the form.
The next are Captcha Settings. Watch our video overview on this topic to modify them properly.
Proceeding to the Post Submit Actions, pay attention that this is a significant point if you want to get a correctly working and functional form.
Post submit action customization
You can use several Post Submit Actions for the WordPress Profile Form. Though, let’s add one, the most meaningful action that will work in this matter, Update User.
To begin with, check if you have the JetEngine plugin installed, as we will need to put meta fields while editing the action.
Go to WordPress Dashboard > JetEngine > Meta Boxesand add a new Meta Box. We need it for creating meta fields that will be input during the Update User Post Submit Action editing.
Fill out the required General Settings fields. Note that you should choose “User” as the source in the Meta Box for drop-down menu. Scroll down to the Meta Fields.
We need to create meta fields for all the bars that will include information about the user. It means a Media, Textarea, and eight Text meta fields.
Mind that if you have added some other fields, you need to apply meta fields for them as well.
Push the “Add Meta Box” button and go back to the form editor.
Open the Post Submit Acton Editor, fill in the Fields Map with “User Meta,” and type in meta field names that you have entered to each field while adding the meta box.
Define a User Role for the updated user and set messages displayed to the users in specific cases.
Publish the form once you finish all the revisions.
Place a form on the page
Head to the page where you want to place the WordPress Profile Form. This page can be edited with both Gutenberg and Elementor.
Locate the JetForm block on the page and proceed to the settings. Choose a form that you have added from the drop-down menu.
Pick Fields Layout, Required Mark, and Submit Type if you haven’t done it yet. Turn attention to the fact that the settings you have customized earlier in the form editor are the higher-priority ones, which means they will override the JetForm block settings in the page editor.
Check Advanced settings to apply a CSS class to the form. Click on the “Publish” button to make the page functioning.
The WordPress Profile Form is ready for any user data updates.
