HTML program for subscription form for monthly magazine
In this tutorial, you will see how to create a HTML program for subscription form for monthly magazine .This subscribe newsletter form and php script helps us to build an email list for our website to give offers and giveaway method its like an digital marketing and your web blogs and email to users of new post and catching text.
.create a new empty file index.php
.create an empty style.css
.create an empty subscribe.php method for send mail.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center">Subscribe for our Newsletter</h2>
<p class="text-center"><br>Email subscription PHP script helps us to Build an Email Subscribers list For our website.<br><br></p>
</div>
<form class="form-inline" action="subscribe.php" method="post">
<div class="form-group"><input class="form-control" type="email" name="email" placeholder="Your Email"></div>
<div class="form-group"><button class="btn btn-primary" type="submit">Subscribe </button></div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Style.css
.newsletter-subscribe {
color: #313437;
background-color: #fff;
padding: 50px 0;
}
.newsletter-subscribe p {
color: #7d8285;
line-height: 1.5;
}
.newsletter-subscribe h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe form {
justify-content: center;
}
.newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: none;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
.newsletter-subscribe form .btn {
padding: 16px 32px;
border: none;
background: none;
box-shadow: none;
text-shadow: none;
opacity: 0.9;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
letter-spacing: 0.4px;
line-height: 1;
}
.newsletter-subscribe form .btn:hover {
opacity: 1;
}
.newsletter-subscribe form .btn:active {
transform: translateY(1px);
}
.newsletter-subscribe form .btn-primary {
background-color: green !important;
color: #fff;
outline: none !important;
}
Subscribe.php
<?php
if(isset($_POST['submit']))
{
$to = "me@example.com";
$from = "no-reply@example.com";
$headers = "From: " . $from ;
$subject = "New subscription";
$body = "New Member subscription: " . $_POST['email'];
if( filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) )
{
if (mail($to, $subject, $body, $headers, . $from))
{
echo 'Your e-mail (' . $_POST['email'] . ') has been added to our mailing list!';
}
else
{
echo 'There was a problem with your e-mail (' . $_POST['email'] . ')';
}
}
}
?>
I hope that you must be feeling Learn something on Newsletter. Please comment for any query. Keep visiting our website.
output:
Related Links:
How to create multiple table in one page in HTML