How To Capture Email On Static Websites?

How To Capture Email On Static Websites?

hackernoon.com hackernoon.com2 weeks ago in #Dev Love48

One of the first dynamic features that you may want to add to your website is an email sign up form. Email sign-ups come in handy for maintaining contact with potential clients or simply those who are interested in reading your blog/website. In this tutorial, I will cover how to add an email capture section to your website even if you host your site statically on something like github.pages.  This feature uses google firebase which for low traffic databases is entirely free. The first part of setting up an email sign up form is to get a front end established so that visitors to your site can enter their email into a form and can have it sent to the database. Setting up the front end Below is the HTML, CSS, and javascript for a very basic email capture section. Feel free to use this example or your own, whatever works best for you. The HTML and CSS below are fairly self-explanatory and change the look of the form. If you choose to not use this format you may want to look at the javascript in order to see how we are sending the email as a json object to firebase. This code pen contains everything needed for the front end. Setting up the Real Time Database 1.Next, we will cover how to configure and set up your google firebase account. Firebase’s Real Time database features require that you make a Gmail account. Once this part is finished we will log in to firebase and create a new project. 2. Name your project, accept the terms, and continue on to the next steps 3. We will be creating a web application in this tutorial so go ahead and select a new web application. 4. Register a name for your application. 5. Copy the lines that firebase generates for you and insert them below your HTML in your webpage or in a separate javascript file. The code generated should look similiar to the image below. This part configures the firebase database with your webpages and then initializes the firebase app. There is one more script we need to include in order for this to work so don’t forget to also include this before you include the code from firebase:  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply