Home
Download
Samples
Documentation
Samples
Application

Job Application Form

The sample job application form is a responsive HTML form with database support.

The sample job application html form

Overview

A US job application form like the above sample was the pattern for the IT job application form sample. We will create the below two forms with database access.

The fixed-layout form sample using the ISO 8601 date format and the Euro currency symbol The fixed-layout form sample using the US date format

Date Format

The job application form sample shows how to create a date entry field from select controls. There is a wide range of date formats, and most of them are easily reproducible using the form designer. The initial date format used here is simply the default date format - ISO 8601 (yyyy mm dd).

US date format
Traditional American date format
German date format
German date format
ISO 8601 date format
Date format used here

Unicode

The job application form uses the Euro sign € to introduce Unicode characters.

Fixed, Fluid and Responsive Form Layout

The job application form sample shows how to create fixed, fluid and responsive HTML form layout. The below fixed layout is the default html form layout.

The fixed layout job application html form

Fluid and responsive HTML forms adapt their widths to their container's width. The below screenshot shows the fluid job application form proportionally stretched (percentage based) in a wide container.

The fluid layout job application form at its maximum width

Shown below is a responsive HTML form - fluid in a container down to its minimum fluid width, and degraded in a narrow container.

The responsive layout job application form at its minimum fluid width
The responsive layout job application form in degraded layout

Accessibility

The job application form makes use of the group element to <fieldset> the "Personal Data", "Job", and "Date you can start" blocks. Thus, the blind user gets a well-structured HTML form.

The accessible job application form

Database Access

The job application form offers database access, currently SQL only.

Form Design

Drag-and-drop a group symbol from the toolbar on the form to create a group component.

Adding the personal data group component

Double-click the group's label cell and change the label to "Personal Data".

Specifying the personal-data group label

Drag-and-drop a text field symbol from the toolbar on the "Personal Data" group symbol …

Dropping a textfield component on the personal-data group component

… and change its label to "Last Name*". Stretch the properties cell a little.

Dropped a text field component on the personal-data group component of the job application form

Double-click the "Last Name*" properties cell to open the custom-textfield properties dialog. Set the input required and change the maximum input length to e.g. 60 characters.

The properties dialog of the last-name textfield
In the properties dialog, click the "Create ..." button to open the "Create Expression" dialog to assemble a regular expression for input validation. Use the settings below. Checking the "Diacritics" checkbox enables Unicode support.
Creating a regular expression for the name text field

Below is the actualized "Last Name*" text field component. The regular expression used for input validation contains now the \p{L} to accept upper and lowercase Unicode letters.

The final last-name textfield of the job application form

Right-click the text field symbol and clone the text field component with its properties. Clone the text field component again.

Cloning the last-name textfield for the first and middle name

Change the labels of the new text field components. Open the properties dialogs and change the maximum lengths. The middle-name input is optional.

Added textfield components for first and middle names to the personal-data group component of the job application form

Create another text field component in the "Personal Data" group, change its type to "Email", and set the input required.

Added an email textfield component to the personal-data group component of the job application form

Create a text area component in the "Personal Data" group, set the input required, and increase the maximal length to 2000 characters (e.g. for a one-page resume).

Added a resume textarea component to the personal-data group component of the job application form

Drag-and-drop another group symbol on the form and change the group label to "Job". Create a select component in the "Job" group and change the select label to "Position applied for".

Added a job group component to the job application form with a position-applied-for select component as child

Double-click the select component's properties cell and replace the select default options with the four options below:

Administration
Mobile Development
Software Development
Web Development

Change the job menu options of the job application form

Drag-and-drop a group symbol from the toolbar on the "Job" group symbol and change the new group's label to "Date you can start".

Dragging-and-dropping a date-you-can-start group component on the job group component of the job application form

Add three select components to the "Date you can start" group and turn the group into a date group. Set the select labels accessible-only to save space on the regular HTML form. Only the accessible form will be supplied with year, month, and day labels.

