Employment Application Form
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="name">Full Name</label>
<input class="fs-input" id="name" name="name" required />
</div>
<div class="fs-field">
<label class="fs-label" for="dob">Date of Birth</label>
<input
class="fs-input"
id="dob"
name="dob"
placeholder="MM-DD-YYYY"
required
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="address-1">Address line 1</label>
<input class="fs-input" id="address-1" name="address-1" />
</div>
<div class="fs-field">
<label class="fs-label" for="address-2">Address line 2</label>
<input class="fs-input" id="address-2" name="address-2" />
</div>
<div class="fs-field">
<label class="fs-label" for="city">City</label>
<input class="fs-input" id="city" name="city" />
</div>
<div class="fs-field">
<label class="fs-label" for="state">State / Province</label>
<input class="fs-input" id="state" name="state" />
</div>
<div class="fs-field">
<label class="fs-label" for="zip-code">Postal / Zip Code</label>
<input class="fs-input" id="zip-code" name="zip-code" />
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="email">Email</label>
<input class="fs-input" id="email" name="email" required />
</div>
<div class="fs-field">
<label class="fs-label" for="number">Contact Number</label>
<input
class="fs-input"
id="number"
name="number"
placeholder="(000) 000-0000"
required
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="previous-job-title">
Job title at your previous role
</label>
<input
class="fs-input"
id="previous-job-title"
name="previous-job-title"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="previous-employer">
Name of your previous employer
</label>
<input class="fs-input" id="previous-employer" name="previous-employer" />
</div>
<div class="fs-field">
<label class="fs-label" for="latest-role-start-date">
When did you start at your latest role?
</label>
<input
class="fs-input"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="latest-role-end-date">
End date of your latest role
</label>
<input
class="fs-input"
id="latest-role-end-date"
name="latest-role-end-date"
placeholder="MM-YYYY. Please leave blank if you are currently in the role"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="role-description">Role description</label>
<textarea
class="fs-textarea"
id="role-description"
name="role-description"
placeholder="Please describe what you did at your latest role"
></textarea>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="highest-degree">Highest degree</label>
<input class="fs-input" id="highest-degree" name="highest-degree" />
<p class="fs-description">
Please state the highest educational degree you've completed
</p>
</div>
<div class="fs-field">
<label class="fs-label" for="school">School</label>
<input class="fs-input" id="school" name="school" />
<p class="fs-description">School or university you attended</p>
</div>
<div class="fs-field">
<label class="fs-label" for="certifications">Certifications</label>
<input class="fs-input" id="certifications" name="certifications" />
<p class="fs-description">
Please mention any certifications you have that are relevant for the
role
</p>
</div>
<div class="fs-field">
<label class="fs-label" for="grad-year">Graduation year</label>
<input
class="fs-input"
id="grad-year"
name="grad-year"
placeholder="YYYY"
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="dates">Position you want to apply for</label>
<select class="fs-select" id="dates" name="dates">
<option value="software-engineer">Software Engineer</option>
<option value="senior-software-engineer">
Senior Software Engineer
</option>
<option value="ux-designer">UX designer</option>
<option value="marketing-specialist">Marketing Specialist</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label" for="start-date">When can you start?</label>
<input
class="fs-input"
id="start-date"
name="start-date"
placeholder="DD-MM-YYYY"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="dates">How did you learn about us?</label>
<select class="fs-select" id="dates" name="dates">
<option value="search-engines">
Search Engines (Google, DuckDuckGo, etc)
</option>
<option value="social-media">Social Media</option>
<option value="company-website">Company Website</option>
<option value="jobs-board">Online Jobs Board</option>
<option value="review-site">Review sites (G2, Capterra, etc)</option>
</select>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="reference-name">Reference name</label>
<input class="fs-input" id="reference-name" name="reference-name" />
<p class="fs-description">
Please state the name of a reference at one of your past roles
</p>
</div>
<div class="fs-field">
<label class="fs-label" for="reference-relationship">Relationship</label>
<input
class="fs-input"
id="reference-relationship"
name="reference-relationship"
/>
<p class="fs-description">What was your relationship with this person?</p>
</div>
<div class="fs-field">
<label class="fs-label" for="latest-role-start-date">Contact</label>
<input
class="fs-input"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
<p class="fs-description">
Please provide a phone number or an email address of the person.
</p>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
aria-describedby="bgv-consent-description"
class="fs-checkbox"
id="bgv-consent"
name="bgv-consent"
type="checkbox"
value="bgv-consent"
/>
</div>
<div>
<label class="fs-label" for="bgv-consent">
Background check consent
</label>
<p class="fs-description" id="bgv-consent-description">
By checking this box, you consent to a formal background check by one
of our partners.
</p>
</div>
</div>
</fieldset>
<div class="fs-button-group">
<button class="fs-button" type="submit">Submit</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 0.75rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
height: 2rem;
line-height: 1.25rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-3 gap-y-4"
target="_top"
method="POST"
>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="name"
>
Full Name
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="name"
name="name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="dob"
>
Date of Birth
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dob"
name="dob"
placeholder="MM-DD-YYYY"
required
/>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="address-1"
>
Address line 1
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-1"
name="address-1"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="address-2"
>
Address line 2
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-2"
name="address-2"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="city"
>
City
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="city"
name="city"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="state"
>
State / Province
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="state"
name="state"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="zip-code"
>
Postal / Zip Code
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="zip-code"
name="zip-code"
/>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="email"
>
Email
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email"
name="email"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="number"
>
Contact Number
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="number"
name="number"
placeholder="(000) 000-0000"
required
/>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="previous-job-title"
>
Job title at your previous role
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="previous-job-title"
name="previous-job-title"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="previous-employer"
>
Name of your previous employer
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="previous-employer"
name="previous-employer"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="latest-role-start-date"
>
When did you start at your latest role?
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="latest-role-end-date"
>
End date of your latest role
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-end-date"
name="latest-role-end-date"
placeholder="MM-YYYY. Please leave blank if you are currently in the role"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="role-description"
>
Role description
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="role-description"
name="role-description"
placeholder="Please describe what you did at your latest role"
></textarea>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="highest-degree"
>
Highest degree
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="highest-degree"
name="highest-degree"
/>
<p class="block text-sm text-[--color-text-muted]">
Please state the highest educational degree you've completed
</p>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="school"
>
School
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="school"
name="school"
/>
<p class="block text-sm text-[--color-text-muted]">
School or university you attended
</p>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="certifications"
>
Certifications
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="certifications"
name="certifications"
/>
<p class="block text-sm text-[--color-text-muted]">
Please mention any certifications you have that are relevant for the
role
</p>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="grad-year"
>
Graduation year
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="grad-year"
name="grad-year"
placeholder="YYYY"
/>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="dates"
>
Position you want to apply for
</label>
<select
class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dates"
name="dates"
>
<option value="software-engineer">Software Engineer</option>
<option value="senior-software-engineer">
Senior Software Engineer
</option>
<option value="ux-designer">UX designer</option>
<option value="marketing-specialist">Marketing Specialist</option>
</select>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="start-date"
>
When can you start?
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="start-date"
name="start-date"
placeholder="DD-MM-YYYY"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="dates"
>
How did you learn about us?
</label>
<select
class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dates"
name="dates"
>
<option value="search-engines">
Search Engines (Google, DuckDuckGo, etc)
</option>
<option value="social-media">Social Media</option>
<option value="company-website">Company Website</option>
<option value="jobs-board">Online Jobs Board</option>
<option value="review-site">Review sites (G2, Capterra, etc)</option>
</select>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="reference-name"
>
Reference name
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reference-name"
name="reference-name"
/>
<p class="block text-sm text-[--color-text-muted]">
Please state the name of a reference at one of your past roles
</p>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="reference-relationship"
>
Relationship
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reference-relationship"
name="reference-relationship"
/>
<p class="block text-sm text-[--color-text-muted]">
What was your relationship with this person?
</p>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="latest-role-start-date"
>
Contact
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
<p class="block text-sm text-[--color-text-muted]">
Please provide a phone number or an email address of the person.
</p>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
aria-describedby="bgv-consent-description"
class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="bgv-consent"
name="bgv-consent"
type="checkbox"
value="bgv-consent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="bgv-consent"
>
Background check consent
</label>
<p
class="mt-0.5 block text-sm text-[--color-text-muted]"
id="bgv-consent-description"
>
By checking this box, you consent to a formal background check by one
of our partners.
</p>
</div>
</div>
</fieldset>
<div class="col-span-full flex flex-row-reverse gap-x-3">
<button
class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
React
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="name">
Full Name
</label>
<input className="fs-input" id="name" name="name" required />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="dob">
Date of Birth
</label>
<input
className="fs-input"
id="dob"
name="dob"
placeholder="MM-DD-YYYY"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="address-1">
Address line 1
</label>
<input className="fs-input" id="address-1" name="address-1" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="address-2">
Address line 2
</label>
<input className="fs-input" id="address-2" name="address-2" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="city">
City
</label>
<input className="fs-input" id="city" name="city" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="state">
State / Province
</label>
<input className="fs-input" id="state" name="state" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="zip-code">
Postal / Zip Code
</label>
<input className="fs-input" id="zip-code" name="zip-code" />
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="email">
Email
</label>
<input className="fs-input" id="email" name="email" required />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="number">
Contact Number
</label>
<input
className="fs-input"
id="number"
name="number"
placeholder="(000) 000-0000"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="previous-job-title">
Job title at your previous role
</label>
<input
className="fs-input"
id="previous-job-title"
name="previous-job-title"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="previous-employer">
Name of your previous employer
</label>
<input
className="fs-input"
id="previous-employer"
name="previous-employer"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="latest-role-start-date">
When did you start at your latest role?
</label>
<input
className="fs-input"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="latest-role-end-date">
End date of your latest role
</label>
<input
className="fs-input"
id="latest-role-end-date"
name="latest-role-end-date"
placeholder="MM-YYYY. Please leave blank if you are currently in the role"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="role-description">
Role description
</label>
<textarea
className="fs-textarea"
id="role-description"
name="role-description"
placeholder="Please describe what you did at your latest role"
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="highest-degree">
Highest degree
</label>
<input
className="fs-input"
id="highest-degree"
name="highest-degree"
/>
<p className="fs-description">
Please state the highest educational degree you've completed
</p>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="school">
School
</label>
<input className="fs-input" id="school" name="school" />
<p className="fs-description">School or university you attended</p>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="certifications">
Certifications
</label>
<input
className="fs-input"
id="certifications"
name="certifications"
/>
<p className="fs-description">
Please mention any certifications you have that are relevant for the
role
</p>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="grad-year">
Graduation year
</label>
<input
className="fs-input"
id="grad-year"
name="grad-year"
placeholder="YYYY"
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="dates">
Position you want to apply for
</label>
<select className="fs-select" id="dates" name="dates">
<option value="software-engineer">Software Engineer</option>
<option value="senior-software-engineer">
Senior Software Engineer
</option>
<option value="ux-designer">UX designer</option>
<option value="marketing-specialist">Marketing Specialist</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="start-date">
When can you start?
</label>
<input
className="fs-input"
id="start-date"
name="start-date"
placeholder="DD-MM-YYYY"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="dates">
How did you learn about us?
</label>
<select className="fs-select" id="dates" name="dates">
<option value="search-engines">
Search Engines (Google, DuckDuckGo, etc)
</option>
<option value="social-media">Social Media</option>
<option value="company-website">Company Website</option>
<option value="jobs-board">Online Jobs Board</option>
<option value="review-site">
Review sites (G2, Capterra, etc)
</option>
</select>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="reference-name">
Reference name
</label>
<input
className="fs-input"
id="reference-name"
name="reference-name"
/>
<p className="fs-description">
Please state the name of a reference at one of your past roles
</p>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="reference-relationship">
Relationship
</label>
<input
className="fs-input"
id="reference-relationship"
name="reference-relationship"
/>
<p className="fs-description">
What was your relationship with this person?
</p>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="latest-role-start-date">
Contact
</label>
<input
className="fs-input"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
<p className="fs-description">
Please provide a phone number or an email address of the person.
</p>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
aria-describedby="bgv-consent-description"
className="fs-checkbox"
id="bgv-consent"
name="bgv-consent"
type="checkbox"
value="bgv-consent"
/>
</div>
<div>
<label className="fs-label" htmlFor="bgv-consent">
Background check consent
</label>
<p className="fs-description" id="bgv-consent-description">
By checking this box, you consent to a formal background check by
one of our partners.
</p>
</div>
</div>
</fieldset>
<div class="fs-button-group">
<button className="fs-button" type="submit">
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 0.75rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
height: 2rem;
line-height: 1.25rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-3 gap-y-4" onSubmit={handleSubmit}>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="name"
>
Full Name
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="name"
name="name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="dob"
>
Date of Birth
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dob"
name="dob"
placeholder="MM-DD-YYYY"
required
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="address-1"
>
Address line 1
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-1"
name="address-1"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="address-2"
>
Address line 2
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-2"
name="address-2"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="city"
>
City
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="city"
name="city"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="state"
>
State / Province
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="state"
name="state"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="zip-code"
>
Postal / Zip Code
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="zip-code"
name="zip-code"
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="email"
>
Email
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email"
name="email"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="number"
>
Contact Number
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="number"
name="number"
placeholder="(000) 000-0000"
required
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="previous-job-title"
>
Job title at your previous role
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="previous-job-title"
name="previous-job-title"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="previous-employer"
>
Name of your previous employer
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="previous-employer"
name="previous-employer"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="latest-role-start-date"
>
When did you start at your latest role?
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="latest-role-end-date"
>
End date of your latest role
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-end-date"
name="latest-role-end-date"
placeholder="MM-YYYY. Please leave blank if you are currently in the role"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="role-description"
>
Role description
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="role-description"
name="role-description"
placeholder="Please describe what you did at your latest role"
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="highest-degree"
>
Highest degree
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="highest-degree"
name="highest-degree"
/>
<p className="block text-sm text-[--color-text-muted]">
Please state the highest educational degree you've completed
</p>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="school"
>
School
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="school"
name="school"
/>
<p className="block text-sm text-[--color-text-muted]">
School or university you attended
</p>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="certifications"
>
Certifications
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="certifications"
name="certifications"
/>
<p className="block text-sm text-[--color-text-muted]">
Please mention any certifications you have that are relevant for the
role
</p>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="grad-year"
>
Graduation year
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="grad-year"
name="grad-year"
placeholder="YYYY"
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="dates"
>
Position you want to apply for
</label>
<select
className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dates"
name="dates"
>
<option value="software-engineer">Software Engineer</option>
<option value="senior-software-engineer">
Senior Software Engineer
</option>
<option value="ux-designer">UX designer</option>
<option value="marketing-specialist">Marketing Specialist</option>
</select>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="start-date"
>
When can you start?
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="start-date"
name="start-date"
placeholder="DD-MM-YYYY"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="dates"
>
How did you learn about us?
</label>
<select
className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="dates"
name="dates"
>
<option value="search-engines">
Search Engines (Google, DuckDuckGo, etc)
</option>
<option value="social-media">Social Media</option>
<option value="company-website">Company Website</option>
<option value="jobs-board">Online Jobs Board</option>
<option value="review-site">
Review sites (G2, Capterra, etc)
</option>
</select>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="reference-name"
>
Reference name
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reference-name"
name="reference-name"
/>
<p className="block text-sm text-[--color-text-muted]">
Please state the name of a reference at one of your past roles
</p>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="reference-relationship"
>
Relationship
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reference-relationship"
name="reference-relationship"
/>
<p className="block text-sm text-[--color-text-muted]">
What was your relationship with this person?
</p>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="latest-role-start-date"
>
Contact
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="latest-role-start-date"
name="latest-role-start-date"
placeholder="MM-YYYY"
/>
<p className="block text-sm text-[--color-text-muted]">
Please provide a phone number or an email address of the person.
</p>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
aria-describedby="bgv-consent-description"
className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="bgv-consent"
name="bgv-consent"
type="checkbox"
value="bgv-consent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="bgv-consent"
>
Background check consent
</label>
<p
className="mt-0.5 block text-sm text-[--color-text-muted]"
id="bgv-consent-description"
>
By checking this box, you consent to a formal background check by
one of our partners.
</p>
</div>
</div>
</fieldset>
<div class="col-span-full flex flex-row-reverse gap-x-3">
<button
className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. Contact forms that work out of the box with top website platforms.How to use this form
Create a form on Formspree
Add actions and validation rules
Update your form's action
<form action="https://formspree.io/f/{form_id}" method="post">Tweak your form's code
Deploy your form to your hosting platform
Integration Guides
What is an Employment Application Form?
The employment application form is a fundamental part of the hiring process, used by organizations to collect standardized information from job candidates. Unlike resumes or CVs, which are tailored by applicants, employment application forms help recruiters gather consistent data, making it easier to compare qualifications and spot the right person for the role.
Employment application forms are useful across various industries, from corporate environments to retail and customer service roles, providing a structured method to assess work experience, educational background, skills and qualifications, and employment eligibility. By using an employment application form, companies can ensure that all job applicants undergo a similar evaluation, making the prtocess fair, unbiased, and legally compliant.
For candidates, the application form presents an opportunity to showcase relevant information, from personal information like their phone number and address to details of their work history and additional information that sets them apart. In this guide, we’ll delve into the various types of job application forms, discuss the components each should have, and provide best practices for creating one, ensuring you get the most out of your hiring efforts.
What is an Employment Application Form?
An employment application form is a standardized document that employers use to collect essential information from job applicants. Unlike a resume or cover letter, which candidates design themselves, an employment application form is crafted by the employer to ensure consistency across submissions. This form captures key data such as personal information, work history, educational background, skills and qualifications, and, in some cases, a preliminary background check.
Employment application forms are crucial in the hiring process because they allow recruiters to quickly and efficiently review applications. They also help verify details like employment eligibility and availability while gathering insights into the applicant’s job requirements and work experience.
Types of Employment Application Forms
Depending on company needs, employment application forms can vary widely. Here are some common types:
- Paper-Based Forms: Often used in smaller companies or walk-in interviews, these physical forms capture all essential data but may require manual storage and processing.
- Adobe PDF Library Forms: Many companies use fillable PDF forms from the Adobe PDF library for easy distribution and electronic submission.
- Online Forms: As digital hiring becomes standard, online forms hosted on websites or applicant tracking systems (ATS) allow for easy data collection and automated organization.
Importance in the Hiring Process
An employment application form benefits both employers and job applicants in the hiring process. Employers can gather crucial information like contact details, references, and availability in a single document, making it easier to evaluate candidates at a glance. For applicants, it provides a clear way to showcase their job applications, work experience, and skills and qualifications in a structured format, ensuring nothing essential is overlooked.
When You Need an Employment Application Form
An employment application form is a vital tool in the hiring process, especially for companies looking to streamline hiring and ensure consistency in candidate evaluation. Here are some common scenarios when a job application form is essential:
1. High-Volume Hiring
For roles that attract a large number of candidates, such as customer service, sales, or retail positions, job application forms help recruiters process job applications more efficiently. The structured format allows hiring teams to collect personal information and work history from multiple applicants in a consistent manner, making it easier to compare qualifications and identify the right person for the job.
2. Screening for Eligibility and Compliance
Employment application forms can help confirm employment eligibility and address compliance requirements. Many forms include sections for applicants to disclose relevant details like their educational background, work experience, and willingness to undergo a background check. Including a section for equal opportunity employer statements also helps companies stay compliant with anti-discrimination laws.
3. For Building a Candidate Database
Companies often retain job applications from past candidates to build a database of potential hires. By keeping records of applicants’ skills and qualifications, employment history, and contact details, organizations can quickly refer to these applications for future openings, reducing the time and cost involved in hiring.
An employment application form provides a snapshot of each candidate’s work experience and additional information they wish to share, allowing employers to revisit applications that didn’t fit a prior role but may suit a new position.
Popular Components of an Employment Application Form
To create an effective employment application form, it’s crucial to include sections that capture all relevant information about the candidate. Below are the most common and essential components every job application form should have:
1. Personal Information
This section collects personal information such as the applicant’s name, address, phone number, and contact details. It’s essential for reaching out to candidates during the hiring process and is typically one of the first sections in any job application form.
2. Work Experience and Employment History
The work experience and employment history section allows candidates to outline their previous roles, responsibilities, and tenure. By listing their work history, job titles, and the nature of each position, applicants give hiring managers a clear idea of their experience level and suitability for the job requirements.
3. Education Background
An applicant’s educational background provides information about their academic qualifications, including degrees, certifications, and any specialized training. This section is particularly valuable for positions requiring specific educational credentials.
4. Skills and Qualifications
In this section, applicants list their relevant skills and qualifications that relate to the job requirements. This could include technical skills, language proficiencies, and certifications that demonstrate their capabilities for the role.
5. Availability and Schedule
To ensure that candidates align with the role’s scheduling needs, this section allows applicants to specify their availability, preferred work hours, and possible start dates.
6. References and Contact Information
References play an essential role in verifying a candidate’s employment history and character. This section asks for contact information of previous managers or colleagues who can speak to the candidate’s work performance and integrity. It’s often required for job application forms in roles where reliability and professionalism are essential.
7. Additional Information
This section gives candidates a chance to share any additional information they consider relevant to the job. It might include a cover letter explaining their interest in the role, unique achievements, or any other personal statement they wish to provide.
8. Background Check and Employment Eligibility
Many companies include a section for applicants to consent to a background check and verify their employment eligibility. This ensures the hiring team can conduct necessary screenings for safety and compliance.
9. Equal Opportunity Employment Statement
Including an equal opportunity employer statement assures candidates that the company is committed to diversity and inclusion, which can be essential for compliance with anti-discrimination regulations.
These components together form a comprehensive employment application template that ensures recruiters have all the necessary information to make informed decisions and align with legal standards.
Creating a Job Application Form: Best Practices and Templates
Crafting an effective job application form requires careful planning and attention to user experience, accessibility, and legal compliance. Below are some best practices to follow and options for using employment application templates to create a seamless application process.
1. Choosing the Right Format
There are various formats for job application forms, including paper-based forms, Adobe PDF library forms, and online forms. Paper forms can be practical for walk-in applications, but many organizations prefer digital formats for easier processing and tracking. PDF forms provide a universal, fillable option, while online forms offer an interactive, mobile-friendly experience that enhances the applicant’s convenience.
2. Using an Employment Application Template
Templates provide a ready-made structure that ensures all necessary fields are included. Many templates are customizable, allowing employers to tailor sections like personal information, work experience, and skills and qualifications to fit specific job requirements. These templates save time and help maintain consistency across applications.
3. Organizing Sections Logically
A well-organized form guides applicants smoothly through each section. Begin with personal information and contact details, followed by work history and educational background. Reserve optional fields, such as additional information or references, for the end of the form. This flow minimizes confusion and helps applicants provide accurate information.
4. Tips for Making It User-Friendly
A user-friendly application form is clear, concise, and straightforward. Here are a few tips:
- Use simple language and avoid jargon.
- Include helpful instructions, especially in sections like skills and qualifications or employment history.
- Minimize required fields to prevent overwhelming applicants and make the process quicker for them.
5. Ensuring Accessibility and Mobile Compatibility
Since many candidates complete job applications on mobile devices, it’s essential to make forms mobile-compatible. Online form builders and templates optimized for mobile ensure that applicants can access and fill out the form seamlessly on any device. Accessibility features, such as screen reader compatibility and high-contrast text, are also crucial for inclusive hiring practices.
6. Compliance and Legal Considerations
To stay compliant with employment laws, companies should include a statement on equal opportunity employment and obtain candidate consent for any background checks. Additionally, a section for applicants to acknowledge the terms of the job application is advisable, ensuring they understand the application’s purpose and privacy guidelines.
By following these best practices, employers can create an employment application form that simplifies hiring, enhances the candidate experience, and maintains compliance. Templates offer a reliable starting point, ensuring you cover all essential fields and can adapt them as needed for different job titles or departments.
Collecting and Analyzing Employment Applications
Once an employment application form is set up and actively gathering job applications, it’s essential to handle the collected information effectively to streamline the hiring process. An organized approach to collecting, storing, and analyzing applications helps identify the right person for the job, and ensures compliance with data protection standards.
1. Screening Applications Efficiently
For roles that receive a high volume of applications, efficiency in screening is key. Start by reviewing personal information, work experience, and employment history to confirm that applicants meet the job requirements. Filtering based on must-have qualifications, such as specific skills and qualifications or education background, can help narrow down the pool to the most suitable candidates.
2. Using Software Tools for Management
Many organizations rely on applicant tracking systems (ATS) or online recruitment platforms to manage job application forms and monitor the status of each candidate. These tools automatically organize applications and store contact details, references, and work history for easy access. They also allow you to create reports, compare applications, and track hiring metrics like time-to-hire and candidate quality.
3. Storing Applications Securely
When managing job applications, it’s crucial to protect candidate data. Store personal information, employment history, and additional information provided by applicants in a secure system to prevent unauthorized access. Consider using encrypted storage solutions, ensuring that all background check and resume data is managed following privacy regulations. For paper-based forms, secure storage locations like locked cabinets are essential.
4. Building a Talent Pool for Future Hiring
Employment application forms are invaluable for future hiring needs, allowing companies to create a database of potential candidates. Save applications from highly qualified individuals who may not be the best fit for the current opening but might be well-suited for future roles. This talent pool helps reduce hiring time and costs by allowing easy access to candidates with relevant work experience, skills, and availability.
Through effective collection, management, and analysis, employment applications can drive more informed hiring decisions, making it easier to select the right person for the job while maintaining organized and secure records.
Common Mistakes to Avoid in Employment Application Forms
Creating an effective employment application form requires avoiding some common pitfalls that can hinder the hiring process or deter potential applicants. Here are a few frequent mistakes and tips on how to avoid them:
1. Overly Lengthy Forms
Lengthy job application forms can discourage qualified candidates from completing the application. It’s important to focus on essential fields like work experience, skills and qualifications, and employment history while minimizing optional sections or complex questions. Avoid asking for excessive additional information that may not be directly relevant to the job.
2. Unclear Instructions
Clear instructions make a difference in how accurately candidates complete their applications. For sections like skills and qualifications, employment history, and references, provide examples or brief guidance on what information is needed. This helps applicants avoid mistakes and ensures consistent data for easier screening.
3. Outdated Information Requests
Some application forms may ask for information that is no longer relevant or could be seen as intrusive. Avoid requesting personal data unrelated to the job requirements, such as marital status or social security numbers, which are unnecessary for the initial application. Focus on core personal information, contact details, and employment eligibility to comply with privacy laws and respect candidate privacy.
4. Not Testing the Form
It’s essential to test online forms to ensure they function correctly across different devices and browsers. A broken or poorly formatted application form can deter applicants, especially those using mobile devices. Test each field, especially required fields like phone number, references, and educational background, to ensure the form works smoothly and captures accurate data.
5. Ignoring Accessibility and Mobile Compatibility
Accessibility is critical for making your form usable for all applicants, including those with disabilities. Ensure your employment application form follows accessibility guidelines by using readable fonts, high-contrast colors, and labels for each field. Mobile compatibility is also crucial, as many candidates complete job applications on mobile devices.
By avoiding these common mistakes, companies can create an employment application form that is accessible, concise, and user-friendly, leading to a smoother hiring process and a higher volume of qualified applicants.
Key Components for Different Job Titles and Roles
Each job application form may need slight adjustments depending on the job title or role type. Tailoring application forms based on job requirements helps recruiters collect more relevant data for each position, whether technical, managerial, or entry-level. Here’s how to customize employment application forms for different job roles:
1. Entry-Level and General Roles
For entry-level or general positions, it’s best to keep the application form straightforward. Key components for these roles include:
- Personal Information: Basic details like contact information and phone number.
- Education Background: High school or college degree details.
- Availability: To determine if the applicant can start on short notice or work flexible hours.
- References: One to two references to verify character and reliability.
2. Mid-Level and Managerial Roles
For roles requiring more experience, include fields that capture managerial or technical expertise:
- Work Experience and Employment History: Detailed job titles, previous responsibilities, and duration of each role.
- Skills and Qualifications: Relevant skills, especially those aligned with leadership or industry-specific requirements.
- Cover Letter: Optional but helpful for understanding the applicant’s motivation and interest in the role.
- Background Check and Employment Eligibility: Managerial roles may require background checks for compliance or security reasons.
3. Technical and Specialized Roles
Technical roles, such as engineering or IT, require specific information to gauge expertise and qualifications:
- Technical Skills: Fields for listing certifications, software proficiency, or specialized skills (e.g., programming languages).
- Portfolio or Project Links: Allow candidates to share portfolios or project links relevant to the role.
- References: Contact details of former supervisors who can verify technical skill and project contributions.
- Education Background: Details of any specialized training or certifications that may support the applicant’s fit for the role.
4. Creative Roles
For creative positions such as graphic design, marketing, or content creation, the application form should include:
- Portfolio: Space for links to portfolios or samples of work.
- Creative Skills and Qualifications: Specific tools or software used, like Adobe Suite for graphic designers.
- Additional Information: Optional section for applicants to discuss their creative process or artistic approach.
Customizing job application forms based on the job title helps recruiters efficiently gather relevant information, making it easier to assess applicants based on the unique requirements of each role.
Using an Employment Application Form as Part of the Overall Hiring Process
An employment application form is a critical first step in the hiring process, helping to screen candidates and gather standardized information. However, its value extends beyond the initial application stage, as it can also support later stages, including interviews and onboarding. Here’s how to integrate job application forms into the overall hiring process for better results:
1. Integrating with Other Hiring Steps
The data gathered from a job application form provides a foundation for other hiring activities, such as interviews and assessments. Personal information, work experience, and skills and qualifications from the form guide interview questions and evaluation criteria. Recruiters can also use details like employment history and availability to tailor discussions to the candidate’s background and the role’s specific needs.
2. Gathering Additional Information After Application Submission
While employment application forms gather essential information, some roles may require further details, such as a cover letter or a sample project. Requesting these additional materials after reviewing the initial application allows recruiters to delve deeper into each candidate’s unique strengths. For example, if a candidate’s education background and work history align well with the role, a follow-up request for project samples or references can provide more context for a hiring decision.
3. Ensuring a Smooth Transition to Interviews
The structured information from job applications allows hiring managers to efficiently transition from application review to interviews. Having consistent details across all applications makes it easy to compare candidates, and the data from employment history, skills, and references informs specific questions that can validate the applicant’s experience and capabilities.
4. Supporting Onboarding and Role Integration
Once a candidate is selected, their job application form can provide helpful insights during onboarding. Contact details, work experience, and employment history collected in the form give managers a clear picture of the new hire’s background. Additionally, information such as availability and employment eligibility ensures the onboarding process aligns with both the candidate’s and the organization’s expectations.
Incorporating employment application forms into each stage of hiring makes the hiring process more cohesive and allows teams to make well-informed decisions. By leveraging these forms effectively, companies can streamline candidate evaluation and ensure a smoother transition from hiring to employment.
Final Thoughts
An effective employment application form can be a powerful tool in attracting, evaluating, and selecting the right person for a job. By carefully designing and integrating job application forms into the hiring process, companies can save time, ensure fairness, and maintain consistency. Here’s a summary of the key benefits and some final recommendations to help you maximize the potential of your employment application form:
Summarizing the Benefits
A well-crafted job application form allows hiring teams to:
- Standardize Information: Collect consistent data on work experience, personal information, and employment history, making it easier to compare candidates.
- Ensure Compliance: Include employment eligibility fields, background check consent, and an equal opportunity employer statement to adhere to legal requirements.
- Build a Talent Pool: Store applications in a candidate database, making it easier to fill future roles by revisiting past job applications from qualified candidates.
Future of Job Applications
The process of gathering job applications continues to evolve with technological advancements. Online and mobile-friendly employment application templates have become standard, and with applicant tracking systems (ATS), companies can streamline application management and track candidates at every stage. As the hiring landscape changes, having flexible, digital-friendly forms helps companies attract top talent and keep up with industry best practices.
To keep employment application forms effective, it’s essential to review and update them periodically. Roles and job requirements change over time, and forms should reflect these updates to remain relevant. Regularly assessing the form’s structure, including sections for work history, skills and qualifications, and availability, ensures it meets both organizational needs and candidate expectations.
In summary, an employment application form is more than just a document; it’s a strategic asset in the hiring process that supports decision-making and provides a foundation for effective hiring practices. By investing in well-structured forms and maintaining them as part of a dynamic hiring approach, organizations can enhance their recruitment process and ultimately bring in the best talent for each role.
FAQ
-
What are the common uses of application forms?
Application forms are commonly used for job applications, admissions, event registrations, and service requests. They streamline the collection of important details from applicants, providing a structured process for organizations to review and manage submissions effectively.
-
What are the main benefits of application forms?
Application forms provide an organized way to collect detailed information, improve data accuracy, and speed up decision-making. With Formspree as the backend, these forms can also send email notifications and allow for instant viewing of responses on the Formspree dashboard, enhancing efficiency.
-
When are application forms needed?
Application forms are needed when collecting structured information for job opportunities, academic admissions, program enrollments, or membership requests. They ensure consistency in the data collection process, making it easier to evaluate applicants fairly and efficiently.
-
How to fill out an employment form?
To fill out an employment form, provide accurate information about your personal details, work history, education, and references. Ensure all fields are completed as requested, and if the form uses Formspree as a backend, you can trust it to notify the employer instantly and securely manage your submission.
-
How to fill out an application form for admission?
When filling out an application form for admission, include accurate details about your personal information, academic background, and any additional requirements like essays or references. Forms powered by Formspree ensure your submission is securely delivered and allows institutions to access responses instantly for timely processing.
-
How to write a job application?
To write a job application, include a professional cover letter that highlights your qualifications, skills, and experiences relevant to the role. If submitting through an application form using Formspree, you can be confident that your details will be securely processed and employers will receive instant notifications about your submission.
More application Forms
-
Tenant Application Form
Minimal, user-friendly tenant application form for quick and efficient tenant selection.
Get code -
Simple Job Application Form
Clean, minimal job application form for easy hiring and applicant tracking
Get code -
Rental Application Form
Clean, minimal rental application form for hassle-free tenant screening and management
Get code