Creating a Contact Form Workflow
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:
Thanks so much for the tutorial! Tried to use both my yahoo email and gmail but none of them seems to work. Any suggestions?
After exploring a number of the articles on your website,
I seriously like your way of blogging. I saved as a favorite it to
my bookmark website list and will be checking back soon.
Take a look at my website too and tell me how you
feel.
Hello and thx for the tutorial!
In your tutorial I don't have the form submitted activity.
Do you have any idea why?
I'm going crazy over this one problem.
Thx in advance!
Thank you very much for the tutorial..Its been like pulling a Hen's teeth trying to source information about Orchard Workflows from the Net.
I have bookmarked your blog and shared it with my 20 fellow coders.
It's an amazing piece of writing designed for all the online viewers; they will obtain benefit from it I am sure.
whoah this weblog is magnificent i like studying your posts.
Keep up the good work! You know, many people are searching
around for this info, you can help them greatly.
What's up it's me, I am also visiting this site on a regular basis, this web page
is actually fastidious and the users are genuinely sharing nice thoughts.
That is a good tip especially to those fresh to the blogosphere.
Brief but very precise info? Appreciate your sharing this one.
A must read article!
Hi there, just became aware of your blog through Google, and found that it is truly informative.
I'm going to watch out for brussels. I will appreciate if you continue
this in future. A lot of people will be benefited from your writing.
Cheers!