Category: Post-Submit Actions

This tutorial will guide you through creating a front-end patient card approval system for a healthcare environment using the JetFormBuilder plugin’s Formless Action Endpoint add-on.

Table of Contents

• Create a Custom Post Type (CPT) for Patient Cards
  • Create a set of pages/page templates
  • Create a submission form
• Create Formless Action Endpoints
  • Create an approval formless form
  • Create a removal formless form
• Edit Listing Template
• Check the Result

This use case is particularly helpful for clinics or hospitals that need to manage patient records effectively, including automated submission and approval workflows for patient cards. This is best for clinics where patients can register themselves on the website, fill out medical records, and book an appointment. 

The logic is following:

• Patient registers on a clinic website, goes to the patient card submission form, fills in the form fields, and submits the form;
• Clinic administrator checks the page that lists patient cards pending review, checks them, and either deletes or approves the cards:
  • When the admin clicks on the “Delete” button, the corresponding formless action fires, and the card goes to the “Trash” folder;
  • When the admin clicks on the “Approve” button, the corresponding formless action fires, and the card goes to the “Published” folder.

This approach can also be used to create a system for submitting and approving guest articles on a blog. The Formless Actions Endpoint can be used to create a front-end system for approving and categorizing all kinds of posts.

To create a patient card approval system using the Formless Action Endpoint addon of the JetFormBuilder plugin, follow these steps.

Create a Custom Post Type (CPT) for Patient Cards

Navigate to the WordPress Dashboard > JetEngine > Post Types section and create a new CPT (“Patient Cards”) by clicking on the “Add New” button. Since the patient card may contain lots of fields, we’re going to add a basic set for demonstration purposes. 

Our CPT will have 14 meta fields so patients can submit personal and health-related information. Most of these are “Text” Field types apart from the “Gender,” “Smoking Status,” “Blood Type,” and “Consent Form Signed,” which are “Radio” Field types.

For patients who might have an existing doctor in this clinic, we could add another field with a dropdown where they can select the doctor. To enable the doctor selection, you need to create a “Post Query” in Query Builder to pull in the list of doctors from the existing “Doctors” Custom Post Type.

For categorization, you may set up a taxonomy for the “Patient Cards” to categorize the patients by activity, age group, or whatever.

Create a set of pages/page templates

So we can display all patient cards on one page, we need to create and customize:

• a dynamic listing for our CPT; we’ll do it in JetEngine (you can refer to this video tutorial to learn more about creating dynamic listing grids);
• a CPT Single for an individual “Patient Card”;
• a Patient Cards Archive template via Theme Builder, where we’ll place the dynamic listing using the Listing Grid Elementor widget (this will display all approved patient cards);
• and a single page with Listing Grid Elementor widget (this will display all pending review patient cards).

Create a submission form

Go to WordPress Dashboard > JetFormBuilder and click the “Add New” button to create a front-end form to allow users to submit new patient cards.

This form will contain a range of fields that will correspond to the meta fields from the custom post we’ve discussed above. To do that, we need to click on the JetForm tab, go to Post Submit Actions, and add an “Insert-Update Post” form action by pressing the “+ Add New” button. This action allows us to map the form fields with corresponding meta fields of the CPT. 

If you want your users to be redirected to some Thank You page after they submit the form, you can add another form action, “Redirect to page.” Check this tutorial to learn how to fine-tune this form action.

We’ll use the following settings for the “Insert/Update Post” action:

• POST TYPE — the dropdown field contains all post types available on the website; in this field, we’ll select the CPT created previously, “Patient Cards”;
• POST STATUS — the dropdown field contains all WordPress post statuses that can be assigned, and we’ll select the “Pending Review” one since the newly submitted patient card needs to be checked and approved by the clinic administrator;
• FIELDS MAP — this section contains the list of fields from which we can assign the corresponding meta field of the CPT. Upon default, the dropdown doesn’t have any selected properties, and for our case, we need to choose “Post meta” and, in the newly appeared field, add the field value “full_name”. You need to go through the whole list and map all the fields.

When you’re done building the submit form, the first part of the job is done.

Create Formless Action Endpoints

Now, it’s time to utilize the Formless Action Endpoint extension of JetFormBuilder to set up the patient card approval workflow. For our system, we need two Endpoints that will fire different actions: publishing and deleting a card. 

But first of all, we need to create two JetFormBuilder forms where we can assign these actions endpoints. 

Create an approval formless form

Go to WordPress Dashboard > JetFormBuilder and click “Add new.”

Add a Hidden Field block to the form. In the Field Value dropdown, you can leave the “Current post ID” default value.

In the sidebar, open Block settings and go to:

• General settings tab, and in the FORM FIELD NAME field, type “post_id”;
• in the Value tab, click on the “database” icon (next to the “wrench”) to edit the preset.

In the Edit Preset pop-up, we need to make the following edits:

• SOURCE — this field should be set to “Post”;
• GET POST ID FROM — this field should be set to “Current post”;
• POST PROPERTY — this field should be set to “Post ID”;
• Press the “Update” button.

When you save the preset, the Default Value field will get a property that you need to save for further use.

Add Post-Submit Actions

Now, it’s time to add post-submit actions to this form. 

Go to the JetForm settings tab and unroll the Post Submit Actions.

Press the “+ New Action” button under the default “Save Form Record” action to add a new one. Select the “Insert/Update Post” option from the pop-up.

• POST TYPE — in this dropdown, you need to select a corresponding post type that will be updated. In the given case, we need the “Patient Cards” CPT;
• POST STATUS — in this dropdown, you need to select the required post status. In the given case, we need the “Published” option;
• Fields Map — in this dropdown, you need to select the “Post ID (will update the post)” option;
• Press the “Update” button and publish the form.

Now, let’s go back to the Endpoints section to create an Endpoint for this form.

Go to WordPress Dashboard > JetFormBuilder > Endpoints and click the “+ Add new route” button.

• RELATED FORM — in this field, you should pick the form that will fire the action. In our case, it’s the “Patient Card Approval” form;
• ACTION TYPE — in this field, you should pick an option from the dropdown list:
  • “WordPress AJAX” — works through a standard WordPress AJAX request;
  • “Rest API Endpoint” — is triggered by a request to the Rest API;
  • “URL Query String” — works when switching to a URL with certain parameters.

In the given case, we selected the “Rest API Endpoint” option from the ACTION TYPE dropdown list. This option activates the ROUTE NAMESPACE and ROUTE text fields, where we typed the first and second parts of the Rest API URL (the “register” and “publishcard” texts, respectively).

• Is Restricted — this feature is deactivated by default. When disabled, the action is publicly accessible to anyone. When enabled, access is limited to users who meet specific criteria, ensuring controlled and secure access;
• Log Requests — this feature is deactivated by default. When enabled, every form submission attempt through this route will be recorded, providing a detailed log of all form interactions for auditing and analysis.

The last thing we need to do is copy the sample request data.

Go to the Data Fields section on the JetFormBuilder Actions Endpoints page and click the “Sample request” tab.

The requested data will appear in the textarea field below. To copy this data, click the “Copy data for the request” button and save it; we’ll need it in one of the next steps.

Finally, click on the “Update” button.

Create a removal formless form

You can duplicate the previous form since most settings are basically the same.

For the Hidden Field, you don’t have to change anything.

Set the Post-Submit Actions

In the “Insert/Update Post” action, most settings are the same apart from the POST STATUS field, where you need to select the “Move to Trash” option.

Press the “Update” button and publish the form when you’re done.

Now, let’s go back to WordPress Dashboard > JetFormBuilder > Endpoints and click the “+ Add new route” button.

To create this endpoint, you need to complete the following steps:

• RELATED FORM — in this field, you should pick the form that will fire the action. In our case, it’s the “Patient Card Remove” form;
• ACTION TYPE — in this field, you should pick an option from the dropdown list:
  • “WordPress AJAX” — works through a standard WordPress AJAX request;
  • “Rest API Endpoint” — is triggered by a request to the REST API;
  • “URL Query String” — works when switching to a URL with certain parameters.

For the ROUTE NAMESPACE and ROUTE text fields, we’ll type the “form” and “deletecard” texts, respectively.

Go to the Data Fields section on the JetFormBuilder Actions Endpoints page and open the “Sample request” tab.

The requested data will appear in the textarea field below. To copy this data, click the “Copy data for the request” button and save it; we’ll need it in one of the next steps.

Edit Listing Template

At the beginning of this tutorial, we’ve mentioned a set of pages that we’ll use for this system. Now it’s time to edit the pages that list patient cards with “Pending” status.

Since this displays a dynamic listing, we need to go to WordPress Dashboard > JetEngine > Listing Items/Components and edit the corresponding listing.

The listing contains a set of Dynamic Fields to display:

• patient name;
• phone number;
• email ID;
• block with two buttons that say “Approve” or “Remove” the card.

When we were creating action endpoints, we asked you to save sample request data; we’ll need it right now for the “Approve” and “Remove” buttons. You can set them using the Button (by Elementor) or Button (by the JetElements plugin) widgets.

Click on the Button widget to open the settings panel. Go to the Submit JetFormBuilder Form section:

