Change Request Form
Add this minimal HTML change request form to your project portals or client management sites to capture change requests systematically.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<fieldset>
<legend class="fs-fieldset-title">Requester Information</legend>
<div class="fs-field">
<label class="fs-label" for="requestor-name">Requestor Name</label>
<input
class="fs-input"
id="requestor-name"
name="requestor-name"
placeholder="Enter your name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="department-team">Department / Team</label>
<input
class="fs-input"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="email-address">Email Address</label>
<input
class="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="phone-number">Phone Number</label>
<input
class="fs-input"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number (optional)"
/>
</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 date of request (e.g., MM/DD/YYYY)"
required
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Change Details</legend>
<div class="fs-field">
<label class="fs-label" for="project-system-name">
Project or System Name
</label>
<input
class="fs-input"
id="project-system-name"
name="project-system-name"
placeholder="Enter the project or system name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="change-type">Type of Change Requested</label>
<select class="fs-select" id="change-type" name="change-type" required>
<option value="feature-update">Feature Update</option>
<option value="bug-fix">Bug Fix</option>
<option value="process-change">Process Change</option>
<option value="infrastructure-change">Infrastructure Change</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label">Priority Level</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="priority-level-low"
name="priority-level"
required
type="radio"
value="low"
/>
</div>
<div>
<label class="fs-label" for="priority-level-low">Low</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="priority-level-medium"
name="priority-level"
required
type="radio"
value="medium"
/>
</div>
<div>
<label class="fs-label" for="priority-level-medium">Medium</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="priority-level-high"
name="priority-level"
required
type="radio"
value="high"
/>
</div>
<div>
<label class="fs-label" for="priority-level-high">High</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="priority-level-critical"
name="priority-level"
required
type="radio"
value="critical"
/>
</div>
<div>
<label class="fs-label" for="priority-level-critical">
Critical
</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label" for="requested-completion-date">
Requested Completion Date
</label>
<input
class="fs-input"
id="requested-completion-date"
name="requested-completion-date"
placeholder="Select the requested completion date"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="change-description">
Description of the Requested Change
</label>
<textarea
class="fs-textarea"
id="change-description"
name="change-description"
placeholder="Describe the requested change"
required
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="reason-for-change">
Reason for the Change
</label>
<textarea
class="fs-textarea"
id="reason-for-change"
name="reason-for-change"
placeholder="Explain why the change is needed"
required
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="expected-benefits">
Expected Benefits / Impact
</label>
<textarea
class="fs-textarea"
id="expected-benefits"
name="expected-benefits"
placeholder="Describe the benefits or impact"
required
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="potential-risks">
Potential Risks / Challenges
</label>
<textarea
class="fs-textarea"
id="potential-risks"
name="potential-risks"
placeholder="List any potential risks or challenges (optional)"
></textarea>
</div>
<div class="fs-field col-span-full">
<label class="fs-label" for="attachments">
Attachments or Supporting Documents
</label>
<input
class="fs-input"
id="attachments"
name="attachments"
placeholder="Add links after uploading files to Google Drive, Dropbox, etc."
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Approval and Follow-Up</legend>
<div class="fs-field">
<label class="fs-label" for="approval-required-from">
Approval Required From
</label>
<input
class="fs-input"
id="approval-required-from"
name="approval-required-from"
placeholder="Enter approver (e.g., Manager, IT Department)"
required
/>
</div>
<div class="fs-field">
<label class="fs-label">Have You Discussed This With Stakeholders?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="stakeholder-discussion-yes"
name="stakeholder-discussion"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="stakeholder-discussion-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="stakeholder-discussion-no"
name="stakeholder-discussion"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="stakeholder-discussion-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-checkbox-field col-span-full">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="updates-opt-in"
name="updates-opt-in"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="updates-opt-in">
Would You Like Updates on This Request?
</label>
</div>
</div>
<div class="fs-button-group">
<button class="fs-button" type="submit">Submit</button>
</div>
</fieldset>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Manrope", sans-serif;
--font-family-display: "Cabin", 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: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.25rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-border-default);
height: 1.25rem;
width: 1.25rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-6 gap-y-6"
target="_top"
method="POST"
>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Requester Information
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="requestor-name"
>
Requestor Name
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="requestor-name"
name="requestor-name"
placeholder="Enter your name"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="department-team"
>
Department / Team
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="email-address"
>
Email Address
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="phone-number"
>
Phone Number
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number (optional)"
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="date-of-request"
>
Date of Request
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="date-of-request"
name="date-of-request"
placeholder="Enter the date of request (e.g., MM/DD/YYYY)"
required
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Change Details
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="project-system-name"
>
Project or System Name
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="project-system-name"
name="project-system-name"
placeholder="Enter the project or system name"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="change-type"
>
Type of Change Requested
</label>
<select
class="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="change-type"
name="change-type"
required
>
<option value="feature-update">Feature Update</option>
<option value="bug-fix">Bug Fix</option>
<option value="process-change">Process Change</option>
<option value="infrastructure-change">Infrastructure Change</option>
</select>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Priority Level
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-low"
name="priority-level"
required
type="radio"
value="low"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="priority-level-low"
>
Low
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-medium"
name="priority-level"
required
type="radio"
value="medium"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="priority-level-medium"
>
Medium
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-high"
name="priority-level"
required
type="radio"
value="high"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="priority-level-high"
>
High
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-critical"
name="priority-level"
required
type="radio"
value="critical"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="priority-level-critical"
>
Critical
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="requested-completion-date"
>
Requested Completion Date
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="requested-completion-date"
name="requested-completion-date"
placeholder="Select the requested completion date"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="change-description"
>
Description of the Requested Change
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="change-description"
name="change-description"
placeholder="Describe the requested change"
required
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="reason-for-change"
>
Reason for the Change
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="reason-for-change"
name="reason-for-change"
placeholder="Explain why the change is needed"
required
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="expected-benefits"
>
Expected Benefits / Impact
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="expected-benefits"
name="expected-benefits"
placeholder="Describe the benefits or impact"
required
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="potential-risks"
>
Potential Risks / Challenges
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="potential-risks"
name="potential-risks"
placeholder="List any potential risks or challenges (optional)"
></textarea>
</div>
<div class="col-span-full flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="attachments"
>
Attachments or Supporting Documents
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="attachments"
name="attachments"
placeholder="Add links after uploading files to Google Drive, Dropbox, etc."
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Approval and Follow-Up
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="approval-required-from"
>
Approval Required From
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="approval-required-from"
name="approval-required-from"
placeholder="Enter approver (e.g., Manager, IT Department)"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Have You Discussed This With Stakeholders?
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="stakeholder-discussion-yes"
name="stakeholder-discussion"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="stakeholder-discussion-yes"
>
Yes
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="stakeholder-discussion-no"
name="stakeholder-discussion"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="stakeholder-discussion-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div class="col-span-full flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="updates-opt-in"
name="updates-opt-in"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="updates-opt-in"
>
Would You Like Updates on This Request?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</fieldset>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Manrope", sans-serif;
--font-family-display: "Cabin", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
}
}
Show more
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>
<legend className="fs-fieldset-title">Requester Information</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="requestor-name">
Requestor Name
</label>
<input
className="fs-input"
id="requestor-name"
name="requestor-name"
placeholder="Enter your name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="department-team">
Department / Team
</label>
<input
className="fs-input"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="email-address">
Email Address
</label>
<input
className="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="phone-number">
Phone Number
</label>
<input
className="fs-input"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number (optional)"
/>
</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 date of request (e.g., MM/DD/YYYY)"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Change Details</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="project-system-name">
Project or System Name
</label>
<input
className="fs-input"
id="project-system-name"
name="project-system-name"
placeholder="Enter the project or system name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="change-type">
Type of Change Requested
</label>
<select
className="fs-select"
id="change-type"
name="change-type"
required
>
<option value="feature-update">Feature Update</option>
<option value="bug-fix">Bug Fix</option>
<option value="process-change">Process Change</option>
<option value="infrastructure-change">Infrastructure Change</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label">Priority Level</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="priority-level-low"
name="priority-level"
required
type="radio"
value="low"
/>
</div>
<div>
<label className="fs-label" htmlFor="priority-level-low">
Low
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="priority-level-medium"
name="priority-level"
required
type="radio"
value="medium"
/>
</div>
<div>
<label className="fs-label" htmlFor="priority-level-medium">
Medium
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="priority-level-high"
name="priority-level"
required
type="radio"
value="high"
/>
</div>
<div>
<label className="fs-label" htmlFor="priority-level-high">
High
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="priority-level-critical"
name="priority-level"
required
type="radio"
value="critical"
/>
</div>
<div>
<label className="fs-label" htmlFor="priority-level-critical">
Critical
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="requested-completion-date">
Requested Completion Date
</label>
<input
className="fs-input"
id="requested-completion-date"
name="requested-completion-date"
placeholder="Select the requested completion date"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="change-description">
Description of the Requested Change
</label>
<textarea
className="fs-textarea"
id="change-description"
name="change-description"
placeholder="Describe the requested change"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="reason-for-change">
Reason for the Change
</label>
<textarea
className="fs-textarea"
id="reason-for-change"
name="reason-for-change"
placeholder="Explain why the change is needed"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="expected-benefits">
Expected Benefits / Impact
</label>
<textarea
className="fs-textarea"
id="expected-benefits"
name="expected-benefits"
placeholder="Describe the benefits or impact"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="potential-risks">
Potential Risks / Challenges
</label>
<textarea
className="fs-textarea"
id="potential-risks"
name="potential-risks"
placeholder="List any potential risks or challenges (optional)"
/>
</div>
<div className="fs-field col-span-full">
<label className="fs-label" htmlFor="attachments">
Attachments or Supporting Documents
</label>
<input
className="fs-input"
id="attachments"
name="attachments"
placeholder="Add links after uploading files to Google Drive, Dropbox, etc."
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Approval and Follow-Up</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="approval-required-from">
Approval Required From
</label>
<input
className="fs-input"
id="approval-required-from"
name="approval-required-from"
placeholder="Enter approver (e.g., Manager, IT Department)"
required
/>
</div>
<div className="fs-field">
<label className="fs-label">
Have You Discussed This With Stakeholders?
</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="stakeholder-discussion-yes"
name="stakeholder-discussion"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="stakeholder-discussion-yes"
>
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="stakeholder-discussion-no"
name="stakeholder-discussion"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="stakeholder-discussion-no">
No
</label>
</div>
</div>
</div>
</div>
<div className="fs-checkbox-field col-span-full">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="updates-opt-in"
name="updates-opt-in"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="updates-opt-in">
Would You Like Updates on This Request?
</label>
</div>
</div>
<div class="fs-button-group">
<button className="fs-button" type="submit">
Submit
</button>
</div>
</fieldset>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Manrope", sans-serif;
--font-family-display: "Cabin", 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: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.25rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-border-default);
height: 1.25rem;
width: 1.25rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
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-6 gap-y-6" onSubmit={handleSubmit}>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Requester Information
</legend>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="requestor-name"
>
Requestor Name
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="requestor-name"
name="requestor-name"
placeholder="Enter your name"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="department-team"
>
Department / Team
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="email-address"
>
Email Address
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="phone-number"
>
Phone Number
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number (optional)"
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="date-of-request"
>
Date of Request
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="date-of-request"
name="date-of-request"
placeholder="Enter the date of request (e.g., MM/DD/YYYY)"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Change Details
</legend>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="project-system-name"
>
Project or System Name
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="project-system-name"
name="project-system-name"
placeholder="Enter the project or system name"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="change-type"
>
Type of Change Requested
</label>
<select
className="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="change-type"
name="change-type"
required
>
<option value="feature-update">Feature Update</option>
<option value="bug-fix">Bug Fix</option>
<option value="process-change">Process Change</option>
<option value="infrastructure-change">Infrastructure Change</option>
</select>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Priority Level
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-low"
name="priority-level"
required
type="radio"
value="low"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="priority-level-low"
>
Low
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-medium"
name="priority-level"
required
type="radio"
value="medium"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="priority-level-medium"
>
Medium
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-high"
name="priority-level"
required
type="radio"
value="high"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="priority-level-high"
>
High
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="priority-level-critical"
name="priority-level"
required
type="radio"
value="critical"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="priority-level-critical"
>
Critical
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="requested-completion-date"
>
Requested Completion Date
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="requested-completion-date"
name="requested-completion-date"
placeholder="Select the requested completion date"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="change-description"
>
Description of the Requested Change
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="change-description"
name="change-description"
placeholder="Describe the requested change"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="reason-for-change"
>
Reason for the Change
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="reason-for-change"
name="reason-for-change"
placeholder="Explain why the change is needed"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="expected-benefits"
>
Expected Benefits / Impact
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="expected-benefits"
name="expected-benefits"
placeholder="Describe the benefits or impact"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="potential-risks"
>
Potential Risks / Challenges
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="potential-risks"
name="potential-risks"
placeholder="List any potential risks or challenges (optional)"
/>
</div>
<div className="col-span-full flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="attachments"
>
Attachments or Supporting Documents
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="attachments"
name="attachments"
placeholder="Add links after uploading files to Google Drive, Dropbox, etc."
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Approval and Follow-Up
</legend>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="approval-required-from"
>
Approval Required From
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="approval-required-from"
name="approval-required-from"
placeholder="Enter approver (e.g., Manager, IT Department)"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Have You Discussed This With Stakeholders?
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="stakeholder-discussion-yes"
name="stakeholder-discussion"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="stakeholder-discussion-yes"
>
Yes
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="stakeholder-discussion-no"
name="stakeholder-discussion"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="stakeholder-discussion-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div className="col-span-full flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="updates-opt-in"
name="updates-opt-in"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="updates-opt-in"
>
Would You Like Updates on This Request?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</fieldset>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Manrope", sans-serif;
--font-family-display: "Cabin", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
}
}
Show more
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. Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.
Sign up for a free Formspree account and create a new form.
Once created, you’ll get a unique form endpoint like
Scroll up and copy the full HTML form code shown above. Don’t forget to replace the
Go to your Shopify Admin and navigate to Online Store > Themes > Customize.
Select the page where you want the form to appear, then add a new Custom Liquid section.
Paste the copied HTML into the Custom Liquid field and save.
Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
Open the
Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store.
Test it out and then hit “Publish” to make it live for customers.
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
How to Use This Form in Your Shopify Store
Create a Form on Formspree
https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page
FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page
Copy the CSS Styles
Paste the CSS into Your Shopify Theme
assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end.
Save the file.
Preview and Publish
Integration Guides
What is a Change Request Form?
Change is an inevitable part of any project, IT system, or business process. Whether driven by evolving client needs, unforeseen technical challenges, or new regulatory requirements, projects and operations must adapt to stay relevant and effective. However, without a structured approach, changes can derail progress, inflate budgets, and compromise quality.
A Change Request Form is a tool that formalizes how changes are proposed, evaluated, and implemented. It ensures that all stakeholders are aligned on what needs to change, why, and how it will impact the overall goals. Understanding and utilizing change request forms effectively is essential for maintaining control, transparency, and accountability in dynamic environments.
Understanding Change Request Forms
A Change Request is a formal proposal for an alteration to a project, system, or process that is already underway. It could involve modifying deliverables, adjusting deadlines, reallocating budgets, or revising processes to better meet stakeholder needs or respond to external pressures.
A Change Request Form is the standardized document used to submit these proposals. It captures details such as the description of the requested change, the reason behind it, its urgency, the potential impacts on scope, time, and cost, and the necessary approvals.
By providing a clear structure for gathering and evaluating change information, the form ensures that changes are made thoughtfully rather than reactively. It serves as the starting point for a controlled change management process that protects the integrity of the project or system.
Importance in Project Management, IT, and Business Process Control
Change request forms play a crucial role in sectors where consistency, predictability, and accountability are vital. In project management, they help maintain the agreed-upon scope while allowing necessary flexibility. In IT, they ensure that system updates, patches, and infrastructure changes are properly vetted and do not introduce vulnerabilities or downtime. In business process control, they allow organizations to evolve and innovate while maintaining operational stability and compliance with standards and regulations.
Across all domains, structured change management ensures that changes contribute positively rather than causing unintended disruptions.
When and Why Change Requests Are Necessary
Change requests become necessary in many real-world scenarios, such as:
- Evolving requirements: Stakeholders might refine or add new requirements as more information becomes available.
- Unexpected issues: Technical problems, resource limitations, or supply chain disruptions might require a shift in approach.
- Stakeholder needs: External feedback or shifts in business strategy could prompt changes to the original plan.
- Regulatory updates: New legal or compliance requirements could necessitate urgent adjustments.
- Technological advancements: New tools or methods might become available that could improve project outcomes.
In all these cases, change requests help ensure that modifications are justified, carefully considered, and implemented responsibly.
Purpose and Benefits of a Change Request Form
A Change Request Form exists to bring structure and discipline to what could otherwise be a chaotic process. Its primary purposes and benefits include:
- Formalizing the process: It establishes a consistent, repeatable method for proposing, reviewing, and implementing changes.
- Tracking and accountability: Each change is recorded with details about who requested it, why, and what decisions were made, creating a clear audit trail.
- Protecting project scope and quality: By forcing a structured evaluation of how a change would impact cost, schedule, and deliverables, the form helps safeguard the original project objectives.
- Reducing confusion: Teams stay aligned, and miscommunications are minimized when everyone follows the same process.
- Supporting governance and compliance: Organizations can demonstrate adherence to internal and external standards by maintaining complete change records.
In short, using a change request form helps organizations adapt intelligently without sacrificing control, efficiency, or stakeholder trust.
Key Elements of a Change Request Form
An effective Change Request Form must capture all the essential information needed to evaluate and act on a proposed change. Typically, the form includes the following sections:
Basic Information
This section identifies the change request and the person proposing it:
- Project or system name: Clearly specify which initiative or system the change affects.
- Requester’s name and contact details: Identify who is submitting the request and how they can be reached for follow-up.
- Date of request: Record when the change was formally submitted.
- Change request ID or reference number: Assign a unique identifier for tracking and cross-referencing purposes.
Description of the Requested Change
This section provides the core details about the proposed modification:
- Detailed narrative of the proposed change: Explain what the change entails in clear, comprehensive terms.
- Reason for the change: Specify whether it stems from a problem, an enhancement opportunity, compliance requirements, or another source.
- Priority and urgency level: Indicate how critical the change is to the success of the project or system.
Impact Assessment
To evaluate whether the change should be approved, stakeholders must understand its potential effects:
- Potential effects on scope, cost, schedule, quality, and risk: Estimate how the change will impact key project dimensions.
- Consequences if the change is not approved: Highlight any risks or issues that could arise from rejecting the request.
- Affected systems, processes, or deliverables: Detail any components or outputs that the change would alter.
Approval and Authorization
Capturing approvals and sign-offs formally closes the loop:
- Approver(s) and sign-off section: Identify the decision-makers and capture their official approval, rejection, or requests for modifications.
- Space for investigation notes and recommendations: Allow room for documenting additional research, evaluations, or comments by reviewers.
Supporting Documentation
Supporting information strengthens the request and aids decision-making. Attachments, references, or related documents help provide information on specifications, error reports, screenshots, contracts, regulatory documents, or any other evidence that supports the change.
By collecting all these details, the form can help ensure that decision-makers have the context they need to make informed, transparent choices.
Change Request Process Workflow
A Change Request Form is only one part of a larger, structured workflow designed to assess and control changes. Here’s a high-level view of how the process typically unfolds:
- Initiation: A stakeholder, team member, or project participant identifies a need for change and submits a Change Request Form. At this stage, the goal is to clearly articulate the proposed change and provide initial justifications.
- Review: The project manager, change manager, or a designated change control board reviews the request. They verify that the form is complete, assess the relevance and urgency of the change, and determine whether further investigation is needed.
- Investigation: If the change could have significant impacts, a more detailed investigation is conducted. This may involve technical feasibility studies, cost estimation, schedule analysis, or consultations with affected stakeholders. Sometimes, sponsor approval may be needed even to initiate this deeper analysis.
- Approval or Rejection: After review and (if necessary) investigation, the request is either approved, conditionally approved (with modifications), or rejected. The decision is documented, and appropriate stakeholders are notified.
- Implementation: Approved changes are prioritized, scheduled, and integrated into the existing workflow. Teams adjust project plans, budgets, and resource allocations as needed to accommodate the approved change.
- Documentation: All documentation, including the original form, analysis results, approval records, and implementation outcomes, is archived. This creates an audit trail for future reference and supports continuous improvement by analyzing patterns in change management.
Types and Sources of Change Requests
Change requests can originate from many different situations throughout the lifecycle of a project, IT system, or business process. Understanding the different types and sources helps teams better classify and prioritize them.
Problem Reports (Bug Fixes)
In software development and IT projects, many change requests arise from problem reports. These are bugs, malfunctions, or performance issues identified after the original system has been designed, built, or launched. Fixing these problems often requires formally submitting a change request to allocate resources and update the schedule.
Enhancement or Feature Requests
As users interact with a system or as business needs evolve, stakeholders may identify opportunities for enhancements: adding new features, improving usability, or expanding functionality. Even if an enhancement sounds beneficial, it must go through the change request process to assess its true impact on scope, cost, and timelines.
hanges Due to External Events (Regulations, Standards)
Sometimes external forces, such as new regulatory requirements, changes in industry standards, or shifts in market conditions, necessitate updates to projects or systems. In these cases, submitting a formal change request ensures that compliance risks are managed systematically and that the response is appropriately prioritized.
Internal Suggestions (Process Improvement, Technology Upgrades)
Team members often generate ideas for internal improvements, such as adopting better technologies, refining processes, or optimizing workflows. While these can offer significant benefits, they must be evaluated through the change management process to ensure alignment with broader business goals and minimize unintended consequences.
Emergency Change Requests
Occasionally, situations arise that require emergency changes, such as critical system outages, security breaches, or safety concerns. While emergency requests often move through an expedited review process, they are still formally documented afterward to maintain governance and accountability.
By categorizing change requests by source and type, teams can apply the appropriate urgency, resources, and decision-making rigor to each situation.
Best Practices for Change Request Forms
Managing change effectively requires more than just having a form; it requires establishing a clear, efficient, and consistent process. Here are key best practices for working with Change Request Forms:
- Use Standardized, Customizable Templates for Consistency: Using a standardized template ensures that every request captures essential information in a familiar format, speeding up review and decision-making. However, allowing slight customization ensures the form remains flexible for different project types, industries, or organizational needs.
- Ensure Clarity in Instructions and Required Information: Each field in the form should have clear instructions and examples if needed. Mandatory fields (like description, reason, and impact assessment) should be enforced to prevent incomplete submissions. Clear guidelines reduce back-and-forth communication and speed up the approval process.
- Integrate with Project Management and Tracking Tools: Where possible, connect the change request process with project management platforms (like Jira, Asana, or Trello) or change tracking systems. This integration allows for better visibility into the status of requests, easier reporting, and automation of reminders, escalations, and approvals.
- Maintain Transparency and Communication with Stakeholders: Keeping stakeholders informed at each stage, from submission through review, investigation, and decision, builds trust and improves collaboration. Consider implementing automated email updates or dashboard views for stakeholders to track the status of their change requests.
- Regularly Review and Refine the Change Request Process for Efficiency: Over time, analyze metrics such as the number of requests submitted, average review times, and approval rates. Regular reviews help identify bottlenecks, training needs, or opportunities to simplify the process without sacrificing governance.
Common Challenges and Solutions
Even with a well-designed change request form and process, organizations often encounter challenges when managing changes. Recognizing these challenges early (and knowing how to address them) is important for maintaining efficiency and control.
Managing High Volumes of Requests
When teams receive a flood of change requests, it becomes difficult to evaluate each one thoroughly. Without prioritization, important changes might get lost, and trivial ones might consume excessive resources.
Solution: Implement a clear prioritization system based on business value, urgency, and risk. Use automated workflows to categorize, route, and track requests. Assign preliminary triage responsibilities to a small team before escalating requests to decision-makers.
Ensuring Complete and Accurate Information
Incomplete or vague requests slow down the evaluation process and often require multiple rounds of clarification, delaying decision-making.
Solution: Design the form with mandatory fields for critical information like description, reason, and impact. Use built-in validation rules or digital form systems to prevent submission until all necessary data is provided.
Balancing Flexibility with Control
Too much flexibility can lead to ad hoc changes that undermine project goals. Conversely, overly rigid processes can discourage valid change requests and delay responsiveness.
Solution: Define clear approval hierarchies based on change size, type, or risk level. Small, low-risk changes might require only project manager approval, while major changes might go to a change control board. Ensure all decisions are properly documented to preserve governance without paralyzing progress.
Preventing Unauthorized or Unnecessary Changes
Without strong controls, unauthorized changes can slip through, leading to scope creep, budget overruns, or compliance issues.
Solution: Establish governance policies that define who can submit, review, and approve changes. Maintain audit trails (full records of requests, evaluations, decisions, and implementations) to detect and address unauthorized changes quickly.
Conclusion
In dynamic business, technology, and project environments, change is unavoidable, but unmanaged change can be dangerous. A well-structured Change Request Form and process give organizations a way to embrace necessary change while protecting project scope, timelines, quality, and budgets.
By formalizing how changes are proposed, evaluated, and approved, teams reduce confusion, build accountability, and ensure that resources are allocated wisely. Implementing best practices, addressing common challenges early, and continuously refining the change management process are key to thriving in fast-moving industries.
Ultimately, a strong change request system isn’t about preventing change; it’s about enabling the right changes to happen in the right way, at the right time.
FAQ
-
What is a request form?
A request form is an online tool used to formally gather specific information or service requests from users. Request forms help streamline communication between users and organizations. When powered by Formspree, request forms are simple to embed, provide instant email notifications, and allow real-time viewing of submissions on the Formspree dashboard.
-
How do you write a request form?
To write a request form, clearly define the information needed, such as user contact details, type of request, and any necessary additional information. Using Formspree, you can create a fully functional request form that not only collects data efficiently but also notifies your team immediately and stores responses securely for easy access.
-
What is a letter request form?
A letter request form is used to collect information needed to generate formal letters, such as recommendation letters, employment letters, or verification letters. With Formspree as the backend, these forms can quickly capture necessary details and automatically notify the responsible party upon each submission.
-
What is a customer request form?
A customer request form allows businesses to gather service, support, or product requests directly from customers in an organized way. Formspree-powered customer request forms simplify data collection, instantly alert your team via email, and make tracking and managing customer needs effortless through the dashboard.
-
What is request form data?
Request form data refers to the information submitted by users through the request form, including names, contact details, specific requests, and additional notes. With Formspree, this data is securely stored, immediately accessible via your dashboard, and delivered to your inbox through automatic email notifications.
More request Forms
No pages found with the specified tag.