Контактная форма с изображением в виде кнопок

0

Как я могу заставить кнопки иметь свои образы нетронутыми и по-прежнему отправлять почту или очищать форму? Я пытаюсь использовать изображение в качестве кнопок в этой форме контакта. одна кнопка - очистить форму, а другая кнопка - отправить почту на идентификатор почты.

Мое кодирование php:

<?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 = "[email protected]";  // 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>";
    }
}
?>

Мой HTML-код:

<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>
Теги:
imagebutton

1 ответ

1

Вы можете использовать изображение в качестве background для .button класса, добавив еще один класс, иначе вы можете обернуть изображение с a теге.

Пример: 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;
  }

или

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню