J DContact is an ajax contact us module where data send to admin and user without page refresh. Backend has option to customize the front-end view. There is option to set different email address for different department. This module also has option to send a copy of the mail to yourself. Captcha validation is to protect spammer.

 

Module source code for Joomla 1.6, 1.7, 2.5 and 3.x are as follows:

Create a folder called “mod_jdcontact_j1.6_j1.7_j2.5_j3.0” now in that folder place the below files and folder:

  • mod_jdcontact.xml
  • mod_jdcontact.php
  • helper.php
  • index.html
  • da-DK.mod_jdcontact.ini
  • de-DE.mod_jdcontact.ini
  • en-GB.mod_jdcontact.ini
  • fr-FR.mod_jdcontact.ini
  • it-IT.mod_jdcontact.ini
  • nl-NL.mod_jdcontact.ini
  • ru-RU.mod_jdcontact.ini
  • sv-SE.mod_jdcontact.ini
  • tmpl
    • default.php
    • index.html
    • images
      • index.html
      • input-bg.gif
      • jdcontact.png
      • loader.gif
    • lib
      • contact.css
      • index.html
      • jquery-1.4.4.js

That is the all files and folder we need to create this module. Now let’s start with mod_jdcontact.xml file.

a) mod_jdcontact.xml:

mod_jdcontact.xml is the primary file of this module in where all the definition is given including parameter too. So let's open this xml file and see what is inside of that file.

<?xml version="1.0" encoding="utf-8"?>
<extension
    type="module"
    version="1.6.0"
    client="site"
    method="upgrade">
    <name>J DContact</name>
    <author>Md. Shaon Bahadur</author>
    <creationDate>10 April 2012</creationDate>
    <copyright>Copyright (C) 2013 J Download. All rights reserved.</copyright>
    <license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
    <authorEmail>you@yourdomain</authorEmail>
    <authorUrl>www.j-download.com</authorUrl>
    <version>1.0.4</version>
    <description>
        <![CDATA[
            <table width="80%" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td>
              <table width="100%" cellpadding="5" cellspacing="5" border="0"><tr><td valign="top"><img src="/../modules/mod_jdcontact/tmpl/images/jdcontact.png" border="0" /><div style="text-align:center;font-weight:bold;padding-top:10px;">Version: 1.0.4</div></td>
              <td valign="top" style="padding-left:60px;">
                <p>J DContact is an ajax contact us module where data send to admin and user without page refresh. Backend has option to customize the front-end view. There is option to set different email address for different department. This module also has option to send a copy of the mail to yourself. Captcha validation is to protect spammer.</p>
                <p>Module has below parameter:</p>
                <p>
                    <ul>
                        <li>Wrapper BG Color</li>
                        <li>Wrapper Width</li>
                        <li>Input Field Width</li>
                        <li>Input Field Border Color</li>
                        <li>Sales Email</li>
                        <li>Support Email</li>
                        <li>Billing Email</li>
                        <li>Show Department</li>
                        <li>Show Send Copy</li>
                        <li>Show Human Test</li>
                        <li>da-DK,de-DE,en-GB,fr-FR,it-IT,nl-NL,ru-RU,sv-SE Language Translations</li>
                    </ul>
                </p>
              </td></tr></table>
            </td></tr>
            </table>
            ]]>
    </description>
    <files>
        <filename module="mod_jdcontact">mod_jdcontact.php</filename>
        <folder>tmpl</folder>
        <filename>index.html</filename>
        <filename>helper.php</filename>
        <filename>mod_jdcontact.xml</filename>
    </files>
    <languages>
        <language tag="en-GB">en-GB.mod_jdcontact.ini</language>
        <language tag="da-DK">da-DK.mod_jdcontact.ini</language>
        <language tag="de-DE">de-DE.mod_jdcontact.ini</language>
        <language tag="fr-FR">fr-FR.mod_jdcontact.ini</language>
        <language tag="it-IT">it-IT.mod_jdcontact.ini</language>
        <language tag="nl-NL">nl-NL.mod_jdcontact.ini</language>
        <language tag="ru-RU">ru-RU.mod_jdcontact.ini</language>
        <language tag="sv-SE">sv-SE.mod_jdcontact.ini</language>
    </languages>
    <help key="JHELP_EXTENSIONS_MODULE_MANAGER_LOGIN" />
    <config>
        <fields name="params">
            <fieldset name="basic">
            <field name="backgroundcolor" type="text" default="#F9F9F9" label="Wrapper BG Color" description="Please Enter Wrapper Background Color." />
            <field name="wrp_width" type="text" default="320px" label="Wrapper Width" description="Please Enter Wrapper Width." />
            <field name="inputfield_width" type="text" default="300px" label="Input Field Width" description="Please Enter Input Field Width." />
            <field name="inputfield_border" type="text" default="#CCCCCC" label="Input Field Border Color" description="Please Enter Input Field Border Color." />
            <field name="sales_address" type="text" default="" size="50" label="Sales Email" description="Please Enter Sales Address." />
            <field name="support_address" type="text" default="" size="50" label="Support Email" description="Please Enter Support Address." />
            <field name="billing_address" type="text" default="" size="50" label="Billing Email" description="Please Enter Billing Address." />
            <field name="showdepartment" type="radio" default="1" label="Show Department" description="Please Select Yes To Show Department.">
                <option value="1">Yes</option>
                <option value="0">No</option>
            </field>
            <field name="showsendcopy" type="radio" default="1" label="Show Send Copy" description="Please Select Yes To Show Send Copy.">
                <option value="1">Yes</option>
                <option value="0">No</option>
            </field>
            <field name="humantestpram" type="radio" default="1" label="Show Human Test" description="Please Select Yes To Show Human Test.">
                <option value="1">Yes</option>
                <option value="0">No</option>
            </field>

            </fieldset>
            <fieldset
                name="advanced">
                <field
                    name="layout"
                    type="modulelayout"
                    label="JFIELD_ALT_LAYOUT_LABEL"
                    description="JFIELD_ALT_MODULE_LAYOUT_DESC" />
                <field
                    name="moduleclass_sfx"
                    type="text"
                    label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
                    description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC" />
                <field
                    name="cache"
                    type="list"
                    default="0"
                    label="COM_MODULES_FIELD_CACHING_LABEL"
                    description="COM_MODULES_FIELD_CACHING_DESC">
                    <option
                        value="0">COM_MODULES_FIELD_VALUE_NOCACHING</option>
                </field>
            </fieldset>
        </fields>
    </config>
