Change Order Form
Use this simple HTML change order form to capture and document project modifications efficiently, ensuring clear communication and accountability.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="project-name">Project Name</label>
<input
class="fs-input"
id="project-name"
name="project-name"
placeholder="Enter the project name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="project-number">Project Number</label>
<input
class="fs-input"
id="project-number"
name="project-number"
placeholder="Enter the project number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="client-name">Client/Customer Name</label>
<input
class="fs-input"
id="client-name"
name="client-name"
placeholder="Enter the client/customer name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="contact-email">Contact Email</label>
<input
class="fs-input"
id="contact-email"
name="contact-email"
placeholder="Enter the contact email"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="contact-phone">Contact Phone Number</label>
<input
class="fs-input"
id="contact-phone"
name="contact-phone"
placeholder="Enter the contact phone number"
required
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="change-order-number">
Change Order Number
</label>
<input
class="fs-input"
id="change-order-number"
name="change-order-number"
placeholder="Enter the change order number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="date-of-request">Date of Request</label>
<input
class="fs-input"
id="date-of-request"
name="date-of-request"
placeholder="Enter the request date in MM-DD-YYYY format"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="requested-by">Requested By</label>
<input
class="fs-input"
id="requested-by"
name="requested-by"
placeholder="Enter the name of the requester"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="requester email">Requester Email</label>
<input
class="fs-input"
id="requester email"
name="requester email"
placeholder="Enter the email of the requester"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="change-description">
Description of Change
</label>
<textarea
class="fs-textarea"
id="change-description"
name="change-description"
placeholder="Provide details about the requested change"
required
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="reason-for-change">Reason for Change</label>
<textarea
class="fs-textarea"
id="reason-for-change"
name="reason-for-change"
placeholder="e.g., 'Client request,' 'Budget adjustments,' etc."
required
></textarea>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="additional-cost">
Estimated Additional Cost
</label>
<input
class="fs-input"
id="additional-cost"
name="additional-cost"
placeholder="Enter the estimated additional cost"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="adjusted-total-cost">
Adjusted Total Cost
</label>
<input
class="fs-input"
id="adjusted-total-cost"
name="adjusted-total-cost"
placeholder="Enter the adjusted total cost"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="schedule-impact">Impact on Schedule</label>
<textarea
class="fs-textarea"
id="schedule-impact"
name="schedule-impact"
placeholder="Describe the schedule impact, if any"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="new-completion-date">
New Completion Date
</label>
<input
class="fs-input"
id="new-completion-date"
name="new-completion-date"
placeholder="Enter the new completion date in MM-DD-YYYY format"
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="approval-by">Approval By (Name)</label>
<input
class="fs-input"
id="approval-by"
name="approval-by"
placeholder="Enter the name of the approver"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="approval-date">Approval Due Date</label>
<input
class="fs-input"
id="approval-date"
name="approval-date"
placeholder="Enter the approval due date in MM-DD-YYYY format"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="comments-notes">Comments/Notes</label>
<textarea
class="fs-textarea"
id="comments-notes"
name="comments-notes"
placeholder="Add any additional remarks (optional)"
></textarea>
</div>
</fieldset>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
aria-describedby="acknowledge-terms-description"
class="fs-checkbox"
id="acknowledge-terms"
name="acknowledge-terms"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label class="fs-label" for="acknowledge-terms">
Acknowledgment of Terms
</label>
<p class="fs-description" id="acknowledge-terms-description">
I understand and agree to the changes outlined above.
</p>
</div>
</div>
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 0.75rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
height: 2rem;
line-height: 1.25rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-3 gap-y-4"
target="_top"
method="POST"
>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="project-name"
>
Project 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="project-name"
name="project-name"
placeholder="Enter the project name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="project-number"
>
Project 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="project-number"
name="project-number"
placeholder="Enter the project 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="client-name"
>
Client/Customer 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="client-name"
name="client-name"
placeholder="Enter the client/customer name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="contact-email"
>
Contact Email
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="contact-email"
name="contact-email"
placeholder="Enter the contact email"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="contact-phone"
>
Contact 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-phone"
name="contact-phone"
placeholder="Enter the contact phone number"
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="change-order-number"
>
Change Order 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="change-order-number"
name="change-order-number"
placeholder="Enter the change order 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="date-of-request"
>
Date of Request
</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="date-of-request"
name="date-of-request"
placeholder="Enter the request date in MM-DD-YYYY format"
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="requested-by"
>
Requested By
</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="requested-by"
name="requested-by"
placeholder="Enter the name of the requester"
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="requester email"
>
Requester Email
</label>
<input
class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="requester email"
name="requester email"
placeholder="Enter the email of the requester"
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="change-description"
>
Description of Change
</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="change-description"
name="change-description"
placeholder="Provide details about the requested change"
required
></textarea>
</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="reason-for-change"
>
Reason for Change
</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="reason-for-change"
name="reason-for-change"
placeholder="e.g., 'Client request,' 'Budget adjustments,' etc."
required
></textarea>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="additional-cost"
>
Estimated Additional Cost
</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="additional-cost"
name="additional-cost"
placeholder="Enter the estimated additional cost"
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="adjusted-total-cost"
>
Adjusted Total Cost
</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="adjusted-total-cost"
name="adjusted-total-cost"
placeholder="Enter the adjusted total cost"
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="schedule-impact"
>
Impact on Schedule
</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="schedule-impact"
name="schedule-impact"
placeholder="Describe the schedule impact, if any"
></textarea>
</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="new-completion-date"
>
New Completion Date
</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="new-completion-date"
name="new-completion-date"
placeholder="Enter the new completion date in MM-DD-YYYY format"
/>
</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="approval-by"
>
Approval By (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="approval-by"
name="approval-by"
placeholder="Enter the name of the approver"
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="approval-date"
>
Approval Due Date
</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="approval-date"
name="approval-date"
placeholder="Enter the approval due date in MM-DD-YYYY format"
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="comments-notes"
>
Comments/Notes
</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="comments-notes"
name="comments-notes"
placeholder="Add any additional remarks (optional)"
></textarea>
</div>
</fieldset>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
aria-describedby="acknowledge-terms-description"
class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="acknowledge-terms"
name="acknowledge-terms"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="acknowledge-terms"
>
Acknowledgment of Terms
</label>
<p
class="mt-0.5 block text-sm text-[--color-text-muted]"
id="acknowledge-terms-description"
>
I understand and agree to the changes outlined above.
</p>
</div>
</div>
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
React
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="project-name">
Project Name
</label>
<input
className="fs-input"
id="project-name"
name="project-name"
placeholder="Enter the project name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="project-number">
Project Number
</label>
<input
className="fs-input"
id="project-number"
name="project-number"
placeholder="Enter the project number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="client-name">
Client/Customer Name
</label>
<input
className="fs-input"
id="client-name"
name="client-name"
placeholder="Enter the client/customer name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="contact-email">
Contact Email
</label>
<input
className="fs-input"
id="contact-email"
name="contact-email"
placeholder="Enter the contact email"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="contact-phone">
Contact Phone Number
</label>
<input
className="fs-input"
id="contact-phone"
name="contact-phone"
placeholder="Enter the contact phone number"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="change-order-number">
Change Order Number
</label>
<input
className="fs-input"
id="change-order-number"
name="change-order-number"
placeholder="Enter the change order number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="date-of-request">
Date of Request
</label>
<input
className="fs-input"
id="date-of-request"
name="date-of-request"
placeholder="Enter the request date in MM-DD-YYYY format"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="requested-by">
Requested By
</label>
<input
className="fs-input"
id="requested-by"
name="requested-by"
placeholder="Enter the name of the requester"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="requester email">
Requester Email
</label>
<input
className="fs-input"
id="requester email"
name="requester email"
placeholder="Enter the email of the requester"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="change-description">
Description of Change
</label>
<textarea
className="fs-textarea"
id="change-description"
name="change-description"
placeholder="Provide details about the requested change"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="reason-for-change">
Reason for Change
</label>
<textarea
className="fs-textarea"
id="reason-for-change"
name="reason-for-change"
placeholder="e.g., 'Client request,' 'Budget adjustments,' etc."
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="additional-cost">
Estimated Additional Cost
</label>
<input
className="fs-input"
id="additional-cost"
name="additional-cost"
placeholder="Enter the estimated additional cost"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="adjusted-total-cost">
Adjusted Total Cost
</label>
<input
className="fs-input"
id="adjusted-total-cost"
name="adjusted-total-cost"
placeholder="Enter the adjusted total cost"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="schedule-impact">
Impact on Schedule
</label>
<textarea
className="fs-textarea"
id="schedule-impact"
name="schedule-impact"
placeholder="Describe the schedule impact, if any"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="new-completion-date">
New Completion Date
</label>
<input
className="fs-input"
id="new-completion-date"
name="new-completion-date"
placeholder="Enter the new completion date in MM-DD-YYYY format"
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="approval-by">
Approval By (Name)
</label>
<input
className="fs-input"
id="approval-by"
name="approval-by"
placeholder="Enter the name of the approver"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="approval-date">
Approval Due Date
</label>
<input
className="fs-input"
id="approval-date"
name="approval-date"
placeholder="Enter the approval due date in MM-DD-YYYY format"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="comments-notes">
Comments/Notes
</label>
<textarea
className="fs-textarea"
id="comments-notes"
name="comments-notes"
placeholder="Add any additional remarks (optional)"
/>
</div>
</fieldset>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
aria-describedby="acknowledge-terms-description"
className="fs-checkbox"
id="acknowledge-terms"
name="acknowledge-terms"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label className="fs-label" htmlFor="acknowledge-terms">
Acknowledgment of Terms
</label>
<p className="fs-description" id="acknowledge-terms-description">
I understand and agree to the changes outlined above.
</p>
</div>
</div>
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 0.75rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 0.75rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
height: 2rem;
line-height: 1.25rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-3 gap-y-4" onSubmit={handleSubmit}>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="project-name"
>
Project 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="project-name"
name="project-name"
placeholder="Enter the project name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="project-number"
>
Project 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="project-number"
name="project-number"
placeholder="Enter the project 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="client-name"
>
Client/Customer 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="client-name"
name="client-name"
placeholder="Enter the client/customer name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="contact-email"
>
Contact Email
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="contact-email"
name="contact-email"
placeholder="Enter the contact email"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="contact-phone"
>
Contact 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-phone"
name="contact-phone"
placeholder="Enter the contact phone number"
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="change-order-number"
>
Change Order 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="change-order-number"
name="change-order-number"
placeholder="Enter the change order 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="date-of-request"
>
Date of Request
</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="date-of-request"
name="date-of-request"
placeholder="Enter the request date in MM-DD-YYYY format"
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="requested-by"
>
Requested By
</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="requested-by"
name="requested-by"
placeholder="Enter the name of the requester"
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="requester email"
>
Requester Email
</label>
<input
className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="requester email"
name="requester email"
placeholder="Enter the email of the requester"
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="change-description"
>
Description of Change
</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="change-description"
name="change-description"
placeholder="Provide details about the requested change"
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="reason-for-change"
>
Reason for Change
</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="reason-for-change"
name="reason-for-change"
placeholder="e.g., 'Client request,' 'Budget adjustments,' etc."
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="additional-cost"
>
Estimated Additional Cost
</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="additional-cost"
name="additional-cost"
placeholder="Enter the estimated additional cost"
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="adjusted-total-cost"
>
Adjusted Total Cost
</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="adjusted-total-cost"
name="adjusted-total-cost"
placeholder="Enter the adjusted total cost"
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="schedule-impact"
>
Impact on Schedule
</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="schedule-impact"
name="schedule-impact"
placeholder="Describe the schedule impact, if any"
/>
</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="new-completion-date"
>
New Completion Date
</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="new-completion-date"
name="new-completion-date"
placeholder="Enter the new completion date in MM-DD-YYYY format"
/>
</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="approval-by"
>
Approval By (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="approval-by"
name="approval-by"
placeholder="Enter the name of the approver"
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="approval-date"
>
Approval Due Date
</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="approval-date"
name="approval-date"
placeholder="Enter the approval due date in MM-DD-YYYY format"
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="comments-notes"
>
Comments/Notes
</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="comments-notes"
name="comments-notes"
placeholder="Add any additional remarks (optional)"
/>
</div>
</fieldset>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
aria-describedby="acknowledge-terms-description"
className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="acknowledge-terms"
name="acknowledge-terms"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="acknowledge-terms"
>
Acknowledgment of Terms
</label>
<p
className="mt-0.5 block text-sm text-[--color-text-muted]"
id="acknowledge-terms-description"
>
I understand and agree to the changes outlined above.
</p>
</div>
</div>
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #3a9092;
--color-border-active: #23494c;
--color-border-default: #94a3b8;
--color-highlight: #7ecac7;
--color-primary: #23494c;
--color-primary-active: #122d30;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", 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 Change Order Form?
In the world of project management and contracts, unexpected changes are inevitable. Whether it’s adding new features, adjusting timelines, or addressing unforeseen challenges, documenting these modifications is crucial to maintaining transparency and accountability. This is where a change order form becomes invaluable. By outlining the specific changes to the original agreement, it ensures all project stakeholders—contractors, project owners, and general contractors—are aligned on new expectations. Let’s dive into what a change order form is, when you need it, and how to create and use one effectively.
Let’s dive into what a change order form is, when you need it, and how to create and use one effectively.
What is a Change Order Form?
A change order form is a document that formalizes modifications to a contract or project. It outlines the details of changes to the original contract, such as adjustments to the scope, timeline, or cost. These forms are especially critical in managing contract changes efficiently, ensuring all parties agree on the revisions before they are implemented.
For example, in a construction project, a change order might be used to add a new feature to a building design or to accommodate unforeseen site conditions. By documenting these changes, the change order form protects both the project owner and the general contractor from potential disputes.
A well-structured change order form includes details such as the original scope of the project, the nature of the proposed changes, and their impact on the contract price and timeline.
When Do You Need a Change Order Form?
You’ll need a change order form whenever a project deviates from its original agreement. Some common scenarios include:
- Additional Work: If the client requests new work outside the original project scope, such as adding a new room to a house under construction.
- Unforeseen Conditions: Changes due to unexpected challenges, like encountering unsuitable soil conditions during excavation.
- Regulatory Changes: Adjustments required to meet new building codes or compliance standards.
- Design Modifications: Alterations in specifications or materials requested by the project owner.
In these cases, a change order request form ensures that the modifications are clearly communicated and agreed upon, avoiding misunderstandings and disputes later.
Popular Components of a Change Order Form
A comprehensive change order form includes several key components to ensure clarity and transparency:
- Original Agreement Details: Reference to the original contract document and project scope.
- Description of Changes: Clear explanation of the proposed modifications, such as additional work or adjustments to the project scope.
- Impact on Contract Price and Time: Details of how the changes affect the contract price and contract time.
- Approval Section: Signature lines for all relevant stakeholders, including the project owner, general contractor, and subcontractors.
- Supporting Documentation: Attachments like revised drawings, specifications, or cost breakdowns to provide context.
Including these elements in your change order forms ensures that all changes are properly documented and approved, minimizing the risk of disputes.
Types of Change Order Forms
There are various change order templates designed to suit different industries and project types. Here are some common examples:
- Construction Change Order Forms: These are widely used in construction projects to manage changes to the original contract. They document details such as additional work, cost adjustments, and new timelines.
- AIA G701 Change Order: This standard form, developed by the American Institute of Architects, is a trusted template for construction projects. It ensures all contract changes are documented in compliance with industry standards.
- Custom Change Order Templates: Businesses can create customized forms tailored to their specific needs, ensuring they address unique project requirements.
Using a standard form like the AIA G701 can simplify the process, while custom templates allow for greater flexibility.
How to Create a Change Order Form: A Step-by-Step Guide
Creating an effective change order form is essential to managing changes smoothly. Here’s how to do it:
Step 1: Use an Online Tool or Template
Start with a change order form template or an online change order form builder. These tools provide pre-designed formats that save time and ensure consistency.
Step 2: Define the Original Scope
Include a summary of the project’s original scope and details from the original contract. This establishes a baseline for evaluating the proposed changes.
Step 3: Describe the Proposed Changes
Clearly outline the modifications, whether they involve new work, adjustments to materials, or changes to project specifications. Be specific to avoid confusion.
Step 4: Document Cost and Time Adjustments
Include a breakdown of how the changes will impact the contract price and contract time. This ensures transparency in negotiations.
Step 5: Include Approval Signatures
Add signature lines for all stakeholders, including the project owner and general contractor, to formalize the agreement.
Step 6: Attach Supporting Documentation
Provide additional documents, such as revised drawings, cost estimates, or compliance reports, to give context to the changes.
By following these steps, you can create a professional change order form that facilitates smooth communication and approval.
Best Practices for Managing Change Orders in Construction
Effectively managing construction change orders is crucial to keeping projects on track and maintaining strong relationships with all stakeholders. Here are some detailed best practices to streamline the process and avoid common pitfalls:
1. Early Communication
When a potential change arises, immediately inform all project stakeholders—including the general contractor, project owner, and any subcontractors. Early discussions help clarify expectations and prevent delays caused by miscommunication. Set up regular progress meetings to ensure everyone stays aligned on the current contract changes and the construction change order process.
2. Use Templates for Consistency
Using a standardized change order form template ensures consistency and reduces errors. These templates often include all necessary fields, such as the original scope, the nature of the additional work, and adjustments to the contract price and contract time.
To streamline this process even further, consider using an online change order form integrated with a backend service like Formspree. Formspree allows you to quickly create forms for collecting responses without the need for complex backend systems. By using Formspree as the backend for your change order forms, you can automate data collection, send notifications to stakeholders, and store all responses in one central location for easy access.
Example Use Case: Formspree for Construction Projects
Imagine you’re managing a large construction project with multiple ongoing changes. With Formspree, you can deploy a professional change order request form online, allowing stakeholders to submit changes directly through a simple web interface. Once submitted, the responses are immediately available for review, and notifications can be sent to the project team for approval. This approach reduces paperwork, improves response times, and ensures a clear record of all contract modifications.
3. Update General Conditions
The general conditions of the contract must reflect the approved changes to avoid disputes. This includes updating sections related to contract time, contract price, and project scope. Keeping these documents up-to-date ensures all construction contract terms remain enforceable and transparent.
4. Track All Changes Thoroughly
Maintaining a comprehensive log of all construction change orders is essential for monitoring their cumulative impact on the project. Use project management tools to track modifications and their effects on timelines and budgets. This practice ensures accountability and makes it easier to audit project progress.
By following these best practices and leveraging modern tools like Formspree, you can enhance the efficiency of managing construction change orders, improve stakeholder communication, and ensure your project stays on track despite unexpected changes.
How Change Orders Impact Project Outcomes
Change orders can significantly influence a project’s success, both positively and negatively. While they offer the flexibility to adapt to unforeseen circumstances, they can also lead to delays and cost overruns if not managed properly.
Positive Impact
- Enhanced Customization: Allows for adjustments to meet evolving client needs.
- Improved Project Outcomes: Ensures that necessary changes are documented and implemented correctly.
Negative Impact
- Delays: Poorly managed change orders can disrupt schedules and extend timelines.
- Budget Overruns: Failure to track changes can result in unanticipated costs.
Balancing these impacts requires proactive communication and a robust system for managing construction change orders.
Conclusion
A change order form is an essential tool for documenting and managing modifications to contracts and projects. Whether you’re dealing with a construction change order form, an online change order form, or a custom change order template, the key is to ensure all changes are clearly documented and approved by relevant stakeholders.
By understanding the purpose and components of change order forms, adopting best practices, and leveraging templates like the AIA G701 change order, you can streamline the process and minimize potential disruptions. For project managers, general contractors, and project owners alike, mastering the art of managing change orders is a vital skill that ensures the success of any project.
FAQ
-
What essential information does an order form collect?
An order form collects essential details such as the customer’s name, contact information, order items, quantities, and payment preferences. With Formspree as the backend, these forms ensure secure data submission and instant email notifications for efficient order processing.
-
How are order forms used by different businesses like online stores, restaurants, and nonprofits?
Order forms are versatile tools used by online stores to sell products, restaurants for takeout orders, and nonprofits for merchandise sales or donations. When powered by Formspree, these forms streamline the order process and allow real-time access to submission data for better management.
-
What key elements should be included in an order form?
Key elements of an order form include product or service descriptions, quantity fields, pricing, payment methods, and contact details. Formspree makes it easy to customize these forms while providing seamless backend functionality for managing submissions and notifications.
-
What are the benefits of using order form templates?
Order form templates save time, reduce errors, and improve the customer experience by offering a structured and professional design. With Formspree, templates can be integrated effortlessly, providing instant email notifications and easy access to submission data via the dashboard.
-
What are five common types of order forms?
Common types of order forms include product order forms, service request forms, food order forms, wholesale order forms, and donation order forms. Using Formspree as the backend ensures these forms are flexible and secure, catering to the unique needs of various businesses.
-
Why might your order form not need to collect a delivery address?
An order form might not need a delivery address if the transaction involves digital products, in-store pickup, or services provided online. With Formspree, you can tailor the form fields to collect only the necessary information, ensuring a streamlined and user-friendly experience.
More order Forms
-
Product Order Form
Clean, user-friendly product order form for easy order collection and management.
Get code -
Bakery Order Form
Simple, efficient bakery order form for hassle-free order management and fulfillment.
Get code -
Catering Order Form
Clean, user-friendly catering order form for seamless order management and planning.
Get code