Requirements:

Uncanny Automator is a plugin that allows you to connect plugins and apps to automize the WordPress website activity without coding. With this plugin, you can connect JetFormBuilder forms to such apps as Airtable, Google Sheets, Google Calendar, Instagram, Facebook, etc. A complete list of available integrations can be found on the Automator WordPress Plugin Integrations page.

Use cases include sending form data to Airtable and Google Sheets, registering users, setting CRM tags, and setting up notifications and email campaigns.

Uncanny Automator has such triggers for JetFormBuilder:

  • Triggers for logged-in users:
    • a user submits a form;
    • a user submits a form with a specific value in a specific field (Uncanny Automator Pro).
  • Triggers for everyone:
    • a form is submitted;
    • a form is submitted with a specific value in a specific field (Uncanny Automator Pro).

I will show how to connect the JetFormBuilder form to any app with the Uncanny Automator (free version) on the example of Google Sheets.

I created the “Send Letter to Seller” form by submitting which users can leave feedback about my website. To learn how to create a similar form, proceed to the Contact Form tutorial.

send letter to seller form

To store all messages in one place and be able to proceed through all of them to get users’ insight into my service, I want to connect the form to Google Sheets.

I created a new Google Sheet and added three rows that will be filled with the information from the form: user name, email, and message.

google spreadsheet

I proceeded to the WordPress website and moved to the Automator > Add new tab. 

At the beginning of the recipe creation, you can select two types: 

  • Logged-in users. The recipe will be triggered by logged-in WordPress users;
  • Everyone. The recipe will be triggered by logged-in WordPress users or logged-out visitors.
Automator recipe type

I selected the “Everyone” option, so any user will be able to leave feedback.

I named the recipe and selected the “JetFormBuilder” integration as the Trigger.

select an integration

Then, I selected the needed form and clicked the “Save” button. After that, the toggle in this section changed from “Draft” to “Live.”

select a form

In the Action section, I pushed the “Add action” button and selected the “Google Sheets” integration. Be aware that you may need to connect the Google Sheets accounts if you haven’t done it before.

select an integration as the action

There are two options here:

  • Create a row in a Google Sheet. Select this option if you want the action to save a form field value in a new row;
  • Update a row in a Google Sheet. Select this option if you want the action to update a form field value in the row. This option is useful for the “Update post” or “Update user” forms.
create or update a row in a google sheet

I picked the “Create a row in a Google Sheet” option to save the values of every newly submitted form in the new row.

Then, I selected the needed Drive, Spreadsheet, and Worksheet and hit the “Get columns” button.

create a row in a google sheet

After that, all columns created in the spreadsheet appeared.

search tokens

I pressed the asterisk icon in the Value field and selected the corresponding form field, the value from which will be saved in the row.

values from the form fields

Having done this with all columns, I pushed the “Save” button. After that, the toggle in this section changed from “Draft” to “Live.”

In the Recipe section, I enabled the toggle and changed its status from “Draft” to “Live” to make the form active.

live toggle on for the recipe

I navigated to the page where the “Send Letter to Seller” form was placed and submitted it several times. 

form successfully submitted

I went to Google Sheets. As you can see, all form values have been saved in the appropriate columns.

saved form values in the google sheet

That’s all. Now you know how to connect the JetFormBuilderform to any app with the Uncanny Automator(free version) on the example of Google Sheets.

Form validation is the process when users enter data, and the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the program. To the JetFormBuilder form, you can apply the Default (browser) or Advanced validation.

The Advanced option has such advantages compared to the Default (browser) option:

  • Editing or translating the error text;
  • Customizing the appearance;
  • Custom validation rules;
  • Server-Side validation;
  • Validate non-basic inputs.

Advanced Form Validation

If you want to add validation to the WordPress form, proceed to the Validation menu section in the Form settings tab. Unfold it, and you’ll see such settings:

validation menu section
  • Enable form safety. This option is used when there are form caching or conflict issues. It protects the form with a WordPress nonce. Toggle this option off if the form page’s caching can’t be disabled;
  • Enable csrf protection. If enabled, it protects a form from the attacks that force authenticated users to submit a request to a website against which they are currently authenticated;
  • Variation type. Here, you can pick two options:
    • Default. Native validation that works by browser;
