Forms

There are two ways to put a form on a page:

Both blocks are in the Deep Woods Forms group of the / menu.

Form Embed: forms from other services

Every form service gives you an embed code (sometimes called a snippet, install code, or HTML code). You can put it in one of two places.

Option 1: an Embeds file (recommended)

Use this for any embed code, and always for codes longer than one line.

Embed files are reusable. Point Form Embed blocks on several pages at the same file, then update the file once and every page follows.

Option 2: paste into the block

For short, one-line codes, such as an <iframe …> from Tally or Google Forms, paste the code straight into the Form Embed block's Code field.

Form Embed fields

::form-embed{embed="newsletter" align="center" max-width="lg"}
::

Services that need a site-wide code too

Some services, Klaviyo for example, ask you to add one script to every page, and then give you a short code for each form. In that case:

1. Paste the every-page script into Content → settings → site → Code for the head of every page (or Code for the end of every page if the service says "before </body>").
2. Put the form's own short code in a Form Embed block.

Pop-up and fly-out forms that the service shows on its own usually only need the site-wide code, with no Form Embed block.

What you'll see while editing

• The form loads after the rest of the page, so it may appear a moment later.
• A yellow notice in the preview means the Embed name doesn't match a file in embeds, or nothing has been pasted yet. Visitors never see this notice.
• Some services only show their form on your real domain. If the form is blank in the editor, check it on your preview or live site.

Form Block: build your own form

A Form Block collects answers on your page and either emails them to you or sends them to a URL from a form service you choose. To get them by email, see Get submissions by email below. To send them to a URL, you'll need an account with a service such as Formspree or Basin, or a webhook from Zapier, Make, or n8n, and the steps below.

Get submissions by email

A Form Block can email each submission to you through an email service you already use. Connect the service once in your Deep Woods dashboard, then choose who gets each form's emails in Studio.

Form Block fields

Form Field: the label around each input

Inputs: what goes inside a Form Field

An input inside a Form Field uses the Form Field's Name automatically. You only need to set Name on the input if it isn't inside a Form Field.

Complete example

Paste this into the code editor to get a working contact form, then adjust it in the visual editor:

::form-block{form="contact" submit-label="Send message" submit-block}
  :::form-field{name="name" label="Your name" required}
    ::::form-input{autocomplete="name" required}
    ::::
  :::

  :::form-field{name="email" label="Email" required}
    ::::form-input{type="email" autocomplete="email" required}
    ::::
  :::

  :::form-field{name="topic" label="What can we help with?"}
    ::::form-select
    ---
    placeholder: Choose a topic
    items:
      - Sales
      - Support
      - Partnerships
    ---
    ::::
  :::

  :::form-field{name="message" label="Message"}
    ::::form-textarea{rows="5" placeholder="Tell us a bit about your project"}
    ::::
  :::

  :::form-field{name="updates"}
    ::::checkbox{label="Send me occasional product updates" value="yes"}
    ::::
  :::
::

Good to know

• Spam protection is built in. Forms include invisible checks that stop most automated spam. You don't need to add a captcha.
• Give every field a different Name. Two fields with the same name arrive as a single list.
• With a webhook, your form service decides what happens next: email notifications, autoresponders, spreadsheets, CRM. Set those up in the service.
• Nothing arrives? If a form set to email shows its error message, check that an email service is connected in Form Settings, and that Notify and From are filled in.