Fox Contact Form Edits — Episode 2

I use this space for my notes of edits made to the Fox Contact Form plugin. Joomla version used is usually the latest, 3.6+ at the time of writing.

Last updated: July 29th 2016.

Confirmed working on Fox Contact Form version 3.6.5.


Simplified Email Formatting

What the admin mail looks like out of the box:

Fox Contact Form’s default administrators e-mail notification

The “simplified” version I am using:

Custom Administrators Email Notification

Administrators Email Notification

—> Modules —> Fox Contact —> Actions —> Administrators Email Notification —> Edit —> Source Code

Format 1

<div class="wrapper">
<div class="container">
<div class="inner">Sent: {date}, {time}<br />Custom Field: Yes<br /><br />{field-table-full}</div>

Format 2

<div class="wrapper">
<div class="container">
<div class="inner">{field-table-without-client-info}<br />Address field 1<br />Address field 2</div>

User Email Notification

—> Modules —> Fox Contact —> Actions —> User Email Notification —> Edit —> Source Code

<div class="wrapper">
<div class="container">
<div class="inner">Message1<br /><br /> Message2<br /><br />URL<br /><br /> {field-table-without-client-info}</div>

Joomla Messenger

—> Modules —> Fox Contact —> Actions —> Joomla Messenger —> Edit —> Source Code

<div class="wrapper">
<div class="container">
<div class="inner">

File: ~/components/com_foxcontact/language/en-GB/en-GB.com_foxcontact.ini

this bit:

COM_FOXCONTACT_LOCATION_ORIGIN="Location of origin: %s (the indication of the city is approximate)"

to this:


File: ~/libraries/foxcontact/message/render.php

Code changed below for version 3.6.1 and beyond..

this bit:

if ($include_user_info)
$elements->append($this->getFieldRow(JText::_('COM_FOXCONTACT_SITE_NAME'), $this->getSiteName()));
$elements->append($this->getFieldRow(JText::_('COM_FOXCONTACT_CURRENT_URL'), $this->getFormPageLink(), false));
$item = $this->form->getDesign()->getFoxDesignItemByType('user_info');
if (!is_null($item))

to this:

if ($include_user_info)
// $elements->append($this->getFieldRow(JText::_('COM_FOXCONTACT_SITE_NAME'), $this->getSiteName()));
// $elements->append($this->getFieldRow(JText::_('COM_FOXCONTACT_CURRENT_URL'), $this->getFormPageLink(), false));
$elements->append('<br />----<br /><br />');
$item = $this->form->getDesign()->getFoxDesignItemByType('user_info');
if (!is_null($item))


File: ~/administrator/components/com_foxcontact/layouts/fox/user_email_tmpl.css

replace with this:

.wrapper { font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; }
.container { min-width: 280px; }
.inner { font-size: 16px; }
.fields-list { overflow: hidden; }
.field-content { /* float: left; */ /* note: adding a float here would create links from consecutive field titles on iOS/OS X devices*/ }
dl, dt, dd { margin:0; }

Combining Values in Mail

The default td,tl,td format of emails is erased when copying text to platforms that don’t support html/css. For example the iOS Calendar App. Here I have combined the label and value and simply put them on the same line, inside a single div to maintain structure while copying the information over to iPhone.

Code changed below for version 3.6.3..

File: ~/libraries/foxcontact/message/render.php

this bit:

return FoxHtmlElem::create()->append(FoxHtmlElem::create('dt')->classes('field-title')->text(JFilterInput::getInstance()->clean($label)))->append(FoxHtmlElem::create('dd')->classes('field-content')->html($encode ? nl2br(FoxHtmlEncoder::encode(JFilterInput::getInstance()->clean($value))) : $value))->render();

to this:

return FoxHtmlElem::create()
->html( JFilterInput::getInstance()->clean($label .= ":&nbsp;"). ($encode ? nl2br(FoxHtmlEncoder::encode(JFilterInput::getInstance()->clean($value))) : $value)))->render();

to remove all the dl formatting. this bit:

return FoxHtmlElem::create('dl')->attr('class', 'fields-list')->append($elements)->render();

to this:

return FoxHtmlElem::create('div')->attr('class', 'fields-list')->append($elements)->render();

Responsive Form Fields

Have the form fields (input, select, textarea) automatically change width depending on the width of the (div) form container.

