Popup Subscription Form using HTML CSS and Javascript

Hello readers, Today in this blog you'll learn how to create a Popup Subscription Form or Modal Box using HTML CSS & Javascript. Earlier I have shared a Minimal To-Do List using HTML CSS & Javascript, now it's time to create a Popup Email Subscription Form.

An email subscription is an option on a website that allows visitors to receive news and updates through email by specifying their email addresses in a subscription form.

As you can see in the image, this is a Popup Email Subscription Form based on HTML CSS & Javascript. At first, there is only a button shown but when you clicked on that button then this subscription form will appear. There is a smooth sliding effect too that' means when you clicked on the button this form will slide from the top side.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Popup Subscription Form).

Video Tutorial of Popup Subscription Form using Javascript



If you're a beginner and have some basic knowledge about HTML & CSS then you can also create this type of subscription forms, modal dialog boxes. You can use this popup subscription form in your sites, projects, and anywhere you want.

If you like this program (Popup Subscription Form) and want to get source codes. You can easily get the source codes of this program (Popup Email Subscription Form). To get the source codes you just need to scroll down. And, I believe this program will help you a lot.

Popup Subscription Form or Modal Dialog Box [Source Codes]

As always, before sharing the codes of this program (Popup Subscription Form). Let's a few talk about the main tags and codes of this program. At first, I created a <div> with the class name "center modal-box" then placed all tags inside it. Then I created another <div> with the class font-awesome icons class name. After that, I created <p> and insert some dummy texts. Then I created a <form> tag and inside it I placed a <div>, <input>, and <button> tags for icon, email-field, and button. Al last, I created another <div> with class name "icons" and placed five <i> tags with the icons class name.

In the CSS File, first I placed all elements at the center using CSS Flexbox property. After that, I did basic styling to form like gave heights, widths, colors, etc. After styling all elements like buttons, input fields, icons, etc. I hide that form with giving opacity; 0; and created a <div> tag with the class name "start-btn" in the HTML File and placed a <a> anchor tag inside it. I used the anchor tag for the create button.

As you saw in the video I used jQuery instead of Javascript because in jQuery we don't need to call HTML elements using their class name or id name. In the Javascript or jQuery File, I created a click function and show that hidden subscription form on button click.

To create this program (Popup Subscription Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post