Building an online contest site in Drupal 7

Peter Droogmans

A quick run through on how to build a site similar to the contest we build for warsteiner.jp, screenshots.

Dependencies

Required modules

Base theme

  • Omega 4 as base theme
  • Custom theme, created using drush owiz

Content

Basic setup

  • Install Drupal using the standard profile
  • Enable all modules
  • Create a new Webform at node/add/webform
  • Add webform fields at node/1/webform
  • Create a new Basic page for the thank you page at node/add/page
  • If needed configure webform validation at node/1/webform/validation
  • Configure email recipients at node/1/webform/emails
  • Tweak the webform settings at node/1/webform/configure
    • Make sure Confirmation message is empty
    • Enter node/2 in the Custom URL field
    • Enable the preview mode
  • If you want to show the webform in 2 columns the easiest is to use Fieldset component to group the fields
  • For the terms and conditions you can use a textarea component with a default value and mark the field as disabled

Blocks

For the blocks on the homepage we used the build-in block system, if you have a multilingual site you can use Bean instead.

Create all the needed blocks and assign them to the right region, make sure to set the visibility settings so the block only shows on the frontpage.

Clientside validation

Tweak the settings at admin/config/validation/clientside_validation if needed, the defauls should work fine.

Theming

The theming part is pretty straight forward only special case is the theming of the preview page since webform uses the same path as the regular node, so you need to add a class to the body to differentiate, we used a patch, but you can also use hook_form_webform_client_form_alter

We used the class to be able to hide the blocks, which isn't a clean solutions, but for this site it was acceptable.

Design done by our friends of Trainspot.

Quick start script


drush dl drupal --destination=demosite
cd demosite
drush dl ctools views webform webform_validation clientside_validation
drush si 
drush en ctools views views_ui webform webform_validation clientside_validation clientside_validation_webform omega -y 
drush owiz

Happy theming.

Comments