Creative Request Form

Add this minimal HTML creative request form to your marketing portal, agency site, or internal tools to manage creative project requests efficiently.

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 request date (YYYY-MM-DD)"
        required
      />
    </div>
  </fieldset>
  <fieldset>
    <legend class="fs-fieldset-title">Project Details</legend>
    <div class="fs-field">
      <label class="fs-label" for="project-title">
        Project Name / Campaign Title
      </label>
      <input
        class="fs-input"
        id="project-title"
        name="project-title"
        placeholder="Enter the project or campaign title"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="creative-type">
        Type of Creative Work Needed
      </label>
      <select
        class="fs-select"
        id="creative-type"
        name="creative-type"
        required
      >
        <option value="graphic-design">Graphic Design</option>
        <option value="video-production">Video Production</option>
        <option value="copywriting">Copywriting</option>
        <option value="branding">Branding</option>
        <option value="web-design">Web Design</option>
      </select>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="project-description">
        Description of the Project
      </label>
      <textarea
        class="fs-textarea"
        id="project-description"
        name="project-description"
        placeholder="Provide a detailed description of the project"
        required
      ></textarea>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="target-audience">Target Audience</label>
      <textarea
        class="fs-textarea"
        id="target-audience"
        name="target-audience"
        placeholder="Describe the intended audience"
        required
      ></textarea>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="key-message">Key Message or Theme</label>
      <textarea
        class="fs-textarea"
        id="key-message"
        name="key-message"
        placeholder="Describe the core message or theme"
        required
      ></textarea>
    </div>
    <div class="fs-field">
      <label class="fs-label">Deliverables Requested</label>
      <div class="fs-checkbox-group">
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="deliverables-social-media-posts"
              name="deliverables"
              required
              type="checkbox"
              value="social-media-posts"
            />
          </div>
          <div>
            <label class="fs-label" for="deliverables-social-media-posts">
              Social Media Posts
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="deliverables-brochures"
              name="deliverables"
              required
              type="checkbox"
              value="brochures"
            />
          </div>
          <div>
            <label class="fs-label" for="deliverables-brochures">
              Brochures
            </label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="deliverables-posters"
              name="deliverables"
              required
              type="checkbox"
              value="posters"
            />
          </div>
          <div>
            <label class="fs-label" for="deliverables-posters">Posters</label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="deliverables-landing-pages"
              name="deliverables"
              required
              type="checkbox"
              value="landing-pages"
            />
          </div>
          <div>
            <label class="fs-label" for="deliverables-landing-pages">
              Landing Pages
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="dimensions-specs">
        Dimensions / Specs (if applicable)
      </label>
      <textarea
        class="fs-textarea"
        id="dimensions-specs"
        name="dimensions-specs"
        placeholder="Provide size or format specifications (optional)"
      ></textarea>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="due-date">Deadline / Due Date</label>
      <input
        class="fs-input"
        id="due-date"
        name="due-date"
        placeholder="Enter the deadline date (YYYY-MM-DD)"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="budget">Budget (if applicable)</label>
      <input
        class="fs-input"
        id="budget"
        name="budget"
        placeholder="Enter the budget (optional)"
      />
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="reference-materials">
        Reference Materials or Inspiration Links
      </label>
      <textarea
        class="fs-textarea"
        id="reference-materials"
        name="reference-materials"
        placeholder="Provide any references or add inspiration links"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <legend class="fs-fieldset-title">Approvals and Follow-Up</legend>
    <div class="fs-field">
      <label class="fs-label" for="approval-from">Approval Required From</label>
      <input
        class="fs-input"
        id="approval-from"
        name="approval-from"
        placeholder="Enter approver&#x27;s name or title"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="special-instructions">
        Additional Notes or Special Instructions
      </label>
      <textarea
        class="fs-textarea"
        id="special-instructions"
        name="special-instructions"
        placeholder="Add any additional notes or special instructions"
      ></textarea>
    </div>
  </fieldset>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">submit</button>
  </div>
</form>

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

