[ Library ]

Forms you can copy in one click

Draft. Copying works: each form is made as code for HTML, React, Next.js, Astro or WordPress. The key in the code is a placeholder; replace it with your own form’s key. Opening a template in the builder is not available yet, and no template has a file upload field because uploads are not available yet. The form address in the code is on contactforms.dev, which is not live yet, so a copied form will not work until launch. The code has not been pasted into a real WordPress site or an Astro project.

Show code for

Simple contact

Name, email, message

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-name">Name</label>
    <input id="cf-name" type="text" name="name" required />
  </div>
  <div class="cf-field">
    <label for="cf-email">Email</label>
    <input id="cf-email" type="email" name="email" required />
  </div>
  <div class="cf-field">
    <label for="cf-message">Message</label>
    <textarea id="cf-message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Version 1

Quote request

Name, email, service, budget, details

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-name">Name</label>
    <input id="cf-name" type="text" name="name" required />
  </div>
  <div class="cf-field">
    <label for="cf-email">Email</label>
    <input id="cf-email" type="email" name="email" required />
  </div>
  <div class="cf-field">
    <label for="cf-service">Service</label>
    <select id="cf-service" name="service" required>
      <option value="Design">Design</option>
      <option value="Development">Development</option>
      <option value="Consulting">Consulting</option>
      <option value="Other">Other</option>
    </select>
  </div>
  <div class="cf-field">
    <label for="cf-budget">Budget</label>
    <select id="cf-budget" name="budget">
      <option value="Under 1,000">Under 1,000</option>
      <option value="1,000 to 5,000">1,000 to 5,000</option>
      <option value="5,000 to 20,000">5,000 to 20,000</option>
      <option value="Over 20,000">Over 20,000</option>
    </select>
  </div>
  <div class="cf-field">
    <label for="cf-details">Project details</label>
    <textarea id="cf-details" name="details" rows="5"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Version 1

Appointment request

Name, phone, date, time, notes

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-name">Name</label>
    <input id="cf-name" type="text" name="name" required />
  </div>
  <div class="cf-field">
    <label for="cf-phone">Phone</label>
    <input id="cf-phone" type="tel" name="phone" required />
  </div>
  <div class="cf-field">
    <label for="cf-preferred_date">Preferred date</label>
    <input id="cf-preferred_date" type="date" name="preferred_date" required />
  </div>
  <div class="cf-field">
    <label for="cf-preferred_time">Time</label>
    <select id="cf-preferred_time" name="preferred_time" required>
      <option value="Morning">Morning</option>
      <option value="Afternoon">Afternoon</option>
      <option value="Evening">Evening</option>
    </select>
  </div>
  <div class="cf-field">
    <label for="cf-notes">Anything we should know</label>
    <textarea id="cf-notes" name="notes" rows="5"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Version 1

Job application

Name, email, role, link, cover note (no file upload yet)

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-name">Name</label>
    <input id="cf-name" type="text" name="name" required />
  </div>
  <div class="cf-field">
    <label for="cf-email">Email</label>
    <input id="cf-email" type="email" name="email" required />
  </div>
  <div class="cf-field">
    <label for="cf-role">Role you are applying for</label>
    <input id="cf-role" type="text" name="role" required />
  </div>
  <div class="cf-field">
    <label for="cf-portfolio">Link to your work or CV</label>
    <input id="cf-portfolio" type="text" name="portfolio" />
  </div>
  <div class="cf-field">
    <label for="cf-cover_note">Cover note</label>
    <textarea id="cf-cover_note" name="cover_note" rows="5"></textarea>
  </div>
  <button type="submit">Send</button>
</form>

Version 1

Customer feedback

Rating, comment, optional email

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-rating">How did we do? (1 to 5)</label>
    <input id="cf-rating" type="number" name="rating" required />
  </div>
  <div class="cf-field">
    <label for="cf-comment">What could be better?</label>
    <textarea id="cf-comment" name="comment" rows="5"></textarea>
  </div>
  <div class="cf-field">
    <label for="cf-email">Email (only if you want a reply)</label>
    <input id="cf-email" type="email" name="email" />
  </div>
  <button type="submit">Send</button>
</form>

Version 1

Product waitlist

Email, name, interest, updates

Open in builderSoon

Show the code

Save as contact.html. Replace YOUR_FORM_KEY with your form’s key.

<form action="https://contactforms.dev/f/YOUR_FORM_KEY" method="post">
  <div class="cf-field">
    <label for="cf-email">Email</label>
    <input id="cf-email" type="email" name="email" required />
  </div>
  <div class="cf-field">
    <label for="cf-name">Name</label>
    <input id="cf-name" type="text" name="name" />
  </div>
  <div class="cf-field">
    <label for="cf-interest">What are you most interested in?</label>
    <label><input type="radio" name="interest" value="Price" /> Price</label> <label><input type="radio" name="interest" value="Features" /> Features</label> <label><input type="radio" name="interest" value="Timing" /> Timing</label>
  </div>
  <div class="cf-field">
    <label for="cf-updates">Send me product updates</label>
    <input id="cf-updates" type="checkbox" name="updates" value="yes" />
  </div>
  <button type="submit">Send</button>
</form>

Version 1