Stand with Ukraine. Fight for freedom and democracy

Donate

Application Form

Use the WordPress application form builder to acquire the best talent out there faster than ever. 

Contents:

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. 

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.

Add a new form

To create a WordPress online application form, navigate to JetFormBuilder > Add New. Type in the title of the form.

adding a new form with jetformbuilder plugin

Three fields are shown by default. They are Hidden, Text, and Submit Fields. As we are using the Pattern, we can delete them.

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.

adding an application form pattern

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.
pattern participant information

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.
pattern additional information

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.

application form jetform settings
  • 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.  

At the same time, you can synchronize the form with third-party services like Integromat or Zapier to automate the management of the application.

Check our tutorials if you want to learn more about integrating JetFormBuilder with Zapier or Integromat.

For instance, let’s set two Post Submit Options, “Send Email” and “Insert/Update Post.”

“Send Email” post submit action

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:

“Hi, admin!

There is a new application!

Application details:

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.

jetengine adding meta boxes

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.

text meta field customizations

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.

checkbox meta field customizations

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.

insert update post action editing

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.

There are also Preset and General Messages Settings. So feel at ease to adjust them if you need to and publish the form.

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. 

application form page editor

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.

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