 |
| Newsletter signup form using html and css |
In this Article, we will learn about how to create Newsletter signup form using html and css with source code. Now, Creating Newsletter signup form using html and css is simple with the given tutorial, which provides a simple step-by-step process to design Newsletter signup form using html and css. So, let's go and follow the steps carefully.
Newsletter signup form is used to subscribe the newsletter service to get updates or news on the email from providers. It is mostly use to help the users with updates about any services. Also, that's plays the crucial part for the providers because they can provide the regular updates to the users easily on their email. So, we've given a complete source code to create newsletter signup form using html and css.
Steps to create Newsletter signup form using html and css
Here are the Steps to create Newsletter signup form using html and css as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder and add html and css file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Signup Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="newsletter">
<h1>Signup for Newsletter</h1>
<hr />
<p>
Enter your email in the box below to receive the latest news and
information about our activities
</p>
<form>
<input type="email" placeholder="Email" required />
<br />
<button type="submit">Submit Now</button>
</form>
</div>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #c4d7e0;
min-height: 100vh;
padding: 90px 0;
box-sizing: border-box;
}
.newsletter {
background: #3b5ca0;
margin: 0 auto;
text-align: center;
max-width: 330px;
padding: 50px 30px;
border-radius: 15px;
}
.newsletter h1 {
color: #fff;
font-size: 25px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.newsletter hr {
width: 70px;
height: 3px;
margin: 30px auto;
border: 0;
background: rgba(255, 255, 255, 0.5);
}
.newsletter p {
font-size: 18px;
line-height: 24px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.newsletter input {
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.4);
width: 100%;
height: 55px;
border: 0px;
padding: 0 20px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 35px;
outline: none;
box-sizing: border-box;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.newsletter button {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
height: 50px;
background-color: transparent;
color: #fff;
padding: 0px 28px;
cursor: pointer;
transition: 0.5s;
font-size: 16px;
}
.newsletter button:hover {
background-color: #233760;
border-color: #233760;
}
6) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of Newsletter signup form project :
 |
| Newsletter Signup form using html and css with source code |
About the code -
In this code, we used html to create a structure of the Newsletter signup form and css to design its structure. In html file, we've added a block of area which contains the content of the newletter form including heading, text, input field and button. we designed the structure and content of the newsletter with css where we given the position and color to the Newsletter signup form.
About the project -
In this project, we've created a Newsletter signup form that works to subscribe the newsletter for receiving the regular updates from the provider. To subscribe the newsletter, user needs to enter his email on the input area and click on "subscribe" to submit the email. you can use this code on your website to collect user email to push your new updates to user through the email. If you are creating a static or dynamic website, then must add this Newsletter Signup form which can help you to improve your design with the advanced structure.
Hope this tutorial will help you to create Newsletter signup form using html and css easily with source code. if you have any confusion then you can contact with us on our coding community.
Also, checkout our website for more information and join our coding community on telegram to connect with coders.
Tags:
projects