• Enable form submission — activate this switcher (upon default, it’s deactivated) to enable Choose route and Data for request fields:
  • Choose route — in the dropdown, you need to select the added route. In our case, it’s the approval form endpoint (the “/wp-json/register/publishcard” route);
  • Data for request fields — into this field, you need to paste the code received from the Data fields section;
• Click on the “Publish” button to save the changes.

Check the Result

Let’s preview the system.When a new patient card is submitted, we can see it on the backend with the “Pending” status.

On the front end, it will render with two buttons on a corresponding page:

• Сlicking on the “Approve” button — the newly submitted card will change its status from “Pending” to “Published”;
• Сlicking on the “Remove” button — will send the freshly submitted card to the “Trash” folder.

So when you click on the “Approve” button, you will see a small “Form successfully submitted.” sign.

“Form successfully submitted.” is a default message that can be changed in the form’s General Message Settings.

This means that the action endpoint was fine-tuned successfully, and the system works. 

The same card now has the status “Published” on the backend.

That’s it. Now you know how to fine-tune the Formless Action Endpoint addon and set up a front-end system to approve/delete posts on a WordPress website.

The Generate PDF Form Action from JetFormBuilder enables users to create custom PDFs dynamically based on the information submitted through a form. This form-to-PDF generator is especially useful for creating a variety of documents, such as invoices, survey reports, receipts, contracts, and certificates.

Contents

• Generate PDF Form Action Installation
• Creating the Form
• Generate PDF Form Action Settings
• Template Editor
• Form Preview

Use cases for the PDF form generator include:

• personalized reports for clients;
• automating invoice generation for eCommerce transactions;
• generating certificates for course completions;
• replicating submission data into standardized documents.

These capabilities improve workflow efficiency in both business and educational environments.

To be able to use Generate PDF Form Action, one needs to have: 

• JetFormBuilder plugin installed and activated;
• Generate PDF Form Action installed and activated;
• web form created with the JetFormBuilder plugin;
• a PDF template created with the Generate PDF Form Action editor.

Generate PDF Form Action Installation

To install the Generate PDF Form Action, one needs to go to WordPress Dashboard > JetFormBuilder > Addons, and in the All Available Addons section, find the PDF Attachment addon. Clicking on the “Install Addon” button will start the installation, and then clicking on the “Activate Addon” will activate it.

When activated, a new section, Templates, will appear under the JetFormBuilder menu item. 

Create the Form

When the addon is activated, a form to apply it should be built. 

The new form can be created following the path: WordPress Dashboard > JetFormBuilder > Add New.

For demonstration purposes, we create a “Zolden Customer Satisfaction” form.

The form includes the following fields:

• Text Field — a field that collects the name of the user;
• Text Field — a field that collects the email ID of the user;
• Radio Field — a field that collects the grade of user satisfaction on a scale from “1” to “5”;
• Radio Field — a field that collects the grade of probability if the user recommends the Zolden store on a scale from “1” to “5”.

We should add a PDF form generator action, “Generate PDF,” so this form can generate a PDF when the user clicks the “Submit” button.

To do so, one needs to go to JetForm > Post Submit Action to add a new action by clicking on the “+ New Action” button. By typing “PDF” in the search field and then clicking on the action, one can add the Generate PDF action to the form.

When added, the form action pop-up settings will appear.

Generate PDF Form Action Settings

The form action pop-up contains a set of settings that allow the PDF generation capabilities to be finetuned in a few steps:

• SELECT PDF TEMPLATE — a field where a PDF template can be chosen from available ones (upon default, this field is blank);
• “Add new template” — by clicking on this button, one can create a new PDF template in the blocks editor (if the template is already chosen, the button will say “Edit template”);
• FILE NAME — a field where one can generate the structure of the PDF filename (default value is “%_template_name%”). By clicking on the “wrench” icon, the file name structure can be defined by including dynamic tags like “%name%” or “%email%” that correspond to the list of available fields in the form. This allows each generated file to have a unique, descriptive name based on form data, making it easier to organize and locate files. The file name should be entered without an extension, as the system automatically appends .pdf to the file;
• “Attach to the Send Email action” — by clicking on this button, one can add the “Send Email” form action, ensuring that the PDF is delivered automatically to the recipient, admin, and also CC/BCC;
• SAVE GENERATED PDF — by enabling this toggle, one can save a copy of the generated PDF in the related form record and into the folder in “wp-content”;
• MESSAGES SETTINGS — this section includes a set of fields, ERROR CREATING FILE and ERROR CREATING ATTACHMENT, that allow one to modify the error values. The default values are: “Error when saving a pdf file, namely when creating it, or a directory for it” and “Error when saving a pdf file as attachment,” respectively;

To save or cancel changes, click the “Update” or “Cancel” button, respectively.

Template Editor

Alternatively, one can access the template editor by following the path: WordPress Dashboard > JetFormBuilder > Templates.

The template block editor provides tools to add text fields, images, and other form data. One can insert dynamic fields to populate the PDF with specific form submission data, such as name, date, or email ID. To do so, one needs to click on the “Insert JetFormBuilder Macros” button “[ / ]” and add the dynamic field.

The flow is as follows:

• one needs to add the same fields to the template as they are in the form;
• by clicking on the block with the field name, one can choose a corresponding field macro.

When all the fields are mapped with corresponding field macros, the changes can be saved by clicking on the “Save” button.

To stylize the PDF template, one can choose among the following blocks:

• Paragraph;
• Heading;
• Table;
• Image;
• Columns;
• Conditional Block;
• Custom HTML.

Once a template is customized, it can be saved for future use. This allows for the reuse of templates across different forms without the need to recreate the design each time.

Form Preview

Check the form submission process as it is perceived on the front end.

Form records can be accessed via the path: WordPress Dashboard > JetFormBuilder > Form Records.

The Generate PDF action was fired upon submission, and the generate_pdf_8033_filepath (in your case, the file name may be different) field contains the URL to the PDF.

Also, the PDF was sent to the user and website admin email IDs as specified in the “Sent Email” form action.

To access the PDF files in the WordPress file system, one needs to go to the folder wp-content/uploads/jet-form-builder inside the year/month subfolder where the saved PDF files should be located.

That’s all one needs to know about fine-tuning the  “Generate PDF” form action in the JetFormBuilder plugin on a WordPress website.

In this guide, we will show how to build a JetFormBuilder form that will update the data of the bookings made with the JetBooking plugin.

Table of Contents:

• Create a Form
• Build a Pop-Up
• Add a Query
• Create a Listing
• Build a Template
• Attach Template to Profile Builder
• Check the Result

Create a Form

Proceed to WordPress Dashboard > JetFormBuilder > Add New to build a new form.

Initially, once the form is opened, complete its name.

Also, you will see the Welcome block added to the page. We want to create a form from scratch, so we are deleting this block for now.

The first field we add to the form is the Hidden Field. 

We set its FORM FIELD NAME to “booking_id” and select the “Current Booking ID” option as FIELD VALUE.

Next, we add is Select Field and set its FIELD LABEL to “Status.” The FORM FIELD NAME is generated automatically from the label this time.

In the FILL OPTIONS FROM drop-down list, we pick the “Generate Dynamically” option. Then, in the appeared GENERATOR FUNCTION field, we select the “Get Values List from Booking Statuses” option and complete the FIELD NAME with the “valid|invalid” value.

Also, we press the “Dynamic Tags” button next to the DEFAULT VALUE field to set the default value of the current “Status” Select Field.

In the opened Edit Preset pop-up, we select the “JetBooking” SOURCE, “Current Post” option in the GET BOOKING ID FROM field, and “Booking Status” as the BOOKING PROPERTY.

To save the default value preset, press the “Update” button.

Next, we add one more Select Field, this time called “Property” (FIELD LABEL). As the FILL OPTIONS FROM value, we select the “Posts” option and the “Properties” in the appeared POST TYPE field.

To set the DEFAULT VALUE, press the “Dynamic Tags” button next to this field.

In the opened pop-up, we pick the “JetBooking” SOURCE, “Current Post” as GET BOOKING ID FROM, and “Booking Apartment” as BOOKING PROPERTY. 

To save the changes, press the “Update” button.

The next field we add is the Check-in/Check-out dates field with the “Dates” FIELD LABEL and the “_dates” FORM FIELD NAME.

We select the “Separate fields for check in and check out dates” option in the LAYOUT field and set the “Check in” as the CHECK IN FIELD LABEL and “Check out” as the CHECK OUT FIELD LABEL.

We also complete the PLACEHOLDER and CHECK OUT FIELD PLACEHOLDER fields with the “Select” value and press the “Dynamic Tags” button next to the DEFAULT VALUE field to set a preset.

In the preset editing pop-up, we select the “JetBooking” option as a SOURCE, “Current Post” in the GET BOOKING ID FROM field, and “Booking Dates” in the BOOKING PROPERTY field.

Then, we press the “Update” button to save the preset.

After that, we add the Calculated Field with the “total” FORM FIELD NAME and put the “%ADVANCED_PRICE::_dates%” value inside it. 

In the CALCULATED VALUE PREFIX field, we put the “Total: $” value.

The final field of the form will be the Action Button. To make it suitable for the case, we change the FIELD LABEL to “Update.”