advanced validation type
  • Advanced. If you select this option, you can click the “Edit validation messages” button, and you’ll see the “Edit Manual Options” pop-up, where you can change the error text for different field types:
edit manual options
  • Field is empty. For all field types if the Is Required option is enabled for the specified field. Will be shown if users don’t fill in the Required field and click the “Submit” button;
  • Email is not valid. For the Text Field with the selected “Email” Field Type in the Field Settings menu section for the block. The message will be shown if users enter an incorrect email address;
  • URL is not valid. For the Text Field with the selected “Url” Field Type in the Field Settings menu section for the block. Will be shown if users enter an incorrect web address;
  • Input mask is not completed. For the Text Field with the selected “Tel” Field Type, the enabled Set Input Mask toggle and the filled Input mask field in the Field Settings menu section for the block. It will be shown if users enter their phone number incorrectly according to the Input mask field settings and click the “Submit” button;
file size limit exceeded
  • Files limit exceeded. For the Media Field with the Maximum allowed files to upload field filled. For example, if you set “3,” the error message will be shown if users try to upload four files or more;
  • File size limit exceeded. For the Media Field with the Maximum size in MB field filled. For example, if you set “1” Maximum size in MB, the notification will be “The size of this file cannot exceed 1 MB” if users upload a file whose size is bigger than 1 MB;
  • File type is not included in the allowed types list. For the Media Field with the Allow mime types field filled. For example, if you set the “gif/image” option, the error message will be shown if users try to upload files of other types;
  • Value does not reach the minimum. For the Number Field and Range Field with the Min value field filled. For example, if you set “5,” the error message will be shown if users try to enter or set a number less than “5”;
value exceeds the maximum
  • Value exceeds the maximum. For the Number Field and Range Field with the Max value field filled. For example, if you set “100,” the error message will be shown if users try to enter or set a number greater than “100”;
  • Not enough characters. For the Text Field and Textarea Field with the Min length (symbols) field filled. For example, if you set “5,” the error message will be shown if users try to enter less than five symbols;
  • Character limit exceeded. For the Text Field and Textarea Field with the Max length (symbols) field filled. This message may occur if you set the Value option and the value exceeds the limit. For example, you created a post editing form and added the Text Field for the post title. In the Value section, you set it so that the field shows the current post title, and if it exceeds the limit, the error message will occur if you click the “Submit” button, so you will need to edit the title to submit the form;
timestamp is too early
  • Timestamp is too early. For the Date Field, Datetime Field, and Time Field with the Starting from time/date fields filled. For example, if you set “8:00,” in the Starting from time field, the error message will be shown if users try to set the time that is earlier than 8 a.m.;
  • Timestamp is too late. For the Date Field, Datetime Field, and Time Field with the Limit time/dates to fields filled. For example, if you set “17:00,” in the Starting from time field, the error message will be shown if users try to set the time that is later than 5 p.m.

Advanced Form Validation for Separate Blocks

In addition to the advanced form validation, you can set the Validation for separate form fields in the Block settings tab. This option is available for the Text Field, Textarea Field, Media Field, Number Field, Range Field, Date Field, Datetime Field, and Time Field blocks. You can select such Validation Types:

Inherit

If you select this option, validation is inherited from the form arguments. Here, you can only add advanced rules that check the entered data in the Text Field and Textarea Field blocks, and if the data does not match the rule, the error message will appear.

inherit validation for blocks in a form

Hover over the message in the blue rectangle and press the “+ Add Rule” button.

In the Rule Type drop-down menu, you can select such types:

rule type
  • Equals. Displays the error message if the rule’s condition doesn’t match the data users enter into the form. In the Choose Field drop-down menu, you can select one of the form fields or set “Custom value.” If you pick the “Custom value” option, the Symbols field will appear, where you can enter symbols that must be typed in the form field. If you hit the coin-stack-shaped button near the Symbols field, you can set the Preset settings for this field. Also, if you push the wrench-shaped button, you can use macros with the form field names. In the Error Message field, you can set the custom error message.
