Creating a Contact Form Workflow

Sep 16 2013 10:18 PM

Introduction

One of the most frequent usages of the workflows module in Orchard will probably be to send an email notification whenever a contact form is submitted. This tutorial will teach you how to create such a custom form, intercept when it is submitted by a user, and finally how to send a custom email based on the contents of the form.

The Contact Form

Enabling the Custom Forms module

To create a contact form and make it available on the website as a custom page, you first need to enable the Custom Forms module.

In the dashboard

  • Click on Modules
  • Look for Custom Forms in the Forms section
  • Click Enable

Creating the Contact Form content type

A new Custom Forms link appears on the admin menu. This feature will use an existing content type and make its editor available on the front end. Hence a custom type is necessary to represent our Contact Form.

  • Click on Content Definition
  • Click on Create New Type
  • Type Contact Form as the display name, the technical name is automatically auto-completed with ContactForm
  • Click Create
  • Uncheck the Creatable option, removing the link from the New section in the menu
  • Uncheck the Draftable option, preventing versions from being created
  • On the next screen click Save

The new content type is now available but is empty. We need to add some custom fields representing the values we want to gather from the user. This will be done using Orchard's standard content fields.

Subject

  • Click on Add Field
  • Enter Subject as the display name, the technical name is automatically auto-completed with Subject
  • In the field type drop down list select Text Field
  • Click Save

The field can be customized in order to make use an adapted editor and also to provide some help text on the front end.

  • Expand the section Subject (Text Field)
  • In the Display option drop down list select Wide
  • Check Required
  • Type The subject of your message (Mandatory) as the help text
  • Click Save

Message

  • Click on Add Field
  • Enter Message as the display name, the technical name is automatically auto-completed with Message
  • In the field type drop down list select Text Field
  • Click Save

The field can be customized in order to make use an adapted editor and also to provide some help text on the front end.

  • Expand the section Message (Text Field)
  • In the Display option drop down list select Textarea
  • Check Required
  • Type Please provide the reasons why you are contacting us (Mandatory) as the help text
  • Click Save

Contact

  • Click on Add Field
  • Enter Contact as the display name, the technical name is automatically auto-completed with Contact
  • In the field type drop down list select Text Field
  • Click Save

The field can be customized in order to make use an adapted editor and also to provide some help text on the front end.

  • Expand the section Contact (Text Field)
  • In the Display option drop down list select Large
  • Check Required
  • Type Your email address (Mandatory) as the help text
  • Click Save

Publishing the contact form

The new content type is ready to be used as a form. There are two ways to publish it, by either providing a custom page for it with its own url, or by injecting it in existing pages using a widget. In this example we will use a dedicated page.

Publishing the custom form

  • Click on Custom Forms from the admin menu
  • Click on Add new Custom Form
  • Type Contact Us as the title
  • In the content type drop down list select Contact Form, which is the content type we just created
  • Check Save the content item once the form is submitted in order to persist the information which was submitted
  • Check Show on a menu and type Contact Us as the menu text
  • Click Save

Granting the permission

By default custom forms can't be filed by an anonymous user. As we want any of our website's users to be able to contact us, we need to add this permission to the Anonymous role.

  • Click on Users on the admin menu
  • Click on the Roles section
  • Click on the Edit link for the Anonymous role
  • Search for the Submit Contact Form forms permission and check Allow
  • Click Save

Testing the form

  • On the front end, sing-out and open the Contact Us page
  • File in the form and hit Submit
  • Log into the dashboard and click on Custom Forms
  • Click on the Submissions link for the Contact Us form

You can see that the new submission is available for the website editors.

The Workflow

Users can now submit new contact us forms to the website and in order to notify the owner of the website that a new message is available we will configure a custom workflow to send and email whenever a message is submitted.

Creating the Workflow

  • Click on Workflows on the admin menu
  • Click on Create new Workflow Definition
  • Type Contact Form notification as the name of the new workflow
  • Click Save
  • Drag and drop a Form Submitted activity
  • Double-click on the newly created activity, select Contact Us and click on Save
  • Select the activity again and click on the power-like button from the toolbar. This will set this activity as the starting event
  • Drag and drop a Notify activity on the board
  • Double-click on the newly created activity, select Information as the notification type, and enter A message was submitted as the message, then click Save
  • Connect the Form Submitted event to the Notify task using the blue dot connector on the Form Submitted
  • Click Save

Testing the workflow

  • On the front end, submit a new message
  • A notification should be displayed if the workflow was correctly configured

Sending the email

In order to send the email, the notification activity will be replaced by one sending an actual email. In order to do this we need to enable the Email module, and set it up.

  • Click Modules on the admin menu
  • Search for the Email Messaging module and enable it
  • Click on Email in the Settings section of the admin menu
  • File in the email setting based on your email provider information
  • Click Save
  • Click Workflows on the admin menu then edit the Contact Form notification workflow
  • Select the Notify activity and click on the cross in the toolbar. This will delete this activity
  • Drag and drop a new Send Email activity
  • Double-click on the newly created activity
  • Select Other in the Send to section
  • Enter a valid email address to receive the notification
  • Enter A new message is available as the subject
  • As the body of the email, enter the following text
A new message is available. <br /><br />

Subject: {Content.Fields.ContactForm.Subject} <br />
Message: {Content.Fields.ContactForm.Message} <br />
Contact: {Content.Fields.ContactForm.Contact} <br />
  • Click Save
  • Connect the Form Submitted event to the new task using the blue dot connector on the Form Submitted
  • Click Save

Testing the workflow

Now whenever a user submits a new message, you will receive an email like this one:

13 Comments

Add a Comment