After the form fields are added, navigate to the JetForm tab of the form. Here, open the Post Submit Actions tab and press the “New Action” button.

In the opened pop-up, find and select the “Update Booking” action.

Right away, the pop-up with the action settings will be opened.

In the BOOKING ID field, select the name of the Hidden Field where the booking ID is stored, and in the CHECK IN/CHECK OUT field, pick the corresponding fields with the check-in/check-out dates.

The following fields located in the FIELDS MAP are optional for this action. The fields presented here are taken from the JetBooking data columns added in the Tools settings. 

For instance, we have connected the status field with the “Status” field of the form, the apartment_id with the “Property” field, and the total with the “total” field.

To save the action settings, press the “Update” button.

Once the form is ready, press the “Publish” button.

Build a Pop-Up

We want to add the built form to the pop-up that will be later linked to the Listing Grid placed on the Account Page. So, initially, we go to WordPress Dashboard > JetPopUp > Create New Popup to build a pop-up. 

In the opened pop-up, select the desired Content Type (in our case, Elementor) and, optionally, complete the Name and select the preset in the corresponding section.

Press the “Create” button to proceed to the editor.

In the editor, we delete the content added to the pop-up by default and add a JetForm widget to the pop-up.

Once done, in the settings, pick a just-built form in the Choose Form field.

Customize the form settings if needed and press the “gear” button to open the pop-up settings.

Here, activate the Loading content with Ajax and Force Loading toggles and press the “Edit” button next to Display Conditions to set the pop-up conditions.

Once the button is clicked, the JetPopup dashboard will be opened in a new tab. There, the pop-up visibility conditions pop-up will be displayed.

Press the “Add condition” button and pick the following options in the available drop-down fields: “Include,” “Singular,” “Page,” and “Account.”

Save the conditions by hitting the corresponding button.

Return to the editor and publish the pop-up.

Add a Query

Now, let’s build a Query that will be used as a source for the Listing template.

Head to WordPress Dashboard > JetEngine > Query Builder and press the “Add New” button.

In the Add New Query page, complete the Name field and set the Query Type to “JetBooking Query.”

Scroll down to the JetBooking Query section and press the “Dynamic Tags” button. There, pick the “Current user ID” option and click the “Add Query” button.

This way, the future listing will query data by the current user.

Create a Listing

Now, it’s time to create a Listing Template based on the built query.

Open the WordPress Dashboard > JetEngine > Listings/Components directory and click the “Add New Listing Item” button.

Pick the “Query Builder” Listing source and the just-built query as the Query. Then, complete the Listing item name and pick the preferred Listing view.

Press the “Create Listing Item” button.

First, we want to display the booking ID. 

So, we add a Dynamic Field widget to the page. Then, we open the Object Field drop-down field, scroll down to the JetBooking section, and pick the “Booking ID” option.

Then, we activate the Customize field output toggle and complete the appeared Field format field with the “Booking ID: %s” value.

Next, we add another Dynamic Field to the page. This time, we pick the “Status” option in the Object Field.

For this widget, we activate the Customize field output toggle as well. This time, we fill in the Field format field with the “Booking Status: %s” value.

The following field we add is one more Dynamic Field; this time, the Object field is set to “Booking Instance ID”.

Then, we activate the Filter field output toggle and pick the “Get post/page title” Callback. 

Next, we activate one more toggle, Customize field output, and complete the Field format field with the “Property: %s” value.

The next data we want to display is check-in/check-out dates, so at first, we add a Dynamic Field with the “Check In Date” Object Field.

For this field, we activate the Filter field output toggle and pick the “Format date” Callback. Another toggle we activate is Customize field output and complete the Field Format with the “Check-In Date: %s” value.

Then, we repeat the same procedure, but this time for the check-out date, so we pick the “Check Out Date” option in the Object Field, and the Field Format is set to “Check-Out Date: %s” correspondingly.

The last widget of the current Listing Item is the Dynamic Link. 

Initially, we change its Label to “Edit Booking.”

Next, we open the Advanced tab of the widget settings and unroll the JetPopup settings.

In the Attached Popup field, pick the built pop-up and activate the Jet Engine Listing popup toggle.

If you have finished with the Listing Item, click the “Publish” button.

Build a Template

Now, we want to build a template that will be added to the Account Page.

Go to WordPress Dashboard > Templates > Add New directory of the Elementor plugin. 

In the pop-up, set the type of template to “Page”, complete the template’s name and press the “Create Template” button.

In the template, add the Listing Grid widget and pick the just-built Listing.

Customize the template additionally if needed, and whenever you are ready, hit the “Publish” button to save the template.

Attach Template to Profile Builder

Now, we want to connect the built template with the Account Page.

Head to WordPress Dashboard > JetEngine > Profile Builder and open the Account Page tab. 

Scroll down the page and hit the “Add New Subpage” button.

We complete the Title field with “Your Bookings,” and the Slug is filled automatically.

As the Template, we pick the previously built Elementor template and press the “Save” button.

Check the Result

Open the Account Page on the front end and open the Your Bookings tab. 

Here, the listing with the bookings made on the website is presented. 

To access the pop-up with the form, we click the “Edit booking” button next to the first icon.

When the pop-up opens, you will see the completed form with the clicked booking data.

We change the dates in the Check in and Check out fields and press the “Update” button.

To check if the booking was edited, go to WordPress Dashboard > Bookings and open the booking that you have edited via the form.

That’s all; now you know how to update JetBooking booking with the help of the JetFormBuilder form.

Bookings can be updated using the JetFormBuilder form and its “Update Booking” post-submit action to change booking fields on the front end.

Post-Submit Action Settings

The Post Submit Actions tab can be found in the JetForm section of the form.

Once the “Update Booking” option is selected in the Post Submit Actions tab, the “pencil” button should be clicked to open the action settings.

When the button is clicked, the settings pop-up is opened. 

The pop-up includes the following customization fields:

• BOOKING ID — a field obligatory for completing. It should be connected to the form field indicating the booking ID. For instance, it can be the Hidden Field with the “Current Booking ID” FIELD VALUE;
• CHECK-IN/OUT DATE FIELD — a field obligatory for completing. It should be connected to the form field indicating the check-in/check-out dates; 
• FIELDS MAP — optional fields that correspond to the columns added in the JetBooking settings (Tools tab). The following fields should be assigned to the form fields added to the booking update form.

To save the action, one should click the “Update” button.

Once the form is built, the “Publish/Save” button should be pressed.

Form Submission

The form should be placed on any desired needed page/template.

For instance, our form is placed in the pop-up (built with the JetPopUp plugin) and connected with the listing put on the account page (created with JetEngine). 

In our case, the pop-up with the form can be opened by pressing the “Edit booking” button.

When the form is completed, one should submit it by pressing the corresponding button.

Booking Update Check

To check the update, one should open the WordPress Dashboard > Bookings directory. 

Then, the booking, just edited on the front end, should be opened.

The new data should now be filled in as values in the corresponding fields.

That’s all about the “Update Booking” Post Submit Action available with the JetFormBuilder and JetBooking plugins for WordPress.

• Set Up and Activate the Addon
• Create a Form
• Set the Post Submit Actions
  • Set the “Generate PDF” Post Submit Action
  • Set the “Send Email” Post Submit Action
  • Set the “Redirect to Page” Post submit Action
  • Add the Form to a Page
• Check the Results

Set Up and Activate the Addon

To install the add-on:

1. Go to WordPress Dashboard > JetFormBuilder > Addons tab and find the “PDF Attachment Addon“ in the All Available Addons section.
2. Press the “Install Addon” button, and once installed, it will appear in Your Installed Addons section.
3. Click the “Activate Addon” button.

Create a Form

Navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form.

The new form will be opened in the Gutenberg block editor. 

Press the “Start from scratch” button in the Welcome block to create your form. 

The Welcome block will be closed, and the Hidden Field, the Text Field, and the Action Button will be added by default.

Type the form’s name instead of the “Add title” placeholder. 

Learn how to build forms from the form creation tutorial.

In the given case, we deleted the Hidden Field and customized the default Text Field. 

In this case, the form will contain a Media Field for uploading images, Text Fields to enter the first name, last name, and email, a Number Field to input a number value (the users’ experience in years in case they apply for a job) and a Textarea Field to add more information.

Set the Post Submit Actions

Navigate to the JetForm settings tab and open the Post Submit Actions tab. 

The “Save Form Record” Post Submit Action is set by default. We did not delete this action to collect and manage data via the JetFormBuilder dashboard. In particular, it allows the upload of the generated PDF file as an attachment to the Media Library and displays the appropriate link on the Form Records Page. 

Set the “Generate PDF” Post Submit Action

The next step is setting the “Generate PDF” Post Submit Action.

Press the “+ New Action” button to add the “Generate PDF” Post Submit Action. Also, click the “Add new template” button in the opened Edit Action pop-up.

After clicking, you will be redirected to a new template. Type the template’s name instead of the “Sample template [locale time]” name default text.

Customize the template content according to your preferences. 

Using the Columns block, we divided the template into two parts, then added the Image block to the first column and the Table block to the second one. 

To display the appropriate values in the PDF attachment, we used the “%field name%” macro.

