Use the WordPress application form builder to acquire the best talent out there faster than ever.
- Why You Need a WordPress Application Form
- Top WordPress Application Form Features
- WordPress Form Pattern Structure
- How to Create a WordPress Online Application Form
- WordPress Application Form Pro Features
Why You Need a WordPress Application Form
Application forms help to collect job applications and detect potential employees. Besides that, they let people apply for a scholarship/loan/internship, enter a contest, volunteer, adopt a pet, close a rental agreement, and more.
Use JetFormBuilder, a WordPress application form plugin, and its form pattern to get a customizable WordPress application form in one click. It contains handy Checkbox Field types that help you figure out the little details about the applicant. Plus, you can make a lengthy form multi-step, thanks to the Form Break Field block.
Top WordPress Application Form Features
- Use a shortcode to add the application form to WordPress posts, pages, widgets;
- Turn long application forms into multi-step and make them user-friendly;
- Decide which form fields you want to make Required;
- Use reCAPTCHA v3 validation to protect the application form from spam;
- Autosave the form progress and inputted data if the form filling process was interrupted
- Provide the Success, Validation, and Error Messages during form submission;
- Receive email notifications to the specified email address each time the form is submitted;
- Apply custom style settings to application form fields;
- Track submitted applications by integrating the form with MailChimp, GetResponse, Active Campaign, Zapier, and Integromat.
WordPress Form Pattern Structure
Step 1 – Participant information
- First Name. A required Text field for filling in the applicant’s name;
- Last Name. A required Text field for filling in the applicant’s last name;
- Email. A Text field for filling in the applicant’s email;
- Phone Number. A Text field for filling in the applicant’s phone number;
- Country. A Text field for filling in the applicant’s country;
- City. A Text field for filling in the applicant’s city;
- Next/Previous button. A Form Break Field that splits form into steps.
Step 2 – Additional information
- Company. A Text field for filling in the company;
- Position. A Text field for filling in the job position;
- Time here. A Text field for filling in the number of years worked;
- Industry. A Checkbox field to pick the industry from the list;
- Looking for a mentor. A Radio field with Yes/No options;
- How did you hear about us? A Checkbox field with four available options;
- Interested in receiving newsletter. A Radio field with Yes/No options;
- Submit. A Submit field to submit a WordPress job application form;
- Next button. A Form Break Field that gives a title to the second step.
How to Create a WordPress Online Application Form
Add a new form
To create a WordPress online application form, navigate to JetFormBuilder > Add New. Type in the title of the form.
Apply an Application form pattern
Patterns are customized layouts that suggest fields that are already set. You can delete the existing fields or edit them if you want to change just a few settings.
Click on the “Add New” button in the WordPress form editor and choose the Patterns tab to put an Application Form Pattern. In the drop-down menu, select the “JetForms” option. Find an Application Form and click on it to add it to the page.
This pattern is divided into two parts, Participant and Additional information.
Participant information includes Text Fields and a Form Break Field.
- Text Field can be added for manual input of some data;
- Form Break Field divides form into parts and lets you add a step indicator to separate these parts.
Additional information contains Text, Checkbox, Radio, Submit, and Form Break Fields.
- Checkbox Field allows users to put a tick next to suggested options;
- Radio Field adds a list of options from which user can pick only one variant;
- Submit Field is the final step in completing a form. Note that there can be just one Submit Field in the form. If you add more than one, the other will not work.
Pay attention that the last Form Break Field was added to change a default Label of progress from “Last Page” into “Additional information.”
You can edit or delete all suggested fields or attach other fields to the form according to your needs.
Customize JetForm settings
JetForm settings are applied to the whole form so consider working with them thoroughly.
- Fields Layout lets you pick from two options. “Column” displays field labels above the bar, and “Row” puts them in one line;
- Required Mark defines a symbol that will be shown near required fields. If empty, an asterisk symbol is displayed;
- Submit Type allows you to choose between “Page Reload” or “AJAX.” If the second option is preferred, the page will not be reloaded.
When you have customized all the Form Settings, don’t forget to enable form pages progress to add a step indicator above the form.
Captcha Settings are responsible for reCAPTCHA verification, about which you can learn more in detail in our video tutorial.
Specifically, focus on the Post Submit Actions that are executed after the form submission. You can choose from all the alternatives and even add several actions to the form.
For instance, let’s set two Post Submit Options, “Send Email” and “Insert/Update Post.”
“Send Email” post submit action
Begin with the “Send Email” option. You can read more about it in this guide.
Edit this post submit action according to the demands. You can include all the data input by the user in the email. Just write a default text with form fields that you have entered in the block settings.
For instance, in the Application Form Pattern, we have the Phone Number Text Field. Its form field name is “phone-number”. To collect the data for the email, just wrap it with percent signs, like this: %phone-number%.
So, as an example, we can write the following content for email:
There is a new application!
First Name: %first-name%
Last Name: %last-name%
Phone Number: %phone-number%”.
All the data wrapped in the percentage marks will be pulled from the info input by the user. Once you have finished filling out the fields, click on the “Update” button.
“Insert/Update Post” post submit action
Moving on to the following Post Submit Action, find out more about it from the overview article.
Now let’s see how we can edit this action to meet our needs, specifically to submit applications properly.
For the correct customization, you need to install and activate the JetEngine plugin.
The primary process to work with this post submit action is to create a Meta Box that will include some Meta Fields.
Meta Fields show extra information about the posts. This metadata isn’t displayed for the users on the front-end. The one way to demonstrate it is to use Dynamic widgets. The data you type into the meta fields can be used in multiple ways several times.
To create a meta box that will be a so-named container for the meta fields, proceed to JetEngine > Meta Boxes and add a new meta box.
Read about its settings in the Meta Boxes overview. We need to build 13 meta fields that will correspond to all the Application Form Pattern fields. That means we need to set up nine Text, two Checkbox, and two Radio meta fields.
Note that if you have added other fields, you need to create corresponding meta fields for them.
Customize General Settings, leave the “Post” as the Meta Box for option and move on to Meta Fields.
As an example, you can set Text Field options as shown in the picture below.
Type in the same values to create a Checkbox. However, choose the “Checkbox” option as the Field type. Besides that, click on the ‘’New Field Option” to add all the alternatives represented in the checkboxes.
The Radio Meta Field is created the same way as the Checkbox one. Just select “Radio” as the field type.
When you have tailored all the meta fields, click on the “Update Meta Box” button and return to the Application Form editor. Let’s edit the “Insert/Update Post” action.
While filling out the Field Map values, choose “Post Meta” as a source for all the fields and type in the Meta Field name that you have entered while building meta fields. Update the action, and it is ready.
Attach form to the page
Go to the page to place a form once you have adapted all the blocks and JetForm Settings.
You can attach the JetFormBuilder application form both to the Elementor and Gutenberg edited pages.
Just add a JetForm block and choose the application form you have just created.
Mind that Form Settings represented in the Page Editor will not override the Form Editor settings. So if you have already established Fields Layout, Required Mark, and Submit Type, you can skip these steps here.
You are free to customize Advanced Settings in addition.
After making all the modifications, push the “Publish” button and check the Application Form on the front-end.
All right, the form is ready for application requests. Now you know how to create online application forms with WordPress Application Form Builder.