The job application form's date-you-can-start group with accessible-only date-component labels

Double-click the "Year" properties cell to open the year properties dialog. Specify the years the user can select.

The default date-you-can-start years the user can select on the job application for     Specifying the date-you-can-start years the user can select on the job application form

Shown below is the updated range of years the user can select.

The final date-you-can-start group of the job application form

Drag-and-drop a text field symbol on the "Job" group symbol. Change the text field type to "Number" and the label to "Hourly Wage (€)*" with the Euro sign as Unicode character (hexadecimal code point 20ac with a leading \u). Input is required and an hourly wage of 30.00 is given as initial value within a range of 10.00 to 100.00.

Adding an hourly-wage textfield and a label containing the Euro sign as Unicode character

Alternatively, drag-and-drop or paste (Ctrl-v) the Unicode character from a web site.

Entering the Euro sign by drag-and-drop or copy-paste into the hourly-wage textfield label.

Drag-and-drop another text field symbol on the "Job" group symbol. Change the text field type to "Integer" and the label to "Weekly Hours*". Input is required and an initial value of 40 is given within a range of e.g. 1 to 100.

Adding a weekly-hours textfield component ot the job group of the job application form

Drag-and-drop a button symbol on the form and change its type to Submit in the button's context menu.

Adding the submit button to the job application form

Add error messages where requested and indicated by dots in the message cells.

Adding error messages

Form Layout

Switch to the layout view with its initial form layout. Toggle the view mode The zoom and view mode toggle as convenient.

The initial layout in the layout view

Resize the page and rearrange the form objects on the canvas. Use multiple selection to move groups of drawing objects.

The partially changed layout in the layout view

Change horizontal alignments.

The final layout of the form objects with alignments

Enlarge the "Personal Data" and "Job" labels, and give them a white background. Use the roundness trackers to create neat horizontal padding.

Resized header labels with background and horizontal padding

Drag-and-drop round-corners rectangles from the toolbar on the canvas as borders to segment the form elements visually. Double-click to specify border and background.

Adding decoration to segment the form objects

Finally, double-click the page background and select a page border and a background. Have a look at screenshots from the form in different browsers.

Layout is complete

Save the form's source code to the file system and run the job application form client-only or client-server, with or without database support.

Fluid And Responsive HTML Form Layout

The fixed form layout is the default layout. If you want a fluid or responsive form layout, switch to the settings view and select the desired form layout. The form builder will do the rest.

The fixed, fluid, and responsive form layout settings

US Job Application Form

The new date format is US mmm dd yyyy. Switch to the date section of the settings view. Change the month format from default "mm" to short month names "mmm".

Changing the month settings from mm to mmm.

Switch to the structure view and reorder the date elements. Delete the Euro sign.

The structure view with US date format

Switch to the structure view and redraw the date objects. Done.

The layout view with US date format

Database Support

Click the settings tab, select the client-server code and the database "MySQL" options. Enter the MySQL root password if required - MySQL has no initial root password, MAMP's initial MySQL root password is "root" (see LAMP, MAMP, or WAMP).

The code generator will create a database

Click the product tab and save the job application HTML form to the server folder as index.php.

Load the job application HTML form in your browser, complete it, and submit it.

The completed job application HTML form

Shown below is what we have in our database.

                "1"  
                "Williams"  
                "John"  
                "Alan"  
                "jw@achlina.com"  
                "Extensive expertise in Prolog development. Designed and implemented WAMs in C++ and Rust."  
                "2"  
                "2021"  
                "8"  
                "3"  
                "100.00"  
                "60"  
                "2020-02-04 18:42:42"

The last entry is the record's timestamp (sample update on 2020-Feb-04).

Source Code

Below is the source code of the client-only version of the job application form.

