<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript">
document.getElementById("errorbox").style.display = "none";
document.getElementById("erbox").style.display = "none";
$("#submit").click( function() {
alert('working');
$("#errorbox").css("display","");
$("#erbox").css("display","");
$("#errorbox").html(<?php echo $error.$successMessage; ?>);
});
</script>
body {
margin : 0;
padding : 0;
background-image : url('196-1963826_abstract-color-wallpaper-hd.jpg');
background-position : center;
background-repeat : no-repeat;
background-size : fit;
}
.container {
width : 500px;
height : 650px;
background-image : url('photo-1525847185619-02460ddde30d.jpg');
text-align : center;
postion : relative;
margin-left : 30%;
color : #ffffff;
}
h1 {
font-size : 50px;
margin-top : 50px;
padding-top : 20px;
padding-bottom : -10px;
}
h4 {
position : relative;
margin-top : -30px;
}
.email {
margin-top : 100px;
font-size : 25px;
font-weight : bold;
}
.textholder {
width : 50%;
padding : 7px;
border-radius : 30px;
align : text-align;
}
h6 {
font-size : 15px;
margin-top : 3px;
color:#00ffff;
}
.subject {
margin-top : -05px;
font-size : 25px;
font-weight : bold;
}
.ftr {
margin-top : 50px;
font-size : 25px;
font-weight : bold;
}
.texta {
width : 400px;
}
.submit {
padding :5px;
width : 80px;
color : #1c8adb;
border-radius : 20px;
margin-top : 40px;
}
.submit:hover {
padding :5px;
width : 80px;
color : #ffffff;
background-color : #1c8adb;
border-radius : 20px;
margin-top : 40px;
}
footer {
background-color : #FFA500;
padding : 20px;
margin-left : -10px;
width : 100%;
height : 40px;
position : relative;
margin-top : 50px;
margin-bottom : -10px;
}
.contact {
float : right;
margin-right : 15px;
font-weight : bold;
margin-bottom : 10px;
}
.bgrnd {
float : left;
margin-left : 100px;
font-weight : bold;
}
.spnsr {
float : left;
margin-left : 100px;
font-weight : bold;
margin-bottom : 10px;
}
.imag {
position : absolute;
z-index : 1;
margin-bottom : 10px;
padding-bottom : 10px;
}
.ui-dialog {
color : #ffffff;
background-color : #808080;
padding-left : 20px;
border : 4px solid #0000ff;
}
#errorbox {
width : 350px;
height : 400px;
padding : 20px;
background-color : #fff;
position : absolute;
z-index : 0.5;
margin-top : 50px;
margin-left : 50px;
border : 6px solid grey;
font-family : viner hand itc;
}
.erbtn {
position : absolute;
float: right;
margin-left : 320px;
margin-top : 435px;
z-index : 1;
}
#errorbtn {
width : 100px;
height : 30px;
padding : 5px;
border : 2px solid grey;
font-weight : bold;
}
<?php
$error = ""; $successMessage = "";
if ($_POST) {
if (!$_POST["email"]) {
$error .= "An email address is required.<br>";
}
if (!$_POST["content"]) {
$error .= "The content field is required.<br>";
}
if (!$_POST["subject"]) {
$error .= "The subject is required.<br>";
}
if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "The email address is invalid.<br>";
}
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' . $error . '</div>';
} else {
$emailTo ="admin@gentlemensidea.com";
$subject = $_POST['subject'];
$content = $_POST['content'];
$headers = "From: ".$_POST['email'];
if (mail($emailTo, $subject, $content, $headers)) {
$successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
} else {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="logo_S0a_2.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css" rel="stylesheet">
<!-- using internal css -->
</style>
<title>
Contact Form- Gentlemens' Idea
</title>
</head>
<body>
<div class="container">
<header>
<h1>Contact Us</h1>
<h4>Send Us Your Queries<h4>
</header>
<div id="errorbox"><? echo $error.$successMessage; ?>
</div>
<p class="erbtn" id="erbox">
<button type="button" id="errorbtn">okay </button>
</p>
<form>
<div class="email">
<label for="email">Email-Id</label>
<input type="email" class="textholder" id="email" name="email" placeholder="Do care to enter email">
<h6>We'll never share your email with anyone else.</h6>
<br> </div>
<div class="subject">
<label for="subject">Subject</label>
<input type="text" class="textholder" id="subject" name="subject" placeholder="please care to enter a subject">
<br> </div>
<div class="ftr">
<label for="texta">How would you like our help?</label>
<textarea class="texta" id="content" name="content" rows="8" ></textarea>
</div>
<input type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
<p class="imag">
<img src="logo_S0a_2.ico" alt="logo website" width="100px" height="100px">
</p>
<footer>
<div class="contact">
contact us: +91 7782848946 <br>
or email us at admin@gentlemensidea.com
<br> © 2020 Gentlemens' Idea, Inc. All rights reserved.
</div>
<div class="bgrnd">
The image in the background belongs to its copyrighted owner and not me.
</div>
<div class="spnsr" link="blue">
This site is being hosted at ecowebhosting.
site hosting and ip address may change. <br>
For any queries,complaints or updates related to website..
email us at <a href="https://www.gmail.com" target="_blank">admin@gentlemensidea.com</a>
</div>
</footer>
</body>
</html>
ссылка на сайт
я знаю, что есть ошибки, потому что я новичок в php. поэтому постарайтесь помочь этому бедному кодеру.
Я пытался использовать juery ui диалоги и модалы, и они вроде работали, но с кодом css, который я использую, он спрятался в фоновом режиме. поэтому мне нужно было удалить его. я не знаю, какой код ajax решит мою проблему, поэтому я тоже этим не пользовался. и жюри не работает. Я работал над этим на другом сайте. пожалуйста, позаботьтесь, чтобы проверить это тоже и проверить на ошибки.