I am building a custom form inside a block that has a clickable image as submit.

Here the screenshot of the outcome:

submit image with awkward styling

Here is the form code:

function my_form($form, &$form_state) {
  $image = '#';

  if (module_exists('my_base') && function_exists('my_base_get_form_settings')){
    $image = my_base_get_form_settings('IMAGE');
    $form['my_text'] = array(
      '#markup' => '<p>'.my_base_get_form_settings('BODY').'</p>'
  $form['submit'] = array(
    '#type' => 'image_button',
    '#src' => $image,
    '#attributes' => array(
                      'style' => 'width:80%',
                      'OnSubmit' => 'my_function();return false;'),
  return $form;

I want the image to be clickable and to run the javascript, but without the ugly style of the default button. I didn't find any example that matched my needs.

How to I properly build an image submit in drupal 7? This is obviusly not the right way.

1 Answer 1


You could try a modification of this: found it here.

function theme_form_comment_form_alter(&$form, &$form_state, &$form_id) {

  $form['actions']['submit']['#type'] = 'image_button';
  $form['actions']['submit']['#src'] = base_path() . path_to_theme() . '/img/button-off.gif';
  $form['actions']['submit']['#attributes']['title'] = t('Create Comment');
  $form['actions']['submit']['#attributes']['onmouseover'] = "this.src='" . base_path() . path_to_theme() . "/img/button-on.gif'";
  $form['actions']['submit']['#attributes']['onmouseout'] = "this.src='" . base_path() . path_to_theme() . "/img/button-off.gif'";

  • Thanks for the answr Geoff, I know this article. The solution has 2 flaws from my point of view: 1. I am building the form, so I would prefer to use the form api to build it right instead of using a form alter hook, if possible; 2. I don't need rollover and I have already specified the same input type 'image_button' as the article.
    – Terix
    Jun 19, 2014 at 17:35
  • 1) that's why I included 'a modification' in my answer. 2) this seems to be a common method to produce an image button, so why do you believe it is not correct? Does the button not show properly? or is it that the function does not run - you don't state in your question.
    – Geoff
    Jun 19, 2014 at 17:40
  • It seems to me I already used what I could from that article... but if nobody else answers, I will try to alter my own form after I built it, it's just that feels awkward to me to build something and then edit it instead of building it right the first time. I want the placeholder image to show without the button style around it, like would be a normal image added.
    – Terix
    Jun 19, 2014 at 17:51
  • you're still not being clear - does your function work? your original question didn't state that it worked, and you were looking for a best practice approach, which I am now guessing is your original question, so I took a guess with my answer. Unclear questions lead to unclear and occasionally not relevant answers.
    – Geoff
    Jun 19, 2014 at 17:56
  • Sorry Geoff, maybe yo are right. My first priority is to get rid of the button style all around the placeholder image, that is very ugly. Once that is solved, I want to be sure that the function works, but as far as now, it seems to be.
    – Terix
    Jun 19, 2014 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.