equals rule type

For example, you have two text fields: “Password” and “Confirm Password.” Click on the “Confirm Password” Text Field and hit the “Edit Advanced Rules” button. In the Edit Advanced Rules pop-up, pick the “Equals” Rule Type, select the “Password” Text Field in the Choose field, and set the custom Error Message. So the error message will appear when the text in the “Password” and “Confirm Password” fields doesn’t match.

advanced rule example
  • Must contain characters. The message will appear when users don’t enter the required characters, for example, “@” for the email field;
must contain characters rule
  • Must not contain characters. The message will appear when users enter the restricted characters;
  • Matches regular expressions. The message will appear if users enter the symbols combination that does not match the regular expressions. For example, you can set the “^.{6,}$” Regular expression for the Text Field with the “Password” Field Type, and the custom ErrorMessage “The password is too short” will appear if users enter less than six characters into the field;
matches regular expression rule
  • Does not match regular expressions. The message will appear if users enter the symbols combination that matches the regular expressions;
  • Server-Side callback. There are three callbacks available:
    • Custom function. With this option, the Function Name field appears, where you can enter a function. Hit the “Show” button to get examples of function registering;
custom function
  • Is user login unique. The custom Error Message will appear if users try to enter the login that already exists on the website;
  • Is user email unique. The custom Error Message will appear if users try to enter the email that is already registered on the website.

Be aware that you can add two and more advanced rules to every form field by clicking the “+ Add Rule” button.

When you set all needed advanced rules and hit the “Update” button, you’ll see the rules and messages in the Validation block section.

advanced rule for the block

You can hover over it and click to edit or delete the rule.

edit or delete the advanced rule

Default

That’s the native validation that works by the browser.

default validation type

Advanced

Here, you can add the advanced rules described above and change the text of the error messages. The number of available messages is dependent on the field type and settings. All error messages are described in the Advanced Form Validation chapter. The custom messages set for the separate field will overtake the form validation settings.

advanced validation type for block

Checking Form Validation on the Front End

Proceed to the form or block Advanced Validation settings and set the custom error messages and advanced rules. Hit the “Update” button and place the form on the page. Open the page on the front end and fill in the form fields improperly to check the error messages.

advanced validation on the front end

That’s all. Now you know how to set the advanced validation and rules for the JetFormBuilder forms on the WordPress website.

map field overview

This field allows the user to input coordinates by pinning the needed location on the map. The location can be stored in three different ways: as a string with location Lat and Lng separated by coma, as an array, and as a plain address. The value of the Map Field can be saved conveniently into the Map meta field of the JetEngine plugin.

NOTE

The Map Field type requires both the JetEngine (3.0.3) plugin and its Map Listing feature to be activated.

Settings

map field settings

Map Settings

Field format. Here, select the way to store the location:

  • String – the coordinates will be stored as a string with location latitude and longitude separated by a comma. For example: 46.969686110698525,31.991035188696703;
  • Array – the location will be stored as an array of latitude and longitude. Example: {“lat”:46.969686110698525,”lng”:31.991035188696703};
  • Address – the coordinates will have the format of a physical address, like this: 6 Walnut Road, Manchester SW1A 1AA, UK;

If you store the value of this field into the Map meta field of JetEngine, make sure to select the same value format there.

Height. Specify the size of the map here.

map settings of the jetformbuilder map field

Style Settings

styling the map field with jetstylemanager

If you have installed the JetStyleManager plugin, the Block Style button will appear in the top right corner of the editing window. Here are the styling settings you can meet there:

Tutorial requirements:

After the successful subscription payment in PayPal with the JetFormBuilder form, a user gets the content during the paid period. However, when the subscription expires, the user still will have access to the content. The easiest way to avoid it is to apply Dynamic Visibility rules to the content according to the user role condition and fine-tune the logic with the action events.

Step 1. Set the form

Proceed to the JetFormBuilder > Forms tab on the WordPress Dashboard and click to edit the form that you have customized for the recurring PayPal payments.

