Email Subscription Form HTML CSS

Email Subscription Form HTML CSS
Code Snippet:Subscription Animation
Author: Denis
Published: January 9, 2024
Last Updated: January 22, 2024
Downloads: 940
License: MIT
Edit Code online: View on CodePen
Read More

This code creates an email subscription form with HTML, CSS, and JavaScript. When users click “Subscribe,” the form becomes visible, and they can enter their email. Clicking the send button triggers a thank-you message.

The code works by adding and removing CSS classes to control the form’s visibility and appearance. It’s helpful for capturing email subscriptions on your website.

How to Create Email Subscription Form Using HTML and CSS

1. First of all, load the Font Awesome CSS and Bootstrap CSS by adding the following CDN links into the head tag of your HTML document.

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

2. Copy and paste the HTML code into the section of your web page where you want the subscription form to appear. It is typically placed inside a <div> element with a class of “subscribe-wrapper.” The form structure consists of a “Subscribe” button, an email input field, and a “Send” button.

<main>
<div class="subscribe-wrapper">
    <button class="btn subscribe" id="subscribe" type="button">Subscribe</button>
    <button class="btn sending" id="sending" type="button">Thank you!</button>
    <form id="form" action="">
      <label id="wrapper">
        <input class="form-control" type="email" placeholder="Email"/>
        <button class="btn send" id="send" type="submit"><i class="fa fa-envelope"></i></button>
      </label>
    </form>
  </div>
</main>

3. Add the following CSS code to your project. This CSS code is essential for styling the form and ensuring it looks appealing. The styles define the appearance of buttons, input fields, and their animations.

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
html, body {
  width: 100%;
  height: 100%;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
}

main{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333333 !important;
  overflow: hidden;
}

.subscribe-wrapper {
  position: relative;
  min-width: 400px;
}
.subscribe-wrapper label {
  display: flex;
  background-color: #494949;
  border-radius: 38px;
  margin-bottom: 0;
}
.subscribe-wrapper form {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}
.subscribe-wrapper form.active {
  opacity: 1;
  visibility: inherit;
}

.form-control {
  height: 51px;
  color: #fff;
  background-color: #494949;
  border-radius: 38px;
  border: none;
  padding: 1rem 2rem;
}
.form-control:focus {
  color: #fff;
  background-color: #494949;
  box-shadow: none;
}

.btn {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #ef4d8a;
  border-radius: 38px;
  padding: 1rem 2rem;
  transform: scale(1);
  transition: all 0.5s ease;
}
.btn:hover {
  transform: scale(1.1);
}
.btn:focus {
  box-shadow: none;
}
.btn.subscribe, .btn.sending {
  position: absolute;
  top: 0;
  z-index: 10;
}
.btn.subscribe {
  left: 50%;
  opacity: 1;
  transform: scale(1) translateX(-50%);
}
.btn.subscribe.active {
  left: 0;
  opacity: 0;
  transform: scale(1) translateX(-100%);
}
.btn.subscribe:hover {
  transform: scale(1.1) translateX(-47%);
}
.btn.sending {
  right: 0;
  opacity: 0;
  transform: scale(1) translateX(100%);
}
.btn.sending.active {
  right: 50%;
  opacity: 1;
  transform: scale(1) translateX(50%);
}
.btn.sending:hover {
  transform: scale(1.1) translateX(47%);
}
.btn.send {
  min-width: 51px;
  height: 51px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

4. Finally, add the following JavaScript code to your project. This code handles the functionality of the subscription form. It manages the form’s visibility and interaction with users. It also includes event listeners for buttons and form submission.

const subscribeBtn = document.getElementById('subscribe');
const sendingBtn = document.getElementById('sending');
const subscribeWrapper = document.getElementById('wrapper');
const btnSend = document.getElementById('send');
const form = document.getElementById('form');

const onClickSubscribeBtn = event => {
  event.stopPropagation();
  subscribeBtn.classList.add('active');
  form.classList.add('active');
};

const onClickDocument = event => {
  const clickTarget = event.target.parentNode;

  let botonContainClass = subscribeBtn.classList.contains('active');

  if(botonContainClass && clickTarget != subscribeWrapper) {
    subscribeBtn.classList.remove('active');
    form.classList.remove('active');
    form.reset()
    sendingBtn.classList.remove('active');
  }
};

const onClickSend = event => {
  event.preventDefault();
  event.stopPropagation();
  sendingBtn.classList.add('active');
  form.classList.remove('active');
}

const init = () => {
  subscribeBtn.addEventListener('click', onClickSubscribeBtn, false);
  btnSend.addEventListener('click', onClickSend, false);
  document.addEventListener('click', onClickDocument, false);
};

document.addEventListener('DOMContentLoaded', init);

That’s all! hopefully, you have successfully created an Email Subscription form using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X