In particular, we placed the cursor in the first Column of the page and pressed the “plus” icon to select the Image block. We also hit the “[/]” button from the block toolbar to select the needed form field from the drop-down list (here, the “Photo” field).

Then, we moved to the second column and added the Table block. Also, we pressed the “plus” icon and hit the “[/]” button from the block toolbar. Finally, we selected the “First Name,” “Last Name,” and “Email” Text Fields, “Experience” Number Field, and placed the “About me” Textarea Field under the Column.

The created templates are collected in the WordPress Dashboard > JetFormBuilder >Templates tab and can be edited as any JetFormBuilder form.

For now, complete the template, press the “Update” button, and return to the form.

The last step at this stage is setting the “Generate PDF” Post Submit Action in the Edit Action pop-up. Type the required file’s name in the FILE NAME field or press the “wrench” icon to select the form field, whose name will be used as the file name of the submitted form.

In this case, we used the %_template_name% macro that returns the template’s header.

Also, enable the Save generated PDF toggle.

Finally, scroll down the pop-up and type the texts of the ERROR CREATING FILE and ERROR CREATING ATTACHMENT messages.

Set the “Send Email” Post Submit Action

To attach the generated PDF file with the submitted data to the email, click the “Attach to the Send Email action” button in the Edit Action pop-up. While pressed, this button opens a tooltip with a “Confirm” button. Clicking the “Confirm” button adds the “Send Email” action after the “Generate PDF” Post Submit Action is created.

Then, the tooltip will display the text that your file path is added to the attachments option of the next “Send Email,” and the “Go to the action” link.

Pressing this link opens the “Send Email” Edit Action pop-up, scrolls it down to the ATTACHMENTS section, and adds the generated PDF file as the attachment.

We scrolled up this pop-up, then selected the “Email from submitted form field” option from the MAIL TO drop-down list, and chose the form’s “Email” Text Field in the appeared FROM FIELD field. Then, we completed the SUBJECT field, set the “Plain text” CONTENT TYPE, and added the text in the CONTENT text field.

Finally, click the “Update” button to save the settings and close the pop-up.

Set the “Redirect to Page” Post Submit Action

This Post Submit Action allows users to be redirected to a created PDF file with submitted data. Press the “+ New Action” button to add the “Redirect to Page” Post Submit Action. Press the “pencil” icon to edit the action.

Set the “Custom URL” REDIRECT TO option and press the “wrench” icon to choose the REDIRECT URL from the drop-down list of macros.

Finally, press the “Update” button to save the “Redirect to Page” Post Submit Action settings and close the pop-up.

Once completed, press the “Update/Publish” button.

Add the Form to a Page

Create a page or open a page/post you need and place the JetForm widget/block/element. 

Learn about its settings from the JetForm Overview.

Select the built form in the Choose Form drop-down list. 

To display the form in other page builders (i.e., Gutenberg or Bricks), check our guide on How to Display a Form on the Front End.

Check the Results

Navigate to the front end, fill in the form’s fields, and submit the form.

Once the “Redirect to Page” Post Submit Action is performed, the created PDF file will be opened in the browser.

Then, enter your mailbox and check if you received the email with the PDF file attached. Open the attachment to observe the information from the submitted form fields.

Finally, navigate to the WordPress Dashboard > JetFormBuilder > Form Records tab and unroll the submitted form details.

Scroll the record down and find the Generated PDF section. Press the “View” link to open the attachment in the Media Library. Also, you can copy the file path link under the Label & Name section and paste this link into the browser to observe the created PDF file.

That’s all about creating a JetFormBuilder form for WordPress, generating the PDF file from that form, attaching that PDF to an email, sending it to a pre-specified user, and downloading the PDF file via your browser.

Make is a free platform that allows you to connect apps and services (e.g., Gmail) and automate workflows using a no-code visual builder. Let’s find out how to connect a WordPress form to Make with the JetFormBuilder plugin.

As an example, we will create a Contact Form and connect it to the Gmail service via the Make platform.

• Set Up Make and Add a Webhook
• Set Up the JetFormBuilder Form
• Adding Another Module
• Test the Flow

Set Up Make and Add a Webhook

Sign in or sign up for the Make platform. Once you’ve reached the dashboard, hit the “+ Create a new scenario” button in the upper right corner.

Proceed to this tutorial to learn more about the Make scenario creation process.

Choose the “Webhooks” module from the list of ALL APPS near the big “plus” button. In web development, a webhook is a method of augmenting or altering the behavior of a web page or web application with custom callbacks.

Then, you should choose the “Custom webhook” option from the TRIGGERS list.

In a new pop-up for the Custom Webhook module, hit the “Add” button near the drop-down menu.

Change the Weebhook name if required and push the “Save” button. 

After that, you will see the generated link, which you should copy to the clipboard by clicking the corresponding button. Then, proceed to your WordPress website without closing the Make window.

Set Up the JetFormBuilder Form

Navigate to WordPress Dashboard > JetFormBuilder > Forms, find the form you want to connect with Make and click to edit it.

Alternatively, you can create a new form by clicking the “Add New” button.

If you created a brand new form, give it a title. 

Select a pattern from the Welcome block (e.g., “Contact form” option) or hit the “Start from scratch” button.

The “Contact form” option adds the following fields to the form: two Text Fields (“Email” and “Subject”), one Wysiwyg Field (“Message”), and an Action Button.

Adjust the form fields if needed and proceed to the Post Submit Actionstab of the JetForm section. Reselect the “Send Email” option to the “Call Webhook” and click the “pencil” icon.

In the Edit Action pop-up, enter the previously copied WEBHOOK URL in the appropriate field. Then, hit the “Update” button.

The “Save Form Record” action stores the form entries in the database, which can be accessed from the Form Records Page. You can keep this action if needed.

After customizing the form, press the “Publish/Update” button to save the changes.

Place the form on the page with the JetForm block/widget/element and push the “Submit” button.

Return to the Make page after getting the “Form successfully submitted.” green note.

In the Webhooks pop-up, you should see another green note – “Successfully determinated.” – on the left from the “Copy address to clipboard” button. Hit the “OK” button.

Adding Another Module

With the Webhook module in the Make platform, you can connect any app to the WordPress form. For example, let’s attach the Gmail app. To do so, hit the “Add another module” button first.

To observe the app settings, move to the Gmail module tutorial.

Enter “Gmail” into the search bar and pick the “Send an Email” action.

Click the “Create a Connection” button and connect Make to your Gmail account. 

Then, you can adjust the Gmail module fields.

Enter a recipient’s email address into the To field (for example, a website administrator’s email). For convenience, you can enable the Map toggle.

In the Subject and Content fields, you can enter the form field names to add the submitted form data to the email subject and content fields. Click on the field and select the needed field from the list.

Set other fields if needed and push the “OK” button.

If you need to connect two or more modules to the Webhook, click the “wrench” icon between the Webhook and Gmail modules and hit the “+ Add a router” option.

Now, you can click on the Router to add more modules to the scenario.

For our case, we used only the Webhooks and Gmail modules. 

Test the Flow

After adjusting all modules, you can hit the “clock” icon to open the Schedule setting pop-up and alter the scenario scheduling. After that, push the “Run once” button to test the scenario.

Proceed to the front end page of your WordPress website, where the form is placed, fill in the fields, and press the “Submit” button.

Return to the Make platform. If the scenario was completed successfully, all modules will be highlighted in green.

Also, the email was sent smoothly.

That’s all. Now you know how to link a WordPress form with the Make platform and connect it with different apps using the JetFormBuilder plugin.

With the help of the JetFormBuilder plugin, it is possible to create a front-end registration form with email confirmation. To register on the site, the user should input the login and email address and follow the verification link sent to the mailbox. Once the user follows the link, the registration process is completed.

Email verification helps validate the user request before the form is submitted. Also, it makes the registration process fast and effortless — creating a password to complete the registration is not required. The user can use an automatically generated password to log in to the site in the future.

• Create a New Form
• Set Up Post Submit Actions
  • Configure the “Verification” action
  • Set up the “Register User” action with an auto-generated password
  • “Save Form Record” action
  • Add a “Send Email” action for a custom verification email
  • Add a “Send Email” action to send the password details
• General Messages Settings
• Display the Form on the Front End
• Test the Flow
• Verify Emails Manually from the WordPress Dashboard

Create a New Form

In the WordPress Dashboard, navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to start creating a new form. 

In the form editing page, enter the form name. 

The form will contain two Text Fields and one Checkbox Field. The first Text Field will allow the user to enter the email address, and the second Text Field will allow entering the login. The Checkbox Field will serve as a “Remember Me” field. 

In the Welcome block, pick the “Register User” pattern.

It adds two Text Fields: “Email” and “Login.”

In the right sidebar with Block settings, you can change the FIELD LABEL and FORM FIELD NAME of the Text Fields according to your preferences.

Also, note that the FIELD TYPE of the “Email” field should stay as “Email.”

Then, add a Checkbox Field below. Leave the FIELD LABEL empty and define the FORM FIELD NAME — for example, type “remember-me.”

Press the “Manage items” button to configure the options for this Checkbox Field.

In the opened pop-up, click the “Add new Option” button. Complete a LABEL field — “Remember Me.” Insert “1” as the VALUE option.