/** Variables **/

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

  --font-family-body: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", system-ui, sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 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 request date (YYYY-MM-DD)"
        required
      />
    </div>
  </fieldset>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
    >
      Project 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-title"
      >
        Project Name / Campaign Title
      </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-title"
        name="project-title"
        placeholder="Enter the project or campaign title"
        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="creative-type"
      >
        Type of Creative Work Needed
      </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="creative-type"
        name="creative-type"
        required
      >
        <option value="graphic-design">Graphic Design</option>
        <option value="video-production">Video Production</option>
        <option value="copywriting">Copywriting</option>
        <option value="branding">Branding</option>
        <option value="web-design">Web Design</option>
      </select>
    </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="project-description"
      >
        Description of the Project
      </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="project-description"
        name="project-description"
        placeholder="Provide a detailed description of the project"
        required
      ></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="target-audience"
      >
        Target Audience
      </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="target-audience"
        name="target-audience"
        placeholder="Describe the intended audience"
        required
      ></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="key-message"
      >
        Key Message or Theme
      </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="key-message"
        name="key-message"
        placeholder="Describe the core message or theme"
        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]"
      >
        Deliverables Requested
      </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-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="deliverables-social-media-posts"
              name="deliverables"
              required
              type="checkbox"
              value="social-media-posts"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
              for="deliverables-social-media-posts"
            >
              Social Media Posts
            </label>
          </div>
        </div>
        <div class="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="deliverables-brochures"
              name="deliverables"
              required
              type="checkbox"
              value="brochures"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
              for="deliverables-brochures"
            >
              Brochures
            </label>
          </div>
        </div>
        <div class="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="deliverables-posters"
              name="deliverables"
              required
              type="checkbox"
              value="posters"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
              for="deliverables-posters"
            >
              Posters
            </label>
          </div>
        </div>
        <div class="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="deliverables-landing-pages"
              name="deliverables"
              required
              type="checkbox"
              value="landing-pages"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
              for="deliverables-landing-pages"
            >
              Landing Pages
            </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="dimensions-specs"
      >
        Dimensions / Specs (if applicable)
      </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="dimensions-specs"
        name="dimensions-specs"
        placeholder="Provide size or format specifications (optional)"
      ></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="due-date"
      >
        Deadline / Due 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="due-date"
        name="due-date"
        placeholder="Enter the deadline date (YYYY-MM-DD)"
        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="budget"
      >
        Budget (if applicable)
      </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="budget"
        name="budget"
        placeholder="Enter the budget (optional)"
      />
    </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="reference-materials"
      >
        Reference Materials or Inspiration Links
      </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="reference-materials"
        name="reference-materials"
        placeholder="Provide any references or add inspiration links"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
    >
      Approvals 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-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-from"
        name="approval-from"
        placeholder="Enter approver&#x27;s name or title"
        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="special-instructions"
      >
        Additional Notes or Special Instructions
      </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="special-instructions"
        name="special-instructions"
        placeholder="Add any additional notes or special instructions"
      ></textarea>
    </div>
  </fieldset>
  <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>
</form>

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

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

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

    --font-family-body: "Figtree", system-ui, sans-serif;
    --font-family-display: "Poppins", system-ui, sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more

        
           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 request date (YYYY-MM-DD)"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="fs-fieldset-title">Project Details</legend>
        <div className="fs-field">
          <label className="fs-label" htmlFor="project-title">
            Project Name / Campaign Title
          </label>
          <input
            className="fs-input"
            id="project-title"
            name="project-title"
            placeholder="Enter the project or campaign title"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="creative-type">
            Type of Creative Work Needed
          </label>
          <select
            className="fs-select"
            id="creative-type"
            name="creative-type"
            required
          >
            <option value="graphic-design">Graphic Design</option>
            <option value="video-production">Video Production</option>
            <option value="copywriting">Copywriting</option>
            <option value="branding">Branding</option>
            <option value="web-design">Web Design</option>
          </select>
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="project-description">
            Description of the Project
          </label>
          <textarea
            className="fs-textarea"
            id="project-description"
            name="project-description"
            placeholder="Provide a detailed description of the project"
            required
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="target-audience">
            Target Audience
          </label>
          <textarea
            className="fs-textarea"
            id="target-audience"
            name="target-audience"
            placeholder="Describe the intended audience"
            required
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="key-message">
            Key Message or Theme
          </label>
          <textarea
            className="fs-textarea"
            id="key-message"
            name="key-message"
            placeholder="Describe the core message or theme"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label">Deliverables Requested</label>
          <div className="fs-checkbox-group">
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="deliverables-social-media-posts"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="social-media-posts"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="deliverables-social-media-posts"
                >
                  Social Media Posts
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="deliverables-brochures"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="brochures"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="deliverables-brochures">
                  Brochures
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="deliverables-posters"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="posters"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="deliverables-posters">
                  Posters
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="deliverables-landing-pages"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="landing-pages"
                />
              </div>
              <div>
                <label
                  className="fs-label"
                  htmlFor="deliverables-landing-pages"
                >
                  Landing Pages
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="dimensions-specs">
            Dimensions / Specs (if applicable)
          </label>
          <textarea
            className="fs-textarea"
            id="dimensions-specs"
            name="dimensions-specs"
            placeholder="Provide size or format specifications (optional)"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="due-date">
            Deadline / Due Date
          </label>
          <input
            className="fs-input"
            id="due-date"
            name="due-date"
            placeholder="Enter the deadline date (YYYY-MM-DD)"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="budget">
            Budget (if applicable)
          </label>
          <input
            className="fs-input"
            id="budget"
            name="budget"
            placeholder="Enter the budget (optional)"
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="reference-materials">
            Reference Materials or Inspiration Links
          </label>
          <textarea
            className="fs-textarea"
            id="reference-materials"
            name="reference-materials"
            placeholder="Provide any references or add inspiration links"
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="fs-fieldset-title">Approvals and Follow-Up</legend>
        <div className="fs-field">
          <label className="fs-label" htmlFor="approval-from">
            Approval Required From
          </label>
          <input
            className="fs-input"
            id="approval-from"
            name="approval-from"
            placeholder="Enter approver&#x27;s name or title"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="special-instructions">
            Additional Notes or Special Instructions
          </label>
          <textarea
            className="fs-textarea"
            id="special-instructions"
            name="special-instructions"
            placeholder="Add any additional notes or special instructions"
          />
        </div>
      </fieldset>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          submit
        </button>
      </div>
    </form>
  );
}

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