</extension>

Here you will see some basic information like name, author, creation date, copyright, license, author email, author url, version and description. Then you will see Files name, which will be copied during installation of this module. There are some language files like da-DK, de-DE, en-GB, fr-FR, it-IT, nl-NL, ru-RU and sv-SE, which will be copied to language folder during installation. Lastly there are module parameters. Which can be differing according to your need? You can edit this xml file according to your need and save it.

b) mod_jdcontact.php

Now let’s open mod_jdcontact.php file, which is the primary file of this module.

<?php

/*------------------------------------------------------------------------
# J DContact
# ------------------------------------------------------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/

defined('_JEXEC') or die;
require_once dirname(__FILE__).'/helper.php';

    modJdcontactHelper::preLoadprocess($params);
    $layout = JModuleHelper::getLayoutPath('mod_jdcontact');

    require($layout);

?>

Here we called require_once dirname (__FILE__).'/helper.php'; , which is a helper file we need during working in this module. Then we called modJdcontactHelper:: preLoadprocess($params);, which is a function in helper file. Which is basically executing our module function. Then module layout has been called. So let’s open helper file and see what is inside of that file.

c) helper.php

Helper file called the main function in this module, which we used to send the mail and verify necessary parameters. Let’s see what is inside of helper.php file.

<?php

/*------------------------------------------------------------------------
# J DContact
# ------------------------------------------------------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/

defined('_JEXEC') or die;

class modJdcontactHelper
{
    static function preLoadprocess(&$params)
    {
         if($_POST){
            $javascript_enabled         =       trim($_REQUEST['browser_check']);
            $department                 =       trim($_REQUEST['dept']);
            $name                       =       trim($_REQUEST['name']);
            $email                      =       trim($_REQUEST['email']);
            $phno                       =       trim($_REQUEST['phno']);
            $subject                    =       trim($_REQUEST['subject']);
            $msg                        =       trim($_REQUEST['msg']);
            $sales_address              =       $params->get( 'sales_address', '' );
            $support_address            =       $params->get( 'support_address', '' );
            $billing_address            =       $params->get( 'billing_address', '' );
            $selfcopy                   =       isset($_REQUEST['selfcopy']) ? $_REQUEST['selfcopy'] : "";
            $humantest                  =       $_REQUEST['human_test'];
            $sum_test                   =       $_REQUEST['sum_test'];
            $humantestpram              =        $params->get( 'humantestpram', '1' );
            $headers  = 'MIME-Version: 1.0rn';
            $headers .= 'Content-type: text/html; charset=utf-8'."\r\n";
            $headers .= 'From: '.$name.' <'.$email.'>'."\r\n";


            $message = "Contact name: $name\nContact Email: $email\nContact Phone: $phno\n\nMessage: $msg";

            if ( $department == "sales")        $to     =   $sales_address;
            elseif ( $department == "support")  $to     =   $support_address;
            elseif ( $department == "billing")  $to     =   $billing_address;
            else                                $to     =   $sales_address;

            if ( $name == "" )
            {
                $result = "".JText::_('MOD_JDCONTACT_VLDNAME')."";
            }
            elseif (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email))
            {
                $result = "".JText::_('MOD_JDCONTACT_VALIDEMAIL')."";
            }
            else if($phno=="")
            {
                $result = "".JText::_('MOD_JDCONTACT_PHONENUMB')."";
            }
            elseif ( $subject == "" )
            {
                $result = "".JText::_('MOD_JDCONTACT_MSGSUBJECT')."";
            }
            elseif ( strlen($msg) < 10 )
            {
                $result = "".JText::_('MOD_JDCONTACT_MORETENWRD')."";
            }
            else if($humantestpram=='1' && $humantest!=$sum_test){
                $result = "".JText::_('MOD_JDCONTACT_CORRECTNUM')."";
            }
            else
            {
                if(@mail($to, $subject, $message, $headers)){
                    $sucs=1;
                }
                if( $selfcopy == "yes" ){
                    if(@mail($email, $subject, $message, $headers)){
                        $sucs=1;
                    }
                }
                if($sucs==1){
                    $result = "".JText::_('MOD_JDCONTACT_SUCCESSMSG')."";
                }
                else{
                    $result = "".JText::_('MOD_JDCONTACT_MAILSERVPROB')."";
                }
            }

            if($javascript_enabled == "true") {
                echo $result;
                die();
            }
        }
    }
}

?>

Helper file has a class called modJdcontactHelper and a function called static function preLoadprocess(&$params). This function basically send our mail after verification of necessary parameters. In helper file there is some verification of parameter we passed in module form. Human test are also verified from here.

Then we have tmpl folder. This is basically our view part. This folder content all the files we need to keep for view. Let’s see each of the files one by one.

d) index.html

We have 4 index.html files in different folder like lib, images and tmpl. This index.html file is just blank file with few code liketo protect user not being see folder and file structure. Then we have couple of css, js and images file. Css files are used to organize the view of the module. Then we have jquery-1.4.4.js , which is jquery library. Then we have a php file called default.php, which is the view file of our module. Let’s see what is inside of that file.

e) default.php

Default php file load all the info and show at front-end of the module. Source code of the file are as follows:

<?php

/*------------------------------------------------------------------------
# J DContact
# ------------------------------------------------------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
-------------------------------------------------------------------------*/