Once done, “Update” the changes.

Set Up Post Submit Actions

Switch the Block settings tab in the right sidebar to the JetForm tab. Unfold the Post Submit Actions section.

The “Register User” pattern added three post-submit actions: “Verification,” “Register User,” and “Save Form Record.”

Configure the “Verification” action

Click the “pencil” icon under the “Verification” action to open the customization pop-up.

The “Verification” action sends an email with a verification link to the specified email address. The user should press this link within the defined timeframe to complete the verification. Once the verification is complete, the rest of the Post Submit Actions will be executed.

The WHO CAN VERIFY THE SUBMISSION setting defines who has the authority or capability to verify or approve a submitted form:

• User & Administrator. The user can verify the form with the email, and the admin can verify it manually from the WordPress Dashboard;
• Administrator. Only administrators have the authority to verify the submission. 

After setting the verification permission, enter the number of hours into the LINK LIFESPAN field. This setting defines the timeframe within which the verification link remains active. If the LINK LIFESPAN field is left empty or if “0” is entered, the verification link will not have an expiration time.

After that, choose the email field from the suggestions under the EMAIL FIELD drop-down menu. Once the email field is specified, a new toggle will appear, encouraging you to Create custom verification email.

If the toggle remains disabled, a standard email will be sent to the user from the Administration Email Address set in the WordPress Dashboard > Settings > General tab.

Enable the Create custom verification email toggle and proceed to the rest of the action settings. We will set up the “Send Email” action later.

Move on to the SUCCESS PAGE and the FAILED PAGE settings. Select a page where the user should be redirected in case of a successful or failed verification. If no page is selected, the user will be redirected to the page where the form was initially submitted. It is also possible to “configure a separate Redirect to Page action” for each case.

In our example, we will redirect the user to a “My Account” page after successful verification and to a static “Verification Failed” page if the user fails to complete the verification. 

Once you finish the setup of this action, click the “Update” button to save the changes.

Set up the “Register User” action with an auto-generated password

Press the “pencil” icon to edit the “Register User” action’s settings.

In the FIELDS MAP section, the “Email” and “Login” fields are already mapped. Therefore, the value entered by the user into the “Login” field will be saved as the user login, and the value of the “Email” field will be saved as the user’s email. 

Then, map both the Password and the Confirm Password fields with the “Secure unique token” option. The “Secure unique token” option is added by the “Verification” action and represents a unique password auto-generated after form submission. This way, the form lets the user sign up with only their email and login, not requiring them to create a password manually at this stage. Later, this password will be sent to the user with a “Send Email” action.

Scroll past the FIELDS MAP section and select the User Role, which should be assigned to the newly registered user (e.g., “Subscriber”).

Next, scroll down to find and activate the Log In User after Register: toggle. This way, the user will be automatically logged in after completing the verification process. 

Select the “remember-me” Checkbox Field as the “REMEMBER ME” FIELD option. This field helps to keep the user authenticated for a longer period of time — after checking the “Remember Me” checkbox, the user will remain logged in for fourteen days; if not, only for two days.

We have finished setting up the “Register User” action. Save the settings and proceed to the next step.

“Save Form Record” action

The “Save Form Record” action stores the submitted form data on the Form Records Page. On this page, you can verify emails manually as described in the Verify Emails Manually from the WordPress Dashboard chapter of this tutorial.

In our case, we don’t need to modify the action settings, but you can configure them according to your needs.

Add a “Send Email” action for a custom verification email

Now, it is time to create a custom verification email.

Open the settings of the “Verification” action once more to click the “+ Add Send Email action” button. It will automatically add a new “Send Email” action where each part of the verification email can be customized.

Leave the MAIL TO and FROM FIELD settings intact and proceed to configure the rest of the fields.

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “HTML” CONTENT TYPE to allow the processing of HTML tags in the content of the email.

Then, edit the content of the email according to your needs. It is also possible to insert Macros to retrieve the values entered by the user into the form fields. To see the list of available Macros, click the wrench-shaped icon near the CONTENT field label.

The list contains general Macros that represent each form field and three special Macros added by the “Verification” action:

• %_jfb_verification_token% — represents a unique token generated for the user. If this token was set as the user password in the “Register User” action settings, you can insert the %_jfb_verification_token% macro in the email content to send the user this automatically generated password. The user will use it to log in; 
• %_jfb_verification_token_id% — represents the ID of the verification token in the database. A reference to each verification token is saved in the “jet_fb_tokens” database table; however, the token itself is not stored there;
• %_jfb_verification_url% — a verification link the user receives to complete the verification process. The link contains the verification token and its ID.

We used only the %_jfb_verification_url% macro from the above list and composed such an email:

“Please confirm your registration on the site %CT::SiteName%.

<b>If this was a mistake, ignore this email, and nothing will happen.</b>

To complete the registration, click on the link:

%_jfb_verification_url%

The link expires in 4 hours!”

Click the “Update” button to close the customization window and proceed to the following “Send Email” action.

Add a “Send Email” action to send the password details

The next step is to compose an email, which will be sent to users after they complete the registration. The letter will include an automatically generated password that users can utilize to log into the site until they opt to modify it.

Press the blue “+ New Action” button to add a new “Send Email” action, and click the pencil-shaped icon under the action name to call the customization pop-up.

Select the “Email from submitted form field” option for the MAIL TO field. Then, pick the “Email” field in the FROM FIELD drop-down menu, which appears below.

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “Plain Text” CONTENT TYPE option. To allow the processing of HTML tags in the content of the email, select the “HTML” CONTENT TYPE.

Finally, compose the content of the letter, which the users receive after they complete the registration. Include the %_jfb_verification_token% macro to send the users their auto-generated passwords.

We composed such a letter:

“Your registration on [%CT::SiteName%] is completed. Follow this link to enter your account:

https://test-site/account/

This is your temporary password: %_jfb_verification_token%

You can change the password in Profile Settings: 

https://test-site/account/settings/”

Once you are finished with the settings, “Update” the changes.

General Messages Settings

Scroll past the Post Submit Actions settings tab and unfold the General Messages Settings. Settings in this tab allow changing the default notifications that pop up after the form submission.

Most importantly, change the default FORM SUCCESSFULLY SUBMITTED message and encourage users to check their mailbox after they submit the form. For example: “Please, check your email inbox to complete the registration.”

Once you finish customizing the form messages, the form is complete. Hit the “Publish/Update” button to save the result. 

Display the Form on the Front End

Head to the page or template where the registration form should be located.

If editing the page with Block Editor, use the JetForm block to display the form in the needed part of the page.

If editing with Elementor, use the JetForm widget to place the form on the page.

For more details, follow the detailed How to Display a Form on the Front End guide to learn how to add the form in any page builder.

Test the Flow

Move to the front end and complete the form to register a new user. Use an email address you can access.

Check the email inbox for a new letter containing the verification link. Follow the link to complete the registration.

After following the link, one should be redirected to the page previously selected in the settings of the “Verification” action. The registration is complete, and a new user is created in WordPress.

Also, the second email is sent to the user containing the password to the account.

Verify Emails Manually from the WordPress Dashboard

With the “Save Form Record” post-submit action, you can reach the submitted form data in the WordPress Dashboard > JetFormBuilder > Form Records tab.

If the form has the “Verification” action, the submitted form can have three Statuses: 

• Verified – if the user verified the form from the email or the administrator verified it manually. You can set who can verify the form (only admin or user and admin) in the “Verification” action WHO CAN VERIFY THE SUBMISSION setting;
• Waiting verification – if the user or admin hasn’t verified the form yet;
• Verification token expired – if the user or admin didn’t manage to verify the form in the timeframe set in the LINK LIFESPAN settings of the “Verification” action. Then, the user needs to submit the form one more time to verify it.

If the submitted form has the “Waiting verification” Status, it contains the “Verify manually” action by clicking which the form obtains the “Verified” Status.

If you hit the “View” action under the form with the “Verification” post-submit action, you’ll see the Verification section. 

This section shows the verification Status: “Pending,” “Expired,” or “Verified.” It also displays the time when the verification Expires, Expired, or was Verified according to the Status.

If the verification has a “Pending” Status, the section contains the “Verify” button with which the administrator can verify the form.

Also, pay attention to the Actions Log sections: if the form is expired or waiting for verification, only two actions are completed: “Verification” and “Send Email” with the custom verification email.

If the user or administrator verifies the form, the next two actions are completed: “Register User” and “Send Email” with the password details.

That’s it; you have learned how to create a registration form with a double opt-in using only the free version of the JetFormBuilder plugin.

The “Verification” action allows verifying the user’s email before processing other Post Submit Actions. The form will send an email with a confirmation link to the address entered by the user. After the user follows the confirmation link, the verification is completed, and the form is submitted successfully.

Table of contents:

• Verification Action Settings
• Events
• Additional Settings for Register User Action

Verification Action Settings

The “Verification” action can be found by opening the Post Submit Actions tab of the form. To add a “Verification” action, the “+ Verification” button should be pressed. 

Each form can have only one “Verification” action.

To edit the action, one should click the pencil-shaped button.

Pressing the button activates the customization pop-up.

