Skip to main content

Archive

Show more

Responsive Newsletter Subscription Form Design | HTML And CSS

Responsive-Newsletter-Subscription-Form-Design-HTML-And-CSS

Responsive Newsletter Subscription Form Design Using HTML And CSS

A "newsletter subscription form" is a very common element in a website. Almost every blog uses this element.

In this article, we will design a Responsive Newsletter Subscription Form. This responsive Subscription form is created using html and css only.

Dynamic behavior means visible when clicked and hidden when the close button is clicked. Javascript can be used to add such animations. Which we have shown in the article given below.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Newsletter Subscription Form Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

We are using font-awesome in this document, is copy this link and paste it in the html document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<!DOCTYPE html>
<html>
<head>
  <title>Newsletter Subscription Form Design | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
  <div id="subscribebox">
    <i class="fa fa-envelope fa-4x"></i>
    <h3>Join Our Newsletter</h3>
    <form>
      <input type="text" placeholder="Enter email" id="email-input">
      <input type="submit" value="Join" id="subscribe-button">
    </form>
  </div>
</div>

</body>
</html>



03. CSS

To include our favorite font-family "Poppins" in your document, paste this link into your file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');


*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
  background: #F0F4EF;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#subscribebox{
  width: 700px;
  max-width: 100%;
  margin: auto;
  background: #B4CDED;
  text-align: center;
  border-radius: 4px;
  padding: 60px 20px;
}

form{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.fa-envelope{
  color: #344966;
}

h3{
  color: #344966;
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  font-family: inherit;
}

#email-input{
  width: 450px;
  max-width: 100%;
  font-family: inherit;
  color: #344966;
  text-align: left;
  font-weight: 500;
  border-radius: 2px;
  border: 0px;
  padding: 15px 0px 15px 20px;
  font-size: 14px;
  background: #F0F4EF;
}

#email-input:focus, #email-input:hover{
  outline: 0px;
}

#subscribe-button{
  border: 0px;
  width: 150px;
  max-width: 100%;
  font-size: 700;
  padding: 15px;
  font-size: 14px;
  color: #F0F4EF;
  font-family: inherit;
  background: #344966;
  cursor: pointer;
  border-radius: 0px 2px 2px 0px;
  outline: 0;
  transition: all 0.2s;
}

#subscribe-button:hover{
  background: #213144;
}

@media screen and (max-width: 700px) {
  #subscribe-button{
    width: 98%;
    margin: 5px;
    border-radius: 2px;
  }
  #email-input{
    width: 98%;
    margin: 5px;
    text-align: center;
  }
  #subscribebox{
    width: 100%;
  }
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.






Comments