Build An Online Job Application Using Contact Form 7

WordPress, A Free Forms Plugin, and the Divi Theme by Elegant Themes

If you design a WordPress site, even once, you will or have run into the question of online forms and gathering data with them.

We use them to fill newsletter subscriptions, for polling traffic on issues or with questions, converting our targeted traffic into clients….contests, giveaways and so on.

I was asked to put together a simple Online Job Application. I decided to go with Contact Form 7 for the form solution.

A simple service industry job application, filled out onsite, can save some time for those seeking applicants, and uses the same form functions that any online form would. You can see my form by following link below.

Farther down the page, you’ll find the code to implement the style and fields of my form.




New Blank Form

Create a Blank

With the strong features in Contact Form 7, we are able to configure a notification email, with all the captured data included. You need WordPress, with the Divi WordPress Theme and your child theme installed.

You’ll want to start with a new form in Contact Form 7.

Label your new form, and save. You should be looking at a form with some html in the box on the bottom. The job application I have been asked to create, asks for basic information with 3 business references. You could easily make this much more comprehensive, especially with added functionality of a plugin like Gravity Forms, but our form will be functional and attractive using the free Contact Form 7 plugin.

We ‘ll assign some custom CSS to the form fields, and decide on layout. In my case with the fields I have, a 2 column form works fine. I need to write the structure CSS here, allowing the 2 column layout to be worked with as we build the form.

You can do most forms with 1 column, but our job application has a few questions that will work better on the page with 2 columns split in half.

Form Markup

The Form

Fortunately, all of the required fields can be set up using basic form fields, saving money for the end-user in this case as the Contact Form 7 plugin is free, yet still able to accomplish the client’s requested actions.

Need to figure the number and type of fields we need for the form.

In this case we will be collecting the following data:

  • First & Last Name ( 2 text inputs – 1 row)
  • Email Address (1 text input – half row)
  • Job Applied For (1 email input – full row)
  • Application Date (1 text input – half row)
  • Street Address  (1 text input – full row)
  • City/State (1 text input – half row)
  • Zip Code (1 text input – half row)
  • Home & Mobile Phone (1 text input per – half row)
  • Date Available To Start (1 text input – half row)
  • Drivers License Number (1 text input – half row)
  • 4 Yes or No Questions (1 radio input per – half row)
  • 5 Option Single Choice Question (1 text input – full row)
  • Yes/No Felon Question w/description field (1 text input – full row) (1 text area input – full row)
  • Employment History/References (6 text input – half row) (2 date picker input – half row) (1 text area – full row)

Final Form

CSS & HTML Form Markup

We need 2 column classes, half and full width, and a simple media query to tell the browser to collapse to one column at low resolution.

We used half & full-column for the classes, first we need to style the form elements

CSS

.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required,.wpcf7 input[type="text"], input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="date"], .wpcf7 textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #f4e0bd;
	border-radius: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
  background-color: rgba(229, 212, 172,.2);
  border: .5px solid  #f4e0bd;

}
/* Set button Focus styles */  .wpcf7-submit {
  position: relative;
  color:  #f4e0bd;
  text-transform: uppercase;
  padding: .3em 1em;
  border: .5px solid;
  -webkit-border-radius: .5px;
  -moz-border-radius: .5px;
  border-radius: .5px;
  background: transparent;
  background-color: transparent;
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.4em;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
  transition-property: all;
  transition-duration: .2s;
}
.wpcf7-submit:hover {
  background:#f4e0bd;
  opacity: 1;
  color: #ffffff;
  padding: .3em 1.5em;
  font-size: 1.4em;
  letter-spacing: 4px;

}
span.wpcf7-not-valid-tip {
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  background: #ff0000;
  padding: 5px;

}
div.wpcf7-validation-errors {
  text-shadow: none;
  border: transparent;
  background: #f9cd00;
  padding: 5px;
  color: #9C6533;
  text-align: center;
  margin: 0;
  font-size: 12px;

}
div.wpcf7-mail-sent-ok {
  text-align: center;
  text-shadow: none;
  padding: 5px;
  font-size: 12px;
  background: #59a80f;
  border-color: #59a80f;
  color: #fff;
  margin: 0;

}
.clearfix:after {
  content: "";
  display: table;
  clear: both;

}