<?xml version="1.0" encoding="us-ascii" standalone="yes"?>
<!-- Created on Tue Feb 04 18:08:33 CET 2020 -->
<form>
	<settings>
		<form-settings code="1" database="1" host="bG9jYWxob3N0" port="8888" user="cm9vdA==" password="cm9vdA==" layout="2"/>
	</settings>
	<pages>
		<page width="1880" height="2470" border="1" border-color="C0C0C0" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10">
			<defaults>
				<shape border="1" border-color="6699FF" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10"/>
				<label alignment="left" font-family="THVjaWRhIFNhbnMgVW5pY29kZQ==" text-color="000000" text-opacity="10" border="0" background="0"/>
			</defaults>
			<shapes>
				<shape type="roundrect" x="40" y="80" width="1800" height="1470" border-radius="40"/>
				<shape type="roundrect" x="40" y="1640" width="1800" height="640" border-radius="40"/>
			</shapes>
			<components>
				<component type="group">
					<label x="210" y="10" width="720" height="120" background="1" border-radius="20">UGVyc29uYWwgRGF0YQ==</label>
					<components>
						<component type="textfield">
							<control x="80" y="300" width="1720"/>
							<label x="80" y="160" width="480" height="100">TGFzdCBOYW1lKg==</label>
							<properties type="custom" required="true">
								<max-length>60</max-length>
								<regexp>L15bLVxwe0x9IDAtOS4nXXsyLH0kLw==</regexp>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHlvdXIgbGFzdCBuYW1lLg==</missing-input>
								<invalid-input>VmFsaWQgY2hhcmFjdGVycyAoMiAtIDYwKSBhcmUgbGV0dGVycywgZGlnaXRzLCBkYXNoLCBibGFuaywgYW5kIHBlcmlvZC4=</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="80" y="580" width="920"/>
							<label x="80" y="440" width="490" height="100">Rmlyc3QgTmFtZSo=</label>
							<properties type="custom" required="true">
								<max-length>40</max-length>
								<regexp>L15bLVxwe0x9IDAtOS4nXXsyLH0kLw==</regexp>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHlvdXIgZmlyc3QgbmFtZS4=</missing-input>
								<invalid-input>VmFsaWQgY2hhcmFjdGVycyAoMiAtIDQwKSBhcmUgbGV0dGVycywgZGlnaXRzLCBkYXNoLCBibGFuaywgYW5kIHBlcmlvZC4=</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="1050" y="580" width="750"/>
							<label x="1250" y="440" width="550" height="100" alignment="right">TWlkZGxlIE5hbWU=</label>
							<properties type="custom">
								<max-length>30</max-length>
								<regexp>L15bLVxwe0x9IDAtOS4nXXsyLH0kLw==</regexp>
							</properties>
							<messages>
								<invalid-input>VmFsaWQgY2hhcmFjdGVycyAoMiAtIDMwKSBhcmUgbGV0dGVycywgZGlnaXRzLCBkYXNoLCBibGFuaywgYW5kIHBlcmlvZC4=</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="80" y="860" width="1720"/>
							<label x="80" y="720" width="270" height="100">RW1haWwq</label>
							<properties type="email" required="true">
								<max-length>128</max-length>
								<regexp>LyhefFxzKShbXHctXSsoPzpcLltcdy1dKykqQFtcdy1dKyhcLltcdy1dKykrXC4/KDpcZCspPyhcL1xTKik/KS9p</regexp>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHlvdXIgZW1haWwgYWRkcmVzcy4=</missing-input>
								<invalid-input>WW91ciBlbWFpbCBhZGRyZXNzIGZvcm1hdCBpcyBpbnZhbGlkLg==</invalid-input>
							</messages>
						</component>
						<component type="textarea">
							<control x="80" y="1140" width="1720" height="370"/>
							<label x="80" y="1000" width="380" height="100">UmVzdW1lKg==</label>
							<properties type="editable" required="true">
								<max-length>2000</max-length>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHlvdXIgcmVzdW1lLg==</missing-input>
							</messages>
						</component>
					</components>
				</component>
				<component type="group">
					<label x="210" y="1570" width="180" height="120" background="1" border-radius="20">Sm9i</label>
					<components>
						<component type="select">
							<control x="80" y="1860" width="1100"/>
							<label x="80" y="1720" width="830" height="100">UG9zaXRpb24gYXBwbGllZCBmb3I=</label>
							<properties type="custom">
								<options>
									<initial-option>0</initial-option>
									<option>QWRtaW5pc3RyYXRpb24=</option><option>TW9iaWxlIERldmVsb3BtZW50</option><option>U29mdHdhcmUgRGV2ZWxvcG1lbnQ=</option><option>V2ViIERldmVsb3BtZW50</option>
								</options>
							</properties>
						</component>
						<component type="group">
							<label x="80" y="2000" width="770" height="100">RGF0ZSB5b3UgY2FuIHN0YXJ0</label>
							<components>
								<component type="select">
									<control x="80" y="2140" width="380"/>
									<label accessible-only="true">WWVhcg==</label>
									<properties type="year">
										<options>
											<option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option><option>2025</option><option>2026</option><option>2027</option><option>2028</option><option>2029</option>
										</options>
									</properties>
								</component>
								<component type="select">
									<control x="510" y="2140" width="310"/>
									<label accessible-only="true">TW9udGg=</label>
									<properties type="month">
										<options>
											<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
											<option>11</option><option>12</option>
										</options>
									</properties>
								</component>
								<component type="select">
									<control x="870" y="2140" width="310"/>
									<label accessible-only="true">RGF5</label>
									<properties type="day">
										<options>
											<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
											<option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option>
											<option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
											<option>31</option>
										</options>
									</properties>
								</component>
							</components>
							<messages>
								<invalid-input>UGxlYXNlIGVudGVyIGEgdmFsaWQgZGF0ZS4=</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="1410" y="1860" width="390" alignment="right"/>
							<label x="1090" y="1720" width="710" height="100" alignment="right">SG91cmx5IFdhZ2UgKFx1MjBhYykq</label>
							<properties type="number" required="true">
								<decimal-places>2</decimal-places>
								<initial-value>30.00</initial-value>
								<min-value>10.00</min-value>
								<max-value>100.00</max-value>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHRoZSBob3VybHkgd2FnZSB5b3UgYXJlIHNlZWtpbmcgKDEwIC0gMTAwIFx1MjBhYyku</missing-input>
								<invalid-input>UGxlYXNlIGVudGVyIGEgcmVhc29uYWJsZSBob3VybHkgd2FnZSAgKDEwLjAwIC0gMTAwLjAwIEVVUiku</invalid-input>
							</messages>
						</component>
						<component type="textfield">
							<control x="1410" y="2140" width="390" alignment="right"/>
							<label x="1180" y="2000" width="620" height="100" alignment="right">V2Vla2x5IEhvdXJzKg==</label>
							<properties type="integer" required="true">
								<initial-value>40</initial-value>
								<min-value>1</min-value>
								<max-value>100</max-value>
							</properties>
							<messages>
								<missing-input>UGxlYXNlIGVudGVyIHRoZSB3ZWVrbHkgaG91cnMgeW91IGFyZSBhdmFpbGFibGUgdG8gd29yay4=</missing-input>
								<invalid-input>UGxlYXNlIGVudGVyIHJlYXNvbmFibGUgd2Vla2x5IGhvdXJzICAoMSAtIDEwMCku</invalid-input>
							</messages>
						</component>
					</components>
				</component>
				<component type="button">
					<control x="1440" y="2330" width="400"/>
					<label>U3VibWl0</label>
					<properties type="submit">
					</properties>
				</component>
			</components>
			<messages>
				<missing-input>TWlzc2luZyBpbnB1dDo=</missing-input>
				<invalid-input>SW52YWxpZCBpbnB1dDo=</invalid-input>
			</messages>
		</page>
	</pages>
</form>
Impressum
Contact
Datenschutz
Privacy