Forms — Titen Framer

Titen has two kinds of form — a contact form and a newsletter — both Framer forms that show a sending state and a confirmation without any code:

• the contact form: on /contact, and as “Let’s Work Together” at the end of /projects, every category page and every service page;
• the newsletter: in the footer of every page.

They have no destination when you copy the template: until you choose one, submissions go nowhere. The general guide is Forms; this page covers Titen’s forms.

Choose where submissions go

The contact form is copied into each page that shows it, and the newsletter sits in the footer component, so there are five forms to set up:

• /contact;
• /projects;
• the Project Category page;
• the Services detail page;
• the footer, in Assets → Components → Section → Footer (one setting covers every page).

For each one:

1. Open the page (or the Footer component) and select the form: search the Layers tab for “Form” and select the layer named Form with the form icon.

2. In the right panel → Form, find Send to and click Add….

3. Pick a destination:

   Destination	What happens
   Email	Each submission is emailed to the address you enter
   Webhook	Each submission is posted as JSON to a URL: Zapier, Make, n8n, Mailchimp through one of them, your CRM, your own server
   Google Sheets	Each submission becomes a row. Connect your Google account first in Settings → Forms.

You can add more than one destination. Framer’s guide to webhooks is Connect Framer forms to a webhook.

The forms’ other settings stay as they are: Redirect is empty, so the button itself says the form was sent, and Antispam is set to Basic. Each form sits in the page on Desktop, Tablet and Phone; one setting covers all three.

The fields

The contact form:

Field	Name the destination receives	Type
First Name	First Name	Text
Last Name	Last Name	Text
Email	Email	Email
Phone	Phone	Phone
Message	Message	Text area

The newsletter has one field, Email.

Each field has a name in the right panel: that is the key your email, webhook or sheet receives. Rename a field’s label freely; change its name only if you also update where the data goes. If you want to tell the contact forms apart, give each a destination of its own, or add a hidden field.

Two things to set before you publish:

• Required fields. No field is required in the template, so an empty form can be sent. Select the Email field (and First Name, if you like) and turn on Required in the right panel, in each form.
• The e-mail placeholder reads jane@framer.com, Framer’s default. Change it to jane@example.com or your own example.

Test it

Publish, then submit each form on the live site with a real address, and check that it arrived at every destination you added. Test on the published site rather than in the editor preview, so you see exactly what visitors get.

Privacy

Submissions go only to the destinations you add. Say what you do with the data: a line under each form linking to a privacy page is enough for most sites. Add a consent checkbox to the newsletter if you send it to a marketing list.