defined('_JEXEC') or die('Restricted access');

    $showdepartment           =        $params->get( 'showdepartment', '1' );
    $showsendcopy            =        $params->get( 'showsendcopy', '1' );
    $humantestpram           =        $params->get( 'humantestpram', '1' );
    $sales_address           =        $params->get( 'sales_address', '' );
    $support_address         =        $params->get( 'support_address', '' );
    $billing_address         =        $params->get( 'billing_address', '' );
    $backgroundcolor         =        $params->get( 'backgroundcolor', '#FFEFD5' );
    $wrp_width               =        $params->get( 'wrp_width', '320px' );
    $inputfield_width        =        $params->get( 'inputfield_width', '300px' );
    $inputfield_border       =        $params->get( 'inputfield_border', '#CCCCCC' );
    $result                  =        '';
    $name                    =        '';
    $email                   =        '';
    $phno                    =        '';
    $subject                 =        '';
    $msg                     =        '';
    $selfcopy                =        '';
    $sucs                    =        '';
    $varone                  =        rand(5, 15);
    $vartwo                  =        rand(5, 15);
    $sum_rand                =        $varone+$vartwo;

?>
    <link rel="stylesheet" href="/modules/mod_jdcontact/tmpl/lib/contact.css" media="screen" />
    <script src="/modules/mod_jdcontact/tmpl/lib/jquery-1.4.4.js"></script>
    <div id="contactform" style="background: <?php echo $backgroundcolor; ?>;width: <?php echo $wrp_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;">
        <form name="contactform" id="form" method="post" action="<?php $_SERVER['PHP_SELF']?>">
            <?php if($showdepartment=='1') : ?>
              <label><?php echo JText::_('MOD_JDCONTACT_DEPARTMENT'); ?></label><br />
              <select style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" name="dept" class="text">
                  <option value="sales"><?php echo JText::_('MOD_JDCONTACT_SALES'); ?></option>
                  <option value="support"><?php echo JText::_('MOD_JDCONTACT_SUPPORT'); ?></option>
                  <option value="billing"><?php echo JText::_('MOD_JDCONTACT_BILLING'); ?></option>
              </select><br />
            <?php endif; ?>
            <label class="name"><?php echo JText::_('MOD_JDCONTACT_NAME'); ?><br /><input style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" class="text" name="name" type="text" value="<?php echo $name; ?>" /><br /></label>
            <label class="email"><?php echo JText::_('MOD_JDCONTACT_EMAIL'); ?><br /><input style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" class="text" name="email" type="text" value="<?php echo $email; ?>" /><br /></label>
            <label class="phno"><?php echo JText::_('MOD_JDCONTACT_TELEPHONE'); ?><br /><input style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" class="text" name="phno" type="text" value="<?php echo $phno; ?>" /><br /></label>
            <label class="subject"><?php echo JText::_('MOD_JDCONTACT_SUBJECT'); ?><br /><input style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" class="text" name="subject" type="text" value="<?php echo $subject; ?>" /><br /></label>
            <label class="msg"><?php echo JText::_('MOD_JDCONTACT_MESSAGE'); ?><br /><textarea style="width: <?php echo $inputfield_width; ?>;border:1px solid <?php echo $inputfield_border; ?>;" class="text" name="msg"><?php echo $msg; ?></textarea><br /></label>
            <?php if($showsendcopy=='1') : ?>
                <input type="checkbox" name="selfcopy" <?php if($selfcopy == "yes") echo "checked='checked'"; ?> value="yes" />
                <label><?php echo JText::_('MOD_JDCONTACT_SELFCOPY'); ?></label><br /><br />
            <?php endif; ?>
            <?php if($humantestpram=='1') : ?>
            <div style="border-bottom: 1px solid <?php echo $inputfield_border; ?>;border-top: 1px solid <?php echo $inputfield_border; ?>;padding-bottom: 2px;padding-top: 10px;">
                <label for='message'><?php echo JText::_('MOD_JDCONTACT_HUMANTEST'); ?></label>
                <?php echo '<b>'.$varone.'+'.$vartwo.'=</b>'; ?>
                <input id="human_test" name="human_test" size="3" type="text" class="text" style="border:1px solid <?php echo $inputfield_border; ?>;"><br>
                <input type="hidden" id="sum_test" name="sum_test" value="<?php echo $sum_rand; ?>" />
            </div>
            <?php endif; ?>
            <br />
            <input type="hidden" name="browser_check" value="false" />
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td width="20%" valign="top">
                        <input type="submit" name="submit" value="<?php echo JText::_('MOD_JDCONTACT_SUBMIT'); ?>" id="submit" />
                    </td>
                    <td width="80%" valign="top" align="center">
                        <div id="result"><?php if($result) echo "<div class='message'>".$result."</div>"; ?></div>
                    </td>
                </tr>
            </table>
        </form>

        <script type="text/javascript">
        document.contactform.browser_check.value = "true";
        $("#submit").click(function(){
        $('#result').html('<img src="/modules/mod_jdcontact/tmpl/images/loader.gif" class="loading-img" alt="loader image">').fadeIn();
        var input_data = $('#form').serialize();
                $.ajax({
                   type: "POST",
                   url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
                   data: input_data,
                   success: function(msg){
                       $('.loading-img').remove(); //Removing the loader image because the validation is finished
                       $('<div class="message">').html(msg).appendTo('div#result').hide().fadeIn('slow'); //Appending the output of the php validation in the html div

                        if(msg=='<?php echo JText::_("MOD_JDCONTACT_SUCCESSMSG"); ?>'){
                          $('#form').each (function(){
                            this.reset();
                          });
                       }
                   }
                });
            return false;
        });
        </script>
    </div>

