# Forms
## 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:
```toml
[settings]
contactFormAction = "https://formsubmit.co/you@yourdomain.com"
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`:
```yaml
# src/content/sections/english/demo-form-section.md (and french/)
form:
action: "https://formsubmit.co/sales@yourdomain.com" # this form only; "" uses contactFormAction
```
The contact form's file is `contact-message-section.md`.
Free, no account needed.
```toml
contactFormAction = "https://formsubmit.co/you@yourdomain.com"
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](https://formspree.io/) and copy its endpoint:
```toml
contactFormAction = "https://formspree.io/f/your-form-id"
contactFormProvider = "formspree"
```
Only when the site is hosted on Netlify:
```toml
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`:
```yaml
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: "you@company.com"
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`.
### Newsletter Forms
```toml
[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 `&`.
### Log-In And Sign-Up Screens
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 `"#"`:
```yaml
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](/taskly/customization/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
```text
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]".
```