How to Build a Job Application Form in Drupal? A Detailed Guide

On-page job application forms allow you to quickly and efficiently collect information from candidates interested in job opportunities, facilitating the process of selecting resumes of future employees. In this article, I’ll show you how to build a recruitment form with the Webform module and embed it on a Drupal landing page. All this without having to spend hours on tedious configuration. I invite you to read the article or watch an episode of the  “Nowoczesny Drupal” series.

How to embed a webform on a landing page?

Creating and embedding a recruitment form in Drupal doesn't have to be difficult. The following simple steps will allow you to add the form to the section of your choice on the page and customize it effectively.

1. Preparing to embed the form

To start with, make sure the Webform module is already installed on your website. If it's missing, go to module management in Drupal and enable it.

When everything is ready, proceed to the next steps.

To enable embedding forms in a section on a page, you need to make minor changes to the paragraph configuration:

1. Go to the menu Structure → Paragraph Types.
2. Select the paragraph where you want to embed the form, such as Form.
3. Click Manage Fields and add a new field type, "Webform Reference."
4. Name the field, e.g., "Webform."
5. In the Display Management section, place this field in the primary group.

Now, you can select any Webform and embed it on the page using a prepared paragraph. This makes creating a landing page in Drupal more flexible and organized.

It's also a good idea to think beforehand about where to put a form on a landing page and how it will be displayed so that you can plan the page structure accordingly.

2. Creating a form in Webform

After preparing the paragraph, it's time to create a job application form. Webform offers ready-made templates to help you get started.

In this case, select the "Job Application" template:

1. Go to the Webform module and click the option to create a new form.
2. Select the "Job Application" template and give it a name. Remember to make the name unique.

3. Webform takes you straight to the  job application form editing, where you can customize the fields:
   • Name (text field)
   • Email address (with verification of correctness)
   • Contact phone
   • An attachment that allows you to upload a file (e.g., a resume in PDF format).

The job application form is ready to go after just a few minutes of work. This quick solution allows you to create a tool perfectly tailored to your recruitment needs. It will save you time and provide convenience to users visiting your website.

3. Embedding the job application form on the website

Now, it's time to embed the created form as a landing page element. Follow these steps:

1. Go to edit the page where you want to embed the form.
2. Select the section of the page you want to change.

3. In the section corresponding to the "Webform" paragraph, select the form you’ve created.

4. Testing the job application form using DDEV and Mailpit

If the job application form has been embedded, it's time to test its operation. To do this, fill out the form with sample data and submit the request.

The form redirected me to a separate subpage, which allowed me to review the results in a test environment. To do this, I used the DDEV add-on, a local application development tool that permits easy configuration of development environments. Combined with Mailpit (an email capture tool), it allows you to test a form's performance without the risk of sending actual messages.

This enables you to check that the form is working properly:

1. All fields of the form have been filled out correctly.
2. The attached PDF file can be clicked, downloaded, and opened.

The whole process takes a few minutes, and the result is a fully functional job application form with working e-mail sending and the ability to attach files. Such a solution will work in any situation where a quick and professional implementation is needed.

How to configure advanced job application form options?

Your recruitment form can do much more than just collect data. With a few settings, you can customize notifications and automation that make it easier to communicate with applicants and HR.

Customizing email notifications

You can set what email notifications will be sent when a user fills out a form. To configure it:

1. In the form settings, go to the Emails/Handlers tab.

2. Click "Edit" next to the default email notification.
3. Configure the content of the message:
   • Select a recipient, such as the HR department.
   • Set the message's title, such as "New job application."
   • Use Webform tokens to dynamically insert data, such as a user's name or email.

If you want to customize the look of your message, you can use the CKEditor editor or advanced Twig templates.

There are also tokens available here so that you can add all the fields from the submitted form very easily.

Testing the job application form

Webform has one more helpful feature: a "Test" tab, thanks to which you can easily and quickly test the form before making it available to users:

1. In the "Test" tab, you’ll find sample data that you can automatically fill in the form.

2. Submit a test application.
3. Check that the email has arrived and contains the correct data.

My test went very smoothly. You can see all the default data that loaded when the test was created. I can move on to visually customize the receipt page.

Configuration of notification confirmation

After filling out the form, the user should receive a confirmation. You can configure this in the form settings:

1. Select Confirmation type.
2. Determine the method of confirmation, e.g., "Inline message," and enter the thank you content, such as "Thank you for sending your resume. We will contact you soon."

3. Alternatively, set up a redirect to a dedicated thank you page.

Such confirmation increases users' trust and gives them confidence that their request has been received. You can also customize the message content to make it more personalized and friendly. It’s worth noting that Webform offers several confirmation configuration options, depending on your needs:

1. Inline or Message - allows you to display a message on the same page without redirecting the user (shown in the article).
2. Redirect to a page - the user is redirected to a dedicated thank you page. This option gives you more options, such as adding links or graphics.
3. Custom URL - you can direct the user to any external page, such as a sub-page with job listings or a company profile.

Finally, one more important step after setting up the confirmation is to run Ajax (Asynchronous JavaScript and XML).

What is Ajax, and how to enable it?

Ajax (Asynchronous JavaScript and XML) is a technology that allows data to be dynamically transferred between the server and the browser without reloading the entire page. This enables the user to submit forms, view results, or use dynamic functions in the background, significantly improving the fluidity and convenience of the website.

Using this feature here will help you improve the user experience. You can enable Ajax in the form and thus avoid having to reload the page after submitting a request:

1. Go to the general settings of the form and enable Enable Ajax.
2. Configure options such as animation speed and visual effects.

With the Ajax option, the form works more dynamically, improving the user experience. This is especially important for recruitment sites, where fluidity and speed are essential.

Before moving on, return to your page, complete the form, and check that the added information is displayed.

Job application management

Webform in Drupal offers several options that make it easier to manage submissions. You can customize the way you process submitted data, set limits, or configure different methods to notify the appropriate people about new form completions. Below, you’ll find the most significant features.

Application limits

I decided to limit the number of submissions in the form to a certain number. How to do it?

1. In the form settings, go to the Submission Limit tab.

2. Set a limit for submissions (e.g., 100). Once this limit is reached, the form will no longer be available to users.

Submission limits allow you to control the amount of data sent via the form. When the limit is reached, users see a corresponding message, and the form becomes unavailable. You can also increase or decrease the submission limit whenever needed. This is especially useful for events with limited seats, promotional campaigns, or recruitment for positions with high interest.

Advanced email notifications and their configuration

Webform allows you to send standard email notifications and create custom notifications for different recipients. This enables you to deliver notifications to the appropriate departments or individuals in your organization.

If you need to send notifications to several people, you can add more:

1. In the Emails/Handlers tab, click "Add email."
2. Enter the recipient's information and customize the message content as you see fit.

This feature enables automatic communication by forwarding requests to appropriate departments based on the form's content. For example, requests related to recruitment can go to the HR department, and others related to inquiries can go to the sales department. This solution will be ideal for both small and large teams where the division of responsibilities is crucial.

Job application form in Drupal - summary

In this article, I showed you how to create a step-by-step job application form in Drupal and embed it into your website. With the Webform module, you can easily configure fields, email notifications, enrollment confirmations, and a registration limit. In addition, enabling Ajax makes using the form more interactive and convenient for users.

If you have any questions about designing and implementing such a form on your website, contact Drupal agency specialists.