Build A Styled User Feedback Form with Webform In Drupal 7Build A Styled User Feedback Form with Webform In Drupal 7

Categories:

Online feedback forms are a great way to encourage your users to interact with you or your business. Although a simple contact form might suffice for small to medium-sized websites, if you have a larger site you may start seeing a lack of focus or willingness for a typical user to contact you if they have an issue with your site. You can use a tiered form system to let your users dial down into a form for a specific purpose. For instance, you could have a form for general feedback, a form for technical support, and a form for product support. This way you can forward the submissions to the appropriate branches of your company, eliminating what can often be a chunk of overhead in the feedback process.

Today we're going to be building and styling 2 webforms: one for individuals and one for businesses. We'll be targeting specific fields within these forms to get specific feedback from each group. We'll also be applying some basic styling to these forms to save on some screen real estate. Let's look at what we'll be building:



Webforms


1. Module installation & setup:

Head to drupal.org, grab and install the Webform module. I'm also going to install Token module for some added features as well as reCaptcha to do some preventative spam protection. Note that CAPTCHA module is required and is still in the alpha stage for Drupal 7. I didn't have any issues but you might want to really stress test this before putting it on a production site.

Lets go and set up our Webform. The module will create a new content type for you. Go to the Webform content type first and make sure commenting, 'publish to front page', and 'display author and date' are disabled. If everything is set there, lets create the forms.

The first form I want to make is for individuals (as opposed to businesses). For each form I want to display a friendly message, which I will add to the 'body' field. I alos am going to add a menu link so I can preview the forms quickly. Save that and let's begin to enter some fields. If you've been using Drupal 7 this process should look very familiar.



Webforms


There are a multitude of field types to choose from. Most contact forms will use textfields (single line) and textareas (multi-line). Most of the fields are pretty self explanatory, but here is basically what we have to work with:

Date: Comes with a pre-packaged date chooser widget / calendar
E-Mail: E-mail field with validator to ensure the content is an actual address
Fieldset: Allows you to group Fields together.
File: File upload widget
Grid: A table of related questions and answers (more on this below)
Hidden: An element which will not be displayed on the form. You can use this to automatically populate the submission with extra content (combine with Token, more on this below)
Markup: HTML Markup so putting extra text, images, etc in the middle of a form.
Page Break: Used to split a form into multiple pages
Select: Radio / Drop down box widget
Time: Time selector widget

Which fields you end up using are completely up to you. You can use Webform to build anything from a simple contact form to more complicated, multi-page forms. Since I'm making a feedback form, I'm going to populate my fields with contact info like names, email addresses, and phone numbers. E-mail addresses should use the E-mail field type and Drupal will validate the content before the form is submitted. In addition, Webform can accept default values from Token. So for users that are logged in to your site, you can set the default value to "%usermail" and the address will be automatically added to the field when the user visits the page. You can do similar things with your other fields. If you've set up user profile fields on your site, then you can use Token to auto-add field info like names, birthdates, phone numbers, etc.



Webforms


On all these fields, I would recommend not entering info for display options. Webforms has options in there for specific cases but that is a bit beyond the scope of this tutorial.

Note that one of my options will display a grid of questions and options. This type of display is really useful for a feedback form because I can ask a bunch of questions for my users to rate on a scale. Instead of having to create a new field for each question I can put them in one place and Webforms will make a table automatically. In the field edit page You have to manually create the field keys along side the names. Keys are basically how the database will name the fields and thus it affects the field name in our HTML. Most fo the time you can use similar or parallel names with keys, just remember to use underscores where appropriate.


Webforms


Finish creating your fields. Since I am creating a second form (for businesses) I will have to repeat the process and add specific business-related fields. After you have done this, check your forms to make sure all the fields are displaying.

