Forms

Files: src/config/config.toml, src/content/sections/english/contact-message-section.md, demo-form-section.md, src/content/auth/english/ · Skill level: Beginner

Taskly is a static site, so forms send their data to a service you choose. There are three kinds:

Form	Where it is	Sends to
Contact form and demo request form	`/contact/`, `/request-demo/`	`contactFormAction` (Formsubmit, Formspree, or Netlify Forms), or the form’s own `form.action`
Newsletter forms	The footer and the status page	`[settings.subscription] formAction` (Mailchimp)
Log in, sign up, forgot password	`/login/`, `/signup/`, `/forgot-password/`	`form.action` in each auth file (your app)

Until a form has a real address, npm run dev shows a warning inside it, and npm run dev and npm run build print a warning in the terminal. Visitors never see these warnings.

Contact And Demo Forms

Both forms use the same setting:

[settings]
  contactFormAction   = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co"   # formsubmit.co | formspree | netlify

To send one form somewhere else (for example demo requests to your sales inbox), set form.action in its section file. It uses the same contactFormProvider; an empty value uses contactFormAction:

# src/content/sections/english/demo-form-section.md (and french/)
form:
  action: "https://formsubmit.co/[email protected]"   # this form only; "" uses contactFormAction

The contact form’s file is contact-message-section.md.

Free, no account needed.

contactFormAction   = "https://formsubmit.co/[email protected]"
contactFormProvider = "formsubmit.co"

The first message triggers an activation email from Formsubmit. Click the link in it, or no message is delivered.

Create a form at formspree.io and copy its endpoint:

contactFormAction   = "https://formspree.io/f/your-form-id"
contactFormProvider = "formspree"

Only when the site is hosted on Netlify:

contactFormAction   = "/"
contactFormProvider = "netlify"

Turn on form detection under Forms in the Netlify dashboard, then deploy again.

Form Fields

The fields are listed under form.inputs in contact-message-section.md and demo-form-section.md:

form:
  action: ""                 # this form's endpoint; empty uses contactFormAction
  emailSubject: "New message from the contact page"   # subject of the email you receive
  submitButton: { enable: true, label: "Send message", variant: "dark", class: "w-full" }
  inputs:
    - label: "Email"
      name: "Email"              # field name in the submission
      placeholder: "[email protected]"
      type: "email"              # text | email | tel | url | number | date | radio | checkbox
      required: true
      halfWidth: false           # true puts two fields side by side from tablet width
    - label: "Message"
      name: "Message"
      tag: "textarea"
      rows: "5"
    - label: "Team size"
      name: "Team size"
      placeholder: "Select a size"
      dropdown:                  # turns the field into a select
        items:
          - { label: "1–10", value: "1-10" }
          - { label: "11–50", value: "11-50" }
    # messages shown after sending
    - note: success
      parentClass: "hidden text-sm message success"
      content: "Thanks! Your message is on its way."
    - note: deprecated
      parentClass: "hidden text-sm message error"
      content: "Something went wrong. Please try again."

The last two entries are not fields: note: success is the message after a successful send, and note: deprecated the error message. Change their content only. All options are in inputFieldSchema in src/sections.schema.ts.

[settings.subscription]
  enable            = true     # false removes every newsletter form
  title             = ""       # empty uses subscription.title from the i18n files
  note              = ""       # empty uses subscription.note
  formAction        = "https://your-account.us1.list-manage.com/subscribe/post?u=...&id=...&f_id=..."
  mailchimpTagValue = ""       # optional Mailchimp tag added to every new subscriber

To find formAction in Mailchimp: Audience → Signup forms → Embedded forms, and copy the action="..." URL from the embed code. The embed code writes & between parameters: change each one to a plain &.

The auth screens are designs only: Taskly has no user accounts. Each file in src/content/auth/english/ has a form that posts to form.action, which ships as "#":

form:
  action: "https://app.acme.com/login"   # your app's endpoint
  method: "post"
  fields:
    - { name: "email", type: "email", label: "Work email", required: true }
  submitLabel: "Log in"
providers:                                # social sign-in buttons
  - { enable: true, label: "Continue with Google", icon: "/images/icons/google.svg", url: "https://app.acme.com/auth/google" }

If your app has its own log-in pages, point the header link and button at them (Header) and delete these three pages. The signup hero on /home-3/ sends the email address to signup.action (/signup/ by default) with the address filled in.

Do It With AI

Set up my forms: the contact and demo forms go to [Formsubmit with EMAIL | Formspree ID | Netlify];
the newsletter goes to this Mailchimp form action: [URL]. Edit src/config/config.toml. Then add a
required "Company" text field after "Email" in the contact form (contact-message-section.md, English
and French), and change the success message to "[TEXT]".

Forms

Forms

Contact And Demo Forms

Form Fields

Newsletter Forms

Log-In And Sign-Up Screens

Do It With AI