php联系表单工作，但看起来不正确 [英] php contact form works but doesn't look right

查看：213
本文介绍了php联系表单工作，但看起来不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

继续我发展我的第一个真正的网站，我又来到另一个路障。

continuing my development of my first real site, I have again come to another road block.

我想获得一个在我的网站上工作的联系表单，经过大量的研究，我能够得到表单接受输入，验证，显示空的错误必填字段，然后回显输入的数据，以便以后删除回声并以电子邮件发送该数据。到目前为止这么好，但我厌倦了现在的工作，所以现在我试图让页面看起来像其他人（导航栏，字体等）。

I am trying to get a contact form working on my site, and after lots of research I was able to get the form to accept input, validate, show errors for empty "required fields" and then echo the inputted data, with intent to later remove the echo and have that data emailed. so far so good, but I'm tired of working on that right now, so for now I'm trying to get the page to look like the others (navbar, font, etc).

我的文件夹结构如下（简化）：

my folder structure is like this(simplified):

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

如果我从我的get_post.php文件中删除php代码，并将扩展名重命名为.html，一切看起来都应该，尽管页面是静态的。
这里是我的PHP代码

If I strip the php code from my get_post.php file and rename the extension to .html, everything looks the way it should, though the page is static. here is my php code

<?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页面。也许有人可以提供一个更好的方法来接近这个？

obviously I'm doing something wrong, likely many things but lets just start with getting the page to look like my html pages. Maybe someone can provide a better way of approaching this?

我还要感谢大家提前的帮助！这是一个伟大的社区，我很高兴在这里：）

I also want to thank everyone in advance for their help! This is such a great community and I'm happy to be here :)

推荐答案

似乎你没有修改你的引导链接以反映 .php 文件的路径，而不是 .html 文件。

It seems that you have not modified your bootstrap links to reflect the path of the .php file as opposed to the .html files.

Ie 

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

而不是

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

（与 bootstrap.min.js 链接进一步向下）

此外，您的Font Awesome链接似乎有点偏离：

Additionally your "Font Awesome" link seems a bit off:

<link href="..//fa\css\font-awesome.css" rel="stylesheet" type="text/css" />

应为

<link href="../fa/css/font-awesome.css" rel="stylesheet" type="text/css" />

更正此问题可能会解决您的问题。在这之前，然而，我会考虑如果有任何好的理由保持php文件在一个单独的文件夹中？如果你有一个很好的理由，我想这很好，但它似乎是一个不必要的并发症。

Correcting this might fix your problems. Before doing this however, i would consider if there was any good reason for keeping the php-file in a separate folder? If you have a good reason i guess that's fine, but it seems like an unnecessary complication.

另外一个注意事项：假设你有互联网可用时工作：bootstrap和Font Awesome文件通过快速，可靠的内容交付网络提供（例如 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ），并使用这些将使您的本地，相对链接不必要。 ：）

An additional note: Assuming you have internet available when working on this: the bootstrap and Font Awesome files are available through fast, reliable content delivery networks (e.g. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css), and using these would make your local, relative links unnecessary. :)

希望这有助！

这篇关于php联系表单工作，但看起来不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