• LINK LIFESPAN — after submitting the form, the user receives an email containing a verification link. The LINK LIFESPAN setting indicates the expiration time of this verification link. Here, one can specify the number of hours during which the link stays active. If this field is left empty or contains the “0” value, the link will have no expiration time;
• EMAIL FIELD — a drop-down list to select a form field in which the user should enter the email address. A verification email will be sent to the address entered into the selected field. If one of the Text Fields in the form has the “Email” Field Type chosen, this Text Field will appear in suggestions.

• Create custom verification email — the toggle appears after selecting an EMAIL FIELD option. If the switcher is disabled, a standard verification email will be sent. If enabled, an “Add Send Email action” button will appear, encouraging one to create a custom “Send Email” action with complete control over the email settings.

• SUCCESS PAGE — here, one of the existing pages can be selected to redirect the user after a successful verification. If no page is set, the user will be redirected to the page where the form was submitted. It is possible to configure a separate “Redirect to Page” action for the same purpose by clicking on the “configure a separate Redirect to Page action” link;
• FAILED PAGE — here, one of the existing pages can be selected to redirect the user in case of a verification failure. If no page is selected, the user will be redirected to the page where the form was submitted. By clicking the “configure a separate Redirect to Page action” link, a fully customizable “Redirect to Page” action can be created.

Events

Events define the time and condition under which a specific Post Submit Action should be performed. Usually, events are used with the Payment Gateways to control when the action should be executed — after or before the payment is completed.

The “Verification” action adds two new Events — “VERIFICATION.SUCCESS” and “VERIFICATION.FAILED.” These events can be added to Post Submit Actions to define which action to perform in case of a successful or unsuccessful verification. 

In a form where the “Verification” action is present, and the Payment Gateways are disabled, three events can be used:

• DEFAULT.PROCESS — actions with the “DEFAULT.PROCESS” Event will be executed right after the form submission and before the user completes the email verification. For example, if a custom verification email is created through the “Send Email” action, the “Send Email” action is automatically assigned the “DEFAULT.PROCESS” Event; 
• VERIFICATION.SUCCESS — this event fires after the email verification is completed successfully. Therefore, actions with the “VERIFICATION.SUCCESS” Event will be performed once the user clicks the confirmation link in the mailbox and the verification is successful;
• VERIFICATION.FAILED — this event is triggered when the user fails to complete the email verification. Actions with the “VERIFICATION.FAILED” Event will run if the user follows a verification link that was already used or if the link contains an incorrect token.

To assign a new Event to a Post Submit Action, one should click the “Edit Conditions & Events” button under the name of the specific action.

Then, one should switch to the Events match tab in the Edit Action Conditions & Events pop-up to add a new Event.

Additional Settings for Register User Action

The “Verification” action adds new field options to the settings of the “Register User” action:

• Secure unique token — this option is usually selected for the Password and Confirm Password fields. The “Secure unique token” allows automatically generating a password for the user until the user creates a new password manually. This token can be sent to the user in the “Send Email” action using the %_jfb_verification_token% macro;
• ID of the secure unique token — a reference to each token is saved in the “jet_fb_tokens” database table, and the “ID of the secure unique token” option represents the ID of that record in the database. The token itself is not stored in the database;
• Verification URL — a verification link the user clicks to complete the verification process. The link contains the token and its ID.

Follow a related step-by-step guide to learn How to Create Registration Form With Email Verification from scratch.

That’s all about the “Verification” Post Submit Action available as part of the JetFormBuilder functionality for your WordPress-built forms.

Tutorial requirements:

• Elementor (Free version) or WordPress Block editor (Gutenberg);
• JetFormBuilder plugin installed and activated;
• JetEngine plugin installed and activated.

The JetEngine Data Store module allows users to save featured items. The Data Store Actions add-on adds a Post Submit Action to the JetFormBuilder forms to remove saved items with one click.

Install and Activate the Data Store Actions Add-on

The first step is the installation and activation of the add-on. 

For this, navigate to the Crocoblock Free DevTools Kit page, find the Data Store Actions add-on, and click the “Download” button.

Move to the WordPress Dashboard > Plugins > Add New tab, install and activate the add-on.

Create a Data Store

Create a full-set data store on the website.

For example, I created a data store for the favorite jobs in the JetEngine > JetEngine > Data Stores tab with the help of the Data Stores Overview and How to Create Favorites Page Using Data Stores Module.

Besides that, you can learn How to Create “Recently Viewed” Section Using Data Stores Module, and How to Add Terms to Data Store.

I proceeded to the page with the Listing Grid with jobs and saved several job positions.

Also, I went to the page with the Listing Grid with the query that shows items added to the data store. Open the page in the Elementor or WordPress (Block) editors, and click to edit the Listing Grid widget or block. 

Open the Advanced settings tab and enter the CSS ID. Later, you can enter the Listing Grid CSS ID into the form to clear the data store if the “AJAX” Submit Type for the form is set.

The Elementor view:

The Gutenberg view:

Create a Form

Go to the JetFormBuilder > Add New tab. Enter a title, delete the Text Field, and change the Action Button label according to your needs. 

Navigate to the JetForm tab and unfold the Post Submit Actions tab. Pick the “Clear Data Store” option and hit the pencil icon.

In the Edit Action pop-up, enter the Data store slug (you can find it in the JetEngine > JetEngine > Data Stores tab) and the Listing Grid CSS ID into the Listing to update field. If you want to clear data stores of several Listing Grids, separate the CSS IDs with commas. The Listing to update option helps to update Listing Grids if you select the “AJAX” form Submit Type when you set the form placed on the page.

Then, push the “Update” button.

Press the “Publish/Update” button to save the form.

Place the Form

Open the page where the data store items are in Elementor or Gutenberg editor and place the JetForm widget or Form block.

Choose Form from the drop-down menu and set other settings. You can learn more from the Adding the Form Block tutorial.

Settings in the WordPress editor are the same:

Also, you can hide the form after removing the data store items using the JetEngine Dynamic Visibility Feature.

In the Elementor editor, go to the Advanced settings tab and open the Dynamic Visibility tab. Enable the toggle, pick the “Show element if condition met” Visibility condition type, and “Query Has Items” Condition. From the Query to check drop-down, select the needed custom query that shows data store items in the Listing Grid on the page.

In the WordPress (block) editor, click the eye icon.

Enable the toggle, pick the “Show element if condition met” Visibility condition type, click the “Add new item” link, and select the “Query Has Items” Condition. From the Query to check drop-down, select the needed custom query.

Finally, click the “Update” button to save the form.

Check the Results

Open the page on the front end.

Hit the “Submit” button to check how the action works.

After that, all data store items are successfully removed from the page, and the form is hidden according to the visibility condition.

That’s all. Now you know how to clear the data store with the JetFormBuilder plugin.

In this tutorial, we’ll figure out how to redirect our form to Thank you page with the help of the JetFormBuilder plugin and WooCommerce Cart & Checkout Action addon.

• Install and Activate Add to Cart & Redirect to Checkout Addon
• Create an Order Submission Form
• WooCommerce Cart & Checkout Action Settings
• Redirect to Thank you Page

Install and Activate Add to Cart & Redirect to Checkout Addon

So the first step will be the installation and activation of the addon. 

For this, navigate to WordPress Dashboard > JetFormBuilder > Addons and find the “WooCommerce Cart & Checkout Action” addon in the All Available Addons section. Click on the “Install Addon” and don’t forget to press the “Activate Addon” button.

Also, please, make sure that you already have the WooCommerce plugin installed and activated.

Create an Order Submission Form

When we are done with the first step, let’s create a new form by moving to JetFormBuilder > Forms and pressing the “Add New” button.

Add as many fields as you need because later, we will display the submitted info on the Thank You page.

WooCommerce Cart & Checkout Action Settings

In the menu, find the Post Submit Actions section. Click on the “New Action” button and select the “Add to Cart & Redirect to Checkout” option from the list.

Click the pencil-shaped button to open a settings pop-up. In the action settings, we need to connect the WooCommerce checkout fields with the corresponding form fields. Let’s resume all action options:

• Get product ID from. This field contains two options —“Form Field” and “Manual Input,” which can help to determine where the form will get the product ID from. By selecting the first option, ID will be pulled dynamically from the corresponding Form Field. With “Manual Input,” we can specify ID manually;
• Product ID field / Input product ID. Depending on the previous step selection, here, you can select the corresponding Product ID field from your form or input the Product ID manually;
• WooCommerce Price field. In this dropdown, you need to select a field that stores the total price. If the form field is left empty purposefully, the price will be received from the post meta value;
• Heading for Order Details. Type in the title that you want to show before the order data on the Checkout page;
• WooCommerce order details. By clicking on the “Set up” button, you can configure a list of custom fields that will be displayed on the Thank You page and during the order preview in the dashboard. To put it otherwise, you can edit the form metadata here, which means that these order details will be the same for all Redirect to Checkout actions within one particular form. Let’s check out the settings:
  • Safe deleting. This toggle is active by default and prevents you from deleting items unintentionally. When it is on, the item will be only removed after you confirm that you need to remove it;
  • Label. You can provide the field label here;
  • Select form field. Pick the corresponding form field that you are willing to show on the Order Details list;
  • Add new item. Allows you to add another custom field;
  • Update. Click this button to save the changes and return to the action edit window;
  • Cancel. Click this button to return to the action edit window without saving the changes.