File: ~/template/yourown/template.css

remove (control-label & controls) floats:

.fox-container .fox-form-stacked .controls { float: none !important; }
.fox-container .fox-form-stacked .control-label { float: none !important; width: 100% !important; }

change from pixel to percentage width of input & textarea fields:

.fox-container textarea { width: 100% !important; }

.fox-container input,
.fox-container select, /* Standard select used as fallback under some circumstances */
.fox-container .fox-form-stacked .fox-item-submit .controls,
.fox-container .fox-form-stacked .fox-item-captcha .controls,
.fox-container .fox-form-stacked .fox-item-checkbox .controls,
.fox-container .fox-form-stacked .fox-item-newsletter .controls,
.fox-container .fox-form-stacked .fox-item-attachments .controls,
.fox-container .fox-form-stacked .fox-item-html-fields .controls
{ width: 100% !important; }

Cross Domain Form IFrame

Note: I’ve abandoned this feature for now because the form relies on Joomla Session cookies which in a cross domain iframe scenario are third party and thus blocked by some browsers like Safari by default.

How to show the contact form in an automatically resizing iframe, so that one form can be used with multiple websites in different domains. Supports IE8+ and even old versions of Mobile Android Browser. Backup plan for IE7/6 is under way.

Download latest “Iframe-resizer” script.

  • ie8.polyfils.min.js // needed for IE8 support
  • iframeResizer.contentWindow.min.js // for cross domain support
  • iframeResizer.min.js
  • Also copy the corresponding .map files over

Parent Joomla Article

Include code directly in article. Joomla native CodeMirror editor recommended:

<script type="text/javascript" src="./templates/yourtemplate/iframeResizer.min.js"></script>
<script type="text/javascript" src="./templates/yourtemplate/ie8.polyfils.min.js"></script>

<iframe src="//" width="100%" scrolling="no" frameBorder="0"></iframe>

<script>jQuery('iframe').iFrameResize({inPageLinks:true, checkOrigin: false});</script>

##note: inPageLinks must be enabled so that the parent page follows the child page anchor link to the top of the form container after submission

Child Joomla Article

Create light-weight Joomla template that is applied to the form page, add this javascript file to index.php for cross domain support:

<script type="text/javascript" src="./templates/lightweight/iframeResizer.contentWindow.min.js"></script>

remove unnecessary js, except jQuery before ‘</html>’ in index.php:

// Remove Scripts
$doc = JFactory::getDocument();
unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-more.js']);
unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-core.js']);
unset($doc->_scripts[JURI::root(true) . '/media/system/js/core.js']);
unset($doc->_scripts[JURI::root(true) . '/media/system/js/modal.js']);
// unset($doc->_scripts[JURI::root(true) . '/media/system/js/caption.js']);
// unset($doc->_scripts[JURI::root(true) . '/media/jui/js/jquery.min.js']);
unset($doc->_scripts[JURI::root(true) . '/media/jui/js/jquery-noconflict.js']);
unset($doc->_scripts[JURI::root(true) . '/media/jui/js/bootstrap.min.js']);

Date Field IE Compatibility

This has been fixed since version 3.5.4.

Some javascript files are using “eval” which older IE browsers don’t like. Possibly anything below IE11 could be a potential problem. Debugging with IE8 was showing “syntax error” for these files.

Internet Explorer 8: JavaScript EVAL "Syntax Error"

To make these files IE friendly, it’s possible to convert them with to a compatible format. Also all instances of “const” should be changed to “var” within those files.

  • media/com_foxcontact/js/calendar.min.js
  • media/com_foxcontact/js/chosen.min.js
  • media/com_foxcontact/js/buttons.min.js

Dropdown Field Many Items

Since version 3.6.0 the sorting of dropdown field items was made easy but adding many items became very time confusing. To add a bigger list of items directly to the MySQL database with PHPMyAdmin for example.

  • Look for table “Joomla_modules”, find the right module and “edit”
  • In the params field, the format is: [{\”text\”:\”Field 1\”,\”to\”:\”\”},[{\”text\”:\”Field 2\”,\”to\”:\”\”},[{\”text\”:\”Field 3\”,\”to\”:\”\”}]
  • Here is my list of calling codes with new format.

End Notes be continued

Leave a Comment