.column-half, .column-full {
  float: left;
  position: relative;
  padding: .65em;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

@media only screen and (min-width: 48em) {
.column-half {
  width: 50%;

}
}
div#application-form {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  max-width: 1080px;
  margin: 0;
  width: 100%;

}
.field-container h2 {color:rgba(229, 212, 172,1); text-align:center;}
.field-container {
  width: 100%;

}

<div id="application-form">

<div class="field-container">
<div class="column-full"><h2>Phoenix Bar Job Application</h2></div>
</div>

<div class="field-container">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
<div class="column-full">Your Email [email* email-address]</div>
</div>

<div class="field-container">
<div class="column-half">Job Applied For [text* job-applied]</div>
<div class="column-half">Date of Application [text* date-applied]</div>
</div>

<div class="field-container">
<div class="column-full">Street Address [text* street-address]</div>
</div>

<div class="field-container">
<div class="column-half">City/State [text* city-state]</div>
<div class="column-half">Zip Code [text* zip-code]</div>
</div>

<div class="field-container">
<div class="column-half">Home Phone [tel home-phone]</div>
<div class="column-half">Mobile Phone [tel mobile-phone]</div>
</div>

<div class="field-container">
<div class="column-half">Date you will be available for work? [text date-available]</div>
<div class="column-half">Drivers License Number & State Issued [text drivers-license]</div>
</div>

<div class="field-container">
<div class="column-half">If you are under 18, can you furnish a work permit? </br>[radio work-permit default: "yes" "no"]</div>
<div class="column-half">Have you ever been employed here before? </br>[radio work-here default: "yes" "no"]</div>
<div class="column-half">Can you meet attendance requirements of the position? </br>[radio show-up default: "yes" "no"]</div>
</div>

<div class="field-container">
<div class="column-full">Are you legally eligible to work in this country? (Proof of US Citizenship or immigration status will be required upon employment)</br>[radio legally-work default: "yes" "no"]</div>
</div>

<div class="field-container">
<div class="column-full">Type of employment desired? [checkbox employment-desired "Full Time" "Part Time" "Temporary" "Seasonal" "Educational/Co-Op"]</div>
</div>

<div class="field-container">
<div class="column-full">Have you been convicted of a felony in the past 7 years? [radio convicted-felon default: "yes" "no"]</div>
<div class="column-full">(Such a conviction may be relevant if job related, but does not bar you from employment. The inquiry as to whether you have been convicted of a crime does not require you to disclose, verbally or in writing, any record of a conviction or arrest that has been expunged or sealed.)</br>
If you answered yes, please explain. [textarea reason-convicted]
</div>
</div>

<div class="field-container">
<div class="column-full">
<h3>Employment History</h3>
<p>List your last 4 employers or volunteer activities. Start with the most recent, include any military experience.</p>
</div>
</div>

<div class="field-container">
<div class="column-full"><h4>Reference 1</h4></div>
</div>
<div class="field-container">
<div class="column-half">Name of Employer [text past-employer1]</div>
<div class="column-half">Contact phone number [text reference-number1]</div>
<div class="column-half">Your immediate supervisor [text supervisor-name1]</div>
<div class="column-half">City/State [text past-employ-city1]</div>
<div class="column-half">Date Worked From: [date started-work1]</div>
<div class="column-half">Date Worked To:[date ended-work1]</div>
<div class="column-half">Job title or position [text job-title1]</div>
<div class="column-half">Salary when you left? [text ending-pay1]</div>
<div class="column-full">Short description of your responsibilities [textarea job-duties1]</div>
</div>

<div class="field-container">
<div class="column-full"><h4>Reference 2</h4></div>
</div>
<div class="field-container">
<div class="column-half">Name of Employer [text past-employer2]</div>
<div class="column-half">Contact phone number [text reference-number2]</div>
<div class="column-half">Your immediate supervisor [text supervisor-name2]</div>
<div class="column-half">City/State [text past-employ-city2]</div>
<div class="column-half">Date Worked From: [date started-work2]</div>
<div class="column-half">Date Worked To:[date ended-work2]</div>
<div class="column-half">Job title or position [text job-title2]</div>
<div class="column-half">Salary when you left? [text ending-pay2]</div>
<div class="column-full">Short description of your responsibilities [textarea job-duties2]</div>
</div>

