How to create a landing page with email form

237
beginner
basics practice
In this article we review the process of creating a simple web application having one page with email form for collecting emails and any other information.

Such type of landing page can be very useful if you need to collect some information from your users - it may be emails, names, feedback, or inquires. From this article you will know how to:

Create a web app from the template

Set up the email server settings

Publish the app

Adjust email form

Let's start!

Create a web app from the template

First of all, let's create a new project. After you register you will be automatically redirected to the Projects page (if not, please open the menu on the right and click Project). Click the Add a new project button. 

Select Project type - "application" and Project template - "Bare app". It's important step because another type of project (set of pages) will not allow you to add any logic.

Then let's add a new page. Open Pages tab and click the Add a new page button. When creating a new page, select Sample landing page template and click the checkbox to set up the page default:

After the page is created, open in to edit:

This new page will be opened in the Page editor. You now can change whatever you want. For example, we changed the picture:

It's very simple: just click on the image you want to replace, then open Image tab in the Control inspector on the right and enter new image Url as shown on the picture above. 

You can change any property of controls. If you can't find some property in the Control inspector, enter a style in the Custom style tab.

If you want to change the body's properties, select it in the Control inspector dropdown:

We changed the body's color to black:

To review the visual changes you've done, click the Preview button on the toolbar:

Your page will open in a new tab.

Set up the email server settings

Now let's open the workflow for our page. Click the Workflow modebutton on the toolbar:

The workflow will open right here, you will see something like that (this workflow came from the template of landing page):

Now, let's set up our email server's settings. Click the "Send email" block, on the right you will see its properties:

Click Server settings:

If you like us use privateemail from Mailchimp you can use the settings above (of course, except the email and password). If your email provider is something else, please check with them about settings. For example, for Gmail it can be found here.

Click the Save button to save your changes. 

We don't save your email settings in our database. We just send them to the server and set up there as the environment variables for your application.

Now let's test how it works.

To publish (deploy) the app, save your changes and then click the project's name on the toolbar on the left:

You will be redirected to the Project page. Click the Build tab and then click the Build and deploy app. It will take several minutes to finish the process of building and deployment.

Once the process finished you will see the active link to your application. Click it.

Now let's test our form. We set up it to send email to the entered address. 

So, fill up the form and enter your own address, then check your email box. It works!

Adjust email form

But what if you want to send email to your own address? It's very easy to change. Come back to the Pages tab, select your page, then click the Workflow mode on the toolbar. Click the element "Send email" again, then click Email settings on the right.

In this example we changed a sender's name, changed the recipient email to ours, and changed the content. To add any field you want to get the data from, just drag it from the right and drop into the content area.

If you find you can't drag and drop a field, please close the modal window, then click on some other module and click on Send email module again. It's well-known bug and we are working on it :-\

Save your changes, open project page, the Build tab and start the deployment process again. After it's done, fill up the form and send it. 

Voila! 

If you have any questions or comments please leave them below or email us. Thanks!

If you liked this article, please share it (buttons on the left). Thanks!

Comments

Nobody left a comment yet.
{{newComment.name}}
Just now
{{newComment.content}}

Be the first to leave a comment!

Your name:
Your email (never shown here):
Your comment:
Thanks! Your comment has been published!
{{errorComment}}

Get up to date

Get access to the latest news, tutorials, books, giveaways, and useful information for creating web applications

You are good! We will send you updates and release notes as well as any other useful stuff.
{{error}}