I am so unbelievably stuck with this, I have tried so many ways to do it , but I just cant seem to change the submit button of my contact form from the default button to an image I created. I have tried changing <input type="submit" to image, that changes the button to the image I want but then when you click on it, the form fails and the error message comes up. So I tried using .CSS and that changed the image, but again once you clicked on it then the form failed. I am absolutley lost and really need some help, I cant help thinking that I must have made a mistake in my form code, so here it is:

contactus.php

<?php 
if(isset($_POST['submit'])) { 
$to = "email@example.com"; 
$subject = "email@example.com"; 
$name_field = $_POST['username']; 
$email_field = $_POST['email']; 
$message = $_POST['message']; 
$body = "Username: $name_field\n Email: $email_field\n Message:\n $message"; 
print "<meta http-equiv=\"refresh\" content=\"0;URL=contactus.html\">";
mail($to, $subject, $body); 
} else { 
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
} 
?>

contactus.html





<form method="POST" action="contactus.php">

      <tr>
        <td>&nbsp;</td>
        <td align="left" valign="top" class="sel4">Username:</td>
        <td height="25" align="left" valign="top" class="text"><input type="text" name="username" style="width: 200px; height: 18px"></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left" valign="top" class="sel4">Email:</td>
        <td height="25" align="left" valign="top" class="text"><input type="text" name="email" style="width: 200px; height: 18px"></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left" valign="top" class="text">Message:</td>
        <td height="25" align="left" valign="top" class="text"><textarea name="message" style="width: 250px; height: 120px"></textarea></td>
        <td>&nbsp;</td>
      </tr>
<tr>
 <td width="12">&nbsp;</td>
            <td align="left" valign="top" class="text">&nbsp;</td>
            <td height="30" align="right" valign="bottom"> 




<input type="submit" src="images/send.jpg" name="submit">


</tr>
</form>

at the moment it is just the standard submit button, but I want to change it so it shows the image /images/send.jpg but everything I have tried has caused the form to fail.

I would be extremely grateful if anyone could help me with this, it may seem like a trivial task to many, but I have spent hours browseing the web for a solution, all of which result in the form failing. I know there is a way to do it, but I cant seem to do it, can ayone help?

thanks

    Well... if you know the exact height and width of the image, you could do something like this:

    <style type="text/css">
    #submitButton {
    	background-image: url(http://www.njoe.com/images/forums/newt.jpg);
    	border: 0px none;
    	height: 63px;
    	width: 144px;
    }
    </style>

    Then, your submit button would be something like:

    <input type="submit" name="submit" id="submitButton" value="" />

      I'm not totally sure but I think this can work too

      
      <input type=image src="image.gif" name="sub">
      

      look for a post name sub when pressed?

        D'oh! So it does. Gah.. that's me, always over-complicating things.

        Also, it's supposed to be "sub", but that's if you're using a W3C compliant browser. Wonderful Microsoft doesn't follow the rules here, and instead submits two variables: sub_x and sub_y (the coordinates of the image you clicked on). So you'd probably just put a hidden field in the form and check for that instead.

          Simple things from simple minds I always say.....LOL....some times you have to go more complicated to get all the functionality or future uses you may want or need....
          In fact I'm using your idea above for my spam button 🙂

          Yours is great because if you had this button in every page, (let's say its a spam vote button), and one day you got sick of the look and wanted to change it then all you need to do is change the style sheet and your done where is mine you have to go through and edit every single page which is fine if you have 5 pages but if you have 500 then they would FEEL THE PAIN...LOL

            Just a couple notes on the <input type="image"...> option:

            1. IE does not send the name/value pair in the post (or get) data, just the X and Y coordinates that were clicked. (FF and presumably other "real" browsers send both the name/value pair along with the clicked coordinates.) So you should not depend on the submit button's value in your form-processing script.

            2. You should include an ALT attribute in the input tag just as you would in an image tag for non-graphical browsers or if the image is otherwise not viewable for some reason.

              There are pros and cons of using my CSS method (e.g. I'm not sure how you'd work in ALTernate text, as you would for an image), but lately I've gone CSS-crazy, pouring over countless files with tables nested within a table nested within a table nested within... well anyway, lotsa tables, and using DIV/SPAN tags along with my newfound idol, CSS.

                bradgrafelman wrote:

                and using DIV/SPAN tags along with my newfound idol, CSS.

                Just wait 'til you realise what you can do when you style <dl> lists....

                But don't give up on tables. Think of them a little bit like "typed lists" - ordinary list elements allow you to chuck any old thing in each item regardless of what is in any of the other items. A table on the other hand at least strongly hints that all of the items (rows) have a common set of features. This collection of posts can be considered a table, for example. One row per post (of course), with columns for each of time of post, username, title, join date, location, .... content, and edit/quote/reply buttons; it just hasn't been styled that way. <tr> doesn't have to have {display:table-row} ....

                .... unless you're using IE, of course.

                  Write a Reply...