MallaDocs
HomeQuickstartOpen Malla

Contact form with email

Build a contact form, protect it from spam, read submissions and get an email for each one.

User guide
Beginner15 min

You will build: A contact form with name, email, topic, message and consent fields that stores submissions and emails you for each one

Read first: Tour of the editorBuild a landing page

In this tutorial you add a contact form to a page, set up its fields, design what visitors see after they send it, publish it and read the submissions in the Forms workspace. Then you turn on an email for every new message. You need a site you can edit, for example the one from the landing page tutorial.

Contact form with emailVideo coming soon. The written steps below cover everything.
Contact form with email· 7 min

Add the form

  1. Insert a form

    Open the page for the form and select the frame it should go in. Press + in the Layers tab and choose Form in the Forms group. The form comes with three fields and two hidden frames. In the Layers tab they are Email (an input), Textarea (labelled Message), Submit (the Send button), Success and Error.

  2. Name the form

    In the Form section of the inspector, set Name to Contact. The Forms workspace lists the form under this name. Keep Action on Store submissions and Redirect on Stay on page.

Set up the fields

  1. Add a name field

    With the form selected, press + and choose Input. New fields go to the end of the form, so drag the input above Email in the Layers tab. In the Field section, set Name to name, Label to Name and turn on Required.

  2. Check the email field

    Select Email. Its Type is Email and Required is on, so the browser checks the address before the form is sent. Name is the key the submission is stored under; keep it short and unique in the form.

  3. Add a topic select

    Select the form, press + and choose Select, then drag it above Textarea. Set Name to topic and Label to Topic. Under Options, change the two rows to Sales and Support (a label and a value each) and press Add option for a third one, Other.

  4. Limit the message

    Select Textarea, the message field. Required is already on. Set Max length to 2000 so nobody can paste a novel.

  5. Add a consent checkbox

    Add a Checkbox the same way and drag it above Submit. Set Label to I agree to be contacted about my message and turn on Required.

  6. Check the button

    Select Submit. In the Button section, Type is Submit: that is what sends the form. Change Text if you want another label than Send. A button inside a form always submits it, so its Link section has no target.

Checkpoint

The form shows Name, Email, Topic, Message, the consent checkbox and the Send button, in that order.

Design the success and error states

  1. Show the success state

    Select the form and set Show to Success in the Form section. The canvas shows the Success frame instead of the fields. Edit its text, for example Thanks, we will reply within one working day., and style it like the rest of the page.

  2. Show the error state

    Set Show to Error and write a message for when sending fails, for example when a visitor sends too many messages in a row. Set Show back to Form when you are done.

Publish and test

  1. Publish to staging

    Press Publish in the toolbar, keep Staging selected and press Publish to staging. Forms only receive submissions on the published site.

  2. Send a test message

    Open the staging link and fill in the form. A Cloudflare Turnstile check appears above the button and usually passes on its own. Press Send: the fields are replaced by your success message.

Read submissions

  1. Open the Forms workspace

    Back in the editor, press Forms under the sidebar tabs. Switch the toggle at the top of the list to Staging: test submissions never mix with real ones in Production.

  2. Open a submission

    Select Contact. The Submissions tab lists every message with the time it came in. Click a row to read all its fields and the page it was sent from. Press Export CSV to download them.

Checkpoint

The Submissions tab of Contact, in Staging, shows your test message.

Get an email for each message

  1. Add yourself to the notifications

    Open the Settings tab of Contact. Under Notifications, add your email and press Save. Only members of the site or its workspace can be added.

  2. Choose what to keep

    Under Storage, keep Store submissions on. Use Keep for to delete old submissions after a while. Turn Store submissions off only if you want the emails and nothing stored.

  3. Publish to production

    Notification emails are sent for production submissions only. Press Publish, pick Production and press Publish to production. This needs a site admin.

Done

Send a message on the production site: it appears under Production in the Forms workspace, and you get an email titled "New submission: Contact" with the site name.

What you learned

  • A form holds fields; each field's Name is the key its value is stored under, and Required, Type and lengths are checked before sending.
  • The Show control lets you design the success and error states on the canvas.
  • Submissions are kept per environment, and production submissions can email site members.

Keep going with the next tutorials, or read the guides behind this one:

FormsForm elements, spam protection, submissions per environment and email notifications.PublishingStaging and production, instant publishes and how pages are rendered and cached.Client workflowsVisual logic that runs in the browser on clicks, submits, page load and variable changes.Team and rolesWorkspace members, site members and what owners, admins, editors and content editors can do.