Setting up a Landing Page with Email Capture – ASP.NET Core 2.1 with Razor Pages

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 following to create this:

• ASP.NET Core 2.1 with Razor pages
• 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

Only the relevant files and folders have been listed below. Other system and default files are not listed.

• /Pages/
  
  • /Shared/
    • _Footer.cshtml – common footer for site
    • _Layout.cshtml – common layout file for pages
  • /admin/
    • Dashboard.cshtml – admin dashboard
    • Emails.cshtml – emails listing
    • Index.cshtml – admin login
    • Logout.cshtml – admin logout
  • AddEmail.cshtml – page to add email to database
  • Error.cshtml – generic error page
  • Index.cshtml – homepage
  • Verify.cshtml – verification page
  •  
• /classes/
  • DBRoutines.cs  – all database related code
  • EmailData.cs – class to store email entity data
• /mails/
  • confirmation.html – confirmation mail template
  • verification.html – verification mail template
• /wwwroot/
  • /js/
    • admin-email.js – javascript for admin emails page
    • index.js – javascript for homepage
    • verify-signup.js – javascript for verification page
• Startup.cs – app startup configuration
• appsettings.json – application settings

ENHANCEMENTS AND NOTES

Almost all the configuration changes will be in apsettings.json. The database connection settings and smtp server credentials are stored there. So be sure to make changes there before testing at your end.

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/spring5mvcstarter