/** Variables **/

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

  --font-family-body: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", system-ui, sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 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 request date (YYYY-MM-DD)"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
          Project 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-title"
          >
            Project Name / Campaign Title
          </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-title"
            name="project-title"
            placeholder="Enter the project or campaign title"
            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="creative-type"
          >
            Type of Creative Work Needed
          </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="creative-type"
            name="creative-type"
            required
          >
            <option value="graphic-design">Graphic Design</option>
            <option value="video-production">Video Production</option>
            <option value="copywriting">Copywriting</option>
            <option value="branding">Branding</option>
            <option value="web-design">Web Design</option>
          </select>
        </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="project-description"
          >
            Description of the Project
          </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="project-description"
            name="project-description"
            placeholder="Provide a detailed description of the project"
            required
          />
        </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="target-audience"
          >
            Target Audience
          </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="target-audience"
            name="target-audience"
            placeholder="Describe the intended audience"
            required
          />
        </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="key-message"
          >
            Key Message or Theme
          </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="key-message"
            name="key-message"
            placeholder="Describe the core message or theme"
            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]">
            Deliverables Requested
          </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-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="deliverables-social-media-posts"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="social-media-posts"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                  htmlFor="deliverables-social-media-posts"
                >
                  Social Media Posts
                </label>
              </div>
            </div>
            <div className="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="deliverables-brochures"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="brochures"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                  htmlFor="deliverables-brochures"
                >
                  Brochures
                </label>
              </div>
            </div>
            <div className="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="deliverables-posters"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="posters"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                  htmlFor="deliverables-posters"
                >
                  Posters
                </label>
              </div>
            </div>
            <div className="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="deliverables-landing-pages"
                  name="deliverables"
                  required
                  type="checkbox"
                  value="landing-pages"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                  htmlFor="deliverables-landing-pages"
                >
                  Landing Pages
                </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="dimensions-specs"
          >
            Dimensions / Specs (if applicable)
          </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="dimensions-specs"
            name="dimensions-specs"
            placeholder="Provide size or format specifications (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="due-date"
          >
            Deadline / Due 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="due-date"
            name="due-date"
            placeholder="Enter the deadline date (YYYY-MM-DD)"
            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="budget"
          >
            Budget (if applicable)
          </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="budget"
            name="budget"
            placeholder="Enter the budget (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="reference-materials"
          >
            Reference Materials or Inspiration Links
          </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="reference-materials"
            name="reference-materials"
            placeholder="Provide any references or add inspiration links"
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
          Approvals 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-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-from"
            name="approval-from"
            placeholder="Enter approver&#x27;s name or title"
            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="special-instructions"
          >
            Additional Notes or Special Instructions
          </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="special-instructions"
            name="special-instructions"
            placeholder="Add any additional notes or special instructions"
          />
        </div>
      </fieldset>
      <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>
    </form>
  );
}

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

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

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

    --font-family-body: "Figtree", system-ui, sans-serif;
    --font-family-display: "Poppins", system-ui, sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more

How to use this form

Get started in just a few steps.

Create a form on Formspree

Create a free account and choose New Form.
Add actions and validation rules

Choose from our growing list of actions, from Airtable to Zendesk and everything in between.
Update your form's action

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

Don’t forget to include a name attribute for every input.
Deploy your form to your hosting platform

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

How to Use This Form in Your Shopify Store

Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.

Create a Form on Formspree

Sign up for a free Formspree account and create a new form. Once created, you’ll get a unique form endpoint like https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page

Scroll up and copy the full HTML form code shown above. Don’t forget to replace the FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page

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.
Copy the CSS Styles

Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
Paste the CSS into Your Shopify Theme

In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code. Open the 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

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.

Integration Guides

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

Webflow

Adding a Form to Webflow

GitBook

Adding a form to GitBook

Shopify

Adding a form to Shopify

Gatsby

React Forms with Gatsby

Eleventy

HTML Forms with Eleventy

Jekyll

HTML Forms with Jekyll

NextJS

React Forms with NextJS

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.

Creative Request Form

How to use this form

Create a form on Formspree

Add actions and validation rules

Update your form's action

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

Copy the HTML from this Library Page

Paste the Form into a Shopify Page

Copy the CSS Styles

Paste the CSS into Your Shopify Theme

Preview and Publish

Integration Guides

Webflow

GitBook

Shopify

Gatsby

Eleventy

Jekyll

NextJS

What is a Creative Request Form?

FAQ

What is a request form?

How do you write a request form?

What is a letter request form?

What is a customer request form?

What is request form data?

More request Forms