Add the Hidden Field to the form and select the “Current User ID” option as the Field Value.

hidden field current user ID

Head to the Post Submit Actions tab in the JetForm section and push the “+ New Action” button. Select the “Update User” option in the drop-down menu, and hit the pencil-shaped button.

jetformbuilder post submit actions tab

For the Hidden Field with the “Current User ID” value (named as the user_id in our case), select the “User ID (will update this user)” option in the Fields Map. Set other fields so that they’re assigned to the appropriate user fields.

In the User Role, we select the “Subscriber” option so that all users with the Customer role who submit the form and buy the subscription also upgrade their role to Subscriber.

edit update user action

You can also pay attention to the Messages Settings and change the text that appears when users submit the form.

form messages settings

After you finish customizing the action, don’t forget to press the “Update” button.

Push the “Edit Conditions & Events” button under the “Update User” action.

post submit actions

Move to the Events match tab and select the GATEWAY.SUCCESS event. With this event, the action will be executed only after a user passes the checkout page on the side of the payment system. So the user will change the status to the subscriber after the successful payment.

More about other events, you can learn in the Action Event Settings.

Press the “Update” button. The event in the submit action will look like that:

action event

To change the user role back to customer when the subscription expired, add another the “Update User” action. The Field Map settings are the same as in the previous action, but set the “Customer” User Role and hit the “Update” button.

update user role to customer action

Push the “Edit Conditions & Events” button under the newly created “Update User” action, move to the Events match tab and select the GATEWAY.SUBSCRIPTION.CANCEL, GATEWAY.SUBSCRIPTION.EXPIRED, and GATEWAY.SUBSCRIPTION.SUSPENDED events. Press the “Update” button.

gateway subscription events

At the end, two “Update User” submit actions will look like that:

update user actions with events

Finally, click the “Update” button to update the form settings.

Step 2. Set the page with content

How to set the page with the Elementor editor

Set a pop-up (optional)

You can place the form right on the page or can set a pop-up with it. If you have the JetPopup plugin installed and activated, proceed to the JetPopup > Create New Popup tab, enter the title, and hit the “Publish,” and then “Edit with Elementor” buttons.

Drag-n-drop the JetForm widget to the pop-up and select the recently updated form. When you finish, press the “Update” button.

pop-up with the jetform
Set Dynamic Visibility

Proceed to the page with the content that you want to show only to subscribers.

Place a new section with two columns in the editor. In the first column, add some Image or Button widget that will show the message that the content is locked and users have to subscribe to see it. In the second column, place the content (e.g., video, image) that will be shown to subscribers.

You can also place widgets above each other and align them in the center.

content in the elementor editor

Click on the first column and navigate to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle.

Select the “Show element if condition met” Visibility condition type, “User Role is not” Condition and “Subscriber” User role.

dynamic visibility condition

Move to the JetPopup tab on the same widget and attach the recently created pop-up. Select the Trigger Type you need. For example, if you want to attach the pop-up to the Button widget, select the “Click on Button” option. We’re good with the “Click on Widget” type.

If you haven’t created a pop-up, you can place the JetForm widget in the column and apply the Dynamic Visibility condition to it.

attached pop-up

Click on the second column and proceed to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle for the second time.

Select the “Show element if condition met” Visibility condition type, “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the two columns are the same, but be attentive.

dynamic visibility condition for the paid content

At the end of customizing, hit the “Publish/Update” button.

How to set the page content with Dynamic Visibility in the WordPress block editor

Create a new page or click to edit the existed one. We place the JetForm block on the page and select the form for the PayPal payments. If we click on the form, we will see the Dynamic Visibility icon.

dynamic visibility in the wordpress block editor

Click on the icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is not” Condition and “Subscriber” User role.

set up visibility conditions for the current block

Close the pop-up and proceed to the content for subscribers (to the Video or Image block, for example).

content for the subscribers only

Press on the “Dynamic Visibility” icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the form and content are the same, but be attentive.

When you finish customizing the page, push the “Publish/Update” button.

