Theming #Drupal forms with .js

Theming the default Drupal profile form can be at least tricky, if not completely demoralising, at times - so, for one of our recent projects, we wrote some nifty jQuery to handle the layout and separation of profile-types (definitely one of the biggest bugbears)!

N.b this tutorial presumes you are fluent in basic Drupal7 theming practices, such as injecting javascript in to specific pages, and in basic jQuery syntax.

This may seem like overkill, but the jQuery we used was very simple and we needed to mix-and-match fields between user edit and many profile types.

As on every project we undertake, to kick-off we spec’d out a rough prototype on paper with the client - this kind of client workshop generally consists of a discussion between developer and client of user & client needs, and we throw out ideas ad-hoc of how the thing might work. The output of this meeting was a list of grouped fields which needed to be included in the form, as well as a rough drawing of what it might look like on the page.

Once we had the fields set up, the jQuery was implemented to set up variables for each ‘section’ of the edit form. These variables’ values are defined as the classes of the fields which belong to them. For example, $education = ‘.field-name-field-school-name, .field-name-field-gcse-results’. This is repeated for each section/field until we have something that looks like this:

$education = $('Enter your fields\' classes here');
$personal = $('Enter your fields\' classes here');
$contact = $('Enter your fields\' classes here');
$subscriptions = $('Enter your fields\' classes here');

If you’re loading your javascript file on every page (then don’t - use method #3 - but if you must...), make sure to target a specific form - otherwise you’ll be hiding the fields from wherever they appear on your site.

Now create a custom block and add a list of links to the different sections of the form. These can be empty links, we only need them to bind events to. Make sure each list item has a different, relevant class - e.g. if there is a link to a personal section, give the item a class of ‘js-personal’.

Back into the js file now: set each of the variables you have already defined (e.g. $education) to hidden, using the jQuery .hide() property.

$education = $('Enter your fields\' classes here');
$personal = $('Enter your fields\' classes here');
$contact = $('Enter your fields\' classes here');
$subscriptions = $('Enter your fields\' classes here');

$education.hide();
$personal.hide();
$contact.hide();

Omit whichever section you want to display on page-load. In our example, $subscriptions is displayed on page-load. Now we write the code which triggers hiding/showing of the sections.

$education = $('Enter your fields\' classes here');
$personal = $('Enter your fields\' classes here');
$contact = $('Enter your fields\' classes here');
$subscriptions = $('Enter your fields\' classes here');

$education.hide();
$personal.hide();
$contact.hide();

$('.js-contact').click(function(){ // When element with class .js-contact is clicked...
    $contact.show(); // ...show the 'Contact' section
    $subscriptions.hide(); // ...hide the 'Subscriptions' section
    $education.hide(); // ...hide the 'Education' section
    $personal.hide(); // ...hide the 'Personal' section
});