Module Ajax Popup Contact Form Documentation version 2.x

WordPress plugin

If you would not find solution then read documentation for version 3.x which have some common answers.

  1. Installation, configuration and update

    Each configuration field of module has tooltip, shown while hovering mouse over field label. Read those tips to get more information.

    Tooltip of module ajax contact form

  2. How to check module ID

    When you are editing module configuration you can find ID in URL, e.g.

    You can find module ID also in Module Manager list in last column - preview.

  3. Place toggle button of Lightbox (Modal) layout or static form in article content

    Enable Joomla! plugin content - Load Modules and move it to the last position of all content plugins. Insert in your Article following syntax
    (Do not copy this code! Write it yourself to avoid copying unnecessary invisible HTML code):

    {loadposition contact}

    Remember to change formatting of this line from Paragraph to DIV. Otherwise it would not validate and would not work in Internet Explorer.

    Go to module configuration and publish it in position contact and assign to all menu items.
  4. Contact form as regular module

    Published module in standard position e.g. left and select one of Alternative layouts: Static

    Module version older than 1.5
    Select stylesheet: static or static-inline and Alternative Layout: static.
  5. Contact form in Lightbox window (Modal)

    Publish module in standard position or better in debug position and select one of Alternative Layouts: Lightbox (Modal) to display contact form in Lightbox window.

    If you want to close Lightbox window after sending email then add following code in Custom JavaScript field in Tracking tab of module configuration. You can change also delay of closing in milliseconds.

    setTimeout("SqueezeBox.close()", 1000);

    If Lightbox Window moves whole site while you are opening it then add following code to Joomla template to keep scrollbar be visible html{overflow-y:scroll}

    Module version older than 1.5
    Select stylesheet: modal and Alternative Layout: modal.

    If you are using Joomla 1.6 then you need to upgrade MooTools to version at least 1.3.2 which you can download here.

    If you are using Joomla 1.5 then you need to edit file: /media/system/js/modal.js and around line 259 comment one line as in following part of code. It would prevent from closing Ligtbox window when pressing X key.

    onkeypress: function(e) { 
    	switch (e.key) { 
    		case 'esc': 
    		//case 'x': //comment or remove this line 
  6. Theme - CSS files structure

    Each layout of module has at least two CSS files - styles with colors and general file with form layout and structure. There can be also loaded file with uploader and override files for RTL. There are also special general files for Internet Explorer.

    In Joomla! 2.5 and newer since module version 2.2.1 CSS files are located in:
    In older version of module and Joomla! 1.5 files are located in:

    default/*.css styles with colors for Slide in layout
    modal/*.css styes with colors for Lightbox layout
    static/*.css styles with colors for Static layout
    general/default-*.css Slide in layouts, does not have colors, only structure and positions
    general/modal-*.css Lightbox layouts, does not have colors, only structure and positions
    general/static-*.css Static layouts, does not have colors, only structure and positions
    general/ie*.css styles for Internet Explorer
    general/rtl/*.css files with layouts override for RTL
    debug.css styles for debug console
    uploader.css styles for upload, does not have colors, only structure, positions
    uploader-rtl.css upload styles override for RTL

    If you want to change background color of Slide in layout, font size or other styles of contact form and you do not want to edit CSS files, then you can specify some parameters in configuration fields in Theme tab.

    Remember that not all custom styles parameters are working for all layouts!

  7. Create own CSS styles

    To create new CSS styles for selected layout of module you have to copy and rename existing file with styles and replace all CSS classes in this file which the name of original file.

    For example to create new style for layout Slide in from page edge, copy file: media/mod_pwebcontact/css/default/dark.css and rename to: media/mod_pwebcontact/css/default/example.css (location depends on module and Joomla! version). Then edit this file and replace all CSS classes ".dark" to ".example". Now when you will reload module configuration you will see new style for Slide in layout.

  8. Rounded corners in Internet Explorer

    In module version 2.3.0 CSS3 PIE was implemented to support rounded corners in Internet Explorer 7 and 8. There are no guarantee that it will work. It depends on you Joomla! template and other extensions. CSS3 PIE would work by default only if you have installed Joomla! in root directory of your domain.

    If you have site in sub-directory then you have two edit CSS files for IE located in: media/mod_pwebcontact/css/general/ie*.css (location depends on module and Joomla! version) and correct absolute path to file

    If you have installed Admin Tools Professional then you have to set in .htaccess Maker to Allow direct access to these files: media/mod_pwebcontact/css/ (location depends on module and Joomla! version).

  9. Background image

    In Lightbox layout there is option in Theme tab of module configuration to change background image.
    If you want to select bigger file then you have to enlarge form padding in CSS files located in: media/mod_pwebcontact/css/general/modal-xxxx.css (location depends on module and Joomla! version)

    form.pwebcontact_form.modal.modal-xxxx {
    	min-height: 100%;
    	padding: 0 10px 0 200px !important; /* 200px width for background image */

    or you can add padding-left: 200px !important; in file: media/mod_pwebcontact/css/modal/xxxx.css
    or you can remove image by deleting background declaration

    form.pwebcontact_form.modal.xxxx {
    	background: url('../../images/contact.jpg') left bottom no-repeat;
    	color: #333;
  10. Vertical toggle button

    This feature is available since module version 2.3.3. Vertical toggle button can be set for Layouts with button at left or right page edge.

    • In Theme tab set Vertical toggle button: Yes.
    • Set font color (e.g. #fff).
    • Set toggle button width = 0 and height (e.g. 120).
    • Select rotation of button text.
    • To change default text go to basic tab and set Custom toggle button name.
    • After saving configuration go to front-end site with contact form and refresh it.
    • If text of toggle button is cropped then enlarge height of toggle button.
    • To create new image with text set Vertical toggle button: Recreate image.
    • If you have changed configuration of toggle button and image with text did not change then refresh page one more time or clear browser cache.
    • When you have finished creating image with text then set Vertical toggle button: Yes and you can also change font color if you want to have different color of font in the toggle button and in the form.
    • You can also create own image and insert into media/mod_pwebcontact/images/toggler/ID.png. For RTL image will have following name: ID-rtl.png where ID is an ID of module (how to find ID).
    • To change font you have to replace file: media/mod_pwebcontact/images/font.ttf with own TTF font.

    If you get following error then you need to enable this function in PHP
    Fatal error: Call to undefined function imagettftext()

    Older module versions
    Edit CSS to have vertical toggle button with Slide in layout. First you have to create PNG image width of 20px with transparent background and vertical text for you toggle button. Upload image to directory: media/mod_pwebcontact/images (location depends on module and Joomla! version) and paste following code at the end of file: media/mod_pwebcontact/css/default/xxxx.css (depends on selected style in Theme tab). Remeber to change ID of module (how to find ID), path to image and height of toggle button.

    #pwebcontactID.pwebcontact.default.default-left .pwebcontact_container {
        padding-left: 60px;
    #pwebcontactID.pwebcontact.default.default-right .pwebcontact_container {
        padding-right: 60px;
    #pwebcontactID_toggler.default.default-right {
        background-image: url(../../images/tab_with_text.png);
        background-position: 10px 40px;
        background-repeat: no-repeat;
        height: 220px;
        width: 0;
        color: transparent;
        text-shadow: none;
    #pwebcontactID_toggler.default.default-left:hover {
        background-position: 15px 40px;
  11. Move toggle button at right or top edge

    Position of toggle button is handled by CSS, so you have to select desire Alternative Layout in module configuration in Theme tab. In older version of module you have to select also option: Style sheet.

  12. Show list of recipients, select recipient with link

    You can specify multiple recipients in Mail to list field and let User to decide with whom he want to contact. Each recipient has to be in new line. Email and name of recipient has to be separated with pipe character |. After last recipient do not add line break.

    Show list of recipients configuration

    In module version older than 1.5 you have to use field Email to and also check Show mail to list: Yes.

    You can also open form by link with selected recipient. In argument of function you have to specify index of recipient. Indexing starts from one.

    Since module version 2.0.0 use following code, where ID has to be replaced with an ID of module (how to find ID). In Advanced Tab of module configuration you will find code snippet.
    <a href="javascript:pwebContactID.toggleForm(2)">Contact with Office</a>

    In module versions 1.5.5 - 1.6.2 use following code:

    <a href="javascript:pwebContactToggleForm(2)">Contact with Office</a> 
    <a href="javascript:pwebContactPopupForm(2)">Contact with Office</a> 
    <a href="javascript:pwebContactPopupForm(null,2)">Contact with Office (Joomla 1.5)</a>
  13. Call me back

    Contact form can be configured as simple call me back ajax form. In Basic tab of module configuration show fields name and phone and hide email and message, set phone as required. In Pre-text field you can add some additional information for customer.

    Call me back configuration preview

  14. Custom fields

    You can add 9 extra fields since module version 1.6.0. Just select its type and decide weather it should be required. If you chose select list, radio or checkboxes group, then fill in field values and separate them with pipe character |.

  15. Radio or checkbox options inline or in columns

    Each option of radio or checkbox group has individual class named with following pattern:


    Modify following code to suite your needs and replace ID with an ID of module (how to find ID), and paste it at the end of CSS file with styles for selected layout, e.g. media/mod_pwebcontact/css/default/*.css (location depends on layout and version of module and Joomla!)

    Example how to set two radio options in one line for 4th custom field:

    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_4_lbl0, 
    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_4_lbl1 
    { float: left; margin-right: 10px; }

    Example how to set four checkbox options in two columns for 5th custom field:

    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_5_lbl0, 
    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_5_lbl1, 
    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_5_lbl2, 
    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_5_lbl3 
    { float: left; width: 50%; }

    In module version 1.4.0 - 1.6.2 in above code remove ID.

  16. Change width of labels or fields

    Edit module CSS file with layout located in: media/mod_pwebcontact/css/general/*.css (location depends on module and Joomla! version) and change width at all lines with comments. Those comments describe how to calculate width.

  17. Contact form appears under other layers

    Edit module CSS file with layout located in: media/mod_pwebcontact/css/general/default-xxxx.css (location depends on module and Joomla! version) and change in first declaration z-index property. You have to test how big it should be in your case.

    .pwebcontact.default.default-xxxx {
        position: fixed;
        left: 0;
        top: 200px;
        z-index: 10000;

    You have to do also next tip if you want to use calendar field.

  18. Calendar date picker displays under contact form

    By default calendar date picker has set z-index style property to 100. If you have moved contact form on higher level, e.g.: 10000, then you have to move also date picker one level higher: 10001. Paste following code at the end of module CSS file with layout located in: media/mod_pwebcontact/css/general/default-xxxx.css (location depends on module and Joomla! version):

    body div.calendar { z-index: 10001; }
  19. Open contact form with own link or image

    The most important thing is to assign module to all menu items and publish it in position which your template has. View page source in your browser and try to find string: mod_pwebcontact. If there will be no such string then you did not publish module correct. Module has to be loaded on page where you want to open it - otherwise it will be impossible to open it.

    Contact form can be opened with own link, image or other HTML element by applying to it class or using JavaScript. See examples in Advanced Tab of module configuration or use following code, where ID has to be replaced with an ID of module (how to find ID). You should not use example with JavaScript code if you want to place it in editor because it will be removed after saving.

    <a href="#" class="pwebcontactID_toggler">Contact with us</a>
    <a href="javascript:pwebContactID.toggleForm()">Contact with us</a>
    <img src="/path/image.png" class="pwebcontactID_toggler" alt="" />

    In module version 1.2.0 - 1.6.2 use following code:

    <a href="#" class="pwebcontact_toggler">Open form</a>
    <a href="javascript:pwebContactToggleForm()">Open Slide in form</a> 
    <a href="javascript:pwebContactPopupForm()">Open Lightbox form</a>
  20. Open contact form with menu item

    The most important thing is to assign module to all menu items and publish it in position which your template has. In module configuration select layout: Lighbox - button at left page edge, in Basic tab select: Show toggle button: NO.

    View page source in your browser and try to find string: mod_pwebcontact. If there will be no such string then you did not publish module correct. Module has to be loaded on page where you want to open it - otherwise it will be impossible to open it.

    Create menu item type of: External URL and as link use following code, where ID has to be replaced with an ID of module (how to find ID), configuration preview:

    In module version 1.2.0 - 1.6.2 use following code for Slide in and Lightbox layout:
  21. Multiple instances

    Since module version 2.0 you can load multiple modules with contact form at one page. You have to create new module instance in Extensions > Module Manager.

    In module version 1.x only one module instance can be assign to one menu item. You can not for example publish module at left page edge and also as static form in article content at the same time. But you can assign different module instances to different menu items. Module use static ID to manipulate form, so there must be only one instance on one menu item!

  22. Tracking

    If you want to track all sent emails from contact form in your Google Analytics, just enable tracker and decide weather you are using traditional or asynchronous code in some other module or plugin or just pasted code in template.

    If you do not have any tracker code so far, then include Google Analytics script within this module. Remember to fill in Property ID, e.g. UA-12345678-1.

    You have to also set Tracker page view (eg.: /email-sent) or Tracker event (eg.: 'Contact', 'E-mail sent').
    Configuration preview

    If you want to track your Google AdWords campaign, then paste image URL as you can find in following example code:

    <img height="1" width="1" alt="" src=""/>

    If you want to track Microsoft adCenter campaign, then paste URL of iframe.

    Remeber to replace in URL all encoded &amp; with &

    You can also add some extra code for tracking successfully sent messages. It can be your own Google Analytics code or any other tracking script. Remember to add only JavaScript code. No HTML tags are allowed. If you want to load some other library to track, then it should be made by some other module.

  23. Page redirect

    In Tracking Tab you will find options to redirect form to a menu item or URL after email has been successfully sent. You can also set delay that user could see success message before redirect. In older versions of module add Custom tracking script in Tracking section:

    setTimeout("document.location='/success-page'", 500);
  24. Email templates

    To change email template edit files in directory: media/mod_pwebcontact/email_tmpl/ or: modules/mod_pwebcontact/email_tmpl/

    Template fileE-mail formatRecipient
    admin_html.php HTML Selected in module configuration
    admin_text.php Text Selected in module configuration
    user_html.php HTML Person who fills in form
    user_text.php Text Person who fills in form

    It is recommended to know the basics of PHP, to edit those files. You can add there footer or any other text.

    Example of advanced HTML template:

    $body = $fields['name']['field'] .'<br/>' 
    . $fields['email']['label'] .': <a href="mailto:'
    . $fields['email']['value'] .'">'
    . $fields['email']['value'] .'</a><br/>' 
    . $fields['phone']['field'] .'<br/>' 
    . ( $fields[1]['value'] ? $fields[1]['field'] .'<br/>' : '' ) 
    . ( $fields[2]['value'] ? $fields[2]['field'] .'<br/>' : '' ) 
    . ( $fields[3]['value'] ? $fields[3]['field'] .'<br/>' : '' ) 
    . ( $fields[4]['value'] ? $fields[4]['field'] .'<br/>' : '' ) 
    . ( $fields[5]['value'] ? $fields[5]['field'] .'<br/>' : '' ) 
    . '<br/>' . $fields['message']['field'] 
    . '<br/>---<br/>' 
    . 'Regards,<br/>' 
    . ' Perfect-Web Team' ;
  25. Enable RTL

    Contact form support RTL languages. If your site is only available in RTL language then you should set in Theme tab of module configuration Enable RTL: Yes. If you have site in many languages then leave Enable RTL: Auto. You have to install RTL Joomla! core translation before installing this module. Otherwise you will need to reinstall module.

    In module version 1.4.3 to enable RTL languages set YES and also select layout which ends with -rtl.

  26. Captcha

    Contact form does not require any captcha system! It has implemented Joomla! default flood protection and special JavaScript protection which allows to submit form only when JavaScript is enabled in the browser. Spam bot has disabled JavaScript and when it submits contact form it would only reload site to home page and no email will be sent.

  27. Upload

    Upload feature was implemented based on Fine Uploader (valums file-uploader).

    Uploaded files are stored in directory: media/mod_pwebcontact/upload/ID/ where ID is an ID of module (how to find ID). If your server allows to list directory content then you should create blank index.html file inside upload directory to prevent accessing it. Location can not be changed.

    If upload ends with error then enable debug mode in Advanced tab of module configuration and try again to send an email. You should see more errors.

  28. VirtueMart

    If contact form does not work on VirtueMart 1.x product page then try one of following two options.

    VirteMart 1.x with MooTools 1.12

    • Update Joomla! to version 1.5.15 or newer to have MooTools 1.12.
    • Edit file on your server: administrator/components/com_virtuemart/classes/htmlTools.class.php
      Around line 794 in: function loadMooTools( $version='' ) { ... }
      replace: $vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/mootools/'.$version );
      with: JHTML::_('behavior.mootools');
    • Disable Joomla! system plugin Mootools Upgrade if you have it.

    VirteMart 1.x with MooTools 1.2.5
    If you have Joomla! 1.5.23+ and VirtueMart 1.1.8+ then do two last points.
    If you have Joomla! older than 1.5.23 or VirtueMart older than 1.1.8 then you have to update it
    or correct current installation with following instruction.

    • Update Joomla! to version 1.5.23 or newer or install only plugin Mootools Upgrade (from Joomla! 1.5.23) to have MooTools 1.2.5 (MooTools 1.2.4 in Joomla! 1.5.19 - 1.5.22 would not work).
    • Download VirtueMart 1.1.9 and unpack.
    • Copy file:
      to directory on your server: components/com_virtuemart/js/mootools/
    • Copy directory:
      to directory on your server: components/com_virtuemart/js/
      Edit file: components/com_virtuemart/js/slimbox-1.71a/js/slimbox.js
      and replace its content with file: slimbox-1.72.js
    • Edit file:,
      copy code from line 787 to 809: function loadMooTools( $version='' ) { ... },
      copy code from line 817 to 837: function loadSlimBox( ) { ... },
      and replace it in file on your server: administrator/components/com_virtuemart/classes/htmlTools.class.php
      If you have Joomla! older than 1.5.19 and you can not update it then change in copied code version dev level to be equal to your current Joomla! version: $jversion->DEV_LEVEL >= 19
    • Enable Joomla! System plugin Mootools Upgrade.
    • Disable Content plugin VirtueMart Product Snapshot if you are not inserting products into articles.

    VirtueMart 2.x
    If you have VirtueMart 2.0.0 then you have to update it to any newer version because it is using jQuery in a way that breaks Joomla MooTools.
    In Joomla! 1.5 you might need also to disable jQuery:
    VirteMart Configuration > Templates > Activate Css Styles & Javascripts > Using the VirtueMart jQuery: NO
    and install advanced jQuery plugin.

  29. Contact form is broken in Internet Explorer

    Internet Explorer with Joomla! 1.7.0
    Apply Joomla! 1.7.0 Validation patch to use module with Joomla! 1.7.0. This issue was solved in Joomla! 1.7.1.

    If your site is not working even in Internet Explorer 9 then check if you are loading jQuery from remote location, e.g.: // Internet Explorer is blocking remote JavaScript files and you have to use local copy of jQuery stored on your server (read more on Microsoft site).

    Validate your site with: W3C Markup Validation for and correct all HTML errors. If you are using Joomla! content plugin Load Module Position to display Contact Form in Article then check if syntax {loadposition ...} is not inserted in Paragraph and change formatting to DIV. Contact form use CSS 3.

    Contact form in Internet Explorer 7Fields in contact form are partly invisible as on image on the right.
    It means that in your Joomla! template style sheet is globally set text-align: center;
    It can be set in BODY tag or in another. You have to remove this declaration
    or add to module styles adequate for your layout, eg.:

    form.pwebcontact_form.default.xxxx { text-align: left; }
  30. Contact form is not showing

    Check if you have published module in position which your template has.

    Check if you have assign module to all menu items. If not then do this at least for test.
    View page source in your browser and try to find string: mod_pwebcontact. If there will be no such string then one of previous tip is still not done.

    Check if you have not enabled integrations in module configuration and set to show contact form only on pages with integrated extension.

    If you have Joomla! 1.5 then check if you have loaded MooTools 1.12 (since Joomla 1.5.15) or MooTools 1.2.5 (since Joomla 1.5.23 with enabled System Plugin - Mootools Upgrade). With other versions of MooTools contact form might not work.

    Try to unpublished other modules using JavaScript to find which one is breaking Joomla MooTools Framework. Usually it appears when you have published module which use one of frameworks listed below.

    To check if there is any script running jQuery, view page source in your browser and try to find string: jquery. If there is such string then try to find jQuery.noConflict(). If there is not such string then you have to add this code (read more how to use no conflict mode of jQuery).

    Another reason can be plugin or template which compress and merge JavaScript files and puts them after JavaScript declaration hard coded in document header. Script from this module has to be before that declarations. Move all compressed files at the beginning or exclude this module from compression.

    Check also if your template removes Joomla! MooTools and puts own script at the end of document header. To do so, disable debug mode in Joomla! Global Configuration and view page source in your browser and try to find one of following strings:
        /media/system/js/mootools-core.js - Joomla! 1.6 and newer,
        /media/system/js/mootools.js - Joomla! 1.5,
        /plugins/system/mtupgrade/mootools.js - Joomla! 1.5 with enabled plugin System - Mootools Upgrade.
    If you would not find one of them, then look for:
    If you would find such string, then you have to contact with your template developer to disable this feature, because it is breaking Joomla! Validation script.

  31. Site breaks after publishing contact form

    Check if you have installed any system plugin which compress, minify and merge JavaScript files, e.g. RokGZipper or you have template which has in its configuration section for compressing JavaScript files. If yes and you are using Joomla! 1.5 then go to this configuration and exclude following file from being minified: media/system/js/validate.js. You can also exclude whole module mod_pwebcontact from being cached.

  32. Email is not being sent - request error 500

    If contact form returns Request error 500 or if following URL on your site:
    does not return alpha-numeric string but also 500 Internal server error then try to change permission to 0755 for directory: /modules/mod_pwebcontact and for file: /modules/mod_pwebcontact/ajax.php

    If previous URL works but contact form still returns Request error 500 then enable Debug in Advanced tab of module configuration and displaying of PHP errors in PHP settings or in .htaccess file and also in Joomla! Global Configuration Error Reporting: Maximum. Try to send email again and you should see some PHP errors.

    If previous URL does not work and changing of permissions did not help then since module version 2.0 you can apply patch by enabling option Correct request error 500 in Advanced tab in module configuration or if you have older version you have to contact with your hosting provider and ask him:

       Please change configuration of my hosting service that I could call PHP scripts directly from sub-directories, eg.:
       Now it returns 500 Internal server error while it should be just blank screen.

    If administrator would not help you then contact with us for alternative solution and consider changing hosting service.

  33. Email is not being sent - message: Email already sent, debug: Invalid token, JoomlArt template, JotCache

    If you are using JotCache component then exclude module position in which contact form has been published from being cached. Remember to specify style for exclude. For debug position syle usually should be: none. Read JotCache documentation.

    If you are using JoomlArt template with T3 Framework, then exclude module from being cached in template configuration by setting Cache Exclude: module=mod_pwebcontact

    JA T3 Framework cache exclude

  34. Email is not being sent - other errors

    Upgrade Joomla! to latest version (download page).

    PHP safe_mode=on (Go to: Site > System Information > PHP Settings). There is a bug in Joomla! 2.5.6 phpMailer class which will not work if safe mode in PHP is ON. Read more on Joomla Forum.

    If emails are not being sent then enable debug mode in Advanced tab of module configuration and try again to send an email. You should see more errors.

    If you see following error in Joomla! 1.5: fatal error: Call to a member function enqueueMessage() on a non-object in /libraries/joomla/error/error.php on line 480,
    then you have incorrect email settings in Joomla! Global Configuration.

    If you see following error in Joomla! 2.5: fatal error: Call to undefined method JSession::checkToken() in .../modules/mod_pwebcontact/helpers/helper.php on line XXX,
    then you have to update Joomla! to 2.5.4 or newer.

    Check if you have configured Mail from field in Joomla! Global Configuration. On some servers PHP Mail function is not working. You can try to use SMTP mode for sending emails.

  35. JavaScript Frameworks which overrides and breaks Joomla! MooTools

    If your template or any other extension use on of following JavaScript library, then Joomla! MooTools might not work. Module PWeb Ajax Contact Form needs MooTools to work properly.