Condition is set so a user can see form or content on the page, according to the user role.

Step 3. Check the Results

NOTE

Be aware of logging into the second account with the customer role to test the form. If you submit the form from the main account, your administrator role can be changed to the subscriber.

Open the page with the form and content on the front end. Since the user role on our current account is the customer, we can see only the image with the pop-up yet.

page on the front end

We click on the image, fill out the form in the pop-up, and hit the “Submit” button.

jetform in the pop-up

Log in to the PayPal account and buy a subscription. After that, you will return to the page where the Dynamic Visibility will show the paid content. That means that the user role was successfully changed.

dynamic visibility shows the content to the users with the subscriber role

To ensure that the role was changed, we log into the administrator account and move to the Users tab on the WordPress Dashboard.

subscriber role

As we can see, the user truly gets the subscriber role after the PayPal payment.

That’s all. Now you know how to set the logic so that the user role changes after a successful subscription payment in PayPal with the JetFormBuilder plugin and the JetEngine Dynamic Visibility to show content only to subscribers.

Tutorial requirements:

The JetEngine’s relations feature allows you to connect, create, and edit related items just on the editing page of posts, CCT items, users, and taxonomies.

But if you want to connect related items on the front end, you can do this via the form with the help of the JetFormBuilder plugin and the Gutenberg block editor.

Connect Child Objects to Parent Ones

Go to JetFormBuilder > Add New. Give the new form a title and leave the default settings of the Hidden Field block.

creating new jetformbuilder form

Click on the Toggle block inserter button and place the Select, Radio, or Checkbox fields to display the child items in the form. Be informed that the Radio and Select allow choosing one option and it suits the “One to Many” relation type, and the Checkbox allows selecting one and more options and it matches the “Many to Many” relation type, so we decided to drag-and-drop such Checkbox Field block to our form.

checkbox field block

Select the “Posts” as the source in the Fill Options From field and define the needed Post Type. As we want to choose the related children for the relationship “Country > Tours,” we have selected the “Tour” Post Type.

In the Block General settings, type the Field Label and change the Form field name.

NOTE

Be aware that all field names inside one form must be unique, and field names must contain a value with only lowercase letters in Latin, no spaces. If you want to split words, this can be done by using the “-” and “_” characters.

Press the “Dynamic tags” button in the Default Value field to open the pop-up.

checkbox field block settings

Pick the “Related Items” option in the Source field.

editing preset and choosing source

After that, you get the new additional settings:

  • From Relation. Define the relationship you want to use as the source;
  • From Object. Specify if you want to display children (Child object option) or parent (Parent object option) items;
  • Initial Object ID From. Indicate where the query will get the object ID from to display its related items in the form:
    • Current Object ID. Shows the related items of the current post, of the current active listing item, and so on;
    • Current User ID. Shows the related items of the currently logged-in user;
    • Queried User ID. Shows the related items of the selected user, e.g., on the User Page in the Profile Builder;
    • Query Variable. Shows the related items from the global request or WordPress request variables. If you select this option, the fourth Variable Name will appear;
    • Current Object Variable. Shows the related items from the object defined as current by JetEngine. If you select this option, the fourth Variable Name will appear;
    • Default WordPress Object (for current page). Always shows the related items of a current global object for the current page defined by WordPress, as opposed to the “From Relation” option.
  • Variable Name. This field appears if you select the “Query Variable” or “Current Object Variable” options. This option allows setting the variable’s name, which the plugin will search for in the query or current object.

In this case, we have picked the “Current Object ID” option in the Initial Object ID From field because we want to display the Tours child posts in the form on the Country parent post.

relation settings in the jetformbuilder

Press the “Update” button and move to the JetForm settings and the Post Submit Actions tab. Select the “Connect Relation Items” option and click on the pencil-shaped icon to edit the action.

connect relation items post submit action

In the new pop-up window, select the needed Relation. Pick the name of the Hidden Field (with the default “Current Post ID” option) as the Parent Item ID. As the Child Item ID, select the label of the created field for the related items (the Checkbox in our case). Since it’s needed to display the children objects in the form, choose the “We updating children items for the parent object” option in the Update Context field.