Next we need to see who to send the form to. Under 'E-mails' add an address. You can add additional recipients if you want to allow sending a copy to the user as well (you can choose Component->E-mail to do this. Edit any subject, headers, or format info you need.


Webforms


Lastly, go to the Form Settings page and add a confirmation message, access permissions, or any other options you want to include. There are some awesome, powerful options that you can add to allow your users to save form content as a draft or redirect to a specific URL after a form is submitted.


webforms


2. Themeing:

Next we are going to add some styling to the form. My default theme does fairly well with form elements but I want to customize and add some extra styling to the form itself. The first thing is adding a body background image to the form pages.

 

body.node-type-webform #main { 
background:url(../images/form-bg.png) 750px -30px no-repeat; }

 
I also want to style the inactive, active, and hover states of all the input boxes. To avoid conflicting with the rest of the site, I am going to target all my CSS declarations with the given Webform classes.

 

.webform-component-textarea textarea,
.webform-component-email input,
.webform-component-textfield input {
background-color:#dfdfdf;
background-image:url(../images/form-inactive.png);
background-repeat:repeat-x; color:#999999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.webform-component-textarea textarea:hover,
.webform-component-email input:hover,
.webform-component-textfield input:hover {
background-color:#f0f0f0;
background-image:url(../images/form-active.png);
background-repeat:repeat-x;
color:#000000;
}
.webform-component-textarea textarea:focus,
.webform-component-email input:focus,
.webform-component-textfield input:focus {
background:#009cff;
color:#ffffff;
border-color:#b8e3ff;
-moz-box-shadow:0px 0px 10px #aaaaaa;
-webkit-box-shadow:0px 0px 10px #aaaaaa;
box-shadow:0px 0px 10px #aaaaaa;
}

 


And here is the effect:

webforms

Our form is taking up a bit of space on our page, with much of the right side area unused. Lets float some of the elements right to fix this. We also have to add a fixed width for this to work. Note that your IDs may be different depending on how you named your fields. Always check with Firebug or similar markup viewer first.

 

#webform-component-e-mail,
#webform-component-first-name,
#webform-component-account-name,
#webform-component-contact-position {
float:left;
width:450px;
}
#webform-component-phone,
#webform-component-last-name,
#webform-component-business-name,
#webform-component-how-do-you-prefer-to-be-contacted {
float:right;
width:450px;
}

 


I didn't bother adding Markup fields to the form to clear these floats, so therefore I have to clear the elements below to make sure their display doesn't get messed up.

 

#webform-component-how-would-you-rate-our,
#webform-component-service-ratings {
clear:both;
}

 


Lastly let's style our grid table. Note that your mileage will vary depending on your starting theme. Extra styles may be necessary.

 

.webform-client-form table thead {
border-bottom:1px solid #dddddd;
}
.webform-client-form table tr th {
background:#ffffff;
color:#000000;
border-bottom:none;
}
.webform-client-form table tr td,
.webform-client-form table tr th {
padding:6px;
border:none;
}
.webform-client-form table tr.odd {
background:#ffffff;
border:none
}
.webform-client-form table tr.even {
border:none
}

 


Okay, everything is looking pretty good:



webforms


3. Setting up reCaptcha:

First thing we need to do is grab the form names from the markup.



webforms

Copy that and let's go to the Captcha settings page. I installed reCaptcha so I want to set that as my Challenge type. At the bottom of the form_ID list paste in the name of the form that you copied. One thing that always catches me up is the fact that the database stores the name with underlines, but outputs the HTML with dashes. Make sure you convert your dashes to underlines and select the challenge type in the drop down.



webforms


Next, make sure you have a reCaptcha public and private key and enter it in the reCaptcha tab.


webforms


That's it! Check your permissions and ensure that anonymous users must use the form. Check your site as an anonymous user to ensure the reCaptcha is displaying.



4. IE Considerations:

If you are concerned about IE's lack of CSS3 support, like in my other tutorial I recommend a package you can install to allow IE 6-8 to pick up CSS3 declarations. It's called CSS3PIE and you can check it out here. However, even without it everything should display and work fine.

Webforms is a great tool to customizing your own user feedback mechanisms, but it has many other uses. Play around with it and see what you can do to make your site better.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.