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
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
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.
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.
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!
{{newComment.content}}