Startup Landing Pages with Flybase

Lately, Landing Page has become common and popular among startups and publishers. Every landing page has one important call-to-action, i.e. to sign up early adopters for their beta version.

To get up & running as soon as possible, the simplest and fastest way to build a landing page is basically having it as a static site without any back end. The downside of this approach is, we need to figure out a way to store the emails that are signed up. As you would expect, there are quite a few really good services you can use right of the bat.

Some of the above services even provides HTML templates, A/B testing and much more. For a non-developer these sites would be the best fit.

If you know a bit of web development and want to build you own custom landing page, then one easy solution to use is to use Flybase to not only collect emails but even feedback.

In this brief post, I’m going to show you how to use Flybase to build out that part of a landing page.

Flybase Email Storage

Once you have created a flybase account and logged in, create a flybase application.

You need to include the flybase javascript in your landing page. This provides the functionality to save your data (e.g. email) into your flybase application.

<script src=""></script>

Email Signup Form

Here is a basic HTML template for an email sign up form.

<div class="signup">
	<h2 class="signup-title">Sign up for beta</h2>
	<p id="signup-success" class="text-success"></p>
	<p id="signup-error" class="text-danger"></p>
	<form class="signup-form form-inline" id="signup-form" role="form" onsubmit="return signup(this)">
		<input class="form-control" name="email" type="email" placeholder="Your email. eg., [email protected]" required>
		<button class="btn btn-success" id="signup-button" type="submit" >Join now</button>
Flybase script to save email addresses

On the submission of the button, the below script is invoked to store the email address into your flybase application.

	var signupForm = document.getElementById('signup-form');
	var signupSuccess = document.getElementById('signup-success');
	var signupError = document.getElementById('signup-error');
	var signupBtn = document.getElementById('signup-button');
	var onSignupComplete = function(error) {
	  signupBtn.disabled = false;
	  if (error) {
		signupError.innerHTML = 'Sorry. Could not signup.';
	  } else {
		signupSuccess.innerHTML = 'Thanks for signing up!';
		// hide the form = 'none';
	function signup(formObj) {
		// Store emails to flybase
		var myFlybaseRef = new Flybase("YOUR-API-KEY", "YOUR-APP", "signups");
		}, onSignupComplete);
		signupBtn.disabled = true;
		return false;

Contact / feedback forms

You can also store the feedback, suggestions and questions into your flybase application.

Here is a basic HTML template for a contact form:

<div class="contact">
	<h2 class="contact-title">Send us a message</h2>
	<p id="contact-success" class="text-success lead"></p>
	<p id="contact-error" class="text-danger lead"></p>
	<form class="contact-form" id="contact-form" role="form" onsubmit="return sendMessage(this)">
		<input class="form-control" name="name" type="text" placeholder="Your name. eg., Joe" required>
		<input class="form-control" name="email" type="email" placeholder="Your email. eg., [email protected]" required>
		<textarea class="form-control" name="message" placeholder="Your message for us" rows="5" required></textarea>
		<br />
		<button class="btn btn-success pull-right" id="send-button" type="submit" >Send Message</button>

On submission, the below script is invoked to save your email address along with the message into your flybase application.

	// Send message
	var contactFrom = document.getElementById('contact-form');
	var contactSuccess = document.getElementById('contact-success');
	var contactError = document.getElementById('contact-error');
	var sendBtn = document.getElementById('send-button');
	var onMessageComplete = function(error) {
	  sendBtn.disabled = false;
	  if (error) {
		contactError.innerHTML = 'Sorry. Could not send message.';
	  } else {
		contactSuccess.innerHTML = "Message has been sent.";
		// hide the form = 'none';
	function sendMessage(formObj) {
		// Store emails to flybase
		var myFlybaseRef = new Flybase("YOUR-API-KEY", "YOUR-APP", "messages");
		  message: formObj.message.value
		}, onMessageComplete);
		sendBtn.disabled = true;
		return false;

And there it is, one of the simplest way to handle forms in your landing page. When we launched this project last fall, we actually used this same process to handle beta signups, so this is a tried and true simplistic method.

From here, You can embed this into any landing page to give yourself a method for collecting emails, then you could quickly use Node.js or PHP to loop through subscribers and send an email, or add them to your mailchimp account via their API,

You could even combine it with to send emails to Mailchimp or just straight to your inbox, depending on the type of form you’ve set up.

Simple, but flexible, feel free to check out this basic landing page here to see how it works and feel free to fork the repo and add your own touches to it.

Flybase helps you build real-time, collaborative apps in a fraction of the time with our API. Flybase lets you create fully interactive apps with just frontend code. Learn More

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Share on print