Skip to content

Mail in development ​

Task: a contact form that e-mails the support team — and that you can develop and test without a mail server.

With host: log, q:mail writes each message to the log instead of sending it. The config reads the host from the environment, so production only sets SMTP_HOST:

yaml
# Recipe: mail in development. `host: log` writes each message to the log
# instead of sending it; set SMTP_HOST in production and the same page sends.
paths:
  components: ./components

mail:
  host: ${SMTP_HOST:-log}
  from: support@example.com
xml
<q:component name="Contact">
  <q:action name="send" method="POST">
    <q:param name="email" type="email" required="true" />
    <q:param name="message" required="true" minlength="5" />
    <q:mail to="support@example.com" reply_to="{email}" subject="Contact from {email}" type="text">{message}</q:mail>
    <q:redirect url="/" flash="Thanks! We will answer {email}." />
  </q:action>

  <h1>Contact us</h1>
  <q:if condition="flash"><p class="flash">{flash}</p></q:if>
  <form method="POST" action="/?action=send">
    <input name="email" type="email" />
    <textarea name="message"></textarea>
    <button>Send</button>
  </form>
</q:component>

The tests submit the form and check what the visitor is told, and that a bad address is refused on its field before anything is sent:

xml
<q:test name="a message is sent and the visitor is told" page="/">
  <test:submit action="send" email="ana@example.com" message="Where is my order?" />
  <test:expect redirect="/" flash="Thanks! We will answer ana@example.com." />
</q:test>

<q:test name="an address that is not an e-mail is refused on its field" page="/">
  <test:submit action="send" email="not-an-email" message="Where is my order?" />
  <test:expect error="email" />
</q:test>
text
tests/contact.test.q
  PASS  a message is sent and the visitor is told
  PASS  an address that is not an e-mail is refused on its field
2 passed, 0 failed

And this is the message the first test "sent" — what host: log wrote:

text
q:mail (host: log, not sent)
From: support@example.com
To: support@example.com
Subject: Contact from ana@example.com

Where is my order?

Without a mail: section, q:mail is an error that says so — it never pretends to send. More in Files & Mail.

Tested: this page imports the files of examples/cookbook/files-and-mail/mail-in-development/, and the results above come from running them.

MIT Licensed · Built with VitePress