in Elftronix

Edits to Fox Contact Form — Outdated

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

Basics & Installation

Customisation

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:

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";

Comment out:

// 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

Care and share, let's call it fair! -David

Twitter Button Facebook Button Google Button LinkedIn Button

Write a Comment

Comment