<div class="field-container">
<div class="column-full"><h4>Reference 3</h4></div>
</div>
<div class="field-container">
<div class="column-half">Name of Employer [text past-employer3]</div>
<div class="column-half">Contact phone number [text reference-number3]</div>
<div class="column-half">Your immediate supervisor [text supervisor-name3]</div>
<div class="column-half">City/State [text past-employ-city3]</div>
<div class="column-half">Date Worked From: [date started-work3]</div>
<div class="column-half">Date Worked To:[date ended-work3]</div>
<div class="column-half">Job title or position [text job-title3]</div>
<div class="column-half">Salary when you left? [text ending-pay3]</div>
<div class="column-full">Short description of your responsibilities [textarea job-duties3]</div>
</div>

<div class="field-container">
<div class="column-full"><h4>Reference 4</h4></div>
</div>
<div class="field-container">
<div class="column-half">Name of Employer [text past-employer4]</div>
<div class="column-half">Contact phone number [text reference-number4]</div>
<div class="column-half">Your immediate supervisor [text supervisor-name4]</div>
<div class="column-half">City/State [text past-employ-city4]</div>
<div class="column-half">Date Worked From: [date started-work4]</div>
<div class="column-half">Date Worked To:[date ended-work4]</div>
<div class="column-half">Job title or position [text job-title4]</div>
<div class="column-half">Salary when you left? [text ending-pay4]</div>
<div class="column-full">Short description of your responsibilities [textarea job-duties4]</div>
</div>

<div class="field-container">
<div class="column-full">
[recaptcha]</div>
</div>

<div class="field-container">
<div class="column-full">[submit "Send"]</div>
</div>

</div>

Finishing Up

Now that you have your form set up, you’ll want to set up the notifications. If you want to have the form notification to include your form data as well you’ll need to structure the email template to include your data. I am including the code for my template that corresponds to this form, feel free to use it or adapt it to your needs.

From: [first-name] <[email-address]>
Subject: Application for Employment

Message Body:

<strong>Personal Info:</strong>

First Name [first-name]
Last Name [last-name]
EMail [email-address]
Applying For [job-applied]
Application Date [date-applied]
Street Address [street-address]
City & State [city-state]
Zip Code [zip-code]
Home Phone [home-phone]
Mobile Phone [mobile-phone]

<strong>Job Related</strong>
Availability Date [date-available]
License Number & State [drivers-license]
Under 18/Work Permit? [work-permit]
Ever Employed Here? [work-here]
Able to meet schedule? [show-up]
Legal to Employ [legally-work]
Job Hours Desired [employment-desired]
Felon? [convicted-felon]
Explanation of conviction
[reason-convicted]

<strong>Past Employment</strong>
Employer [past-employer1]
Phone [reference-number1]
Supervisor [supervisor-name1]
City/State [past-employ-city1]
Date Started [started-work1]
Date Left [ended-work1]
Title [job-title1]
Pay [ending-pay1]
Description of Duties [job-duties1]
Employer [past-employer2]
Phone [reference-number2]
Supervisor [supervisor-name2]
City/State [past-employ-city2]
Date Started [started-work2]
Date Left [ended-work2]
Title [job-title2]
Pay [ending-pay2]
Description of Duties [job-duties2]
Employer [past-employer3]
Phone [reference-number3]
Supervisor [supervisor-name3]
City/State [past-employ-city3]
Date Started [started-work3]
Date Left [ended-work3]
Title [job-title3]
Pay [ending-pay3]
Description of Duties [job-duties3]
Employer [past-employer4]
Phone [reference-number4]
Supervisor [supervisor-name4]
City/State [past-employ-city4]
Date Started [started-work4]
Date Left [ended-work4]
Title [job-title4]
Pay [ending-pay4]
Description of Duties [job-duties4]

Pin It on Pinterest

Share This

Share this post with your friends!