In the first part of this tutorial we saw how to host a simple Hello World page on AWS. In this second part, we will create a complete Landing page.

Draw a sketch of the Landing Page

To create a great Landing Page the first step is to find a white paper. Then you should sketch your ideal Landing page remembering to insert at least these fundamentals elements:

• Logo of your company
• Headline to deliver your message and capture the attention of the visitor
• Email input field and Click to Action (CTA) button to collect the email of your prospect

Then you can add many other elements like news, feature descriptions, engaging media, Infographics, etc but the focus should be always on the usability and accessibility of the page.

Note: Don’t use navigation bar in your Landing Page. Many companies increased their conversion rate after removing the navigation bar.

Then you can refine the sketch using a Design Tool like Sketch (only for Mac and with 30 days trial), Figma (web-based and with a free starter plan) or Adobe XD (Mac/Win and with a free starter plan) and some wireframe templates (for Sketch, Figma or Adobe XD).

Here an example of a Landing Page wireframe created with Sketch:

Create the Landing Page using a Design System

To be hosted on an S3 bucket the Landing Page needs to be composed only by HTML, CSS and JavaScript. It should be also responsive to support multiple devices. 

To reduce development time it is a good idea to use a template (there are many both free and commercial). I strongly suggest considering the ones by Creative Tim.

For our Landing Page we will use the Argon Design System (free and with MIT Licence).

Argon Design System is more than just a template. It is built with over 100 individual components, giving you the freedom of choosing and combining. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

Starting from the landing.html example page of this design system, you can easily create your own landing page combining components documented here.

The Landing Page (here the code) is now graphically complete but it is yet not possible sending emails.

Configure email

Enter in AWS Console and insert “Simple Email Service” (SES for friends) into the Find Services search field. Then in SES dashboard, click on “Domains” in the right column and then on “Verify a New Domain”.

Then insert your domain name (without www, it is not needed), check the “Generate DKIM Settings” and click on “Verify This Domain” button.

Then you will see the parameters to manually configure the following record sets:

• 1 TXT record set to verify your domain
• 3 CNAME record sets to enable DKIM signing for your domain
• 1 MX record set to route your domain’s incoming mail to Amazon SES

Luckily because we used  Route 53 before you can click on “Use Route 53” button to create automatically the new records.

Also this time we need to wait for verification, so wait until in the status of the Domain identity becomes “verified“.

When ready, go to “SMTP Settings” link in the Email Sending section and then click on the “Create my SMTP Credentials“.

In the following page you can customize the name of the IAM user that will be created and associated with the SMTP credentials.

Click on the “Create” button and, in the next page, you will see the SMTP Credentials.

Now you can use these credentials (you can also download them as CSV file) to setup your SMTP client and send emails. Use also the following parameters to configure your client:

• Server Name: email-smtp.[region].amazonaws.com (enter the SMTP endpoint for the AWS Region in which you use Amazon SES, in my case is: email-smtp.eu-west-1.amazonaws.com) 
• Port: 587
• Security: STARTTLS

Sending email with Javascript

Generally, you need server-side code to send emails, but using some libraries like SmtpJS or EmailJS you can add the possibility to send emails also with client-side Javascript. This approach allows your app to send an email without refreshing the page the user is interacting with and allows you to host the page on S3.

I suggest you using EmailJs because is a professional service and has a free plan with 200 emails/month you can start with.

Create an EmailJs account

Create an account on their website and then on “Email Services” section click on the button “Add new service”.

Select “Amazon SES” and you will see the following form:

To fill the form you need to create an SES user with particular permissions.

Create the custom Policy

So enter in your AWS console e go to IAM dashboard. In the left menu click on “Policies” and then press on the “Create Policy” button.

Click on “JSON” tab and then add the following code:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        }
    ]
}

Click “Review Policy”. Give a name to the policy (like myPolicy-SES-user-for-EmailJS), insert a description and then click to create policy.

Now you can create the user and associate the policy just created.

Create the user and associate the policy 

In the left menu click on “Users” and then on “Add User”

Then insert the user name and select “Programmatic access”. On the next step select the “Attach existing policies directly”.  You can easily find the created policy filtering for “mypolicy” (adding “mypolicy” or any other prefix when you create a policy is a good way to easily find your custom policy).

Select the policy, click next until step 4 and then click on “Create user”.

Configure the Email Service on EmailJS account

Copy the Access Key ID and Secret access key and insert in the previous EmailJS form. You should receive a confirmation message and also the email of test.

Now you can configure the template of the email that will be sent. In the EmailJS console, on the left menu, click on “Email Templates” and edit the default template as in the following picture:

Add EmailJS script on your code

Start substituting the form code from:

<form>
  <div class="row">
    <div class="col-md">
      <div class="form-group">
        <input type="text" class="form-control form-control-alternative" id="name" placeholder="your name">
      </div>
    </div>
    <div class="col-md">
      <div class="form-group">
        <input type="email" class="form-control form-control-alternative" id="email" placeholder="your@email.com">
      </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
        <button type="button" class="btn btn-warning btn-icon">Notify Me</button>
      </div>
    </div>
  </div>
</form>

to:

<form>
  <div class="row">
    <div class="col-md">
      <div class="form-group">
        <input type="text" class="form-control form-control-alternative" id="name1" placeholder="your name">
      </div>
    </div>
    <div class="col-md">
      <div class="form-group">
        <input type="email" class="form-control form-control-alternative" id="email1" placeholder="your@email.com">
      </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
        <input type="button" class="btn btn-warning btn-icon" value="Notify me" onclick="sendEmail(document.getElementById('name1').value, document.getElementById('email1').value)">
      </div>
    </div>
  </div>
</form>

Then create a new javascript file for the sendEmail() function (in our case will be sendmail-aws-emailjs.js under /assets/js/plugins):

   function sendEmail(name, email) {

     var templateParams = {
       name: name,
       email: email
     }; 

     if (!isValidEmail(email)){
          $('#notValidEmailModal').modal();
       }

     else {
     //console.log("sending email")
     emailjs.send('amazon_ses', 'template_fgXf7dyE', templateParams)
         .then(function(response) {
            //console.log('SUCCESS!', response.status, response.text);
            $('#sentEmailModal').modal()
         }, function(error) {
            console.log('FAILED...', error);
         });
   }
 }

Note: Remember to update the template id (template_fgXf7dyE) with your specific template id (you can find it on EmailJS console).

Finally, add the following rows in the index.html file before the end of the body tag.

  <script src="assets/js/plugins/sendmail-aws-emailjs.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
  <script type="text/javascript">
   (function(){
      emailjs.init("user_ppPCVRrCf3svgNBBF4FH8");
   })();
  </script>

Note: Remember to update the user id (user_ppPCVRrCf3svgNBBF4FH8) with your specific user id (you can find it on EmailJS console).

Now you have a fully Landing Page able to notify you if some prospect is interested in the SaaS you are developing. You can download the full code here.