Skip to the main content

The Webal contact page layout

A restyled, more accessible page for Joomla's own Contacts component. Sites that already use Joomla Contacts get a contact page that matches Webal Blocks, with a form that is easier to use with a keyboard or a screen reader. Nothing in Joomla changes: Joomla still validates the form, checks the captcha, runs its plugins and sends the mail, and your contact records stay as they are. (A separate Webal form module is planned for forms that are not a Joomla contact.)

Setting up

  1. Install the Webal Blocks package.
  2. Install the layout into your template: Components, Webal Blocks, Dashboard, Contact page layout, then Install next to your template. Use a child theme: Joomla updates never touch it. The page the guide page explains what to do when the server cannot write to the template (there is a download button). By hand the two files are in administrator/components/com_wblblocks/layouts-stubs/com_contact/contact/ (wbl-contact.php and wbl-contact.xml) and go into templates/<your template>/html/com_contact/contact/.
  3. Choose the layout, in either place:
    • a menu item of the type Contacts, Single Contact: open it, and pick Webal contact page in the Layout list;
    • a contact itself: Components, Contacts, open the contact, Display tab, Layout list, pick Webal contact page. (The menu item's choice wins for the contact it points at.)

The layout is an alternative layout with its own name. It never replaces your template's own default contact layout, and Webal Blocks never writes, changes or removes a file that is not called wbl-contact.php or wbl-contact.xml. If you have your own copy of either name that Webal Blocks did not make, it is left alone and the Dashboard says so. Removing the layout in the Dashboard takes both files away again; a contact that still asks for it falls back to Joomla's default layout (the Dashboard warns you).

The layout files hold no logic. Updating Webal Blocks updates what they do; they only need replacing if their version line changes (the Dashboard shows Out of date and an Update button, or updates them for you when Webal Blocks is updated, as for the menu layouts).

What the visitor sees

  • One heading at the top and headings that never skip a level: the menu item's page heading when it shows one, otherwise the contact's name. A contact with neither shown still has its name as a heading for screen readers.
  • Contact details in an address block, each with its words ("Phone", "Email", "Address") instead of icons alone. Telephone numbers are links that dial; the email address goes through Joomla's own address-hiding helper; web addresses are links only when they are ordinary http or https addresses.
  • One form with a visible label on every field (never only a hint inside the box), "(required)" written in the label of every required field, a line of help text where Joomla has one, boxes and buttons 44 pixels tall, and a clear keyboard focus ring.
  • Problems are listed at the top. When a message cannot be sent, the page comes back with the words you typed still in place, a box headed There is a problem that lists every fault with a link to the field, and the same message next to each field. Keyboard and screen reader users land on that box first; selecting a message puts the cursor in the field. The same problems are not repeated in Joomla's own message area.
  • It follows the colour mode of the site (light, dark, the Webal dark stylesheet), forced colours, right-to-left languages, 400 % zoom and text spacing changes. Nothing moves, so there is no animation to turn off.
  • It works with scripts off: the list of problems is printed by the server; only the move of focus to it needs a small script (loaded only on this page).

What you control

Everything Joomla offers for a contact still applies, because the layout reads the same options: which details to show (name, position, address parts, email, phone, mobile, fax, website, picture, vCard, other information, links, articles, profile, tags), the contact form on or off, the copy-to-sender box, the session check, the redirect after sending, and the captcha you chose in Global Configuration or in the contact. A custom field added to the contact form by a Joomla plugin is drawn like the other fields, with its label and "(required)". Joomla's privacy consent box (the Confirm Consent plugin) keeps the link in its label that opens your privacy policy in a pop-up, is named as a group with "(required)", and its tick box is required; a message that it was left empty links straight to the tick box. The colours and fonts come from the Webal Blocks Options (Components, Webal Blocks, Options) like every other Webal part.

Good to know

  • Joomla's blur validator is not used on this form. Joomla's own form script writes a message into a field's label each time the field loses focus, which moves the form while somebody tabs through it. This layout lets the browser check required fields and addresses first (it shows its own message and moves to the field), and Joomla's controller then checks everything on the server; the problems come back in the box described above.
  • Fields are matched to messages by Joomla's own wording ("Field required: Name"). A message that belongs to no field (a captcha refusal, a plugin's refusal) is still listed in the box, without a link.
  • Other information is printed as the editor saved it, as in Joomla's own layout (Joomla's text filters work when you save). Stored scripting attributes that would start Webal's own scripts are made inert.
  • The list of other contacts in the same category (Joomla's "Select a contact" box) is shown as a row of links, which also works without script.
  • If the layout ever fails, the error is written to the Webal Blocks log (Joomla's logs folder, com_wblblocks.php) and Joomla's own default contact layout is printed instead (your own copy of that layout in the template's html/com_contact/contact folder is used when there is one, and any messages Joomla held about a refused send are still shown).
  • Right now the layout is for the single contact view. The contact list and category views keep Joomla's own layouts.
  • Opening hours are not part of a Joomla contact record, so none are shown here.