Setting up a Landing Page with Email Capture

OVERVIEW

Some days back I wanted to setup a landing page for a web app which I am planning to start soon. I wanted people to come and put their email id so that it goes into a mailing list . I could then use this mailing list to send out an email when the site is ready.

I thought of using my existing MailChimp account to simply create a mailing list and plug in its form creator widget into a new HTML page. MailChimp and other mailing list services are very powerful and provide all the functionality to create and maintain mailing lists. But all that comes at a hefty price and besides I dont really want so much functionality. I decided to create a small tool of my own .

What I needed are the following things:

  • A landing page which will have some content and a form for people to submit their email id
  • A database to capture the email id and store it. It will be validated for duplicates
  • Once an email id is received, a verification email will be sent with a verification link which if clicked , will mark this email id as verified, in the database
  • A single page admin backend, which will list all the email ids with their verification status

I am using the simplest of tools to create this:

  • Core PHP 5.6
  • BootStrap 4.1 and jQuery
  • Mysql backend

SCREENSHOTS

There is only one landing page which is shown below.

The admin backend email listing page is shown below:

The verification mail which is sent is shown below:

The confirmation mail which comes after clicking on the verification link is shown below:

FILES AND FOLDERS

Given below is an explanation of the files and folders:

  • index.php – main landing page
  • verify.php – verification link landing page
  • /ajax/
    • add-email.php – adds email to database
    • cookie-ok.php – handles cookie confirmation
  • /classes/
    • /PDOLib/ – small lib to handle DB access.
    • emails.php – class to handle emails table
    • generic-table.php – superclass for table handling from PDOLib
  • /components/
    • admin-footer.php – common footer for admin pages
    • admin-header.php – common header for admin pages
    • admin-scripts.php – javascript files for admin pages
    • admin-styles.php – css scripts for admin pages
    • footer.php – common footer for public pages
    • header.php – common header for public pages
    • scripts.php – javascript files for public pages
    • styles.php – css scripts for public pages
  • /includes/
    • admin-emails.js – javascript for admin emails page
    • globals.php – common php routines and global data
    • home.js – javascript to handle landing page
    • verify-signup.js – javascript to handle verification page
  • /mails/
    • confirmation.html – html template for confirmation email
    • verification.html – html template for verification email
  • /PHPMailer-master/ – PHP Mailing library
  • /xadmin/
    • dashboard.php – admin dashboard
    • emails.php – admin emails listing page
    • index.php – admin login page
    • logout.php – admin logout script
  • emails.sql – mysql dump for the database

ENHANCEMENTS AND NOTES

Almost all the configuration changes will be in globals.php . The database connection settings and smtp server credentials are stored there. So be sure to make changes there before testing at your end. Also be sure to set $g_docRoot and $g_webRoot as per your folder structure.

This is a basic application and is open to many changes and improvements. There is a column for name in the database, but its not used at the moment. The landing page form can include an optional name field . To prevent spamming, a Google Recaptcha can be added to the form as well.

The admin email listing can have filtering or sorting options. An export option to download the email list as a csv file would be also a good thing to have.

SOURCE AVAILABILITY

The complete source is available on GitHub:

https://github.com/amitonline/php-mailing-list

Be the first to comment

Leave a Reply

Your email address will not be published.


*


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