Form Library Contact Forms Contact Me Form

Contact Me Form

Use this HTML contact me form on your website to provide viewers a quick and easy way to send you an email message without them having to know your email address.
Preview Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form"
  target="_top"
  method="POST"
>
  <div class="fs-field">
    <label class="fs-label" for="name">Your Name</label>
    <input class="fs-input" id="name" name="name" required />
  </div>
  <div class="fs-field">
    <label class="fs-label" for="email">Email</label>
    <input class="fs-input" id="email" name="email" required />
    <p class="fs-description">
      This will help me respond to your query via an email.
    </p>
  </div>
  <div class="fs-field">
    <label class="fs-label" for="message">Message</label>
    <textarea
      class="fs-textarea"
      id="message"
      name="message"
      required
    ></textarea>
    <p class="fs-description">What would you like to discuss?</p>
  </div>
  <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: #888888;
  --color-border-active: #da7105;
  --color-border-default: #d1d1d1;
  --color-highlight: #fdcf4c;
  --color-primary: #b64e08;
  --color-primary-active: #79320e;
  --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;
  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-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-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='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);
}

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="grid gap-y-6"
  target="_top"
  method="POST"
>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="name"
    >
      Your 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="name"
      name="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="email"
    >
      Email
    </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"
      name="email"
      required
    />
    <p class="block leading-5 text-[--color-text-muted]">
      This will help me respond to your query via an email.
    </p>
  </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="message"
    >
      Message
    </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="message"
      name="message"
      required
    ></textarea>
    <p class="block leading-5 text-[--color-text-muted]">
      What would you like to discuss?
    </p>
  </div>
  <div class="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: #888888;
    --color-border-active: #da7105;
    --color-border-default: #d1d1d1;
    --color-highlight: #fdcf4c;
    --color-primary: #b64e08;
    --color-primary-active: #79320e;
    --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" onSubmit={handleSubmit}>
      <div className="fs-field">
        <label className="fs-label" htmlFor="name">
          Your Name
        </label>
        <input className="fs-input" id="name" name="name" required />
      </div>
      <div className="fs-field">
        <label className="fs-label" htmlFor="email">
          Email
        </label>
        <input className="fs-input" id="email" name="email" required />
        <p className="fs-description">
          This will help me respond to your query via an email.
        </p>
      </div>
      <div className="fs-field">
        <label className="fs-label" htmlFor="message">
          Message
        </label>
        <textarea
          className="fs-textarea"
          id="message"
          name="message"
          required
        />
        <p className="fs-description">What would you like to discuss?</p>
      </div>
      <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: #888888;
  --color-border-active: #da7105;
  --color-border-default: #d1d1d1;
  --color-highlight: #fdcf4c;
  --color-primary: #b64e08;
  --color-primary-active: #79320e;
  --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;
  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-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-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='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);
}

        
        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 gap-y-6" onSubmit={handleSubmit}>
      <div className="flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="name"
        >
          Your 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="name"
          name="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="email"
        >
          Email
        </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"
          name="email"
          required
        />
        <p className="block leading-5 text-[--color-text-muted]">
          This will help me respond to your query via an email.
        </p>
      </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="message"
        >
          Message
        </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="message"
          name="message"
          required
        />
        <p className="block leading-5 text-[--color-text-muted]">
          What would you like to discuss?
        </p>
      </div>
      <div class="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: #888888;
    --color-border-active: #da7105;
    --color-border-default: #d1d1d1;
    --color-highlight: #fdcf4c;
    --color-primary: #b64e08;
    --color-primary-active: #79320e;
    --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.

Integration Guides

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

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 Contact Me form?

A Contact Me form is a simple, no-fuss form designed to make it easy for visitors to get in touch, whether for networking, inquiries, or casual introductions. It typically includes only the essential fields, like the sender’s name, email, and a message area, streamlining the communication process and reducing barriers for the visitor. This type of form is especially useful for personal websites, freelancer portfolios, and independent consultants who want to create a welcoming space for direct communication without overwhelming the user with too many fields. A contact me form helps establish accessibility and encourages genuine connections, making it a great tool for building relationships with website visitors.

For those wanting to add a clean “Contact Me” form quickly, Formspree offers a user-friendly template that makes setup and customization easy. With Formspree’s template, you can have a fully functional contact form on your site in minutes, even without advanced coding skills. Additionally, Formspree’s backend support includes spam filtering and automated email notifications, ensuring that each message reaches you directly without any hassle. This way, you can maintain a clean, modern design on your site while still enabling effortless communication for anyone who wants to reach out.

FAQ

  • What is a contact form?

    A contact form is a simple yet essential tool on websites, allowing visitors to send messages or inquiries directly to the site owner or support team without exposing their email addresses. It streamlines communication, making it easier for visitors to get in touch and for site owners to respond promptly.

  • What should be in a contact form?

    A contact form typically includes fields such as the visitor's name, email address, subject, and message. These fields provide structured information, making it easier to understand the visitor’s request and respond accordingly.

  • Can the contact form templates be embedded directly on your website?

    Yes, contact form templates can be easily embedded on your website. With Formspree as the backend, these forms are simple to integrate and require no server-side code, allowing seamless setup directly within your site’s HTML.

  • Can you set up the form to automatically notify a specific person whenever the form is filled out?

    Absolutely, Formspree enables you to set up notifications so a designated person is alerted each time a form is filled out. This feature helps ensure prompt responses to inquiries, enhancing customer engagement.

  • Do the contact form templates allow for instant viewing of responses?

    Yes, contact form templates integrated with Formspree allow for instant viewing of responses. Submissions are accessible in real-time through the Formspree dashboard, providing immediate access to visitor messages.

  • Do the offered contact form templates work seamlessly on mobile devices?

    Yes, Formspree’s contact form templates are fully responsive and work seamlessly on mobile devices. They adjust to various screen sizes, ensuring a consistent user experience across all devices, including smartphones and tablets.

  • Are the form templates free to use?

    Yes, all contact form templates on this website are free to use. Formspree offers a selection of ready-to-use templates that you can easily integrate into your website to enhance visitor engagement at no additional cost.

More contact Forms