Outdated and invalid for updated versions of Fox Contact Form plugin. New article ‘Fox contact form edits Episode 2‘ available.
A lot of contact forms out there are simply for sending brief messages, which doesn’t require that much from a contact form extension. That is why for example, we can forgive them for using ancient CAPTCHA technology.
But in my case, the contact form brings conversions which is why I want to brush it up to perfection. Making it extremely customer friendly, while spam free. With features such as automatic mails to submitter and administrator, preventing users from making typos in their contact details. Not to mention good looking with an easy to use backend.
Fox Contact Form
This article is by no means complete. It’s more of a personal documentation of a journey in editing the “Fox Contact Form” to fit my picky and broad range of needs. Which I am simply making public in this document.
Of course, no contact form extension is going to be perfect for everyone. Which is why I have had to tweak this thing a lot. But the initially broad amount of features and having room to play with them has been rewarding. And will continue as my business develops.
With a fair bit of experience over the years, and originally a faith believer in AJAX. I have come to the conclusion that it’s not necessary, (probably just because I saw a lot of shitty non-AJAX contact forms). There are even some benefits, such as easier conversion tracking.
But if you are looking for a good AJAX form, I would recommend the “Core Design Perfect Forms plugin“. Forms are easily edited on the fronted, and it’s easy to custom design the look. Both are features that I have yet to see a rival for. However it’s no match for the other features I am now getting with Fox Contact Form and currently Perfect Forms only supports Joomla 2.5.
Below are step-by step instructions with references, on how I made the BESTEST contact form (so far) with the Fox Contact Form extension. At the time of writing, the current version is Fox Contact Form 3.3.1 and the version of Joomla I’m using is Joomla! 3.3.3. Please note that some of the hacks here are possibly implemented into the code in future versions, which would lessen the hassle presented in this article. If I personally move on to a newer version with such changes, I will update this document or create a new one.
Contents
- International phone number submission
- Custom HTML inside contact form
- Threefold spam protection
- Custom thank you message with submitted content
- Custom automated e-mails & private messages
- Different custom text in emails per contact form
- Fix scroll wheel triggers calendar field
- Exclude non-filled out fields from e-mail output
- Custom text below incorrect field
To do
- Mobile friendly
- Conditional fields
- Conversion tracking
- Lots more, been busy!
Basics & Installation
I am using the module, which I think is the easiest. Just place it in any module position, or create a custom one. ex “contactform” and put it inside the article you want with the proper menu assignment:
{loadposition contactform}
Some important settings:
Advanced -> Alternative stylesheet -> naked.css
I would recommend that anyone who wants to design the form by themselves starts out with the naked style sheet. Useful feature.
Besides components/com_foxcontact/css/naked.css (or bootstrap.css for a ready style which is not bad) two other css files are being used:
media/com_foxcontact/css/foxcontact.css
media/com_foxcontact/css/calendar.css
Overriding the CSS within those two files, and building your own form style with a custom.css is advised. And for the submit button, I’ve just commented out the “Twitter bootstrap buttons” classes in foxcontact.css and used the button styling that I have been already using in my Joomla template.
Notes on Multilingual Install
If you want to use more than one language, install the Joomla language pack before Fox Contact Form. I have made simple instructions for installing Simplified Chinese which I am using. You can easily apply the steps to any other language.
If you install the language files afterwards, you will have to install Fox Contact Form again after that. Module settings will stay intact, but all the files that are modified in this guide will be reset. So take backups of all those files and restore them after the installation, if you have to do that.
Customisation
List of files that have been edited in customisation steps below:
~/public_html/modules/mod_foxcontact/mod_foxcontact.xml
~/public_html/administrator/language/en-GB/en-GB.com_foxcontact.ini
~/public_html/components/com_foxcontact/helpers/fieldsbuilder.php
~/public_html/components/com_foxcontact/helpers/dispatchers/fdispatcher.php
~/public_html/components/com_foxcontact/helpers/dispatchers/fsubmittermailer.php
~/public_html/components/com_foxcontact/helpers/dispatchers/fadminmailer.php
~/public_html/components/com_foxcontact/helpers/dispatchers/fjmessenger.php
~/public_html/media/com_foxcontact/js/calendar.min.js
International Phone Number Submission
If you have an international crowd of users, it might be a good idea to have a dropdown list of international country calling codes so that it’s easy for customers to give out their phone numbers properly. Some will do with a separate textfield that users need to fill in manually (not having any, has been a pain in the ass in my experience). But in some cases, such as mine it is also possible that the customer remembers the country but not the calling code for that country.
The items for the dropdown list field must be separated by comma and all on the same line. A ready made list with most countries of the world can be found over here (with some absurd ones removed).
I have found it best, to first list the most common ones and divide the rest with a line, like so:
United States of America +1
United Kingdom +44
—-
Afghanistan +93
Albania +355
Algeria +213
etc.
Under this field you would have the regular phone number textfield. This style serves users of all sorts. And even those who are totally inapt can exempt themselves with the “—“.
I’d also like to mention that the search function is great. Above all the items you have a clear search field inside the drop down menu where to type the search. Also the results are displayed with multiple results, and in a clear manner.
Custom HTML inside contact form
For Contact Form has a ready feature for adding content before and after your form. However, you might want to add some custom HTML in between the form fields, for example a title. Also if you want to enable the hidden form field for spam protection (explained in “threefold spam protection” below), you need this.
If you use the component, edit: ~/public_html/components/com_foxcontact/views/foxcontact/default.xml
If you use the module, edit: ~/public_html/modules/mod_foxcontact/mod_foxcontact.xml
Find:
<field name="customhtml1" type="ftextarea" filter="raw" rows="4" cols="48" label="COM_FOXCONTACT_TEXT_BOTTOM_LBL" description="COM_FOXCONTACT_TEXT_BOTTOM_DSC" wizard="COM_FOXCONTACT_BOTTOMTEXT_DFLT"/>
<field name="customhtml1display" type="hidden" default="1"/>
<field name="customhtml1order" type="hidden" default="1000"/>
Below add:
<field name="customhtml2" type="textarea" filter="raw" rows="4" cols="48" label="COM_FOXCONTACT_HTML_EXTRA_LBL" description="COM_FOXCONTACT_HTML_EXTRA_DSC"/>
<field name="customhtml2display" type="hidden" default="1"/>
<field name="customhtml2order" type="text" label="JFIELD_ORDERING_LABEL" description="" size="5" default="50"/>
~/public_html/administrator/language/en-GB/en-GB.com_foxcontact.ini (or whatever your language is)
Add:
COM_FOXCONTACT_HTML_EXTRA_LBL="Extra HTML"
COM_FOXCONTACT_HTML_EXTRA_DSC="Custom HTML which can be placed anywhere in the form"
~/public_html/components/com_foxcontact/helpers/fieldsbuilder.php
Find:
// Load the other field properties and the POST value
$this->LoadField($type, $number);
After add:
$this->LoadField("customhtml", 2);
After this, you will have a field “Extra HTML” in the page display options of form fields.
Threefold Spam Protection
I have basically three methods of spam protection in place, first two are built in. I’m not using a CAPTCHA of any kind (but those who want it, it’s available as well).
1. Domains are automatically checked for validity, so if a spam bot is making up false domain names the submission won’t go through.
2. There is a built in spam filter which blocks submissions that contain selected keywords. So you can effectively block all submissions that contain links if you have no need for them.
Unfortunately there is no feature to have a specific textfield excluded from the keyword filter. For URL submissions for example. I don’t have the need for it so I am fine without.
3. As a third extra measure, I am using a hidden form field which is basically a check box that only bots can see. If ticked, the submission won’t go through.
Just add this in the “Extra HTML” field that was created above:
<input style="display: none;" name="human" type="text" value="" />
And in ~/public_html/modules/mod_foxcontact/mod_foxcontact.php:
Below this line:
<?php defined("_JEXEC") or die(file_get_contents("index.html"));
Add:
if($_POST['human'] != '') {
// do nothing
} else {
// continue with form
Add in the bottom of the file:
}
Custom Thank You Message with Submission Content
By default, Fox Contact Form redirects successful submissions to a separate page, or replaces the contact form with a simple thank you message.
I wanted to have the email address and phone number inside the thank you text, so that users had at least an opportunity to check afterwards if they had written it wrong. Having users input the address twice could be another solution, but I find it bothersome for users. The kind folks at the forum helped me out and I later decided to display the whole submission in the thank you text.
Here are the necessary code changes:
~/public_html/components/com_foxcontact/helpers/dispatchers/fdispatcher.php:
Find:
protected function subject()
{
// Read the subject from the form configuration
$subject = JMailHelper::cleanSubject($this->Params->get("email_subject"));
// Call the replacement engine for each variable found
$expanded = preg_replace_callback('/{(.*?)}/', array("FDispatcher", "expand_variables"), $subject);
return $expanded;
}
Replace with:
protected function subject()
{
// Read the subject from the form configuration
$subject = JMailHelper::cleanSubject($this->Params->get("email_subject"));
return $this->substitute($subject);
// Call the replacement engine for each variable found
// $expanded = preg_replace_callback('/{(.*?)}/', array("FDispatcher", "expand_variables"), $subjec$
// return $expanded;
}
protected function substitute($emailString)
{
return preg_replace_callback('/{(.*?)}/', array("FDispatcher", "expand_variables"), $emailString);
}
~/public_html/components/com_foxcontact/helpers/dispatchers/fsubmittermailer.php
Find:
$mail = JFactory::getMailer();
$this->set_from($mail);
$this->set_to($mail);
$mail->setSubject(JMailHelper::cleanSubject($this->Params->get("email_copy_subject", "")));
// Body
$body = $this->Params->get("email_copy_text", "") . PHP_EOL;
// a blank line
$body .= PHP_EOL;
Replace with:
$mail = JFactory::getMailer();
$this->set_from($mail);
$this->set_to($mail);
$copy_subject = $this->Params->get("email_copy_subject", "");
$mail->setSubject(JMailHelper::cleanSubject($this->substitute($copy_subject)));
// Body
$copy_text = $this->Params->get("email_copy_text", "");
$body = $this->substitute($copy_text);
// a blank line
$body .= PHP_EOL;
~/public_html/components/com_foxcontact/helpers/dispatchers/fadminmailer.php:
Find:
$sent = $this->send($mail);
if ($sent)
{
// Notify email send success
$this->MessageBoard->Add($this->Params->get("email_sent_text"), FoxMessageBoard::success);
$this->Logger->Write("Notification email sent.");
}
Replace with:
$sent = $this->send($mail);
if ($sent)
{
// Notify email send success
$sent_text = $this->Params->get("email_sent_text");
$this->MessageBoard->Add($this->substitute($sent_text), FoxMessageBoard::success);
}
After this, in the events settings you can add a thank you text, with different variables depending on the type of the field and the order inside the plugin settings.
For example:
<p>Thank you for your submission! We have sent you an automated email to <strong>{EMAIL}</strong>.</p>
<p>If you don't receive an email in a few minutes, please check the address above or call us.</p>
<p>Your submission is as follows:</p>
<p>Calendar: {DATE}<br />
Text Field: {TEXT0}<br />
Drop Down: {DROPDOWN0}<br />
Full Name: {NAME}<br />
E-mail: {EMAIL}<br />
Phone Number: {DROPDOWN1}{TEXT1}</p>
Custom Automated E-mails & Private Messages
There are three very handy features out of the box. To send an automated email to the submitter, with an option to include the submitted details. Sending the submission to an admin’s custom email address. As well as another option to send the submission by private message within the Joomla interface.
What I’ve done is:
- Cleaned up all emails to a desired format
- Added custom text to the mail that’s being sent to the admin
- IP address & user agent are sent to Joomla private message not in email
- Removed the signature from emails
- Clean up private messages
Basic email format was like this:
*Your name*
My Name*Your email*
your@email.com
Which was changed to this:
Your name: My Name
Your Email: your@email.com
The purpose of restricting the IP & user agent info to private messages is to clean up the emails, while having a handy more detailed backup of the submissions available.
The problem with the format of private messages is that there are no line breaks, creating a big porridge from the submission. It’s because mails are not HTML formatted while the private messages are. Thus the conflict of PHP_EOL or \n vs <br /> being used as line breaks. While looking for a better solution for this, I’ve cleaned it up by having the IP & user agent on separate lines so the porridge is a little bit less. If you want to include them in the email, this won’t work though.
~/public_html/components/com_foxcontact/helpers/dispatchers/fdispatcher.php
Find:
return "*" . JFilterInput::getInstance()->clean($field["Name"], "") . "*" . PHP_EOL . JFilterInput::getInstance()->clean($field["Value"], "") . PHP_EOL . PHP_EOL;
Replace:
return $field["Name"] . ": " . $field["Value"] . PHP_EOL;
~/public_html/components/com_foxcontact/helpers/dispatchers/fadminmailer.php
Below lines:
$mail->setSubject($this->subject());
$body = $this->body();
$body .= $this->attachments($mail);
Find:
$body .= PHP_EOL;
Replace:
$body .= "First line of text" . PHP_EOL . "Second line of text";
// Info about url
$body .= JFactory::getConfig()->get("sitename") . " - " . $this->CurrentURL() . PHP_EOL;
// Info about client
$body .= "Client: " . $this->ClientIPaddress() . " - " . $_SERVER['HTTP_USER_AGENT'] . PHP_EOL;
~/public_html/components/com_foxcontact/helpers/dispatchers/fsubmittermailer.php
Find:
$body .= "------" . PHP_EOL . JFactory::getConfig()->get("sitename") . PHP_EOL;
Replace:
$body .= PHP_EOL;
~/public_html/components/com_foxcontact/helpers/dispatchers/fjmessenger.php
Find:
// Info about url
$body .= JFactory::getConfig()->get("sitename") . " - " . $this->CurrentURL() . PHP_EOL;
// Info about client
$body .= "Client: " . $this->ClientIPaddress() . " - " . $_SERVER['HTTP_USER_AGENT'] . PHP_EOL;
Replace:
// Info about url
// $body .= JFactory::getConfig()->get("sitename") . " - " . $this->CurrentURL() . PHP_EOL;
// Info about client
// $body .= "Client: " . $this->ClientIPaddress() . " - " . $_SERVER['HTTP_USER_AGENT'] . PHP_EOL;
$body .= "<br />" . "<br />" . "IP: " . $this->ClientIPaddress() . "<br />" . "Agent: " . $_SERVER['HTTP_USER_AGENT'] . PHP_EOL;
Different custom text in emails per contact form.
In the above example we added custom text to the admin mails, but if you are using multiple contact forms within the same site, the same text will be applied to all of them. Especially on multilingual sites, this might not be a desired effect. This is how you can have different custom text inside the admin email for different forms.
What we are going to do, is have the contents of fadminmailer.php as many time as there are contact forms that need a different output, with different versions of the text. Then, with the help of the menu itemid it will choose which version to use depending on the page it’s on.
First, go to menu manager and check the corresponding ID numbers of all the pages that you have contact forms on.
~/public_html/components/com_foxcontact/helpers/dispatchers/fadminmailer.php:
Add on top of page:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );
$Itemid = JRequest::getInt('Itemid');
?>
Find:
<?php defined("_JEXEC") or die(file_get_contents("index.html"));
Before add:
<?php if ($Itemid==xxx) { ?>
Note: “xxx” is the number of the menu item. If you want to assign it to multiple item ids, use format like so: “($Itemid==xxx or $Itemid==xxx or $Itemid==xxx)”
Add to bottom of page:
} ?>
Next, copy everything from <?php if ($Itemid==xxx) { ?> to } ?> and paste it again below the page as many times as necessary, and change what’s needed including the itemid.
Fix scroll wheel triggers calendar field
There is an annoying problem, that when you move your scroll wheel or trackpad with two fingers on top of the calendar field, and on top of the calendar itself, it starts scrolling the dates. This can disrupt the scrolling of the form and is useless anyway. Also I noticed that having multiple calendar fields, it crashed the page when accidentally scroll wheeling the calendar.
To remove this:
Copy the contents of media/com_foxcontact/js/calendar.min.js
Use an Online JavaScript beautifier to clean up the code.
And change these:
scrollInput: false,
scrollMonth: false,
scrollTime: false,
Or grab the ready edited file from here.
Exclude non-filled out fields from e-mail output
By default, fields that are not filled out and empty show up in the emails. I excluded them with the following edit.
/components/com_foxcontact/helpers/dispatchers/fdispatcher.php
Find:
if (!$field['Display']) return "";
Below add:
if (!$field['Value'] != '' ) return "";
to be continued…
Custom text below incorrect field
By default, an asterisk “*” is shown below a field that was filled in incorrectly, or a mandatory field that was not filled in. It is possible to add a custom message such as “*please correct this field” to make it more clear.
/components/com_foxcontact/helpers/fieldsbuilder.php
Find:
return $field['IsValid'] ? "" : (" <span class=\"asterisk\"></span>");
Change:
return $field['IsValid'] ? "" : (" <span class=\"asterisk\">Please correct above field</span>");
EOL