Out Of The Box Functionality
Have a quick look at the default form over at the demo site. It’s multilingual-ready, so the very same form can be displayed in an alternate language. The form has also been coded to work with YAML’s Form Construction Kit, and it passes the WAVE Accessibility Evaluation Tool.
Using ExpressionEngine’s Email Contact Form In eeSiteKit
Also known as “form mail” an email contact form is a popular solution for allowing site visitors to email site owners without giving out email addresses.
Offering Increased Flexibility
By default, eeSiteKit sets up your email contact form so that you set email recipients dynamically. This gives you the option of having your form send to different email addresses depending on your specific needs. This could mean that you might only need to maintain one form that can do the work of many.
We’ve included some example code in the Landing Page template so you can see how this works. The example code assumes you have a Channel called “Contact Us” with a short name of “contact-us” and that you’ve set up a Template Group for that Channel called “contact-us”.
Look near the bottom of your “kit_display/landing” template code for something like this:
{!-- Contact Form Example : Replace 'webmaster_email' global variable below with address form should mail to --}
{if segment_1 == '{embed:lang_contact_us_template_group}'}
{embed='kit_language/{embed:site_language}' template='kit_forms/contact' email_recipients='{webmaster_email}'}
{/if}In the example above, there is a simple conditional checking to see if segment_1 of this landing page is identical to the name of your contact_us template_group as set in the language file (this way the same same conditional works even if the main language of the landing page changes). If there’s a match, then the contact form is embedded into the landing page template and the recipients email address (or addresses) are embedded into the form so it knows who to email the information to. In the example, the email_recipients are being set with EE’s global webmaster_email, but we can set that several different ways.
When Multiple Send-To Addresses Are Needed
The above example works great if you only have one department to be emailed, but let’s say you have four different departments, and each one has a different email address you would like information sent to.
Here’s an example from a live site built with eeSiteKit 1.0. Note that there are four departments you can send emails to, “Adoption, Foster Care, Mentoring, and Other. Select one, and segment_2 of the URI includes the department name and the form is automatically and properly addressed to the right department.
Doing things this way avoids visitors forgetting to select a department from a select menu and sending requests to the top address all the time. You may also link to this same form from anywhere in the site, and depending on what you put in segment_2 of the URI, the form will know who should get the information.
Below is a sample of the code we used in the project linked above that allows the same form to email different addresses based on what category is listed in segment_2 of the URI. In this example, the embed tag is used in the category template of the site.
{if segment_1 == 'contact' AND (segment_2 == 'adoption' OR segment_2 == 'foster-care' OR segment_2 == 'mentoring' OR segment_2 == 'info')}
{embed='core/custom_form_contact'
adoption='person_one@asitedomain.com'
foster-care='person_two@asitedomain.com'
mentoring='person_three@asitedomain.com'
info='person_four@asitedomain.com'
}
{/if}In the actual form, you would then use this embedded variable in the recipient’s parameter of the contact form tag.
recipients="{embed:{segment_2}}"Finally, in the site linked to above, there’s a dynamic header that’s coded above the form so we would have less code in the category template. We used the same segment_2 category to trigger the appropriate heading. This example below creates a short heading when the form is to be emailed to the Adoption department.
{if segment_2 == 'adoption'}
<input type="hidden" name="topic" value="Adoption" />
<h1>Tell me more about Adoption</h1>
{/if}