Vendor Application Form
Use this minimal HTML vendor application form to quickly collect vendor details and simplify your onboarding process with ease.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<div class="fs-field">
<label class="fs-label" for="company-name">Company Name</label>
<input
class="fs-input"
id="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="office-address-line-1">
Office Address Line 1
</label>
<input
class="fs-input"
id="office-address-line-1"
name="office-address-line-1"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="office-address-line-2">
Office Address Line 2
</label>
<input
class="fs-input"
id="office-address-line-2"
name="office-address-line-2"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="office-city">City</label>
<input class="fs-input" id="office-city" name="office-city" required />
</div>
<div class="fs-field">
<label class="fs-label" for="office-state-province">State/Province</label>
<input
class="fs-input"
id="office-state-province"
name="office-state-province"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="office-postal-code">Postal Code</label>
<input
class="fs-input"
id="office-postal-code"
name="office-postal-code"
required
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="contact-person-name">
Contact Person Name
</label>
<input
class="fs-input"
id="contact-person-name"
name="contact-person-name"
placeholder="Enter the name of the contact person"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="contact-person-phone">
Contact Person Phone Number
</label>
<input
class="fs-input"
id="contact-person-phone"
name="contact-person-phone"
placeholder="Enter the phone number of the contact person"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="contact-person-email">
Contact Person Email Address
</label>
<input
class="fs-input"
id="contact-person-email"
name="contact-person-email"
placeholder="Enter the email address of the contact person"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="website">Website</label>
<input
class="fs-input"
id="website"
name="website"
placeholder="Enter your company website"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="organization-type">Organization Type</label>
<select
class="fs-select"
id="organization-type"
name="organization-type"
required
>
<option value="corporation">Corporation</option>
<option value="partnership">Partnership</option>
<option value="sole-proprietorship">Sole Proprietorship</option>
<option value="non-profit">Non-Profit</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label" for="company-founded-date">
When Was the Company Founded?
</label>
<input
class="fs-input"
id="company-founded-date"
name="company-founded-date"
placeholder="Enter the year your company was founded"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="number-of-staff">Number of Staff</label>
<input
class="fs-input"
id="number-of-staff"
name="number-of-staff"
placeholder="Enter the total number of staff"
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="tax-id">Tax Identification Number</label>
<input
class="fs-input"
id="tax-id"
name="tax-id"
placeholder="Enter your tax identification number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="business-registration-number">
Business Registration Number
</label>
<input
class="fs-input"
id="business-registration-number"
name="business-registration-number"
placeholder="Enter your business registration number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="legal-information">
Other Relevant Legal Information
</label>
<textarea
class="fs-textarea"
id="legal-information"
name="legal-information"
placeholder="Provide any additional legal details"
></textarea>
</div>
</fieldset>
<div class="fs-field">
<label class="fs-label" for="business-details">
Description of Products or Services
</label>
<textarea
class="fs-textarea"
id="business-details"
name="business-details"
placeholder="Describe your products or services"
required
></textarea>
</div>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="payment-method">
Accepted Payment Method
</label>
<select
class="fs-select"
id="payment-method"
name="payment-method"
required
>
<option value="bank-transfer">Bank Transfer</option>
<option value="check">Check</option>
<option value="credit-card">Credit Card</option>
<option value="paypal">PayPal</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label" for="payment-method-details">
Payment Method Details
</label>
<textarea
class="fs-textarea"
id="payment-method-details"
name="payment-method-details"
placeholder="Provide additional details for your selected payment method"
></textarea>
</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: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--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"
>
<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="company-name"
>
Company 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="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<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="office-address-line-1"
>
Office 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="office-address-line-1"
name="office-address-line-1"
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="office-address-line-2"
>
Office 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="office-address-line-2"
name="office-address-line-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="office-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="office-city"
name="office-city"
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="office-state-province"
>
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="office-state-province"
name="office-state-province"
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="office-postal-code"
>
Postal 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="office-postal-code"
name="office-postal-code"
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="contact-person-name"
>
Contact Person 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="contact-person-name"
name="contact-person-name"
placeholder="Enter the name of the contact person"
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="contact-person-phone"
>
Contact Person Phone 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="contact-person-phone"
name="contact-person-phone"
placeholder="Enter the phone number of the contact person"
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="contact-person-email"
>
Contact Person Email Address
</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="contact-person-email"
name="contact-person-email"
placeholder="Enter the email address of the contact person"
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="website"
>
Website
</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="website"
name="website"
placeholder="Enter your company website"
/>
</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="organization-type"
>
Organization Type
</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="organization-type"
name="organization-type"
required
>
<option value="corporation">Corporation</option>
<option value="partnership">Partnership</option>
<option value="sole-proprietorship">Sole Proprietorship</option>
<option value="non-profit">Non-Profit</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="company-founded-date"
>
When Was the Company Founded?
</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="company-founded-date"
name="company-founded-date"
placeholder="Enter the year your company was founded"
/>
</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-of-staff"
>
Number of Staff
</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-of-staff"
name="number-of-staff"
placeholder="Enter the total number of staff"
/>
</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="tax-id"
>
Tax Identification 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="tax-id"
name="tax-id"
placeholder="Enter your tax identification number"
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="business-registration-number"
>
Business Registration 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="business-registration-number"
name="business-registration-number"
placeholder="Enter your business registration number"
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="legal-information"
>
Other Relevant Legal Information
</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="legal-information"
name="legal-information"
placeholder="Provide any additional legal details"
></textarea>
</div>
</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="business-details"
>
Description of Products or Services
</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="business-details"
name="business-details"
placeholder="Describe your products or services"
required
></textarea>
</div>
<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="payment-method"
>
Accepted Payment Method
</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="payment-method"
name="payment-method"
required
>
<option value="bank-transfer">Bank Transfer</option>
<option value="check">Check</option>
<option value="credit-card">Credit Card</option>
<option value="paypal">PayPal</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="payment-method-details"
>
Payment Method Details
</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="payment-method-details"
name="payment-method-details"
placeholder="Provide additional details for your selected payment method"
></textarea>
</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: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--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}>
<div className="fs-field">
<label className="fs-label" htmlFor="company-name">
Company Name
</label>
<input
className="fs-input"
id="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="office-address-line-1">
Office Address Line 1
</label>
<input
className="fs-input"
id="office-address-line-1"
name="office-address-line-1"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="office-address-line-2">
Office Address Line 2
</label>
<input
className="fs-input"
id="office-address-line-2"
name="office-address-line-2"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="office-city">
City
</label>
<input
className="fs-input"
id="office-city"
name="office-city"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="office-state-province">
State/Province
</label>
<input
className="fs-input"
id="office-state-province"
name="office-state-province"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="office-postal-code">
Postal Code
</label>
<input
className="fs-input"
id="office-postal-code"
name="office-postal-code"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="contact-person-name">
Contact Person Name
</label>
<input
className="fs-input"
id="contact-person-name"
name="contact-person-name"
placeholder="Enter the name of the contact person"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="contact-person-phone">
Contact Person Phone Number
</label>
<input
className="fs-input"
id="contact-person-phone"
name="contact-person-phone"
placeholder="Enter the phone number of the contact person"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="contact-person-email">
Contact Person Email Address
</label>
<input
className="fs-input"
id="contact-person-email"
name="contact-person-email"
placeholder="Enter the email address of the contact person"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="website">
Website
</label>
<input
className="fs-input"
id="website"
name="website"
placeholder="Enter your company website"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="organization-type">
Organization Type
</label>
<select
className="fs-select"
id="organization-type"
name="organization-type"
required
>
<option value="corporation">Corporation</option>
<option value="partnership">Partnership</option>
<option value="sole-proprietorship">Sole Proprietorship</option>
<option value="non-profit">Non-Profit</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="company-founded-date">
When Was the Company Founded?
</label>
<input
className="fs-input"
id="company-founded-date"
name="company-founded-date"
placeholder="Enter the year your company was founded"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="number-of-staff">
Number of Staff
</label>
<input
className="fs-input"
id="number-of-staff"
name="number-of-staff"
placeholder="Enter the total number of staff"
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="tax-id">
Tax Identification Number
</label>
<input
className="fs-input"
id="tax-id"
name="tax-id"
placeholder="Enter your tax identification number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="business-registration-number">
Business Registration Number
</label>
<input
className="fs-input"
id="business-registration-number"
name="business-registration-number"
placeholder="Enter your business registration number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="legal-information">
Other Relevant Legal Information
</label>
<textarea
className="fs-textarea"
id="legal-information"
name="legal-information"
placeholder="Provide any additional legal details"
/>
</div>
</fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="business-details">
Description of Products or Services
</label>
<textarea
className="fs-textarea"
id="business-details"
name="business-details"
placeholder="Describe your products or services"
required
/>
</div>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="payment-method">
Accepted Payment Method
</label>
<select
className="fs-select"
id="payment-method"
name="payment-method"
required
>
<option value="bank-transfer">Bank Transfer</option>
<option value="check">Check</option>
<option value="credit-card">Credit Card</option>
<option value="paypal">PayPal</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="payment-method-details">
Payment Method Details
</label>
<textarea
className="fs-textarea"
id="payment-method-details"
name="payment-method-details"
placeholder="Provide additional details for your selected payment method"
/>
</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: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--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}>
<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="company-name"
>
Company 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="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<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="office-address-line-1"
>
Office 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="office-address-line-1"
name="office-address-line-1"
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="office-address-line-2"
>
Office 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="office-address-line-2"
name="office-address-line-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="office-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="office-city"
name="office-city"
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="office-state-province"
>
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="office-state-province"
name="office-state-province"
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="office-postal-code"
>
Postal 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="office-postal-code"
name="office-postal-code"
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="contact-person-name"
>
Contact Person 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="contact-person-name"
name="contact-person-name"
placeholder="Enter the name of the contact person"
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="contact-person-phone"
>
Contact Person Phone 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="contact-person-phone"
name="contact-person-phone"
placeholder="Enter the phone number of the contact person"
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="contact-person-email"
>
Contact Person Email Address
</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="contact-person-email"
name="contact-person-email"
placeholder="Enter the email address of the contact person"
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="website"
>
Website
</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="website"
name="website"
placeholder="Enter your company website"
/>
</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="organization-type"
>
Organization Type
</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="organization-type"
name="organization-type"
required
>
<option value="corporation">Corporation</option>
<option value="partnership">Partnership</option>
<option value="sole-proprietorship">Sole Proprietorship</option>
<option value="non-profit">Non-Profit</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="company-founded-date"
>
When Was the Company Founded?
</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="company-founded-date"
name="company-founded-date"
placeholder="Enter the year your company was founded"
/>
</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-of-staff"
>
Number of Staff
</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-of-staff"
name="number-of-staff"
placeholder="Enter the total number of staff"
/>
</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="tax-id"
>
Tax Identification 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="tax-id"
name="tax-id"
placeholder="Enter your tax identification number"
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="business-registration-number"
>
Business Registration 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="business-registration-number"
name="business-registration-number"
placeholder="Enter your business registration number"
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="legal-information"
>
Other Relevant Legal Information
</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="legal-information"
name="legal-information"
placeholder="Provide any additional legal details"
/>
</div>
</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="business-details"
>
Description of Products or Services
</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="business-details"
name="business-details"
placeholder="Describe your products or services"
required
/>
</div>
<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="payment-method"
>
Accepted Payment Method
</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="payment-method"
name="payment-method"
required
>
<option value="bank-transfer">Bank Transfer</option>
<option value="check">Check</option>
<option value="credit-card">Credit Card</option>
<option value="paypal">PayPal</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="payment-method-details"
>
Payment Method Details
</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="payment-method-details"
name="payment-method-details"
placeholder="Provide additional details for your selected payment method"
/>
</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: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--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 a Vendor Application Form?
When you’re managing vendor relationships, whether for a small event or a large enterprise, having a standardized process to vet and onboard vendors is critical. A vendor application form is the tool that helps streamline this process, ensuring you gather all the necessary information about potential vendors. These forms are used across industries to initiate a vendor application process, allowing businesses to evaluate and approve vendors systematically.
In this guide, we’ll cover what vendor application forms are, when you might need them, their key components, and how to create one using a form builder or a form template. Whether you’re managing a large-scale supply chain or just planning a local farmers’ market, this guide will help you optimize your vendor onboarding process.
What is a Vendor Application Form?
A vendor application form (or a vendor registration form) is a formal document used by businesses or event organizers to collect detailed information from vendors who want to work with them. The form usually asks for vendor information like the company’s name, contact details, product offerings, and compliance-related documentation such as insurance or licenses.
The purpose of this form is to help businesses make informed decisions during the vendor application process. By gathering important details in advance, businesses can evaluate the vendor’s suitability based on experience, credentials, or the products/services they offer.
There are different types of vendor registration forms, such as food vendor applications used in food markets or vendor registration forms used by large corporations to maintain an approved list of suppliers. Regardless of the format, the goal remains the same: to collect, review, and approve potential vendors.
When Do You Need a Vendor Application Form?
Using a vendor application form is necessary in various situations where a business needs to establish a formal relationship with a vendor. Here are some common scenarios:
Event Planning
If you’re organizing an event such as a festival, fair, or corporate event, a vendor application form helps you gather crucial details from vendors. This is especially useful when managing vendors for booth space, particularly for food or product vendors. For example, a food vendor application ensures you collect necessary details like compliance with food safety regulations and vendor insurance.
Business Relationships
For any business that sources goods or services from external suppliers, a vendor registration form is important. The form helps in evaluating whether a vendor meets the business’s standards in terms of pricing, quality, and compliance. It also helps in managing long-term business relationships, where consistent vendor information is required for accounting and legal purposes.
Online Marketplaces
If you’re running an e-commerce platform or an online marketplace, you’ll likely use a vendor application form to manage sellers or service providers. This ensures that vendors meet your platform’s guidelines before they can sell to customers. The vendor registration process for online platforms usually includes details like product categories, payment methods, and contact information.
Main Components of a Vendor Application Form
Creating an effective vendor application form involves gathering essential information that will help you assess the vendor’s ability to meet your business needs. Here are the key components every vendor application form should include:
Vendor Information
One of the first sections in any vendor form should ask for the vendor’s contact details. This typically includes the company name, business address, phone number, and email address.
- Contact Information: Be sure to include fields for both primary and secondary contacts to ensure smooth communication.
- Vendor Registration Details: This could include tax identification numbers, business registration numbers, and other relevant legal information.
Business Details
This section should gather information on what the vendor offers, such as a description of their products or services. For example, a food vendor might need to list the types of food they sell and confirm adherence to health regulations. This section also helps in understanding the scale and scope of the vendor’s offerings.
Financial Information
Collecting banking information is essential for businesses that will make payments to the vendor. The form should include fields for bank account numbers, routing numbers, and payment preferences. This ensures smooth transactions later in the vendor application process.
Products and Services Offered
Ensure that your form asks for detailed descriptions of the products or services the vendor provides. This can help you evaluate whether their offerings align with your business needs or event requirements.
References
Including a section for references can help you verify the vendor’s past performance with other businesses. It’s particularly useful in large-scale vendor registration processes where due diligence is essential.
Insurance and Compliance
For certain vendors, especially in industries like food or construction, compliance with regulations is a must. Make sure to collect insurance details, licensing information, and any necessary permits. This is especially important for food vendor applications, where adherence to health and safety guidelines is non-negotiable.
How to Best Create a Vendor Application Form
Once you’ve identified the key components of a vendor application form, the next step is to create one that’s functional and easy to use. Here’s how:
Using Formspree for Vendor Application Forms
Using Formspree can simplify the creation and management of your vendor application form, providing a powerful, customizable solution. Formspree allows you to build lightweight, user-friendly forms that collect all necessary vendor information while offering advanced features for automation and integration.
- Automate the Vendor Application Process: Formspree simplifies the entire vendor application process, enabling you to receive submissions directly to your email or preferred backend while managing form data efficiently.
- Integrate Payments: If your application process involves fees (e.g., booth space for event planning), you can easily integrate payment options directly into the form.
- Document Uploads: Vendors can upload supporting documents, such as compliance certificates or insurance details, simplifying the process for collecting required documentation.
- Customizable Templates: Formspree offers customizable templates that can be tailored to fit your specific requirements, such as gathering banking information, contact details, and product descriptions.
Design Best Practices
When designing your vendor application form, simplicity is key. The form should be easy to navigate, with clear instructions for each section. Avoid overcomplicating the form with too many fields. Focus on collecting only the essential vendor information required to evaluate the vendor properly.
For event organizers, include specific sections for vendors to request booth space or indicate any special setup requirements. This helps in managing logistics smoothly during the event.
Streamlining the Vendor Application Process
Automating the vendor registration process can save you time and effort. Use tools like Formspree that allow you to collect submissions electronically and automatically send confirmations to vendors. This is particularly useful when handling multiple vendors at once, such as for a large event or trade show.
Clearly outline the steps vendors need to take to complete their vendor form and submit it. Set expectations regarding response times, approval processes, and the next steps in the vendor application process.
Common Pitfalls to Avoid in the Vendor Application Process
While setting up your vendor application process, there are a few common mistakes to watch out for:
- Overcomplicating the Form: Asking for too much information upfront can deter vendors from completing the form. Stick to the essentials during the initial vendor application submission.
- Inadequate Vendor Information: Failing to collect key details like banking information or compliance documents can lead to issues later in the business relationship.
- Lack of Clear Instructions: Ensure your vendor form includes clear guidelines on how to complete and submit the application.
How Vendor Application Forms Benefit Your Business
A well-designed vendor application form offers multiple benefits:
- Ensures Legal and Compliance Adherence: Collecting the necessary documentation upfront helps ensure vendors meet all legal and regulatory requirements.
- Streamlines Vendor Onboarding: By standardizing the vendor application process, businesses can onboard new vendors efficiently, saving time and reducing errors.
- Improves Communication: Collecting accurate contact information during the vendor registration process ensures smooth communication with vendors.
Conclusion
In conclusion, a vendor application form is an essential tool for businesses that rely on external vendors. Whether you’re organizing an event or managing long-term vendor relationships, a clear and effective vendor application process can streamline your operations and ensure you collect all the necessary information upfront. Using a form builder or a vendor application form template makes this process even easier, allowing you to customize the form to meet your specific needs.
By following best practices, avoiding common pitfalls, and using the right tools, you can optimize your vendor application process and create strong, long-lasting business relationships.
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
-
Employment Application Form
Sleek, user-friendly employment application form designed to simplify hiring and organize applicant details effectively.
Get code -
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