edit action

Push the “Update” button to save this action and click on the “+ New Action” button to create a new one.  Select the “Insert/Update Post” option and hit the pencil-shaped icon under this action.

insert update post submit action

Select the parent post type that you want to update via the form in the Post Type field.

Select the needed Post Status or leave it empty. Also, leave the default Fields Map values.

NOTE

Be aware that if you fill the Fields Map, the new related items replace the old ones instead of just being added to them.

edit insert update post submit action

Hit the “Update” button and publish or update the form to save the changes when you finish editing fields and actions.

To place the form on the parent object, proceed to the parent Post Type on the WordPress Dashboard and Edit the needed post.

parent post editing

Place the JetForm block in the post.

dding jetform to the post

Choose the needed Form to display in the Form Settings and push the “Update” button.

form settings

To reach the post on the front end, return to the post type and click on the “View” button of the parent post.

The form is now displayed in the post. Since we have added the Checkboxes field as the selector for the posts, you can select as many posts as you need. When you finish, press the “Submit” button.

NOTE

If some child posts are already related to the parent post, they will be ticked in the form placed on the parent post page. So, if you untick them, they will be disconnected from the parent post.

Return to the parent post editing page and scroll down to the Children tab. The options you have checked in the form will be added to the related posts list.

list of the children posts on the parent post

Now you can add the form to all desired parent posts.

Connect Child Objects to New Parent Post

Now let’s find out how to build a form that will make a new parent post and connect child objects to it.

Go to JetFormBuilder > Add New. Give the new form a title and delete the Hidden Field.

Click to edit the Text Field, it will be for the parent object name. Fill in the needed fields and remember to fill in the Name field appropriately, separate words with the “-” and “_” symbols, and use only lowercase Latin letters.

text field for the country name

The following field will serve as a selector for child items, so we add a Checkbox Field. During the field adjusting, focus on the Fill Options From and Post Type fields. Here you should select the correct source, the child post type.

checkbox for tour selecting

Moving to the Post-submit Actions tab, select the “Insert/Update Post” option and click on the pencil-shaped icon to edit the action.

insert update post submit action

In the appeared pop-up define the parent post type as the Post Type. Set the Post Status to “Published” and head to the Fields Map.

The displayed fields refer to those fields you have added to the form. The Text Field of yours should be connected to the “Post Title” and the following Checkbox Field left with the default option. 

Hit the “Update” button to save the result, and let’s add one more action by pressing the “+ New Action” button.

edit action

This time we select the “Connect Relation Items” post submit action.

connect relation items

Set the needed Relation, choose the “inserted-post-id” option as the Parent Item ID, choose the name of the Checkbox Field as the Child Item ID, and leave the Update Context field empty. In the How to Store the New Item field, you can select the most appropriate choice for you. When you finish, press the “Update” button.

edit connect relation items action

Feel free to add as many additional fields, as you need, for instance, the Media Field to add a picture to a new post. 

The final step here is to save the form, so push the “Publish” or “Update” button and head to the page where the form will be located.

Place a JetForm block on the editing page, and fill in the Choose Form field with the form’s name.

Set up the fields and form styles, and press the “Update/Publish” button to save the page.

 jetform on the single page in the Gutenberg editor

Check the front-end result. You can fill in the form with a title and relate some items to it. Finally, press the “Submit” button.

jetform on the front end

Head to the parent post type (“Country”, in our case) and search for the newly created post. Open it in the editor by pressing the “Edit” button next to the post title and check the attached children posts.

newly created parent post with related posts

Connect Parent Objects to Child Ones

Navigate to the WordPress Dashboard > JetFormBuilder > Add New. Give a title to the form. Leave the default Hidden Field block settings and create the field for the parent object items list.

For example, we have added the Radio Field block to have the ability to pick only one option in the form.

Select the “Posts” as the source in the Fill Options From field and define the needed Post Type. As we want to select the related parent for the relationship “Country > Tours,” we have chosen the “Country” Post Type.

In the Block General settings, type the Field Label and change the Form field name.

