Uplaunch

Uplaunch is a set of powerful HTML5 templates for collecting emails. Uplaunch comes with powerful integrations which allows to send submitted emails directly to your Mailchimp List.

We've also precoded the Zapier API integration which allows storing emails in Google Sheets, ZenDesk, Trello and hundreds of other places.

Copy-paste Solution

If you don't want to include dom101 as a dependency, each file ([example]) stand on their own and can be easily pasted into your project.

Premade AJAX requests

Minimum browser fully-supported is IE8, with most of the utilities working with even older IE versions.

Uplaunch is a product for both developers and designers. That is why the final pack contains the design sources too.

Visit Uplaunch to discover more cool features and check out our interactive demos.

Getting Started

Files Structure

Uplaunch contains:

  • design folder with PSD, Sketch and Figma files for fine tuning.
  • code folder with HTML5/CSS3/JS ready-to-use files. 
uplaunch/
  ├── design/
  |   ├── photoshop/
  |   |   ├── sample.psd
  |   ├── sketch/
  |   |   ├── sample.sketch
  |   ├── figma/
  |   |   ├── sample.fig
  ├── code/
  |   ├── template-name/
  |   |  ├── css/
  |   |  |  ├── components/...
  |   |  |  ├── libs/
  |   |  |  |  ├── grid.css
  |   |  |  |  ├── normalize.css
  |   |  |  |  ├── splitting.css
  |   |  |  |  ├── splitting-cells.css
  |   |  |  |  ├── style.css
  |   |  ├── images/...
  |   |  ├── js/
  |   |  |  ├── main.js
  |   |  |  ├── splitting.min.js
  |   |  ├── index.html

Getting started with Uplaunch

To make your coming soon page you need to do these simple steps:

  • 1. Place your text, links and images in the code/template-name/ (or any other html file).
    Learn how ↓.
  • 2. Set up integrations ↓.
  • 3. Upload the contents of code/template-name/ to your static files hosting: AWS S3, shared hosting or any other place.
  • 4. Enjoy! 💫

Content Editing

Social Icons

Uplaunch comes with social icons in .svg, they're located in template-name/images/icons/.

Fonts

Uplaunch is using Google Fonts.
Following instructions will help you to change the font in your template:

Step 1:

google fonts
Choose the font you prefer at fonts.google.com

Step 2:

google fonts
Copy the code as on the screenshot

Step 3:

google fonts in html
Replace the font in index.html

Step 4:

google fonts in css
Replace the font in css/main.css

Step 5:

Enjoy your new font! 💫


Integrations

Uplaunch comes with Mailchimp and Zapier integrations.

Mailchimp

All the email collecting forms are completely integrated with Mailchimp. Forms are being validated and pass user data via AJAX out of the box.

To enable the integration login to Mailchimp. Then:

Step 1:

1

Go to mailchimp.com, open Audience section.

Step 2:

2

Click on "Manage Audience" → "Signup forms".

Step 3:

3

Click on "Embedded forms".

Step 4:

4

Click on "Unstyled" and scroll down.

5

Copy the action attribute content of the Mailchimp <form>.

Step 5:

6

Paste the copied string in your Uplaunch template <form>.

Step 6:

You are all set 🤘. Upload the index.html file to a static files hosting (e.g. AWS S3) or to a server and test our form!


Zapier

Uplaunch comes with a precoded AJAX Zapier integration. Zapier is a SaaS tool that connects anything-to-anything. In our case, it will connect your Uplaunch forms with whatever you want: Google Sheet, Asana, SalesForce, Airtable, Slack etc.

Step 1:

Go to Zapier.com and sign up.

Step 2:

7

Click "MAKE A ZAP!".

Step 3:

8

Pick "Webhooks by Zapier".

Step 4:

9

Pick "Catch Hook" and press "Continue".

Step 5:

10

Turn on checkbox at a "Silent Mode". And after that copy the link - "Custom Webhook URL".

Important!

In the link you copied, it is important to delete / at the end and put it after the word "silent" - ? .

The link you will use in the code should look like this one:

https://hooks.zapier.com/hooks/catch/6109493/o6qpp0u/silent?

Step 6:

11

Paste your webhook instead of a mailchimp link. Code should be looking like this.

Don't forget save your index.html file.

Step 7:

On this step, you should send come data to Zapier for showing what they're gonna look like. For example, let's send an email.

At first, open one of templates Uplaunch. For example, in your Finder or File Explorer.

12

Open index.html in any browser, e.g. Chrome and type in the form your email.

Step 8:

13

Now Zapier knows what data it will receive. Click on "Test & Review".

14

Next, select the most recent Hook. In our case, "Hook A".

15

Press "Done editing".

Step 9:

16

Well done! 💪We've just created 1st step in Zapier called "1. Catch Hook". Then we press on create new step - "2. Do this...".

Step 10:

17

On this step, we choose an app that we want to connect with our webhook. For example, Google Sheets.

Step 11:

18

Click on "Create Spreadsheet Row" and press "Continue".

Step 12:

19

Choose your account or "Add New Account" and press "Continue".

Step 13:

20

In your account choose My Google Drive.

Step 14:

21

You need to create a spreadsheet in your Google Sheets, in my case, "Uplaunch test" and choose it from the dropdown list.

22

Next, choose List 1 from the dropdown.

Step 15:

23

In this step you're looking email which we typed in step 7, just select it.

24

Just press "Continue".

Step 16:

25

Press "Retest & Continue" and enjoy the latest step! You are rock 🤟.

26

Now we can see the email you wrote in step 7 in your spreadsheet.

Step 17:

27

Don't forget turn on your zap! Great work! ❤️

Fun fact:

You do not need a server to run any integration. Static file hosting (like AWS S3, GitHub Pages or Netlify) is enough.

Support

Thanks for using Uplaunch!
Feel free to email us [email protected] if you need a human assistance or have a feature request.

cat

More Design Tools

Our mission is to give professionals the power to launch breathtaking sites quickly. The goods we created are used by 30,000 web designers and developers from 45 countries.

show more
GO
Instagram Templates
IGTM makes your Instagram look fresh and truly inspiring within minutes. Showcase your stories and posts like never before and increase your audience. It's perfect for bloggers, designers, clothing stores, entrepreneurs or any creatives.
GO
plugin webgradients for figma
Especially for Figma, a plugin with gradients was created that allows you to speed up the process, save your favorite gradients, and find a specific color by the filter.
GO
WebGradients
WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment!
GO
Phoenix Startup UI Kit
Phoenix is the innovative UI Kit containing 110 elegant screens for the fastest start. Each screen is 100% responsive and fully customizable. Phoenix Startup UI Kit is carefully crafted in Sketch, Photoshop and HTML5 formats.