Question

我正在尝试为我们的网站设置简报电子邮件捕获表单。我是一个完全的初学者，所以请耐心等待。

我不确定如何解决这个问题。有什么想法吗？

这是CSS：

<style media="screen" type="text/css"> body {
  background: #000000;
  font-family: 'Lato', sans-serif;
  color: #FDFCFB;
  text-align: center;
}
form {
  width: 450px;
  margin: 17% auto;
}
.header {
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.description {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.3em;
  margin: -2px 0 45px;
}
.input {
  display: flex;
  align-items: center;
}
.button {
  height: 44px;
  border: none;
}
#email {
  width: 75%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}
#submit {
  width: 25%;
  height: 46px;
  background: #E86C8D;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
#submit:hover {
  background: #d45d7d;
}
input:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;
}
</style>

<head>
  <meta charset="utf-8">
  <title>Be The First To Know!</title>
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>

<body>
  <form method="post" action="http://www.buckleycricketclub.com/cgi-bin/FormMail.pl" name="sign up for beta form">
    <div class="header">
      <p>BE THE FIRST TO KNOW</p>
    </div>
    <div class="description">
      <p>Buckley Cricket Club is almost ready. If you're interested in more information about our site, then sign up below to get exclusive news.</p>
    </div>
    <div class="input">
      <input type="text" class="button" id="email" name="email" placeholder="name@example.com">
      <input type="submit" class="button" id="submit" value="SEND">
      <input type="hidden" name="recipient" value="lee.burkhill@buckleycricketclub.com" />
      <input type="hidden" name="subject" value="Subject" />
    </div>
  </form>
</body>

希望这会有所帮助。正如我所说的那样，我是一个完全的初学者，所以很难用我有限的知识把它拼凑起来！

Answer 1

我假设您的服务器处理PHP以获得此答案。

将表单标记更改为：

<head>
  <meta charset="utf-8">
  <title>Be The First To Know!</title>
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>

<body>
  <form method="post" name="sign up for beta form" action="contact-form-handler.php">
    <div class="header">
      <p>BE THE FIRST TO KNOW</p>
    </div>
    <div class="description">
      <p>Buckley Cricket Club is almost ready. If you're interested in more information about our site, then sign up below to get exclusive news.</p>
    </div>
    <div class="input">
      <input type="text" class="button" id="email" name="email" placeholder="name@example.com">
      <input type="submit" class="button" id="submit" value="SEND">
    </div>
  </form>
</body>

现在在与标记名为＆＃34; contact-form-handler.php＆＃34;的标记相同的目录中创建一个新文件。并粘贴以下内容，确保更改来自＆＃34; YOUR_EMAIL_ADDRESS_HERE@DOMAIN.COM"无论您的电子邮件地址是什么：

<?php 
$errors = '';
$myemail = 'YOUR_EMAIL_ADDRESS_HERE@DOMAIN.COM';
if(empty($_POST['email']))
{
    $errors .= "\n Please provide your email address.<br/>";
}
$email_address = $_POST['email']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n That email address is invalid.";
}

if( empty($errors))
{
    $to = $myemail; 
    $email_subject = "Signup notice from $email_address";
    $email_body = "$email_address has signed up for the mailing list."; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    header('Location: thank-you.html');
}
?>

最后，创建一个标题为＆＃34; thank-you.html＆＃34;并且在人们订阅之后将其变成感谢页面。

HTML初学者：代码不会通过

1 个答案: