Question

Я создал простой сайт на GitHub. Я не очень хорош в программировании и проектировании. У меня проблемы с пониманием того, как работают веб-формы. Я создал формы загрузки, контакта и входа / регистрации. Когда я нажимаю Отправить, я вижу код вместо сообщения. Может кто-нибудь объяснить мне, что я должен был установить, чтобы они могли работать?

Мой. HTML код

    <!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="contactstyle.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<h4>

<br />

<br />

<h5>
State University
<br />
 NC
</h5>
<h1>PROJECT 'PREDICTING BANKRUPTCY'</h1>
</div>
<ul class="nav">
  <li><a href="login.html#">Log in</a></li>
  <li><a class="active" href="contact.html#">Contact</a></li>
  <li><a href="index.html#">Home</a></li>
</ul>
<div class="container">
  <div style="text-align:center">
    <h2>Find Us Here</h2>
  </div>
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3224.7664875089344!2d-79.77290698428045!3d36.074799315893024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s1601%20E%20Market%20St%2C%20Greensboro%2C%20NC%2027411!5e0!3m2!1sen!2sus!4v1582922684755!5m2!1sen!2sus" width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div class="rightinfo">
<br><br>
<h2>Contact information<br></h2>
<br>
<u>Email:</u> one@aggies.ncat.edu<br>
<u>Email:</u> two@aggies.ncat.edu<br>
<u>Email:</u> three@aggies.ncat.edu<br>
<br>
<em>You can call us anytime</em>
<br><br><br>
<u>Phone:</u><br>
<br>
<em>Please call only between<br>
5pm - 11pm during a week<br>
and anytime during a weekend</em>
</div>
    </div>
    <div class="row">
    <div class="column">

      <form method="POST" action="contactform.php" name="contactform" id="contactform">
        <label for="name">Name</label>
        <input type="text" id=name" name="name" placeholder="Your name..">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" placeholder="Your email..">
        <label for="message">Message</label>
        <textarea id="message" name="message" placeholder="Write something.." style="height:80px"></textarea>
        <input type="submit" name="submit" value="Submit">
      </form>
 </div>
  </div>

</div>
</body>
</html>

Скрипт

    <script>
      document.contactform.onsubmit=function()
      {
      if(document.contactform.name.value =='')
      {
      alert("Please enter your name");
      document.contactform.name.focus();
      return false;
      }
      else if(document.contactform.email.value =='')
      {
      alert("Please enter your email address");
      document.contactform.email.focus();
      return false;
      }
      else if(document.contactform.message.value =='')
      {
      alert("Please enter your message");
      document.contactform.message.focus();
      return false;
      }
      return true;
      }
<script>

Мой . css код

    body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Style the container/contact section */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}

/* Create two columns that float next to eachother */
.column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}


.rightinfo {
    float: right;
    text-align: left;
    margin-right: 300px;
}
h1 {
        background-color: #CED8F6;
    text-align: center;
        margin-right: 0;
}
.header {
    padding: 40px;
    text-align: center;
    background: #CED8F6;
}

.header h1 {
    text-align: center;
    font-size: 40px;
    font-family: Castellar, Helvetica, sans-serif;
}
h4 {
  float: left;
  font-family: Castellar, Helvetica, sans-serif;
  margin-left:10px;
}
h5 {
  float: right;
  font-family: Castellar, Helvetica, sans-serif;
  margin-right:10px;
  margin-top:30px;
}

Мой. PHP код

    <?php

if (empty($_POST['submit']))
{
    echo "Form is not submitted";
    exit;
}
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']))
{
    echo "Please fill the form";
    exit;
}
  $name = $_POST['name'];
    $email =  $_POST['email'];
    $message = $_POST['message'];
    mail ( 'violettamaj53@gmail.com' , 'New form submission' ,
     'New form submission: Name: $name, Email: $email, Message: $message' );
    header('Location: ContactThankYou.html');
?>

Другой. html код, но этот код ни к чему не относится. Я получил это из примера. Это сработало для человека, показывающего всю контактную форму.

    <!DOCTYPE html>
<html>
<head>
<title>Thank you</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  label {
    text-align: center;
    font-size: 40px;
    font-family: Castellar, Helvetica, sans-serif;
    color: #08088A;
  }
</style>
</head>
<body>
  <h1>Thank you!</h1>
</body>
</html>

Спасибо

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Нет похожих вопросов