Blog

Some of my thought on technology and programming.

This site is built with PyroCMS but as good as PyroCMS is, it does have some frustrations. The main one for me has been the contact form, which it appears has a layout which cannot be overridden or changed without hacking at core code (yuk).

If you take a look at the contact form on this site you will see that it is reformatted to work with the Bootstrap theme I have used. To do this I had to use a bit of JavaScript (jQuery) to change some CSS classes etc…

Below, is the code which I have used on my contact form, please feel free to use it as you wish:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// this is necessary because PyroCMS will not allow the contact form to be styled :(
$(document).ready(function() {
	'use strict';

	// style the form
	var $form   = $('.contact-form');
	var $fields = $form.find('input, textarea, select').not('input[name="d0ntf1llth1s1n"], input[type="submit"]');
	$form.addClass('form-horizontal');
	$form.find('div').not('.error').addClass('form-group');
	$form.find('label').addClass('col-sm-2 col-md-2 control-label');
	$form.find('input[type="submit"]').addClass('btn btn-primary btn-block btn-lg').parent().addClass('col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10');
	$form.prev('h2').remove();
	$fields.addClass('form-control');
	$fields.wrap('<div class="col-sm-10 col-md-10"/>');

	// errors
	var $errors = $('div.error');
	if ($errors) {
		var errorMessages = [];
		var $alerts = $('<div id="alerts"/>');
		$form.before($alerts);
		$errors.each(function() {
			errorMessages.push($(this).text());
		}).addClass('hidden');
		$.each(errorMessages, function(i,msg) {
			$alerts.append('<div class="alert alert-danger">'+msg+'</div>');
		});
	}
});

​Edit your contact page, go to the "Script" tab and paste the code above into the textarea, save and refresh the page and you should see it working beautifully.