How To Create an Email Subscription Form Using HTML, CSS, and PHP
Hi there, readers You will discover how to use HTML, CSS, and PHP to develop an email subscription form in today’s blog post. PHP will be used in this form to help send an email as soon as a new user subscribes to the form or blog. Previously, I had also posted a blog on Email Subscription Box using simply HTML & CSS.
By providing their email addresses in a subscription form, users of a website can decide to receive email updates on a regular basis.
In order to use this software (Popup Email Subscription Box in PHP), first navigate to the webpage and click the “Show Modal” button. This will cause the Email Subscription Box to slide into view. You must click on the Subscribe button after entering your email address in the email form. After clicking this button, a brief message will be sent to your email address and an error notice will appear if your email address is invalid. If your email address is legitimate, a success message labeled “Thanks for subscribing us” will appear.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Email Subscription Form].
You Might Like This:
- How To Advanced AWS Certified Cloud Practitioner – 2023
- How To Solving Error 48: Address Already in Use on Your Network
- How To Troubleshooting: “errno 2” – Resolving File and Directory Errors
- How To Resolving Python3 Pip Module Issues on Linux (/usr/bin/python3)
- How To Solving the ‘pip’ Module Missing Error in Python (/usr/bin/python)
Video Tutorial of Email Subscription Form
You saw an email subscription form utilizing HTML, CSS, and PHP in the video. PHP is used to verify the email address given by the user and deliver mail to that address. Only HTML and CSS are used to design the subscription form that may be shown or hidden on a button or cancel icon click. To show or hide the form on click, I utilized HTML’s and tags.
I’ve sent mail from Localhost using this method in the video, however you may need to configure two XAMPP files first, so your message might not transmit. I’ve already posted a blog post explaining how to set up XAMPP so that PHP may send mail from localhost.
Popup Email Subscription Form in PHP [Source Codes]
To create this program [Popup Email Subscription Box in PHP]. First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following codes into your file. First, create a PHP file with the name of index.php and paste the given codes in your PHP file. Remember, you’ve to create a file with .php extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscription Form | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<input type="checkbox" id="toggle">
<label for="toggle" class="show-btn">Show Modal</label>
<div class="wrapper">
<label for="toggle">
<i class="cancel-icon fas fa-times"></i>
</label>
<div class="icon"><i class="far fa-envelope"></i></div>
<div class="content">
<header>Become a Subscriber</header>
<p>Subscribe to our blog and get the latest updates straight to your inbox.</p>
</div>
<form action="index.php" method="POST">
<?php
$userEmail = ""; //first we leave email field blank
if(isset($_POST['subscribe'])){ //if subscribe btn clicked
$userEmail = $_POST['email']; //getting user entered email
if(filter_var($userEmail, FILTER_VALIDATE_EMAIL)){ //validating user email
$subject = "Thanks for Subscribing us - CodingNepal";
$message = "Thanks for subscribing to our blog. You'll always receive updates from us. And we won't share and sell your information.";
$sender = "From: [email protected]";
//php function to send mail
if(mail($userEmail, $subject, $message, $sender)){
?>
<!-- show sucess message once email send successfully -->
<div class="alert success-alert">
<?php echo "Thanks for Subscribing us." ?>
</div>
<?php
$userEmail = "";
}else{
?>
<!-- show error message if somehow mail can't be sent -->
<div class="alert error-alert">
<?php echo "Failed while sending your mail!" ?>
</div>
<?php
}
}else{
?>
<!-- show error message if user entered email is not valid -->
<div class="alert error-alert">
<?php echo "$userEmail is not a valid email address!" ?>
</div>
<?php
}
}
?>
<div class="field">
<input type="text" class="email" name="email" placeholder="Email Address" required value="<?php echo $userEmail ?>">
</div>
<div class="field btn">
<div class="layer"></div>
<button type="submit" name="subscribe">Subscribe</button>
</div>
</form>
<div class="text">We do not share your information.</div>
</div>
</body>
</html>Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
background: linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
}
::selection{
color: #fff;
background: rgb(142,197,252);
}
.show-btn, .wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.show-btn{
color: rgb(142,197,252);
padding: 13px 18px;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}
.wrapper{
z-index: 5;
background: #fff;
padding: 30px;
text-align: center;
max-width: 400px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
top: 50%;
opacity: 1;
pointer-events: auto;
transition: all 0.3s ease;
}
#toggle{
display: none;
}
#toggle:checked ~ .wrapper{
opacity: 0;
pointer-events: none;
top: 40%;
}
.wrapper .cancel-icon{
position: absolute;
right: 20px;
top: 20px;
color: rgb(142,197,252);
cursor: pointer;
}
.cancel-icon:hover{
color: rgb(224,195,252);
}
.wrapper .icon{
height: 110px;
width: 110px;
background: linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
line-height: 110px;
border-radius: 50%;
color: #fff;
font-size: 55px;
}
.wrapper .content{
margin: 20px 0;
}
.content header{
font-size: 30px;
font-weight: 600;
}
.content p{
color: #333;
font-size: 16px;
font-weight: 400;
margin-left: -3px;
}
form{
width: 98%;
}
form .field{
height: 45px;
width: 100%;
margin-bottom: 12px;
}
form .field input{
width: 100%;
height: 100%;
border-radius: 5px;
border: 1px solid #ccc;
padding: 0 15px;
outline: none;
font-size: 17px;
transition: all 0.3s ease;
}
form .field input:focus{
border-color: rgb(142,197,252);
}
form .btn{
height: 47px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 5px;
}
form .btn .layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
transition: all 0.4s ease;
}
form .btn:hover .layer{
left: 0;
}
form .btn button{
z-index: 1;
position: relative;
background: none;
padding: 0px!important;
color: #fff;
border: 0px;
outline: none;
font-size: 20px;
font-weight: 500;
cursor: pointer;
height: 100%;
width: 100%;
}
.wrapper .text{
margin-top: 5px;
}
.alert{
margin: -9px 0 12px 0;
padding: 10px;
border-radius: 5px;
}
.success-alert{
color: #155724;
background: #d4edda;
border: 1px solid #c3e6cb;
}
.error-alert{
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
}That’s all, now you’ve successfully created an Email Subscription Form using HTML CSS & PHP. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
