Form Library Application Forms Simple Job Application Form

Simple Job Application Form

Use this minimal HTML simple job application form on your website to efficiently collect applicant information and resumes and simplify your hiring process without the need for complex tools.
Preview Preview
Code Code 
        

          HTML HTML
          Copy 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-company">
        Name of your latest employer
      </label>
      <input class="fs-input" id="previous-company" name="previous-company" />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="previous-role">Your latest role</label>
      <input class="fs-input" id="previous-role" name="previous-role" />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="latest-role-start-date">Start date</label>
      <input
        class="fs-input"
        id="latest-role-start-date"
        name="latest-role-start-date"
        placeholder="MM-YYYY"
      />
      <p class="fs-description">When did you start at your latest role?</p>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="latest-role-end-date">End date</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"
      />
      <p class="fs-description">End date of your latest role</p>
    </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"
      ></textarea>
      <p class="fs-description">
        Please describe what you did at your latest role
      </p>
    </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>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/** Variables **/

:root {
  --color-background: #e7e7e7;
  --color-background-alt: #ba5ed7;
  --color-border-active: #a94bc3;
  --color-border-default: #d1d1d1;
  --color-highlight: #e2b6f1;
  --color-primary: #86319a;
  --color-primary-active: #5e2768;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;

  --font-family-body: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", system-ui, 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.5rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  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: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 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: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 0.875rem;
  height: 2.5rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.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.25rem;
}

