DevFriendContactForm

DevFriendContactForm is a module extension for Joomla! CMS, it can be used if you need to add a contact form for your Joomla! website. Customization options are available such as making fields optional/required or changing the subject/body of the email that will be sent. Note though that after form submission, the information filled is sent by email but is not stored in the database.
The extension has been tested in a Joomla! 3.4.5 and 2.5.28 installations so it should work fine for any Joomla! 3.x or 2.5.x installation.
Download, see the demo.

1. How to use

Even though it is a module extension, DevFriendContactForm is meant to be used as a component, having its own dedicated page and not part of every page as other modules.
In order to achieve this, we will create an article, load the module inside the article contents, and finally assign the article to a menu item:

  • first install the module as you would do with any module extension
  • upon successful installation, search the module in the list of module extensions (spot the title devfriendcontactform)
  • open the module, two options need to be changed in order for our solution to work correctly:
    1- change the status to Published
    2- in Menu assignment, choose On all pages (or at least assign the module to the menu item that we will create below)
  • before saving the changes, we may also change the title of the module, let's do it and change the name to 'Contact form', you can choose any name you want but just remember it because we will use it thereafter
  • save the changes
  • create a new article, give it a title, and put the following contents on it:
    {loadmodule devfriendcontactform,Contact form}{emailcloak=off}
    {loadmodule parameter1,parameter2} is a special text that loads a module inside an article, parameter1 must be replaced with the module type (that is here devfriendcontactform) and parameter2 with the title of an instance of the module (here we have one instance created after module installation where we changed the title to Contact form), {emailcloak=off} is another special text that will prevent Joomla! from cloaking the email field of the form in case of a validation error
  • save the article then create a menu item in one of your menus, give it a title, select its type as a Single article, select the article that we just created above and save the menu item
  • now access the corresponding page in the front end where a contact form should be displayed as the page contents.

2. Customization

2.1. Module configuration

The module has a number of configuration options, some are related to the email, subject and message fields of the form, and some are related to the email that will be sent upon form submission, you may change their values to suit your needs but notably the Email recipient(s) (where you want the email sent to be received) must be filled.

Email required:
Whether the Email must be filled by user
default value: false

Email Reg Exp:
A regular expression pattern to test against the Email
default value: /^.+@.+\..+$/

Email max length:
Maximum characters length allowed for Email
default value: 255

Subject required:
Whether the Subject must be filled by user
default value: false

Subject Reg Exp:
A regular expression pattern to test against the Subject
default value: empty

Subject max length:
Maximum characters length allowed for Subject
default value: 500

Message required:
Whether the Message must be filled by user
default value: true

Message Reg Exp:
A regular expression pattern to test against the Message
default value: empty

Message max length:
Maximum characters length allowed for Message
default value: 10000

Email recipient(s):
The email address (or a list of email addresses separated with a comma) that will receive the email sent after form submission
default value: empty

Email subject:
The subject of the email that will be sent after form submission, note: accepts special words surrounded with {} like in email body
default value: (see in module)

Email body:
The body of the email that will be sent after form submission, words surrounded with {} will be replaced with dynamic data, for example {subject} will be replaced with the subject submitted through the form
default value: (see in module)

2.2. Labels

Text displayed inside the contact form is mostly managed using Joomla! labels, you can change this text by changing label values in the module corresponding English language file, which is located for our module in <your_joomla_installation_root>/modules/mod_devfriendcontactform/language/en-GB/en-GB.mod_devfriendcontactform.ini.
You may also add other language files for other languages if you need.

2.3. CSS

The styling of the form is done using CSS and can be changed either by modifying the module CSS file located at <your_joomla_installation_root>/modules/mod_devfriendcontactform/css/devfriendcontactform.css (it may be advised to note it somewhere that you have modified the module own code) or more properly in your template CSS file.
As an example if you have to change the submit button color to green:

form.df-contact-form input[type="submit"] {
    background-color: green;
}

put this code inside your template CSS file and it should override the corresponding rule defined in the module CSS code.

2.4. Alternative layout(s)

Like any other module, DevFriendContactForm can take advantage of Joomla! overriding feature that allow a developer to replace a module layout file by his own one, as of Joomla! 2.5 two ways are available, either by using an overriding layout or an alternative layout:

Overriding layout:
  • copy the module layout file <your_joomla_installation_root>/modules/mod_devfriendcontactform/tmpl/default.php
  • paste it to <your_joomla_installation_root>/templates/<your_template>/html/mod_devfriendcontactform/ (the folders mod_devfriendcontactform/ and html/ (if not present) need to be created)
  • change the file code as needed.
Alternative layout:
  • copy the module layout file <your_joomla_installation_root>/modules/mod_devfriendcontactform/tmpl/default.php
  • paste it to <your_joomla_installation_root>/templates/<your_template>/html/mod_devfriendcontactform/
  • change the name of the file from default.php to another name
  • change the file code as needed
  • open the module in the administration area, under Advanced options, choose our newly copied and changed layout by picking it from the list of alternative layouts
  • save the changes.

For more information check Layout Overrides in Joomla.