-1
Продолжая мое развитие моего первого настоящего сайта, я снова пришел в другой блок дороги.php контактная форма работает, но выглядит неправильно
Я пытаюсь получить контактную форму, работающую на моем сайте, и после многих исследований мне удалось получить форму для принятия ввода, проверки, отображения ошибок для пустых «обязательных полей», а затем эхо-данных, с намерением позже удалить эхо и отправить эти данные по электронной почте. пока что так хорошо, но я устал работать над этим прямо сейчас, поэтому на данный момент я пытаюсь заставить страницу выглядеть как другие (navbar, font и т. д.).
моя структура папок, как это (упрощенный):
Project
[bootstrap]
-[css]
-[fonts]
-[js]
[css]
-HStyles.css
-EStyles.css
-CStyles.css
[fa] (font awesome)
[img]
-1.jpg
- 2.jpg
[php]
-get_post.php(contact page)
home.html
events.html
Если я раздеться код PHP из моего файла get_post.php и переименовать расширение на .html, все выглядит так, как надо, хотя страница статична. вот мой PHP код
<?php
define("TITLE", "POST");
if(isset($_POST["submit"])) {
function validateFormData($_formData) {
$formData = trim (stripslashes (htmlspecialchars($formData)));
return $formData;
}
if (!$_POST["name"]) {
$nameError = "Required Field";
}
else {
$name = validateFormData($_POST["name"]);
}
if (!$_POST["lname"]) {
$nameError = "Required Field";
}
else {
$name = validateFormData($_POST["lname"]);
}
if (!$_POST["email"]) {
$emailError = "Required Field";
}
else {
$email = validateFormData($_POST["email"]);
}
}
if (!$_POST["phone"]) {
$nameError = "Required Field";
}
else {
$name = validateFormData($_POST["phone"]);
}
if (!$_POST["message"]) {
$nameError = "Required Field";
}
else {
$name = validateFormData($_POST["message"]);
}
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="..//fa\css\font-awesome.css" rel="stylesheet" type="text/css" />
<title>
The Friendly Medium
</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/CStyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="content">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="../home.html">Home</a>
</li>
<li><a class="glass" href="../events.html">Events</a>
</li>
<li>
<a class="glass" href="../private-readings.html">Private Readings</a>
</li>
<li>
<a class="glass" href="../testimonials.html">Testimonials</a>
</li>
<li class="active">
<a class="glass" href="get_post.php">Contact Us</a>
</li>
</ul>
<div class="navsocial">
<ul class="navbar-right social">
<li><a class="fb" href="https://www.facebook.com/DawnCFriendly/?fref=ts"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a class="twitter" href="https://twitter.com/dfriendlymedium"><i class="fa fa-lg fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<section class="contact">
<div class="container"></div>
<p>Please fill out the form below</p>
<h5 class="text-danger">* Reqired Field</h5>
<div class="container">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<small class="text-danger">* <?php echo $nameError; ?></small>
<input type="text" name="name" class="form-control input-lg" placeholder="First Name*">
<input type="text" name="lname" class="form-control input-lg" placeholder="Last Name">
<small class="text-danger">* <?php echo $emailError; ?></small>
<input type="text" name="email" class="form-control input-lg" placeholder="Email*">
<input type="text" name="phone" class="form-control input-lg" placeholder="Phone">
<small class="text-danger">* <?php echo $nameError; ?></small>
<textarea class="form-control" name="message" rows="8" placeholder="Message*"></textarea>
<input type="submit" name="submit">
</form>
</div>
</section>
<?php
if(isset($_POST["submit"])) {
echo "your info <br>";
echo $_POST["name"];
}
?><br>
<?php
if(isset($_POST["submit"])) {
echo $_POST["lname"];
}
?><br>
<?php
if(isset($_POST["submit"])) {
echo $_POST["email"];
}
?><br>
<?php
if(isset($_POST["submit"])) {
echo $_POST["phone"];
}
?><br>
<?php
if(isset($_POST["submit"])) {
echo $_POST["message"];
}
?>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js "></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js "></script>
</div>
</body>
</html>
и вот мой CSS
html {
position: relative;
min-height: 100%;
overflow-y: scroll;
}
body {
height: 100%;
overflow-x: hidden;
margin-bottom: 100px;
}
#content {
padding-bottom: 1px;
/* Height of the footer element */
}
nav.navbar-inverse {
margin-bottom: 1px;
text-align: center;
font-size: 20px;
background: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.9) 0%, rgba(34, 34, 34, 0.9) 100%);
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.9) 0%, rgba(34, 34, 34, 1) 100%);
}
.navbar-inverse .navbar-nav > li > a {
border-radius: 4px;
color: whitesmoke;
-webkit-transition: all ease .2s;
-moz-transition: all ease .2s;
-o-transition: all ease .2s;
transition: all ease .2s;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
text-shadow: 1.3px 1px #222;
background-color: #4da7ff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
text-shadow: 1.3px 1px #222;
background-color: #4da7ff;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: black;
}
.navbar .navbar-nav {
float: none;
display: inline-block;
vertical-align: top;
margin: 0px;
font-size: 20px;
font-weight: 600;
}
.navbar-nav >li {
display: inline;
border-radius: 4px;
color: whitesmoke;
}
.navbar-nav >li {
background: none;
border-color: white;
box-shadow: inset 0 1 14px #222;
box-shadow: 0 0 14px #222;
margin-left: 5px;
margin-right: 5px;
background: rgba(65, 70, 70, 0.9);
}
.social {
padding: 0px;
}
.navsocial ul {
margin-top: -55px;
padding: 1px;
}
.navsocial i {
font-size: 30px;
text-align: center;
padding-top: 12px;
}
.navsocial ul li {
margin: 4px;
display: inline-block;
}
.facebook {
color: #4060A5;
}
.twitter {
color: #00ABE3;
}
.fa-facebook:hover {
-webkit-transition: all ease .2s;
-moz-transition: all ease .2s;
-o-transition: all ease .2s;
transition: all ease .2s;
color: white;
}
.fa-twitter {
color: #00ABE3;
}
.fa-twitter:hover {
-webkit-transition: all ease .2s;
-moz-transition: all ease .2s;
-o-transition: all ease .2s;
transition: all ease .2s;
color: white;
}
.navbar-brand>img {
display: inline;
margin-right: -50px;
}
.contact p {
margin-top: 100px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
}
.contact h5 {
text-align: center;
margin-top: 150px;
margin-bottom: -130px;
}
form {
text-align: left;
width: 300px;
margin: 140px auto 100px;
}
.form-control {
display: block;
width: 300px;
padding: 7px;
border: solid 1px #888;
margin: 0 0 14px;
font-size: 14px;
font-family: arial;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.form-control message {
font-size: 10px;
}
#footer {
position: absolute;
background: #222;
color: white;
text-align: center;
padding: 5px;
padding-bottom: 0px;
bottom: 0;
left: 0;
width: 100%;
font-family: calibri, Times, serif;
}
@media only screen and (max-width: 568px) {
.cover h1 {
font-size: 40px;
}
section {
padding: 20px;
}
.newsletter {
padding-top: 64px;
}
.newsletter p {
margin-bottom: 75px;
}
}
@media only screen and (min-width: 768px) {
.about p {
font-size: 15px;
margin-right: 75px;
margin-left: 15px;
}
.navsocial i {
margin-top: 5px;
padding-top: 11px;
font-size: 20px;
}
}
@media only screen and (min-width: 991px) {
.about p {
font-size: 15px;
margin-right: 100px;
margin-left: 100px;
}
}
@media only screen and (min-width: 1025px) {
.about p {
font-size: 15px;
margin-right: 150px;
margin-left: 150px;
}
}
@media only screen and (min-width: 1150px) {
.about p {
font-size: 15px;
margin-right: 200px;
margin-left: 200px;
}
}
@media only screen and (min-width: 1400px) {
.about p {
font-size: 15px;
margin-right: 300px;
margin-left: 300px;
}
}
@media only screen and (max-width: 991px) {
.navsocial i {
font-size: 20px;
}
.navbar .navbar-collapse li {
font-size: 20px;
}
.navbar-nav >li {
border-radius: 4px;
color: whitesmoke;
}
@media only screen and (max-width: 900px) {
nav.navbar-inverse {
margin-left: -50px;
}
}
, очевидно, что я делаю что-то неправильно, наверно много вещей, но позволяет просто начать с получения страницы, чтобы посмотреть, как мои HTML-страницы , Может быть, кто-то может предложить лучший способ приблизиться к этому?
Я также хочу поблагодарить всех за их помощь! Это такое замечательное сообщество, и я рад быть здесь :)
спасибо, что сработал! не могу поверить, что я пропустил это, я думаю, что долгие часы, глядя на код, сделают это. Я также перенес файл php в корневой каталог. Причина, по которой это было в первую очередь, состояла в том, что, когда я начал создавать сайт, я еще не изучил какой-либо php, поэтому я рассматривал его как свои папки css и img и группировал типы файлов таким образом, в то время как контактная страница была разработана в html-файле, который теперь не нужен. – Brandon
Живи и учись! :) Ошибки вроде этого легко сделаны и легко пропущены! – henrheid