At the beginning we get the module parameter like showdepartment, showsendcopy, humantestpram, sales_address, support_address, billing_address, backgroundcolor, wrp_width, inputfield_width and inputfield_border. This will be used to make the view. Then we called css file in external and inline. Inline css used that parameter to make the view. Then the main part comes up, HTML part which is view part of our module. This will show the contact module form according to parameter set in module.

Then we called some ajax code to make the module work without page refresh. It is basically some javascript code with execute based on jquery library. Here we passed the form element through ajax method, so that php can get the parameter and send mail. Ajax file send those parameters to static function preLoadprocess(&$params) function in helper file. Once ajax is successfully executed then it shows success message in the module consol.

<script type="text/javascript">
        document.contactform.browser_check.value = "true";
        $("#submit").click(function(){
        $('#result').html('<img src="/modules/mod_jdcontact/tmpl/images/loader.gif" class="loading-img" alt="loader image">').fadeIn();
        var input_data = $('#form').serialize();
                $.ajax({
                   type: "POST",
                   url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
                   data: input_data,
                   success: function(msg){
                       $('.loading-img').remove(); //Removing the loader image because the validation is finished
                       $('<div class="message">').html(msg).appendTo('div#result').hide().fadeIn('slow'); //Appending the output of the php validation in the html div

                        if(msg=='<?php echo JText::_("MOD_JDCONTACT_SUCCESSMSG"); ?>'){
                          $('#form').each (function(){
                            this.reset();
                          });
                       }
                   }
                });
            return false;
        });
        </script>