Press the “Dynamic tags” button in the Default Value field to open the pop-up.

radio field block

Preset in this form has the same settings and options as in the previous form, but in this case, you need to select the “Parent object” option in the From Object field and click on the “Update” button.

preset editing of the form

Move to the JetForm settings and the Post Submit Actions tab. Select the “Connect Relation Items” option and click on the pencil-shaped icon to edit the action.

In the new pop-up window, select the needed Relation. As the Parent Item ID, choose the label of the created field for the related items (the Radio Field in our case). Pick the name of the Hidden Field (with the default “Current Post ID” option) as the Child Item ID. Since it’s needed to display the parent object in the form, choose the “We updating parent items for the child object” option in the Update Context field.

edit connect relation items action

Push the “Update” button to save this action and click on the “+ New Action” button to create a new one.  Select the “Insert/Update Post” option and hit the pencil-shaped icon under this action.

Select only the Post Type of the parent items in the new pop-up and nothing more. Otherwise, the new related items replace the old ones instead of just being added to them.

edit insert update post action for parent object form
edit insert update post action for parent object form

Hit the “Update” button and publish or update the form to save the changes when you finish editing fields and actions.

To place the form on the child object, proceed to the child Post Type on the WordPress Dashboard, click to edit the needed post, and put the JetForm block in the post. Choose the needed Form to display in the Form Settings and push the “Update” button.

list of the parent posts on the child post

To reach the post on the front end, return to the post type and click on the “View” button of the child post.

The form is now displayed in the post. Select the needed parent object and press the “Submit” button.

form for the parent item on the front end

Connect Parent Objects to New Child Post

You can also build a form that will add a new child post and connect it to the parent at once.

Navigate to the WordPress Dashboard > JetFormBuilder > Add New.

Now you can delete all the Hidden and Text fields to avoid getting confused during editing.

We start with adding a Text Field for a new post name. Feel free to adjust this field as desired. Remember that the Name field shouldn’t include capital letters, spaces, and other special characters.

text field for children post name

The following field is for choosing a parent, so we select Radio Field to let users pick one option.

Select the “Posts” as the source in the Fill Options From field and define the needed Post Type. As we want to select the related parent for the relationship “Country > Tours,” we chose the “Country” Post Type.

In the Block General settings, type the Field Label and Form field name.

radio for parent post selection

Move to the JetForm settings and the Post Submit Actions tab. Select the “Insert/Update Post” option and click on the pencil-shaped icon to edit the action.

Pick the child post type in the Post Type menu and select the “Published” Post Status.

In the Fields Map, we define the ‘tour-name’ Text Field as a “Post Title” and leave the default “Select post property” in the ‘choose-country’ field.

Click on the “Update” button to save the result.

insert update children post submit action

Click on the “+ New Action” button to add a new one. Select the “Connect Relation Items” option and hit the pencil-shaped icon under this action.

Set the needed Relation, select the name of the Radio Field as the Parent Item ID, choose the “inserted-post-id” option as the Child Item ID, and leave the Update Context field empty. In the How to Store the New Item field, you can select the most appropriate choice for you. When you finish, press the “Update” button.

connect relation items action

Feel free to add as many additional fields, as you need, for instance, the Media Field to add a picture to a new post. 

The form is ready, so press the “Publish” or “Update” button. 

Go to the page you want to place the form. For instance, it can be a standard WordPress page.

Place the JetForm block onto the page editor, and pick a new form name in the Choose Form field.

Work on the other fields if you wish. Ultimately, press the “Update/Publish” button and go to the front end to check the final result.

jetform on the page in the Gutenberg editor

Now you can complete the form with the title and related parent. Click the “Submit” button to save the post and add a related item to it.

jetform for children posts creation on the front end

Let’s check if the new tour was added to the child post type. Head to the child post type and search for the new post. For instance, you can type in a post title in the search bar.

Once the post is opened, scroll down to the Related… tab. The parent post is now successfully connected.

newly created child post

That’s it. You know now how to connect the JetEngine relation items via the JetFormBuilder forms.