.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-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.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 {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.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.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.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='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  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 1px inset;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy 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-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="name"
      >
        Full Name
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="name"
        name="name"
        required
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="dob"
      >
        Date of Birth
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="address-1"
      >
        Address line 1
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="address-1"
        name="address-1"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="address-2"
      >
        Address line 2
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="address-2"
        name="address-2"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="city"
      >
        City
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="city"
        name="city"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="state"
      >
        State / Province
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="state"
        name="state"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="zip-code"
      >
        Postal / Zip Code
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="zip-code"
        name="zip-code"
      />
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="email"
      >
        Email
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="email"
        name="email"
        required
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="number"
      >
        Contact Number
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="previous-company"
      >
        Name of your latest employer
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="previous-company"
        name="previous-company"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="previous-role"
      >
        Your latest role
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="previous-role"
        name="previous-role"
      />
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="latest-role-start-date"
      >
        Start date
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
        id="latest-role-start-date"
        name="latest-role-start-date"
        placeholder="MM-YYYY"
      />
      <p class="block leading-5 text-[--color-text-muted]">
        When did you start at your latest role?
      </p>
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="latest-role-end-date"
      >
        End date
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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"
      />
      <p class="block leading-5 text-[--color-text-muted]">
        End date of your latest role
      </p>
    </div>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="role-description"
      >
        Role description
      </label>
      <textarea
        class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
        id="role-description"
        name="role-description"
      ></textarea>
      <p class="block leading-5 text-[--color-text-muted]">
        Please describe what you did at your latest role
      </p>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="dates"
      >
        Position you want to apply for
      </label>
      <select
        class="bg-caret-down h-10 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="start-date"
      >
        When can you start?
      </label>
      <input
        class="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="dates"
      >
        How did you learn about us?
      </label>
      <select
        class="bg-caret-down h-10 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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>
  <div class="col-span-full flex flex-row-reverse gap-x-3">
    <button
      class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
      type="submit"
    >
      Submit
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #e7e7e7;
    --color-background-alt: #ba5ed7;
    --color-border-active: #a94bc3;
    --color-border-default: #d1d1d1;
    --color-highlight: #e2b6f1;
    --color-primary: #86319a;
    --color-primary-active: #5e2768;
    --color-text-default: #262626;
    --color-text-muted: #4f4f4f;

    --font-family-body: "Figtree", system-ui, sans-serif;
    --font-family-display: "Poppins", system-ui, 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='2.75' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more
      
        

          HTML React
          Copy 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-company">
            Name of your latest employer
          </label>
          <input
            className="fs-input"
            id="previous-company"
            name="previous-company"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="previous-role">
            Your latest role
          </label>
          <input className="fs-input" id="previous-role" name="previous-role" />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="latest-role-start-date">
            Start date
          </label>
          <input
            className="fs-input"
            id="latest-role-start-date"
            name="latest-role-start-date"
            placeholder="MM-YYYY"
          />
          <p className="fs-description">
            When did you start at your latest role?
          </p>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="latest-role-end-date">
            End date
          </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"
          />
          <p className="fs-description">End date of your latest role</p>
        </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"
          />
          <p className="fs-description">
            Please describe what you did at your latest role
          </p>
        </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>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/** Variables **/

:root {
  --color-background: #e7e7e7;
  --color-background-alt: #ba5ed7;
  --color-border-active: #a94bc3;
  --color-border-default: #d1d1d1;
  --color-highlight: #e2b6f1;
  --color-primary: #86319a;
  --color-primary-active: #5e2768;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;

  --font-family-body: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", system-ui, 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.5rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  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: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 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: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 0.875rem;
  height: 2.5rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.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.25rem;
}

.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-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.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 {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.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.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.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='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  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 1px inset;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML React/Tailwind
          Copy 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-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="name"
          >
            Full Name
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="name"
            name="name"
            required
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="dob"
          >
            Date of Birth
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="address-1"
          >
            Address line 1
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="address-1"
            name="address-1"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="address-2"
          >
            Address line 2
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="address-2"
            name="address-2"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="city"
          >
            City
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="city"
            name="city"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="state"
          >
            State / Province
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="state"
            name="state"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="zip-code"
          >
            Postal / Zip Code
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="zip-code"
            name="zip-code"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="email"
          >
            Email
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="email"
            name="email"
            required
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="number"
          >
            Contact Number
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="previous-company"
          >
            Name of your latest employer
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="previous-company"
            name="previous-company"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="previous-role"
          >
            Your latest role
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="previous-role"
            name="previous-role"
          />
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="latest-role-start-date"
          >
            Start date
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
            id="latest-role-start-date"
            name="latest-role-start-date"
            placeholder="MM-YYYY"
          />
          <p className="block leading-5 text-[--color-text-muted]">
            When did you start at your latest role?
          </p>
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="latest-role-end-date"
          >
            End date
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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"
          />
          <p className="block leading-5 text-[--color-text-muted]">
            End date of your latest role
          </p>
        </div>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="role-description"
          >
            Role description
          </label>
          <textarea
            className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
            id="role-description"
            name="role-description"
          />
          <p className="block leading-5 text-[--color-text-muted]">
            Please describe what you did at your latest role
          </p>
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="dates"
          >
            Position you want to apply for
          </label>
          <select
            className="bg-caret-down h-10 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="start-date"
          >
            When can you start?
          </label>
          <input
            className="h-10 appearance-none rounded-full border-0 px-4 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="dates"
          >
            How did you learn about us?
          </label>
          <select
            className="bg-caret-down h-10 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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>
      <div class="col-span-full flex flex-row-reverse gap-x-3">
        <button
          className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
          type="submit"
        >
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #e7e7e7;
    --color-background-alt: #ba5ed7;
    --color-border-active: #a94bc3;
    --color-border-default: #d1d1d1;
    --color-highlight: #e2b6f1;
    --color-primary: #86319a;
    --color-primary-active: #5e2768;
    --color-text-default: #262626;
    --color-text-muted: #4f4f4f;

    --font-family-body: "Figtree", system-ui, sans-serif;
    --font-family-display: "Poppins", system-ui, 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='2.75' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

    Choose from our growing list of actions, from Airtable to Zendesk and everything in between.

  3. Update your form's action

    Replace with the form endpoint in the code above with the ID from your new form.
    <form action="https://formspree.io/f/{form_id}" method="post">

  4. Tweak your form's code

    Don’t forget to include a name attribute for every input.

  5. Deploy your form to your hosting platform

    Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below.

Integration Guides

Contact forms that work out of the box with top website platforms.

GitBook

GitBook

Adding a form to GitBook

 Shopify

Shopify

Adding a form to Shopify

 Gatsby

Gatsby

React Forms with Gatsby

 Eleventy

Eleventy

HTML Forms with Eleventy

 Jekyll

Jekyll

HTML Forms with Jekyll

 NextJS

NextJS

React Forms with NextJS

Creating a Simple Job Application Form

A simple job application form is a key tool for employers to gather essential information about job candidates during the hiring process. These forms streamline the application process by collecting details like contact information, employment history, and relevant qualifications from potential employees. Whether you’re a small business or a large corporation, using a straightforward employment application form makes it easier to identify the best candidate for the position.

In this guide, we’ll explore what makes a great simple job application form, why it’s important, and how to create one that ensures you find the right person for your open job position.

Why Use a Simple Job Application Form?

A simple job application form benefits both employers and job seekers. By using a well-designed form, employers can quickly gather relevant information about candidates, making the hiring process more efficient. Instead of sifting through long resumes and irrelevant cover letters, the job application form focuses on key details like work experience and employment history that are most important to the job.

For job seekers, a simple job application form makes the process easier and less daunting. With clear, concise fields, applicants can provide all necessary information without feeling overwhelmed. Whether you’re hiring for one role or multiple positions, a streamlined job application template ensures you’re collecting the right data without unnecessary complications.

Key Elements of an Effective Job Application Form

A job application form should collect the following key details to help you evaluate candidates:

  • Personal Information: Every application form needs to collect basic personal details such as the candidate’s full name, email address, phone number, and sometimes social security information. These fields are essential for future communication and verifying the applicant’s identity.
  • Employment History: To assess a candidate’s qualifications, include fields that ask for their work history. A job application form should have sections for the applicant’s previous job roles, dates of employment, and responsibilities, allowing you to evaluate their employment history.
  • Education Background: Some employment application templates might also ask for the candidate’s educational qualifications. You can gather details about degrees, certifications, and any relevant training that makes them suitable for the job position.
  • Job Position and Availability: Ensure that your form clearly states the job they’re applying for and their availability. This can include desired start dates, full-time or part-time preferences, and any other details related to scheduling.
  • References and Cover Letter: Some employers find it useful to ask for references or a cover letter as part of the job applications. This can provide further insight into the candidate’s background and fit for the position.

Designing a User-Friendly Job Application Form

The best job application forms are user-friendly, mobile-friendly, and accessible to all users. Whether candidates are applying from their desktop or mobile device, the form should be easy to navigate and quick to fill out. Keep the design clear, concise, and straightforward to ensure applicants can complete it without frustration.

Here are a few tips for creating a seamless and minimal form:

  • Make sure all fields are logically ordered and grouped.
  • Avoid clutter and excessive detail that might deter applicants.
  • Use tooltips or help texts to guide applicants through more complex fields.
  • Ensure the form is secure to protect sensitive information.

Using Online Job Application Forms

Today, many (read: most) companies prefer using an online job application form over a traditional paper form. An online job application form can be easily embedded on your company’s website, offering convenience for both the employer and the job seeker. Digital forms can also be integrated with automation tools that help sort and process applications efficiently.

Some advantages of online job application forms include:

  • Automated processing of applications, saving time for HR teams.
  • Easy storage of digital records.
  • Reduced chances of errors compared to manual data entry.
  • Ensuring forms are responsive and work seamlessly on all devices.

Best Practices for Designing a Simple Job Application Form

To ensure your employment application form is effective, follow these best practices:

  • Keep it short and direct: Applicants are more likely to complete a form if it only asks for essential information. Focus on collecting relevant information like employment history, work experience, and personal details.
  • Use a template: You can save time by starting with a job application template. Many platforms offer customizable employment application templates that you can tailor to your specific needs. You can use one of ours to get started quickly.
  • Ensure mobile compatibility: Many candidates will apply via mobile devices, so it’s important that your form is mobile-friendly and responsive.
  • Test for usability: Before launching your form, test it to make sure it works smoothly and doesn’t have any technical issues that could frustrate candidates.

Common Mistakes to Avoid in Job Application Forms

While designing a simple job application form, avoid the following common mistakes:

  • Asking for too much information: Keep your form concise and focused on the key details you need to assess the applicant.
  • Not securing personal data: Ensure that all personal information, including social security numbers and contact details, is stored securely.
  • Making the form too complex: Avoid creating overly complicated forms with unnecessary fields, which can frustrate job candidates and lead to incomplete submissions.

Utilizing Job Application Form Templates

Using a job application form template or employment application template can save you time while ensuring your form is professional and well-designed. Templates are available for free or at a low cost and can be customized to fit your business’s specific needs.

Advantages of using templates include:

  • Consistency: Employment application templates ensure that each candidate submits the same information in a standardized format.
  • Speed: Templates can be created and deployed quickly, making it easier to start accepting applications immediately.
  • Customization: Many job application templates are easily customizable, allowing you to add or remove fields as needed for different job positions.

Printable vs. Online Job Application Forms: Which Is Better?

While printable job application forms may still be used in some settings, the majority of employers are moving towards online job application forms. Here’s a quick comparison:

Printable Job Application Forms

  • Pros: Good for businesses without a strong online presence, traditional industries, or companies that value physical records.
  • Cons: Less efficient, can lead to manual data entry errors, and harder to store.

Online Job Application Forms

  • Pros: Automated, fast, modern, and easily stored digitally. Online job application forms also allow candidates to apply from anywhere, on any device.
  • Cons: May require technical setup or software.

Create a Simple Job Application Form from Scratch

Creating your own job application form from scratch can be simple if you follow these steps:

  1. Identify essential fields: Decide what information is necessary, such as personal information, employment history, and contact details.
  2. Choose a platform: Use a form-building tool or start with a job application form template to streamline the process.
  3. Customize fields: Add any additional fields relevant to the job position, such as start date availability or social media profiles.
  4. Test the form: Ensure everything works correctly before publishing it. Check for usability and ensure all information is collected in the right format.
  5. Publish the form: Embed it on your website or share it via job boards.

Tips for a Seamless Application Process

To make the application process smoother for both employers and applicants, it’s crucial to optimize each stage of the process. A well-designed process not only increases the number of qualified candidates but also reduces the chances of application drop-offs due to frustrations with the form or communication gaps. Below are several important points to enhance the application process:

1. Provide Clear Instructions

Clarity is critical when it comes to filling out a job application form. Many job seekers may abandon an application if instructions are vague or confusing. To avoid this, ensure that each section of the form has detailed, clear explanations about what is required.

Here are some ways to improve clarity:

  • Guided Form Fields: Include placeholder text or tooltips that guide the applicant on how to fill out each field. For example, in the employment history section, specify that dates should be entered in a specific format (e.g., MM/YYYY).
  • Progress Indicators: If your application form spans multiple pages, use progress bars or step indicators to let candidates know how far along they are in the process. This keeps them motivated to complete the form.
  • Error Validation in Real-Time: Incorporate real-time error checking that alerts applicants if a required field is missing or improperly filled out. For instance, if someone leaves the phone number field blank or enters an incorrect format, they should receive immediate feedback to correct the issue.

2. Automate Follow-Ups

One of the biggest frustrations job candidates experience is the “application black hole,” where they submit an application but receive no follow-up communication. Automating follow-ups provides a professional touch and keeps candidates informed about their status in the hiring process. This also fosters trust between the employer and the potential employee.

Key automation strategies:

  • Application Receipt Confirmation: Send an automated email immediately after the form is submitted. A simple confirmation that the application has been received, along with an outline of the next steps in the process, reassures candidates that their efforts were successful.
  • Automated Status Updates: If the review process is going to take some time, consider setting up periodic automated updates to inform candidates that their application is still under review. Alternatively, notify them when their application has moved to the next stage.
  • Rejection Emails: It’s equally important to send courteous rejection emails to candidates who didn’t make it to the next phase. An automated rejection message ensures a respectful closure to the application process, and it maintains a positive brand image for your company.

3. Make It Easy to Access

The accessibility of your job application form is vital to attracting a diverse and qualified pool of job seekers. If candidates can’t find or access your form easily, you might lose out on the best candidate for the role. To avoid this, ensure your form is accessible and optimized for different platforms and devices.

Best practices for accessibility:

  • Multi-Platform Compatibility: Ensure your job application form works seamlessly on mobile, tablet, and desktop devices. With many job seekers applying for jobs on the go, a mobile-friendly form that adjusts its layout based on screen size will increase the likelihood of completion.
  • Cross-Platform Promotion: Share the form link across different job platforms and social media networks. Make sure your job post on popular job boards, your company’s careers page, and LinkedIn all link to the same, easy-to-find application.
  • Accessibility for Differently-Abled Applicants: Ensure the form is compliant with accessibility guidelines (like WCAG) so that people with disabilities can also apply. For example, use descriptive labels for form fields, enable keyboard navigation, and provide alt text for images to assist screen readers.

4. Minimize the Length of the Application

A lengthy, complex job application form can deter qualified applicants from completing the process. Simplify the form by only asking for relevant information upfront, and save additional details (like reference checks or more in-depth employment history) for later stages of the hiring process.

Ways to minimize form length:

  • Divide the Application Process into Phases: In the initial form, focus on collecting key details such as personal information, work history, and contact information. After you narrow down the candidate pool, request more specific information, like detailed work samples or references.
  • Optional Fields: Make certain fields optional unless absolutely necessary. This reduces pressure on candidates and encourages form completion.
  • Save and Resume Options: Allow candidates to save their progress and return to the application later. This is particularly useful for applicants filling out longer forms, enabling them to gather required documents (e.g., cover letters) without feeling rushed.

5. Offer a Printable Version

While most job seekers prefer online forms, providing an option to download a printable job application form can still be useful. Some candidates, particularly those in traditional industries, might prefer the security of submitting their applications in person or via mail.

  • Ensure the printable form is a standard, easy-to-read document with all necessary instructions for physical submission.
  • Make sure the online and printable versions of the form are identical in terms of the information collected, allowing you to process both formats uniformly.

6. Integrate Social Media and Profiles

To make the process easier for candidates, allow them to link their social media profiles (like LinkedIn) or upload a digital portfolio. This helps employers gain a better understanding of a candidate’s background beyond the traditional resume or employment history.

  • Social Login Options: Let applicants log in using their LinkedIn, Facebook, or other professional networks, auto-filling key personal information fields like email address and work history.
  • Digital Portfolio Links: Offer candidates the option to submit a link to an online portfolio or website showcasing their work, especially for creative roles.

Final Thoughts

A simple job application form is an essential part of any company’s hiring process. It streamlines the application process, collects relevant information, and helps you find the best candidate for the job. Whether you use a job application template or create your own form from scratch, following best practices and focusing on usability ensures that you attract the right person for your open positions.

Ready to get started? Use one of our free job application form templates today and simplify your hiring process!

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