Webform Module – Quick and Easy Drupal Forms

Quick and Easy are not two terms that typically are synonymous with Drupal. You generally have to go through the ringer to get Drupal to do most things. That’s the nature of a tool as powerful as Drupal. But the Webform module will really surprise you in a very nice way.

I needed a quick and dirty way to let my users send me feedback. The comment system won’t do because the feedback is general and not┬áspecific to a node. And I really want it to go into an email.

Image

With an install base of about 350k sites, I really don’t know how I missed webform. But with just a few steps, I was able to create a one field form (see the SS) that emails the result to an email address that I specify.

The module will create a content type called webform. From there, you simply create a new node. Once the intitial node has been created, you can add all of the nice elements that will go into the result. I have a one field form here but you can have much more that that. Definitely worth the time for your Drupal install!

Customizing Drupal Confirmation Pages

If you use Panels Pages for the bulk of you site building, you may have noticed that there are frequent limitations on some of the more random pages.

Image

An example is the comment confirmation delete form. I don’t need much on this form, the stock info is fine, but I want to add my logo at least. I don’t use the logo function that Drupal provides standard, I implement it with my own CSS.

On the form, I use the background element on the #node-confirmation-form ID to add the logo via the CSS shown in the SS. But since that places the background right underneath the form text, I have to tweak it a bit to move things around so that they look OK. I ended up using a combination of height, top, padding and relative positioning. I really just had to experiment until I got it right.

This is not the best approach, but it is a good quick and dirty way to customize a form strictly through CSS when Page Manager doesn’t offer to intercept it for you.

More on Variants for the node add/edit forms

So I have Forums, Blogs and Galleries. And I want to style each one differently. So my first thought is to put the form inside of a Panel Page so that I can add other content. And that is the right direction, but it isn’t enough.

The Node Add/Edit form is already in the Page Manager as a Panel Page. It is disabled by default. By enabling it, I will have the ability to customize the form’s display. I already explained the part about the contexts

Image

method of determining what node type will be affected by the change. But here is something to keep in mind.

If you enable the page, and then create a variant for a content type to be used (when you add a node to that content type for example) you will find that the add form for ALL content types looks like the variant you created for example, for the Blog entry content type.

You will need to create a variant for each of the content types individually or they will all inherit the one variant’s customizations. and what I had to do to make THAT work properly was to use a selection rule for the variants that come at the beginning of the list. Since variant order determines in a large part, what is applied, you have to create selectors so that the “filtering” process works properly.

This is one of Drupal’s great strengths, but it is also kinda strange to me and took a while for me to get my head around. Look at the SS. Each of the three content types has a variant. and a context that applies to it. But, without a Selection Rule that also applies to it, the variant will simply inherit its appearance from a rule above it, the first one that happens to apply. There are other ways to do these same things with selection rules

Validation Tools and Accessibility

well, the holidays are over. while i enjoyed eating three pounds of fudge per day, i am ready to get back in the saddle. coffee in hand, i am now on chapter 9 of shreve’s drupal theming book.

this book has been perfect for me. diving into the nuts and bolts of how Drupal really works. exploring and understanding the relationships between .tpl, .css and .info files in drupal is really the key to understanding how to make the site look the way you want it to.

so, i’m on cross browser compatibility. and therefore, standards compliant coding. here is a great tool. W3C Validator. more to come on this later.

http://www.totalvalidator.com/ for the firefox browser. install this them use the plugin to help with validation.

The Web Developer add-on and Total Validator let you temporarily disable JavaScript for page testing. This is important with forms because many browsers have jscript disabled. google “degrade gracefully” for info on this topic.

here is a section from the book that i found helpful:

Adobe Browser Lab: This convenient and well-designed utility is part of the Adobe CS Live suite of tools. It is available free of charge to owners of Adobe CS5. The tool provides live preview of both static and dynamic web pages. It allows for easy A/B comparisons and basic diagnostics. To use the service, visit http://browserlab.adobe.com.
Browsershots: The site provides a free service that allows you to submit a URL, then check back to see screenshots of the page in all the various browsers you select. While free, it can take a while to get results and there is no support for Apple or mobile devices. Visit the site at: http://www.browsershots.org.
CrossBrowserTesting: This commercial service offers a very wide range of operating systems and browsers, both traditional and mobile. Want to see how your site looks on Win98 SE running Netscape 4? You can do it here! The service includes both real time testing and a screenshots option. The site is available for a monthly subscription fee, or you can just try it out free for a week. Visit: http://crossbrowsertesting.com.

Here is some great info from the book about accessibilty:

The most commonly applied standards for web accessibility are promulgated by the W3C under the name the Web Accessibility Initiative (WAI). A subset of those guidelines, the Web Content Accessibility Guidelines (WCAG), is targeted at web developers. The WAI section of the W3C website includes a large amount of information on what it means to create accessible sites, along with resources to support your efforts.