Blog

Drupal Webforms – Controlling the Submit Button

The definition of frustration should be something about expecting a task to be short and simple but instead it takes a really long time. So it was with centering the submit button on a Drupal webform. Now, I dont want to give you the wrong impression, because the Drupal webforms module is fantastic. Right out of the box it did 95% of what I needed. Another 4% was fairly easy to accomplish by adding code to the Webform advanced settings -> Additional Processing section. The last 1% was a bit trickier to figure out, which was controlling the position and layout of the submit button.

\n\n

An implicit assumption is that most websites want to `brand or customize their buttons. Is this a fair assumption? Heres the default submit button of a Drupal webform.

\n\n

\n\n

Please, someone correct me if Im mistaken, but I could not find a way to control the appearance and layout of the submit button in the webforms admin interface. Which was kind of surprising, because the webforms module is feature rich. I was expecting a way to designate an image for the button and perhaps basic position settings (left, center, right). Again, to be fair, Drupal module development is open source developed, so I could contribute instead of casting stones, no?

\n\n

Anyhow, a quick peek at the page source of a form created with Drupal webforms shows this HTML for the submit button:

\n\n

\n\n

Which is inside this form tag:

\n\n

accept-charset=”UTF-8″ method=”post” id=”webform-client-form-3257″ class=”webform-client-form” enctype=”multipart/form-data”>

\n\n

The good news here is that both these elements have a class attribute. Again kudos to webforms team for doing this. So CSS to the rescue. Heres the CSS Im using to theme the submit button

\n\n

.webform-client-form .form-submit {

\n\n

background: url(`/site/images/submit.gif);

\n\n

background-color:transparent;

\n\n

border:medium none;

\n\n

cursor:pointer;

\n\n

padding:0;

\n\n

width: 100%;

\n\n

height:32px;

\n\n

background-repeat:no-repeat;

\n\n

background-position:center;

\n\n

}

\n\n

\n As you can see, Im using a background image, centering that image within its block and not repeating it. So here it is:\n

\n\n

\n\n

Two problems remain. Notice the text “submit” on top of the button image. As youve guessed, “submit” is the default text of the button. The workaround to get rid of the word “submit” is to put a single space ( ) in the Webform advanced settings -> Submit button text. Kudos to my colleague Youssef Chaker for finding this work around. An additional setting such as upload image button or url to button image would have been nice. Here is the final look of the submit button.

\n\n

\n\n

The remaining problem is that the CSS setting “width:100%” makes the entire width of the block clickable, not just the area above the submit button image. Its not ideal, but getting the button centered was more important. Tradeoffs, such is our world…

\n\n

Actually I found a new definition of frustration – getting this WYSIWSG editor to properly format and position text.

\n