{"id":3612,"date":"2021-08-17T09:04:02","date_gmt":"2021-08-17T09:04:02","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=3612"},"modified":"2021-08-17T09:06:47","modified_gmt":"2021-08-17T09:06:47","slug":"setting-up-a-landing-page-with-email-capture","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2021\/08\/17\/setting-up-a-landing-page-with-email-capture\/","title":{"rendered":"Setting up a Landing Page with Email Capture"},"content":{"rendered":"\n<p><strong>OVERVIEW<\/strong><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>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 . <\/p>\n\n\n\n<p>What I needed are the following things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A landing page which will have some content and a form for people to submit their email id<\/li><li>A database to capture the email id and store it. It will be validated for duplicates<\/li><li>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<\/li><li>A single page admin backend, which will list all the email ids with their verification status<\/li><\/ul>\n\n\n\n<p>I am using the simplest of tools to create this:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Core PHP 5.6 <\/li><li>BootStrap 4.1 and jQuery<\/li><li>Mysql backend<\/li><\/ul>\n\n\n\n<p><strong>SCREENSHOTS<\/strong><\/p>\n\n\n\n<p>There is only one landing page which is shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"450\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-940x450.png\" alt=\"\" class=\"wp-image-3621\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-940x450.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-620x297.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-300x144.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-768x367.png 768w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1.png 1482w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>The admin backend email listing page is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"450\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-940x450.png\" alt=\"\" class=\"wp-image-3622\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-940x450.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-620x297.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-300x144.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-768x367.png 768w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2.png 1482w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>The verification mail which is sent is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"821\" height=\"406\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1.png\" alt=\"\" class=\"wp-image-3624\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1.png 821w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-620x307.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-300x148.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-768x380.png 768w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><\/figure>\n\n\n\n<p>The confirmation mail which comes after clicking on the verification link is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"428\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2.png\" alt=\"\" class=\"wp-image-3625\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2.png 795w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-620x334.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-300x162.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-768x413.png 768w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p><strong>FILES AND FOLDERS<\/strong><\/p>\n\n\n\n<p>Given below is an explanation of the files and folders:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>index.php &#8211; main landing page<\/li><li>verify.php &#8211; verification link landing page<\/li><li>\/ajax\/<ul><li>add-email.php &#8211; adds email to database<\/li><li>cookie-ok.php &#8211; handles cookie confirmation<\/li><\/ul><\/li><li>\/classes\/<ul><li>\/PDOLib\/ &#8211; small lib to handle DB access.<\/li><li>emails.php &#8211; class to handle emails table<\/li><li>generic-table.php &#8211; superclass for table handling from PDOLib<\/li><\/ul><\/li><li>\/components\/<ul><li>admin-footer.php &#8211; common footer for admin pages<\/li><li>admin-header.php &#8211; common header for admin pages<\/li><li>admin-scripts.php &#8211; javascript files for admin pages<\/li><li>admin-styles.php &#8211; css scripts for admin pages<\/li><li>footer.php &#8211; common footer for public pages<\/li><li>header.php &#8211; common header for public pages<\/li><li>scripts.php &#8211; javascript files for public pages<\/li><li>styles.php &#8211; css scripts for public pages<\/li><\/ul><\/li><li>\/includes\/<ul><li>admin-emails.js &#8211; javascript for admin emails page<\/li><li>globals.php &#8211; common php routines and global data<\/li><li>home.js &#8211; javascript to handle landing page<\/li><li>verify-signup.js &#8211; javascript to handle verification page<\/li><\/ul><\/li><li>\/mails\/<ul><li>confirmation.html &#8211; html template for confirmation email<\/li><li>verification.html &#8211; html template for verification email<\/li><\/ul><\/li><li>\/PHPMailer-master\/ &#8211; PHP Mailing library<\/li><li>\/xadmin\/<ul><li>dashboard.php &#8211; admin dashboard<\/li><li>emails.php &#8211; admin emails listing page<\/li><li>index.php &#8211; admin login page<\/li><li>logout.php &#8211; admin logout script<\/li><\/ul><\/li><li>emails.sql &#8211; mysql dump for the database<\/li><\/ul>\n\n\n\n<p><strong>ENHANCEMENTS AND NOTES<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>SOURCE AVAILABILITY<\/strong><\/p>\n\n\n\n<p>The complete source is available on GitHub:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/amitonline\/php-mailing-list\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/github.com\/amitonline\/php-mailing-list<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>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 <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2021\/08\/17\/setting-up-a-landing-page-with-email-capture\/\" title=\"Setting up a Landing Page with Email Capture\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":3635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[364],"tags":[],"class_list":["post-3612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools-and-components"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=3612"}],"version-history":[{"count":14,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3612\/revisions"}],"predecessor-version":[{"id":3639,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3612\/revisions\/3639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/3635"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=3612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=3612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=3612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}