Form Library Request Forms Creative Request Form

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 Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form fs-layout__2-column"
  target="_top"
  method="POST"
>
  <fieldset>
    <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 CSS
          Copy Copy
        

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

/** Variables **/

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

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

/** Base **/

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

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

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

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

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

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

/** Components **/

.fs-form {
  display: grid;
  row-gap: 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 HTML/Tailwind
          Copy 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 CSS
          Copy Copy
        

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        Show more
      
        

          HTML React
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
      <fieldset>
        <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 CSS
          Copy Copy
        

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

/** Variables **/

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

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

/** Base **/

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

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

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

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

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

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

/** Components **/

.fs-form {
  display: grid;
  row-gap: 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 React/Tailwind
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="grid grid-cols-2 gap-x-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 CSS
          Copy Copy
        

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        Show more

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

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

  3. Update your form's action

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

  4. Tweak your form's code

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

  5. Deploy your form to your hosting platform

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

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

How to Use This Form in Your Webflow Project

Follow these simple steps to connect your Webflow form to Formspree and start receiving submissions instantly.

  1. Add the Webflow Code Embed Block

    In Webflow Designer, drag the Code Embed Block component from the Add panel onto your page.

  2. Copy the HTML from this Page and Paste it in the Editor

    Scroll up and copy the full HTML form code shown above. Paste it in the Code Embed Editor.

  3. Add the CSS Styles

    Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance. In the HTML code, add a <style></style> tag and paste the CSS inside it.

  4. Create a Formspree Form Endpoint

    Sign up for a free Formspree account and create a new form. Once it's created, you'll receive a unique form endpoint URL like https://formspree.io/f/your-form-id.

  5. Set the Form Action in Webflow

    In the HTML code, replace the value of the action attribute of the <form> tag with your Formspree endpoint URL. For example: <form action="https://formspree.io/f/your-form-id" method="post">. Once done, click on the Save & Close button in the Code Embed Block.

  6. Publish and Test Your Site

    Click Publish in Webflow to deploy your site. Then visit the live page and test the form. You should see submissions appear in your Formspree dashboard immediately.

Integration Guides

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

Framer

Framer

Adding a Form to Framer

 Squarespace

Squarespace

Adding a Form to Squarespace

 Astro

Astro

Adding a Form to Astro

 Angular

Angular

Forms in Angular

 Webflow

Webflow

Adding a Form to Webflow

 Wordpress

Wordpress

Adding a Form to Wordpress

 GitBook

GitBook

Adding a form to GitBook

 Shopify

Shopify

Adding a form to Shopify

 Gatsby

Gatsby

React Forms with Gatsby

 Eleventy

Eleventy

HTML Forms with Eleventy

 Jekyll

Jekyll

HTML Forms with Jekyll

 NextJS

NextJS

React Forms with NextJS

What is a Creative Request Form?

A creative request form is used by marketing teams, agencies, or internal departments to gather detailed briefs for creative projects like graphic design, content writing, video production, or ad campaigns. It typically asks for information like project goals, required assets, target audience, deadlines, and any special guidelines. A creative request form helps prevent miscommunication, standardizes project intake, and ensures that creative teams have everything they need to deliver high-quality work on time.

Formspree offers a clean, customizable creative request form template that you can quickly embed into your website, project portal, or internal tools. With Formspree, every request is sent directly to your inbox, with optional auto-responses and spam protection included. It’s a simple way to streamline creative intake workflows without building a heavy ticketing or project management system — ideal for fast-moving teams that need clear and efficient communication.

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.