• WooCommerce checkout fields map. Here, you can connect the WooCommerce checkout fields to the corresponding form fields. By doing so, you get a partly pre-filled form after being redirected to the Checkout page.

Redirect to Thank you Page

After everything is set and done, let’s add the form to the Single Product page and test it.

Fill in all info and press the “Proceed to Checkout” button. Then, we’ll be redirected to the Checkout page, where we need to add our billing and shipping information and place an order. As we added all form fields into Woocommerce order details, we can see them all here.

Right after we place an order, we can see Thank You page that also contains all the data we submitted during the form.

That’s all; now you know how to redirect the JetFormBuilder form to WooCommerce Thank You page on your WordPress website.

Please note that you can output the created form in Elementor, Bricks, and Gutenberg using a dedicated widget/element/block and any other builder via a shortcode.

Tutorial requirements:

• JetEngine and JetFormBuilder plugins installed and activated;
• Created relations. We have a dedicated tutorial about doing this on the example of CPT posts.

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.

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.

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.

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

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

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.

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.

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.

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 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.

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.

Place the JetForm block in the post.

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

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.

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.

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.

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.

Moving to the Post-submit Actions tab, select the “Insert/Update Post” option and click on the pencil-shaped icon to edit the 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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Save Form Record is a post-submit action that stores the form entries in the database and makes them easily аccessible from the dashboard.

This action keeps complete information regarding the forms submitted by a user. It will include the data entered into the form fields, as well as performed post-submit actions and errors.

How to Use Save Form Record Action

Go to WordPress dashboard > JetFormBuilder > Forms. Open a previously created form and proceed to the Post Submit Actions section.

Unfold it and click on the “New Action” button.

Select the “Save Form Record” option from the drop-down list. Click on the pencil-shaped button to edit the action and proceed to its settings.

If you want to save the user’s IP address and User-Agent data, then enable the Store the IP address and other request headers switcher in a pop-up settings window. Don’t forget to update the action and form itself.

The form can be filled in and sent now.

Once it’s submitted, you can proceed to the WordPress Dashboard > JetFormBuilder > Form Records tab.

When you open a submission, there will be a Form Record page displaying complete form information.

Now you know how to store the form data and easily review it in the WordPress dashboard.

If you want the visitor of your website to see a Thank You page after form submission, you need to set up the Redirect to Page post-submit action.

This guide includes a simple way to redirect a form to a Thank You page and describes how to create a personalized message displayed to the user after the form submission alongside the option to hide a section with the form using the Dynamic Visibility module.

If you’re a fan of visual guides, don’t hesitate to follow our detailed video tutorial. 

• Redirect Form to Thank You Page
• Create a Personalized Thank You Message 
• Hide Form Using Dynamic Visibility

Redirect Form to Thank You Page

For this option, you need only the JetFormBuilder plugin installed and activated.

Go to JetFormBuilder > Forms and open the form you want to add a redirect to. 

Proceed to the JetForm settings > Post Submit Actions. Add a new action and select “Redirect to Page” from the drop-down menu. 

Click on the pencil-shaped button to edit the action and proceed to its settings.

In the Redirect to drop-down menu, choose “Static Page” and proceed to the next option, Select page. There will be a list of all the pages you’ve created so far. Select a “Thank you page” option here. 

Update the form. The result can be seen in this video. 

Create Personalized Thank You Message

A personalized thank-you message will display the user’s name previously entered into the form.

Before we start, make sure you have the JetEngine plugin installed and activated since we will be using a CPT, meta fields, and a listing template.

A Custom Post Type contains the list of the meta fields repeated in the form. This way, the form will be saved as a post, and the information the user entered into the form fields will be saved under the appropriate meta fields.

That’s why you need to create a meta field called Name and make sure that you have the same Name field in the form.

To link the form field with the CPT meta field, you need to set up Insert/Update Post action.

Proceed to the JetForm > Post Submit Actions pathway. Add a new action, select “Insert/Update Post” from the drop-down list, and click on the pencil-shaped button to edit the action. 

In the Post Type drop-down menu, you will find all types of posts available to you. Select the CPT you’ve previously created. Proceed to the Fields Map and find the Name form field.

In the drop-down menu next to this field, you need to select the “Post Meta” option and enter the name of the same meta field below.

Update the settings and the form.

Now we need to create a listing template to dynamically pull the content from the back end to the Elementor page builder to display it on the front end.

Go back to WordPress Dashboard > JetEngine > Listings. Create a new listing. Don’t forget to set the listing source to Posts and specify it in the following drop-down menu.

Once you hit the “Create Listing Item” button, you will be redirected to the Elementor page editor. Add a section and apply the Dynamic Field widget.

Under the Content tab, set “Meta Data” as a Source and select the “Name” meta field from the corresponding drop-down list.

Scroll down the settings and enable Customize field output. In the Field format box, enter the message you want to display on a Thank You page. %s, in this case, will be replaced with the Name field value.

Publish the listing template. Now you need to add this listing to the page.

Head back to the WordPress Dashboard > Pages directory and edit the Thank You page with Elementor.

Find the Listing Grid widget in the elements panel and drag it to the page’s section. Choose the listing template you’ve previously created in the Listing drop-down menu. Also, set Columns and Posts number to 1.

Click on the “Update” button, and here’s the final result.

Hide Form Using Dynamic Visibility

The last option is for those who don’t want to create a separate Thank You page. This way, a form will be hidden after the submission, and a thank-you message will show up.

Before we proceed, go to JetEngine > JetEngine Dashboard and make sure that you have the Dynamic Visibility for Widgets and Sections module enabled.

For this option, we don’t need a redirect to a different page; that’s why go back to the form settings and remove the Redirect to Page post-submit action.

Proceed to the Dashboard > Pages directory. Find the page with the form and edit it with Elementor.

Add the Text Editor widget and enter a message, e.g., “Your request has been successfully submitted.”

Edit the form and proceed to the Advanced tab. Unfold the Dynamic Visibility section and enable it.

Set the Visibility condition type to “Hide this element if condition met” since we need a form to disappear.
To add a new Condition, press the “Add Item” button and select “Equal” from the drop-down list of conditions.

Now edit the Text Editor widget. Proceed to the Advanced tab. Enable Dynamic Visibility and repeat the same steps changing only the Visibility condition type to “Show this element if condition met.”

For the Field, click on the Dynamic Tags button and choose “Macros” from the list.

Once it’s selected, there will be a small Settings pop-up window with the list of macros. Set it to “Query Variable” and enter ‘status’ to the Variable name field bar.

Proceed to the Value and enter ‘success’ there.

Now edit the Text Editor widget. Proceed to the Advanced tab. Enable Dynamic Visibility and repeat the same steps changing only the Visibility condition type to “Show this element if condition met.”

Update the page and check how it looks on the front end.

The crucial thing to do once the user has registered on the website is to allow them to update their profile. More specifically, it is a way to change a WordPress user role as it gives different access levels to the website. In this tutorial, you will learn how to change the user role thanks to JetFormBuilder forms.

JetFormBuilder forms will help you change the current user role to another one after the form submission. The vital point in this process is Post Submit Actions. Let’s find out what options will be suitable for changing WordPress user roles via a form.

Related Post Submit Actions

The first action that may be helpful is Update User. Apply it to let the user edit their profile. After you select this post submit action, you can set the user role created via the form.

Another relevant post submit action is Register User, which can be used initially to add a new user. However, it is not the only feature of this post submit action. You can also use it to set the role of the newly-added user.

Update User Form

The starting point is creating a form. Go to JetFormBuilder > Add New. The form is not empty by default. There are Hidden, Text, and Submit Fields by default. Delete them or edit if needed.

Name a form and place all the needed fields to create a WordPress form that will suit you.

Note that the User ID hidden field is obligatory as you need it for the correct work of the form. To find out the User ID, go to the WordPress Dashboard > Users and hover the mouse over the required user name. A small pop-up window with a user ID will appear.

Head back to the form editor. After customizing the blocks, move on to JetForm Settings > Post Submit Actions. Choose the “Update User” option from the drop-down list and proceed to its editing.

Set the Fields Map values and proceed to the User Role drop-down. Pick the role from those available to you. After selecting the option, adjust the Messages Settings if needed and update the action.

Head to the Pages > Add New and click on the plus-shaped button to add a new block. Find the JetForm block and place it on the page. Configure the JetForm Form Settings.

Adjust other JetForm Settings if desired and click on the “Publish” button. The next step is to place a form on the page.

• Choose Form — select a form you want to be displayed on the page;
• Fields Layout — choose between “Column” and “Row” options;
• Required Mark — change the default asterisk symbol that will be shown next to the required field;
• Submit Type — define whether the page will be reloaded after the form submission or not;
• Enable form pages progress — toggle to add a step indicator above the form. To configure the steps, use the Form Break Field.

Check Advanced Settings if you want to set the CSS classes or work with the JetStyleManager plugin to customize the form straight in the page editor.

Publish the page once you have finished editing and view it on the front end.

