Module Ajax Popup Contact Form Documentation

Frequently asked questions:

1. Installation
2. Module position
3. Title of module still shows up
4. Place toggle button of modal layout or static form in article content
5. Contact form as regular module
6. Contact form in Lightbox window
7. Configuration fields description / tip / hint
8. Theme
9. Move toggle button at right or top edge
10. Show list of recipients, select recipient with link
11. Custom fields
12. Radio or checkbox options inline or in columns
13. Change width of labels or fields
14. Contact form appears under flash animation
15. Contact form appears under other layers
16. Calendar date picker displays under contact form
17. Open contact form with own link or image
18. Open contact form with menu item
19. Multiple instances of module
20. Tracking
21. Page redirect
22. Email templates
23. Edit predefined words, language file
24. Enable RTL
25. Contact form is broken in Internet Explorer
26. Contact form is not showing
27. Site breaks after publishing contact form
28. Emails are not being sent (Request error: 403, 500)
29. Quick test for correct settings of Joomla Global Configuration and script conflicts
30. JavaScript Frameworks which overrides and breaks Joomla MooTools

Answers:

1. Installation (until version 2.1)

   Error! Could not find an XML setup file in the package.

   If you see such message during installation then unpack downloaded file
   mod_pwebcontact-xxx-UNZIP_FIRST.zip and install once again only file for your Joomla,
   e.g. for Joomla 1.7 use file mod_pwebcontact-xxx-j1.6+.zip

   If you can not see module configuration after installation then you have installed version for Joomla 1.5 instead for 1.6 or newer.
    

2. Module position

   Module should be published at position before body closing tag . If you don not have such position then add following code to your template in index.php file

   <jdoc:include type="modules" name="debug" />

   and in file: templateDetails.xml

   <position>debug</position>

   If you published module in any other position it should still work.
   You should hide module title if you publish it in other position.
    

3. Title of module still shows up

   Contact form is working fine, but title of module still shows up, eg. in left columns with other modules.

   Then go to module configuration and on the left in Details section set Show title: Hide. On some templates it would not help, because there will be still displayed empty box without title and any content. Then you have to published module in other position or the best way will be to use tip from previous point.
    

4. Place toggle button of modal layout or static form in article content

   Enable Joomla! plugin content - Load Modules. Insert in your Article syntax:

   {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. If you are using Joomla 1.5 you have to first add this custom position to your template file: templateDetails.xml as describe in previous point.
    

5. Contact form as regular module

   You can also published module in standard position e.g. left and select Stylesheet static or static-inline and also Alternative Layout as static to display it with other modules in column.

   Since version 1.5.x just select adequate Alternative Layout.
    

6. Contact form in Lightbox window

   Publish module in standard position or better in debug position and select Stylesheet modal and also Alternative Layout as modal to display contact form in Lightbox window.

   Since version 1.5.x just select adequate Alternative Layout.

   If you are using Joomla older than 1.7 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 
   		this.close(); 
   	break; 
   	} 
   },

7. Configuration fields description

   Each configuration field of module has tooltip, shown while hovering mouse over field label.

   
    

8. Theme

   All styles of contact form are stored in CSS files. This module also uses some standard Joomla form classes like inputbox or button. Position of module is also made with CSS. If you want to edit CSS file, then better way is to copy this file and rename it with desire name. You will avoid overwriting of this CSS file while upgrading module. New CSS file will appear in module configuration after reload.

   Since version 1.5 of module CSS files are located in:

   • Slide in styles: modules/mod_pwebcontact/css/default
   • Lightbox styles: modules/mod_pwebcontact/css/modal
   • Static styles: modules/mod_pwebcontact/css/static
   • Common layout files: modules/mod_pwebcontact/css/general

   If you want to change background color or font size of contact form and you do not want to edit CSS file, you can specify this parameters in configuration fields. You can also change width of toggle button if in your translation words wraps in this button.

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

9. Move toggle button at right or top edge

   Position of toggle button is handled by CSS, so you have to select desire Style sheet in module configuration.

   Since version 1.5.x just select adequate Alternative Layout.
    

