Ajax Popup Contact Form Documentation

If you did not find answer in documentation then ask a support question.

If you have any problem with contact form then always enabled debug mode in Advanced tab of module configuration.

Versions 1.x and 2.x

Documentation for old versions 1.x and 2.x

Version 3.x

  1. Installation, configuration and updates
  2. Module position
  3. Title of module still shows up
  4. Display static form in article content (as component)
  5. Slide Box form page sheet instead from page edge
  6. CSS files structure
  7. Create your own styles
  8. Rounded corners and shadow in Internet Explorer
  9. Background image
  10. Vertical toggle button
  11. Show list of recipients, select recipient with link
  12. Fields
  13. Setup confirmation email field
  14. Allow to enter date only by calendar
  15. After closing Lightbox can not navigate on page
  16. Contact form appears under flash animation
  17. Contact form appears under menu or other layers
  18. Open contact form with menu item, own link or image
  19. Email templates
  20. Override language translations
  21. Right to left language
  22. Captcha
  23. Upload
  24. SobiPro
  25. Contact form is broken in Internet Explorer
  26. Contact form is not showing or working
  27. jQuery conflicts
  28. Modules Anywhere
  29. Beez template
  30. Upload error: TypeError: g is null in Joomla! 3.2 or newer
  31. Request error: 200 SyntaxError: JSON.parse: unexpected character
  32. Request error: 303 Redirect
  33. Request error: 500 Internal server error
  34. Request error: 403 Forbidden access
  35. Configuration page crashes
  36. Cache problem with JoomlArt template, JotCache
  37. Email is not being sent
  38. Success message is displayed but I do not receive email
  39. Prevent emails from going to spam
  40. Quick test for correct Mail settings of Joomla Global Configuration

  1. Installation, configuration and updates

    Installation
    If installation file contains the word UNZIP then you have to unpack this archive first.

    If installation file ends with _j1.5 or _j2.5 then this file is for specific Joomla! version or newer.

    In Joomla 2.5 you have to also install a system plugin with native support for jQuery and Bootstrap Perfect Joomla! 3 User Interface plugin.

    Configuration
    If you can not see module configuration after installation then you have installed module for older Joomla!.

    This extension is a standard Joomla! module. After installation you will find it in Extensions > Module Manager. It is not a component so you can not create for it menu item, like for Joomla! Article in example. If you do not see it in Module Manager then you have to create new module instance in that view.

    If you want to use a module in different language than English then you have to install Joomla! core translation first and then proceed with installation of this module.

    Update
    This is a commercial extensions and it can be only downloaded from our site. In Joomla! Update Manger you will see notification about a new version, but you can not install it through that manager. If you will try to update then you will see the following error: Invalid extension update.

    Upgrade from 2.x
    If you are upgrading module from version 2.x to 3.x and you have made changes in CSS or email templates then you should backup the following directory: media/mod_pwebcontact, because it will be removed. You can not just restore your old email templates and CSS into new module, because it was redesigned from the scratch. If you want to change contact form colors, then in a new version you can set it in configuration panel.

    Disable Joomla Updater notification
    If you want to remove update server notification in this module from your Joomla! Installation, please run the following SQL query on your database. Replace #__ with your Database Tables Prefix (you can find it in Joomla! Global Configuration on the Server tab).

    DELETE FROM `#__update_sites_extensions` WHERE `update_site_id` IN (SELECT `update_site_id` FROM `#__update_sites` WHERE `location` LIKE "%mod_pwebcontact%");
    DELETE FROM `#__update_sites` WHERE `location` LIKE "%mod_pwebcontact%";
  2. Module position

    Module should be published at the position before </body> closing tag. Usually it is named debug. If you do not have such position then add the 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, e.g. in left column with other modules.

    Then go to module configuration and on the left in Details section set Show title: Hide. Although on some templates it would not help, if that is the case then you have to publish this module in other position, preferably in debug position.

  4. Display static form in article content (as component)

    Go to module configuration Documentation tab and follow steps in option Display in article.

  5. Slide Box form page sheet instead from page edge

    Set the following code for On load event if you are using Protostar template:

    var container = $('.body .container').css({position: 'relative', overflow: 'hidden'});
    this.defaults.slidePos = 'absolute';
    this.element.css('position', 'absolute').appendTo(container);

    For Beez template change container selector from .body .container to #all.

    For any other template you have to ask your template developer to give you a proper selector of page sheet.

    Slide Box form page sheet example

  6. CSS files structure

    In Joomla! 2.5 and newer CSS files are located in:
    media/mod_pwebcontact/css/

    FileMeaning
    background/*.css colors of form background, text
    form/*.css colors of fields, buttons, links
    toggler/*.css colors of toggler button
    layout.css general declarations, structure and positions, does not have colors
    uploader.css styles for upload, structure and positions, does not have colors
    *-rtl.css styles override for RTL
  7. Create your own styles

    To create a new styles set you have to copy and rename existing file containing styles and replace all CSS classes in it with the name of original file.

    For example to create new style for toggler, copy file: media/mod_pwebcontact/css/toggler/blue.css and rename to: media/mod_pwebcontact/css/toggler/example.css. Then edit this file and replace all CSS classes names "blue" to "example". Now when you will reload module configuration you will see new style on list.

  8. Rounded corners and shadow in Internet Explorer

    To support rounded corners and shadow in Internet Explorer 7 and 8 there was implemented CSS3 PIE. There are no guarantee that it will work. It depends on your Joomla! template and other extensions.

    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/PIE.htc

  9. Background image

    For every layout you can select in Theme tab an image which will be loaded in background of contact form. There are also options to add padding on side of box that image would be not under form, but next to it. Module does not contain any sample images.

  10. Vertical toggle button

    Vertical text is an image generated by PHP to keep compatibility with older browsers. This option might not work if PHP on your server does not allow to create image or write text on it.

    Images are stored in Joomla cache directory: /cache/mod_pwebcontact/. Make sure that it is writeable. If you change any configuration which has influence on vertical text, then a new image is being created. Old images are not deleted.

    If you do not see any text on vertical toggler then test if following files on your server: http://www.yourdomain.com/cache/mod_pwebcontact/test.png and http://www.yourdomain.com/cache/mod_pwebcontact/test.css returns error 404 - it is ok, or 403 forbidden access - then you need to edit .htaccess file and allow direct access to css and png files in cache directory. Also it can be set in Admin Tools Pro .htaccess Maker.

    If you see rectangles instead of letters then TTF font used for creation of text does not have your language characters. You have to upload a new TTF file to media/mod_pwebcontact/images/fonts/. For example you can use Arial font from your OS or other font which has TTF file format. Then reload module configuration and select new font.

    Read how to compile PHP with required functions for image creation
    http://www.php.net/manual/en/function.imagettftext.php#54972

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

    You can also open form with link with selected recipient. In second argument of function you have to specify index of recipient. Indexing starts from one. Go to Documentation tab of module configuration to see code examples.

  12. Fields

    You can create unlimited number of fields. Each field can have language constant in label, tooltip and values because those informations will be translated through language file.

    If you want to define multiple values then separated them with pipe character |.

    In some type of fields you can also define JavaScript regular expression for validation rules. Contact form use jQuery Validation Plugin to validate all fields with default and custom rules.

  13. Setup confirmation email field

    Create field type of email with alias: email. Set it required.
    Create field type of text with alias: email_confirm. Set it required.

    In Events tab set On load JavaScript event:
    $(this.options.selector+"_field-email_confirm").attr("equalto", this.options.selector+"_field-email");

  14. Allow to enter date only by calendar

    Following code would prevent typing date from keyboard and only allow to enter it by calendar which would be displayed after click on input field or calendar button.
    In Events tab set On load JavaScript event:

    this.Form.find('.pweb-field-date input').click(function(){
      $('#'+$(this).attr('id')+'_btn').click();
    }).keypress(function(e) {
        e.preventDefault();
    });
  15. After closing Lightbox can not navigate on page

    If you have Joomla! 3.0.x - 3.1.1 then you have to upgrade to newer version or update Bootstrap from version 2.1.0 to 2.3.2 which fixes bug with Lightbox window closing. To update only Bootstrap download Joomla_3.1.x_to_3.1.4-Stable-Patch_Package.zip and overwrite those files: media/jui/js/bootstrap.js and media/jui/js/bootstrap.min.js

  16. Contact 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"
     
  17. Contact form appears under menu or other layers

    Change layer level (z-index) in Basic tab of module configuration. Default value is 1030. Enlarge this value until contact form would be on top. Reload browser cache on front-end to see changes.

  18. Open contact form with menu item, 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 (Ctrl+F): pwebcontact_form. 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 Documentation Tab of module configuration.

    To open form with menu, create a new menu item type of: External URL and as link use URL code snippet from Documentation Tab of module configuration (preview).

  19. Email templates

    To change email template edit HTML files in directory: media/mod_pwebcontact/email_tmpl/. You can also create a new HTML file with own template. After reload of configuration it will be listed.

    If you do not want to use HTML emails but text format, then select on list Use text email and create own template in module configuration field. Do not use any HTML tags.

    Each template can display some standard values listed in module configuration. Also you can use language constants if you want to use template for multiple languages or just define new module instance for second language.

  20. Override language translations

    Module has many translations. If your site is not in English then you should install Joomla! core translation and then install this module. To correct translation edit language file adequate to your language, e.g. for English:
    language/en-GB/en-GB.mod_pwebcontact.ini

    For example you can change Reset button text by editing following line:
    MOD_PWEBCONTACT_RESET="Reset" to: MOD_PWEBCONTACT_RESET="New email"

    If translation for your language is incorrect or there is not such then please correct it or create new and send us that we could improve our contact form.
    You can also override translation in Joomla! 2.5 or newer in Extensions > Language Manager > Overrides.

  21. Right to left language

    Contact form support RTL languages. If your site is only available in RTL language then you should set in Advanced 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. If you set Enable RTL: Auto then for RTL language left position would be automatically changed to right for this module instance if it is assign to multiple languages.

  22. 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 and no email will be sent.

    If you want to use captach you can install some Joomla native captcha plugins and select one of them in Advanced tab of module configuration. By default Joomla has installed reCaptcha plugin. You can find more captcha plugins on Joomla Extensions Directory. After installing check if this plugin is type of captcha and not type of system.

    If you are using reCaptcha then you should reload it after sending email. On emal success event set code: Recaptcha.reload();

  23. Upload

    Upload feature was implemented based on jQuery File Upload. Default upload directory 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 informations.

  24. SobiPro integration

    How it works?
    When user would open contact form on SobiPro Entry Details View, email would be sent to owner of this entry if email address has been set in SobiPro Entry Edit Form in field type of email or text field with filter email or Joomla! User is assign as owner. You can also set BCC in module configuration to get all copies of emails. In message body you will have URL of SobiPro Entry and page title which can be also added to email subject.

    How to start?
    Enable SobiPro integration in module configuration. Decide if you want to show contact form only in SobiPro Entry Details View.

    How to insert Static contact form into SobiPro Entry or a Lightbox Static button?
    Enable Joomla! plugin content - Load Modules.
    Go to module configuration and publish it in position contact and set in Integrations tab Send email to owner of entry: Yes.
    Add to your SobiPro Entry Template syntax {loadposition contact} in SobiPro > Templates > XXX > entry > details.xsl
    Change SobiPro settings: Section Configuration > General Configuration > Template Data tab > Parse Template Output: Yes

    How to use Slide in layout of module?
    Publish module in debug position or some other that your Joomla! template has.
    You can also add own HTML code to SobiPro Entry Template which would open contact form - see Documentation tab of module configuration to find code.

  25. Contact form is broken in Internet Explorer

    Validate your site with W3C Markup Validation document type: HTML5 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 and change formatting to DIV.

  26. Contact form is not showing or working

    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 (Ctrl+F): pwebcontact_form. 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 load contact form only on pages with integrated extension.

    Check if you have set in Advanced tab Filter browsers - Only mobile and contact form would not be displayed on desktop browsers.

    If contact form is displaying message: Initializing form... then there is JavaScript error or conflict on your site and it has to be corrected.

    Check JavaScript console in Browser (usually press F12 to display and refresh page) if there are any errors on your site. Check also console with disabled contact form. If there are errors then you have to contact with your webpage developer to correct them.

    Load only once Joomla native jQuery file in your template at the beginning of <head> tag and at least before this module.

    Another reason can be a Site Performance plugin or template which compress and merge JavaScript files. Try to disable compression or test some other settings in this extension to find correct configuration.

  27. jQuery conflicts

    On your site jQuery should be loaded only once. If you have many extensions which use jQuery, then you should disable loading of jQuery in each extension or remove in PHP code. Edit your Joomla template and also remove jQuery if it is loaded there. Then add to your template code: <?php JHtml::_('jquery.framework'); ?> before: <jdoc:include type="head" />. It would load native jQuery 1.8+ included in Joomla. All Joomla 3.x extensions should use this code to load jQuery. When Perfect Joomla! 3 User Interface plugin is installed then this code would also work in Joomla 2.5.

    If other extensions in Joomla 2.5 or 3.x are laoding jQuery and there is no option to unload it, then you can install plugin Perfect Joomla! 3 User Interface plugin, enable it and set options Load jQuery: Yes and Remove other jQuery: Yes.

  28. Modules Anywhere

    If you have loaded contact form into template with extension Modules Anywhere then it would not work, because JavaScript and CSS files are not being loaded into document header. You have to publish contact form in some template position. You can load contact form with Modules Anywhere but only into Articles or Custom HTML module.

  29. Beez template

    If you are using Joomla default template Beez and it font size changer has been removed from it, then you have to edit file: /templates/beez*/javascript/md_stylechanger.js and change code container.set('html', content); to: if (container) container.set('html', content);

  30. Upload error: TypeError: g is null in Joomla! 3.2 or newer

    Check if following URL
    http://www.yourdomain.com/index.php?option=com_ajax&module=pwebcontact&method=getToken&format=json
    returns a joomla.json file with similar content:
    {"success":true,"message":null,"messages":null,"data":{"status":103,"token":"..."}}

    Check if following URL
    http://www.yourdomain.com/index.php?option=com_ajax&module=pwebcontact&method=getToken&format=html
    returns an error: InvalidArgumentException: Please specify response format other that HTML (json, raw, etc.).

    If you do net get such error then your Joomla update did not finish successfully and you need to update it again, because Joomla! Ajax Interface is not working or is missing.

  31. Request error: 200 SyntaxError: JSON.parse: unexpected character

    If you get this error you have to enabled Debug mode in module configuration in Advanced tab. Then reload front-end page and try again to use contact form. You should get some error details in popup layer.

    Here is one case but not the only one and such buggy plugin my required other corrections.

    Fatal error: Call to undefined method JDocumentJSON::... in .../plugins/system/pluginname/....php on line ...

    It means that you have some system plugin which tries to use non-existing method in Joomla! JSON document format. You have to contact with plugin developer to correct code of plugin or make this on your own as described below. Similar error can have also all other types of Joomla! plugins if developer expected to use object JDocumentHtml without checking if Joomla! current document type is html.

    Edit plugin main PHP file named exactly as plugin directory: plugins/system/pluginname/pluginname.php

    Find line with code: function __construct and after first opening { add code:
    $doc = JFactory::getDocument(); if ($doc->getType() != 'html') return;

    If there isn't such code then after code: class plgSystem... extends JPlugin { add following code:

    public function __construct(&$subject, $config = array()) {
        $doc = JFactory::getDocument();
        if ($doc->getType() != 'html') return;
        parent::__construct($subject, $config);
    }

    You might need also to add similar code in all other events methods in this file if this would not be enough.

  32. Request error: 303 Redirect

    Apply patch by enabling option Correct request error 303 or 500 in Advanced tab of module configuration.

    Make sure that all system plugins are checked-out. Run a test and disable all system plugins which are not included with Joomla, especially EU e-Privacy Directive which is know to cause redirect.

  33. Request error: 500 Internal server error

    If contact form returns Request error 500 or if following URL on your site (Joomla! 1.5 - 3.1.x):

    http://www.yourdomain.com/modules/mod_pwebcontact/ajax.php?method=getToken
    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 might see some new PHP errors.

    If you have installed component sh404SEF then go to its configuration Security tab and set Check also forms data (POST): No.

    If previous tips did not work then you can apply patch by enabling option Correct request error 303 or 500 in Advanced tab in module configuration.
    Also you can 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.

  34. 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 Professional then in this component administration go to .htaccess Maker and in secion Exceptions add to Allow direct access to these files: modules/mod_pwebcontact/ajax.php

    You might also try solution for request error 303.

  35. Configuration page crashes

    Create file modules/mod_pwebcontact/skip_http_test.txt to disable testing of some HTTP requests made by contact form configuration page.

    Enable displaying of PHP errors in Joomla! Global Configuration Error Reporting: Maximum (you might need also to change PHP settings or .htaccess file). Go back to configuration page of contact form and try to find PHP errors usually at the end of page. Then contact with us and send this error message.

  36. Cache problem with JoomlArt template, JotCache

    Try to set in Advanced tab of module configuration Caching: Custom extension caching.

    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 style usually should be: none. Read JotCache documentation.

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

    JA T3 Framework cache exclude

  37. Email is not being sent - other errors

    Upgrade Joomla! to latest version (download page).

    If you have upgraded Joomla! to version 3.2 and you have contact form module version 3.1.2 - 3.1.5 then edit file modules/mod_pwebcontact/ajax.php and replace code: echo $app; with: echo JResponse::toString();. If you have older module you might need to update it.

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

    Check if you have correct settings of Mail section in Joomla! Global Configuration. On some servers PHP Mail function is not working. You can try to use SMTP mode with authentication for sending emails.

  38. Success message is displayed but I do not receive email

    Make sure that you have not enabled Demo mode in Advanced tab of module configuration.

    If success message is displayed then it means that contact form has passed data to Joomla Core Mailer and email was sent successfully.

    If you do not receive email then:

    • check your spam box,
    • check server settings of SpamAssassin or BoxTrapper,
    • check server mail filters,
    • check server firewall or other security settings,
    • or ask your server administrator to track email which has been sent from your site.
       
  39. Prevent emails from going to spam

    This problem is not caused by contact form but by not trusted sender of email or suspicious content.

    In Joomla Global Configuration set Mailer: SMTP and setup all authentication details. For SMTP authentication and Mail From use email with the same domain as your site, for example: your domain: domain.com, email: admin@domain.com. If you do not know authentication details then ask your server administrator.

    You might also set in Email tab of module configuration: Send from one domain: Yes, that sender email would be your site and message would be more trusted to spam filters.

    You can also edit email template to make it more human. There is no simple answer what to write to make your spam filter believe that it is not a spam. You have to find your own best text.

    You can also setup on your server other protections like TXT records DomainKeys Identified Mail (DKIM) and Sender Policy Framework (SPF). Ask your server administrator to help you with that - we are not supporting configuration of servers.

  40. Quick test for correct Mail settings of Joomla! Global Configuration

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