Contact form with image as buttons

Question

How can I make the buttons have their images intact and still send the mail or clear the form? I am trying to use image as buttons in this contact form. one button is to clear the form and the other button is to send the mail to a mail id.

My php coding is:

<?php
$submitted = FALSE;
if ($_POST['contact_form']) {
    $submitted = TRUE;  // The form has been submitted and everything is ok so far…
    $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
    $email = htmlspecialchars($_POST['email'], ENT_QUOTES);
    $website = htmlspecialchars($_POST['website'], ENT_QUOTES);
    $message = htmlspecialchars($_POST['message'], ENT_QUOTES);
    if ($name == "") {
        // if the name is blank… give error notice.
        echo "<p>Please enter your name.</p>";
        $submitted = FALSE;  // Set this to FALSE so that it the message is not sent.
    }
    if ($email == "") {
        // if the email is blank… give error notice.
        echo "<p>Please enter your e-mail address so that we can reply to you.</p>";
        $submitted = FALSE;  // Set this to FALSE so that it the message is not sent.
    }
    if ($message == "") {
        // if the message is blank… give error notice.
        echo "<p>Please enter a message.</p>";
        $submitted = FALSE;  // Set this to FALSE so that it the message is not sent.
    }
    if ($_POST['email'] != "" && (!strstr($_POST['email'], "@") || !strstr($_POST['email'], "."))) {
        // if the string does not contain "@" OR the string does not contain "." then…
        // supply a different error notice.
        echo "<p>Please enter a valid e-mail address.</p>";
        $submitted = FALSE;  // Set this to FALSE so that it the message is not sent.
    }
    $to = "genxcoders@gmail.com";  // Set the target email address.
    $header = "From: $email";
    $attention = "$name has sent you contact e-mail from GenXCoders.in Contact Form!";
    $message = "Attention: $attention \n From: $name \n Message: $message \n";
    if ($submitted == TRUE) {
        mail($to, $attention, $message, $header);
        echo "<p>Thank you $name. Your message has been sent.</p>";
    }
}
?>

My HTML Code is:

<form id="form" method="post" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>">
    <fieldset>
        <p>
            <label>
                <input name="name" value="Name" onBlur="if (this.value == '')
                            this.value = 'Name'" onFocus="if (this.value == 'Name')
                                        this.value = ''"/>
            </label>
        </p>
        <p>
            <label>
                <input name="email" value="Email" onBlur="if (this.value == '')
                            this.value = 'Email'" onFocus="if (this.value == 'Email')
                                        this.value = ''" />
            </label>
        </p>
        <p>
            <label>
                <input name="website" value="Website" onBlur="if (this.value == '')
                            this.value = 'Name'" onFocus="if (this.value == 'Name')
                                        this.value = ''"/>
            </label>
        </p>
        <p>
            <label>
                <textarea name="message" cols="30" rows="20" onBlur="if (this.value == '') {
                            this.value = 'Message'
                        }" onFocus="if (this.value == 'Message') {
                                    this.value = ''
                                }" ></textarea>
            </label>
        </p>
        <div class="btns">
            <a href="" class="button">
                Clear
            </a>
            <a href="#" class="button" onClick="document.getElementById('form').submit()">
                Send
            </a>
        </div>  
    </fieldset>
</form>

Answer 1

You can use image as background for the .button class by adding another class or else you can wrap the image with a tag.

Ex: HTML

    <a href="#" class="button btn-send" onClick="document.getElementById('form').submit()">
    </a>

CSS

.btn-send {
  width:40px; /* width of the image or button */
  height:20px; /* height of the image or button */
  background-image: url('path-to-image') no-repeat top left;
  }

or

   <a href="#" class="button" onClick="document.getElementById('form').submit()">
     <img src="/path-to-image" alt="Send" />
            </a>