10. Show list of recipients, select recipient with link

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

    E.g.:
    
    
     

    Since version 1.5.x there is a special field called Mail to list for this purpose.
     

    You can also open form with selected recipient since version 1.5.5
    
    In argument of function pwebContactToggleForm(recipient) or pwebContactPopupForm(recipient) you have to specify index of recipient. Indexing starts from one. In Joomla 1.5 function pwebContactPopupForm needs additional first argument null.
     

    <a href="javascript:pwebContactToggleForm(2)">Contact with our Office</a> 
    <a href="javascript:pwebContactPopupForm(2)">Contact with our Office</a> 
    <a href="javascript:pwebContactPopupForm(null,2)">Contact with our Office (only Joomla 1.5)</a>

    Since version 2.0 of module use following code, where ID is an ID of module:

    <a href="javascript:pwebContactID.toggleForm(2)">Contact with our Office</a>

     

11. Custom fields

    You can add 9 extra fields. 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 |.
     

12. Radio or checkbox options inline or in columns (since version 1.4)

    Each option of radio or checkbox group has individual class named with following pattern:
    
    pwebcontact_field_[1-5]_lbl[0-9]
     

    Modify following code to suite your needs and paste at the end of CSS file.

    Example how to set two radio options in one line:

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

    Example how to set four checkbox options in two columns:

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

    Since version 2.0 of module use following CSS selector, where ID is an ID of module:

    #pwebcontactID_form .pwebcontact_field label.pwebcontact_field_4_lbl0

13. Change width of labels or fields

    Edit module CSS template file and change width at all lines with comments. Those comments describe how to calculate width.
     

14. Contac form appears under flash animation

    Add following HTML code to OBJECT tag displaying your flash animation:

    <param name="wmode" value="transparent">

    and following one to EMBED tag

    wmode="transparent"

15. Contact form appears under other layers

    Edit module CSS template file and change in first declaration z-index property.
    
    You have to do also next tip if you want still use calendar field.
     

16. 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.: 1000, then you have to move also date picker one level higher: 1001.
    
    Paste following code at the end of module CSS template file:
     

    body div.calendar { z-index: 1001; }

17. Open contact form with own link or image (since version 1.2)

    Contact form can be opened with own link, image or other HTML element by applying to it class pwebcontact_toggler, e.g.:

    <a href="#" class="pwebcontact_toggler">Contact with us</a> 
    <img src="/path/image.png" class="pwebcontact_toggler" alt="" style="cursor:pointer" />

    or using link with one of JavaScript functions as describe in next point

    <a href="javascript:pwebContactToggleForm()">Contact with us</a> 
    <a href="javascript:pwebContactPopupForm()">Contact with us</a>

    Since version 2.0 of module use another code, which can be found in Advanced tab of module configuration, where ID is an ID of module

    <a href="#" class="pwebcontactID_toggler">Contact with us</a> 
    <img src="/path/image.png" class="pwebcontactID_toggler" alt="" style="cursor:pointer" />

    <a href="javascript:pwebContactID.toggleForm()">Contact with us</a>

    Click for demo
     

18. Open contact form with menu item (since version 1.2)

    The most important thing is to published module on all menu items. 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.

    In Joomla 1.6 and above create any menu item type. Edit it and go to tab pane: Link Type Options and set in field Link CSS Style: pwebcontact_toggler or pwebcontactID_toggler since version 2.0 of module, where ID is an ID of module. You must use Joomla Native Menu Module to display this menu. If you are using other module, eg. from your template this might not work. Then use below tip for older Joomla.

    In Joomla 1.5 create menu item type of: External link and as link write:

    javascript:pwebContactToggleForm();

    
    and only for Lightbox layout use:
    

    javascript:pwebContactPopupForm();

    
    and since version 2.0 of module use following code, where ID is an ID of module:
    

    javascript:pwebContactID.toggleForm();

    
     

19. Multiple instances

    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!

    Since version 2.0 of module you can load multiple modules at one page.
     

20. 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.

    If you want to track your Google AdWords companies, then enable conversion tracing.

    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.
     

21. Page redirect
    
    

    Since version 1.5.x there is such option in module configuration.
    In previous versions add Custom tracking script in Tracking section of module configuration:

    
    

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

    
     

22. Email templates

    To change email template go to module folder and edit file: email_template.php or email_template_html.php. 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 (since version 1.4):

    $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' ;

23. Edit predefined words, language file

    Edit language file adequate to your language, e.g.:
    
    language/en-GB/en-GB.mod_pwebcontact.ini
     

    At the beginning of this file are located front-end translations.
    
    You can change New email button text by editing following line:
    MOD_PWEBCONTACT_NEW="New email"
    to:
    MOD_PWEBCONTACT_NEW="New message"
     

24. Enable RTL

    Since version 1.5.x just set Enable RTL: Autoin Theme section of module configuration. You have to install RTL language for Joomla! before installing this module. Otherwise you will need to reinstall module.

    In version 1.4.3 to enable RTL languages support set YES and select layout which ends with -rtl. CSS files are located in subfolder RTL and are named exact as their copies in main CSS folder. If you want to create new CSS file you have to put it into both folders.
     

25. 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: http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js. Internet Explorer is blocking such location. You have to use local copy of jQuery placed on your server.
     

    Validate your site with: W3C Markup Validation and correct all 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. If yes then change formatting to DIV.
     

    Fields 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 in module in style sheet adequate for your layout, eg.:
       /modules/mod_pwebcontact/css/general/default-left.css
          #pwebcontact_form { text-align: left; }
       /modules/mod_pwebcontact/css/general/rtl/default-left.css
         #pwebcontact_form { text-align: right; }
     

26. 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.
     

    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 to your document header. Since version 1.5.3 of this module there is option to enable jQuery no conflict mode.

    Another reason can be plugin or template which compress and merge JavaScript filesand 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 above)
        /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 on of them, then look for:
        /temaplates/{your_template_name}/...mootools...
    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.
     

27. Site breaks after publishing contact form

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

28. Emails are not being sent (Request error: 403, 500)

    Upgrade Joomla! to latest version.
     

    If emails are not being sent enable debug mode and try again to send an email. You should see more errors.

    If you see following 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.

    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.
     

    Request error: 500 Internal server error

    If contact form returns Request error 500 or if following URL on your site:
    
    http://www.yourdomain.com/modules/mod_pwebcontact/ajax.php?getToken=1
    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 it would not help then since version 2.0 of contact form module 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.:
       http://www.yourdomain.com/modules/mod_pwebcontact/ajax.php
       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.
     

    Request error: 403 Forbidden access

    Restore original Joomla! .htaccess file or create new .htaccess file in directory: /modules/mod_pwebcontact with following content:
    
    <Files ~ "\.php$"> Allow from All </Files>
    or
    <FilesMatch "\.(php)"> Allow from All </FilesMatch>
     

    If you are using .htaccess file created with Admin Tools then in this component administration go to .htaccess Maker and expand the Server Protection slider. Apeend following code to the Allow direct access to these files area: modules/mod_pwebcontact/ajax.php
    If you are using .htaccess file created with Admin Tools then you have to add following rule in section:
     

29. Quick test for correct settings of Joomla Global Configuration and script conflicts

    Create a Joomla Contact (Components > Contacts > Contacts) and set in Contact details email which was set in module configuration. Then create new menu item type of: Contacts > Single Contact. Go to your live site and try to send an email. If you would not receive any message then you have incorrect Joomla Global Configuration or you have problem with Mail Server or Firewall.

    Publish also all modules on a Single Contact menu item which are published at page where Module PWeb Ajax Contact Form is used. Go once again to Joomla Contact Form and try to submit it without filling it. If it would not validate and page would reload, then you have some scripts which breaks Joomla MooTools.
     

30. 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.

    • MooTools inserted by template instead of Joomla Core
    • jQuery without noConflict mode
    • YUI Library (Yahoo)
    • Prototype
    • Cufon (older versions)