Create a contact form with the EFG

While developing the website for one of my clients, I faced two problems. First and most important, the contact form should have a dropdown menu with company sections. Depending on the choice, script should send an e-mail to a respective recipient.

For example, if a visitor choosed the “Design” option, the e-mail should be sent to the design@company.com e-mail address. This definitely couldn’t be solved with the built-in form generator.

The next big problem was to make e-mails look like they were sent not from the website, but directly from a visitor. This usability enhancement is really useful because you can answer an e-mail immediately by clicking the Reply button. No more rewriting or copy-pasting e-mail address!

EFG needed

To achieve both goals, I had to install an excellent TYPOlight extension called Extended Form Generator. It can be installed via Repository catalog (tag Form).

Create a new form and call it “Contact form”. I have omitted the configuration for now, since we haven’t created the necessary form fields yet.

Form fields

To the new created form add following fields:

Field type	Field name	Field label	Mandatory	Validation
Submit field	-	Send	-	-
Text field	name	Your name	yes	Alphabetic characters
Text field	email	Your e-mail	yes	E-mail address
Text field	company	Your company	no	Alphanumeric characters
Text field	phone	Your phone	no	Phone number
Select menu	mailto	Category	yes	-
Text field	subject	Subject	yes	Alphanumeric characters
Textarea	message	Your message	yes	Extended alphanumeric characters

Configure select menu (mailto) as follows:

Value	Label	Default
development@company.com	Development	yes
design@company.com	Design
marketing@company.com	Marketing
branding@company.com	Branding

Form configuration

Now it’s time to configure our form, the way you would have never thought of. Go to form edit page and expand tab (EFG) Send confirmation via e-mail.

From the dropdown menu select mailto record – that will cause e-mails to be sent to selected (by the visitor) section. E.g. if a visitor chooses the Marketing category, the e-mail will be sent to marketing@company.com (as referenced in the table).

Leave the recipient field empty or, for example, type the e-mail of the owner of the company.

In sender field, we will use EFG’s insert tag. Type in {{form::email}}. This will modify the e-mail’s header “from”, so it will look as if the e-mail was sent directly from our visitor. Therefore, you don’t need to copy and paste the sender’s e-mail in composing message window anymore. From now you only can hit the Reply button and it will automatically compose an e-mail to your visitor.

As subject, use insert tag, too – {{form::subject}}.

In the textarea I give you a free hand. Compose it as you wish.

Do not forget to check the Skip empty fields box.

So the final configuration should look similar to this:

Publish your form

Create a new article and add a new record inside it. From dropdown “Element type” choose Form and after ajax reload select just created form.

Thing to consider

This is not the perfect solution. E-mail addresses are stored in the frontend as plain text, so you may experience troubles with spam. However, as far as I know, my client had no worries with spam so far.

I hope you will find this tutorial useful!

About Author



Comments