f) Language Files

We have used couple of language file in da-DK, de-DE, en-GB, fr-FR, it-IT, nl-NL, ru-RU and sv-SE language. Those are different language for different platform. If you look at da-DK, de-DE, en-GB, fr-FR, it-IT, nl-NL, ru-RU and sv-SE and default.php file you will see some language call like as follows:

  • MOD_JDCONTACT_VLDNAME
  • MOD_JDCONTACT_VALIDEMAIL
  • MOD_JDCONTACT_MSGSUBJECT
  • MOD_JDCONTACT_SUBMIT

Etc file. Now if you open one language file say en-GB.mod_jdcontact.ini, then you will see below code:

; J DContact
; ------------------------------------------------------------------------
; author                Md. Shaon Bahadur
; copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
; @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
; Websites:             http://www.j-download.com
; Technical Support:    http://www.j-download.com/request-for-quotation.html
;-------------------------------------------------------------------------*/

MOD_JDCONTACT_NAME="Name"
MOD_JDCONTACT_DEPARTMENT="Department"
MOD_JDCONTACT_EMAIL="Email"
MOD_JDCONTACT_TELEPHONE="Telephone"
MOD_JDCONTACT_SUBJECT="Subject"
MOD_JDCONTACT_MESSAGE="Message"
MOD_JDCONTACT_SELFCOPY="Send a copy to yourself?"
MOD_JDCONTACT_HUMANTEST="Prove You Are Human :"
MOD_JDCONTACT_SALES="Sales"
MOD_JDCONTACT_SUPPORT="Support"
MOD_JDCONTACT_BILLING="Billing"
MOD_JDCONTACT_SUBMIT="Submit"
MOD_JDCONTACT_MAILSERVPROB="There is some problem with mail server!"
MOD_JDCONTACT_SUCCESSMSG="Your Mail Has Been Sent Successfully!"
MOD_JDCONTACT_CORRECTNUM="Please Enter Correct Number, Try Again!"
MOD_JDCONTACT_MORETENWRD="Please Write More Than 10 Characters In Message"
MOD_JDCONTACT_MSGSUBJECT="Please Enter Subject."
MOD_JDCONTACT_PHONENUMB="Please Enter Phone Number."
MOD_JDCONTACT_VALIDEMAIL="Please Enter A Valid Email Address."
MOD_JDCONTACT_VLDNAME="Please Enter Name."

Here at left side is language code name and right side is value of that code. Same for other language files too. Just change those values according to others languages.

These are the pretty much about J Dcontact Module. You can add or edit css, js or php file according to your need.

Download Source Code for Joomla 1.6, 1.7, 2.5 and 3.x

Download Source Code for Joomla 1.5

Add comment


Security code
Refresh