-1
Сегодня я создаю контактный раздел моего сайта, но я пытался его плавать, и когда входы, где плавали, они не работали, они не были доступны для кликов. Есть ли причина, что он не работает?Невозможно поместить поле ввода?
Я читал онлайн, что это может быть потому, что это ниже другого элемента, поэтому я положил z-index: 999;, но это тоже не помогло.
То, что я пытаюсь сделать, это получить имя и почтовые ящики на одной строке с сообщениями ниже.
Вот мой код:
<? php
$errors = '';
$myemail = '[email protected]gmail.com'; //<-----Put Your email address here.
if (empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message'])) {
$errors. = "\n Error: All fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address)) {
$errors. = "\n Error: Invalid email address";
}
if (empty($errors)) {
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";
$headers = "From: $myemail\n";
$headers. = "Reply-To: $email_address";
mail($to, $email_subject, $email_body, $headers);
//redirect to the 'thank you' page
header('Location: index.html');
} ?>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<title> Error! < /title>
</head >
<body>
<!-- This page is displayed only if there is some error -->
<? php
echo nl2br($errors); ?>
< /body>
</html >/* Contact Form */
#contactbg {
position: absolute;
left: 0px;
top: 1670px;
width: 100%;
}
@media (min-width: 286px) {
#contactbg {
top: 1650px;
}
}
@media (min-width: 290px) {
#contactbg {
top: 1570px;
}
}
@media (min-width: 295px) {
#contactbg {
top: 1550px;
}
}
@media (min-width: 340px) {
#contactbg {
top: 1530px;
}
}
@media (min-width: 346px) {
#contactbg {
top: 1460px;
}
}
@media (min-width: 358px) {
#contactbg {
top: 1470px;
}
}
@media (min-width: 364px) {
#contactbg {
top: 1440px;
}
}
@media (min-width: 388px) {
#contactbg {
top: 1370px;
}
}
@media (min-width: 416px) {
#contactbg {
top: 1345px;
}
}
@media (min-width: 450px) {
#contactbg {
top: 1350px;
}
}
@media (min-width: 466px) {
#contactbg {
top: 1280px;
}
}
@media (min-width: 485px) {
#contactbg {
top: 1260px;
}
}
@media (min-width: 510px) {
#contactbg {
top: 1270px;
}
}
@media (min-width: 540px) {
#contactbg {
top: 1280px;
}
}
@media (min-width: 550px) {
#contactbg {
top: 1770px;
padding-bottom: 300px;
}
}
@media (min-width: 556px) {
#contactbg {
top: 1700px;
}
}
@media (min-width: 566px) {
#contactbg {
top: 1630px;
}
}
@media (min-width: 580px) {
#contactbg {
top: 1550px;
}
}
@media (min-width: 624px) {
#contactbg {
top: 1530px;
}
}
@media (min-width: 650px) {
#contactbg {
top: 1540px;
}
}
@media (min-width: 671px) {
#contactbg {
top: 1520px;
}
}
@media (min-width: 692px) {
#contactbg {
top: 1450px;
}
}
@media (min-width: 775px) {
#contactbg {
top: 1350px;
}
}
@media (min-width: 850px) {
#contactbg {
top: 1360px;
}
}
@media (min-width: 917px) {
#contactbg {
top: 1340px;
}
}
@media (min-width: 931px) {
#contactbg {
top: 1290px;
}
}
@media (min-width: 1122px) {
#contactbg {
top: 1200px;
}
}
@media (min-width: 550px) {
#contactbg h4 {
position: relative;
left: 50%;
transform: translateX(-50%);
}
#name {
float: left;
position: relative;
z-index: 999;
}
#email {
float: right;
position: relative;
z-index: 1999;
}
#message,
textarea {
width: 80%;
}
#message {
position: relative;
}
#submit {} .button-primary {
position: relative;
}
}
@media (min-width: 600px) {
textarea {
width: 75%;
}
}
@media (min-width: 800px) {
#name {
position: relative;
left: 100px;
}
#email {
position: relative;
right: 100px;
}
textarea {
width: 60%;
}
}
@media (min-width: 1000px) {
#name {
left: 150px;
}
#email {
right: 150px;
}
textarea {
width: 50%;
}
}
#name,
#email,
#message {
z-index: 10000;
}
#submit,
.button-primary {
position: relative;
left: 50%;
transform: translateX(-50%);
}
textarea {
font-family: Raleway;
font-size: 0.9em;
}<div id="contactbg">
<div class="container4">
<div class="row">
<div class="animated">
<div class="twelve columns">
<h4 id="contact">Get In Touch!</h4>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<form method="POST" name="contactform" action="contact-form-handler.php">
<div class="animated">
<p id="name">
<label for='name'>Your Name</label>
<input type="text" name="name" placeholder="Name">
</p>
</div>
<div class="animated">
<p id="email">
<label for='email'>Email</label>
<input type="text" name="email" placeholder="Email">
</p>
</div>
<div class="animated">
<p id="message">
<label for='message'>Message</label>
<textarea name="message" placeholder="Message"></textarea>
</p>
</div>
<div id="submit" class="animated">
<input class="button-primary" type="submit" value="Submit">
</div>
</form>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator = new Validator("contactform");
frmvalidator.addValidation("name", "req", "Please provide your name");
frmvalidator.addValidation("email", "req", "Please provide your email");
frmvalidator.addValidation("email", "email", "Please enter a valid email address");
</script>
</div>
</div>
</div>
</div>
Все ли код, необходимый для репликации проблемы? Попробуйте уменьшить код до уровня, достаточного для воспроизведения проблемы. Просто это может привести вас к решению. На стороне не ваши метки семантически разбиты, атрибут 'for = ''' должен указывать на атрибут 'id' на входном элементе, а не на тег' p'. –
Спасибо за предложение. – DatScreamer