Once you click on the “Submit” button, check the results by navigating to the WordPress Dashboard > Users tab.

The WordPress user role has been updated from subscriber to editor.

Register User Form

To add a new user while registration, we need to repeat some initial steps made while creating the Update User Form. Head to JetFormBuilder > Add New.

The form already contains Hidden, Text, and Submit Fields by default. You can delete the fields you don’t need.

Give a title to the form and pick the needed fields by clicking on the plus-shaped button. Edit them and move on to the JetForm Settings. In the Post Submit Actions tab, choose “Register User.” Open the action editor by pushing the button under the drop-down menu.

Firstly, you can toggle Allow creating new users by existing users and define who can add a new user. Select the corresponding field options in the Fields Map section and choose the role for a new user. Type in the other fields if needed. However, they are not necessary in this specific case.

Update the action and publish the form if everything is set accordingly. To apply the form to the page, go to Pages > Add New.

Place the JetForm block on the page and proceed to the JetForm Form Settings.

• Choose Form — pick the newly-created form;
• Fields Layout — define in which way the field label and its bar will be placed, as “Column” or “Row”;
• Required Mark — set the symbol displayed next to the required fields;
• Submit Type — choose between “Page Reload” and “AJAX” options;
• Enable form pages progress — toggle if you work with Form Break Field and want to apply a step indicator above the form.

Next are Advanced Settings that contain one field where you can put Additional CSS class(es) if needed. You can also use the JetStyleManager plugin to customize the form appearance while editing.

Once you have adjusted the settings, publish the page and check it out. 

Click on the “Sign Up” button and go to the WordPress Dashboard to check if the user was created. Open Users > All Users.

The new user has been created and displayed.

Now you know how to update WordPress user roles via JetFormBuilder forms using the “Update User” and “Register User” post submit actions.

Presently, all the services successfully work with email integration. Nevertheless, the email marketing profit is still questionable. The modern user subscribes to a large number of services and does not continuously check the inbox.

One of the most valuable choices is mass SMS messaging. People open them much more often than constantly sent emails. 

Common SMS Integration Use Cases

Order confirmation

It is widespread that users await the order confirmation. Otherwise, they may become nervous in expectation of the desired email. SMS notifications are displayed without additional settings and don’t confuse the customer.

Appointment reminder

An excellent opportunity not to lose clients is to remind them about their appointment. And it helps to save money because of not missing events.

Vital notifications

There is always something important to say. Do not waste the opportunity to have close contact with the clients and inform them about important news.

Discount programs

Send users discount codes that will activate limited offers. Such a campaign will interest the customers so they will not forget about the products you sell.

All these use cases can be implemented with the help of the steps described below.

Set Messaging Tool with Zapier

Many messaging tools provide website maintenance services. All of them have their exclusive features. However, if you have considered working with Twilio, this guide is for you.

Twilio is believed to be one of the best messaging services, according to Zapier. You can link JetFormBuilder forms to Zapier; read more about it in this overview.

Initially, start with the Twillio registration if you don’t have an account yet. Customize all the settings that will allow you to work with messages. Once you are registered, proceed to Zapier and make a registration there.

Push the “Create Zap” button. 

Webhooks trigger event

Let’s set a “Webhooks by Zapier” option as the trigger. Note that this action works only with Zapier’s trial period or premium accounts. 

Set “Catch Hook” as the Trigger Event and click on the button to continue.

Copy the Custom Webhook URL for setting an integration between the JetFormBuilder form and Zapier.

Navigate to JetFormBuilder > Forms. Create or open the form you want to integrate with Twilio Messaging Tool. 

Open JetForm Settings and scroll down to Post-Submit Actions. Choose the “Call Webhook” option for Zapier integration.

Paste the Webhook URL and update the form. 

Proceed to the frontend to test the action. Fill in the form and click on the “Submit” button.

Fill in the form and click on the “Submit” button. Come back to Zapier and test the trigger.

“Send Email in Gmail” action event

The following step is choosing the action event. Let’s set a “Send Email in Gmail” action. It is not necessary. However, in this way, you will get notifications about new orders.

Select the Gmail account to connect it with Zap. Continue to set up all the required fields to form emails that will be sent to Gmail.

Once the email has been sent, pick the subsequent action event for messaging.

“Send SMS in Twilio” action event

Pick the “Twilio” option from the drop-down list and “Send SMS” as an action event. Click on the button to continue adjusting the settings and connect the Twilio account as you did before with Gmail.

Set up the action by filling in the required information.

If everything was set successfully, you should get an SMS sent to the number you put in the form.

As you can see, there is additional information before the custom text you have adjusted. It is displayed due to the setting Twilio Trial. However, if you have upgraded the account, there will be no extra notes.

Turn on Zap once you are ready. JetFormBuilder form integration with Twilio is ready. The message will now be sent every time after the form submission.

Mind that you are also free to use any SMS application that is compatible with Zapier.

Managing the form results can be a challenging task. Though if you work with Zapier and JetFormBuilder, it should be much easier. Let’s find out how to connect WordPress form to Zapier.

Create a Zap

Sign up for a Zapier account or open the one that already exists. Click on the “Make a Zap” button to start working on the connections.

Name a Zap, and let’s begin. There are two main steps that define a Zap. Firstly, you need to pick a Trigger Event and then an Action that will be performed.

Choose the first trigger. You can do it by typing its name in the search bar. Add Webhooks by Zapier and choose “Catch Hook” as a Trigger Event. It is essential if you want to connect your form to the Zapier. Click on “Continue.”

Copy a Custom Webhook URL to conjoin it to the form.

Connect a Zap to the Form

Navigate to the WP Dashboard > JetFormBuilder > Forms, find the form you want to connect with Zapier, and change a default “Send Email” Post Type Action to “Call a Webhook.” Click on the “Edit” button and paste the URL to the field. Update the Post Submit Actions and WordPress form by clicking on the similarly named buttons.

Add this form to the page if you haven’t done it yet and go to the front-end. Fill in the fields and submit the form. Note that you do this for Zapier integration testing, so type in a valid email to which you have access.

Go back to the Zap editing. The next step is the Test trigger. That is why we needed to fill in the form.

When the connection is established, click on the “Continue” button. Now we have learned how to connect WordPress form to Zapier.

Set an Action

Select the app that will perform an Action. For instance, we will choose Gmail and arrange “Send Email” as an Action Event.

Choose a Gmail account. To link a new Gmail, click on “Connect a new account” and type in all the required credentials.

Then you can set up action by putting all the data about where to send an email, the email address that will send this letter, and other fields like From Name, Reply To, Subject, Body, and so on.

When the desired fields are input, you can send a test email to check WordPress integration with Zapier in action. You can check this letter on the email you have put in the To field.

Now just hit “Turn on Zap,” and it is ready. The WordPress integration with Zapier completely works.

However, note that you can add more than one action. So if you want to set some other events, just go back to the Zap editing and choose one more app. 

That is why Zapier integration makes form management simple. For example, you can connect a MailChimp account, work with Google Calendar, or use Google Sheets for better productivity at the same time.

Furthermore, watch our video and learn how to integrate Zapier with the JetEngine forms to create similar form integrations.

MailChimp is a service that helps you manage email notifications and a list of user emails. With the MailChimp Post Submit Action, you can connect the JetFormBuilder form and the MailChimp service. The data that users insert into the form will be transferred to the application, and you will be able to use it there.

If you still don’t have a MailChimp account, please, feel free to check this tutorial. It provides detailed instructions on creating an account and finding out your MailChimp API key and Audience ID.

To create a MailChimp Subscribe Form in WordPress, head to JetFormBuilder > Add New. Give a name to the form and delete the default post_id field since we don’t need it.

Add new fields manually or use the Subscribe Form Pattern. It is the list of fields that you can create and later connect to the MailChimp:

• Text Fields:
  • for Email is required;
  • for first\last name, address, phone can be added if you wish;
• Date Field for date of birth.

Then open the JetForm tab and proceed to the Post Submit Actions section. Set the type to MailChimp and click on the “Edit Action” icon.

In the newly appeared window, you should input your MailChimp API Key.

You can paste it manually or enable the Use Global Settings toggle. If you pasted the MailChimp API Key in the JetFormBuilder Settings, it appears automatically. Then hit the “Validate API Key” button.

If the operation is successful, you will see the new “Audience” field. Select the Audience name that you have input on the MailChimp website. If you have added another Audience and don’t see it in the list, click on the “Update Audience List” button.

After you set the Audience, more fields will appear:

• Groups. If you have created them in the Manage contacts tab on the MailChimp website, your groups should appear in this field;
• Tags. You can input here tags, which you have created on the MailChimp website;
• Double Opt-in. Enable this toggle in case you want the contacts to receive an opt-in confirmation email when they subscribe to your list;
• Fields Map. There is a list of fields where users can enter their data, which can be attached to the MailChimp website. In that drop-down, you can choose appropriate fields from the form. The Email field is required.

After customizing all settings, “Update” the Edit Action and “Publish” or “Update” the form.

The next step is adding the form to a page. To obtain the information on how to do this, follow this link.

When users subscribe with your form, you can see all information about them on the All contacts tab.

That’s it. Now the users’ data will be transferred to the MailChimp website.