Using Dropbox, Site44 and Google Drive to create a quick registration site

I recently came across a new company called Site44 and they have come up with a very neat product. By connecting your existing Dropbox account their site acts as a website hosting service for your HTML pages. This means that in mere seconds you could have a functioning website up and running that you can modify by simply overwriting your existing HTML file with a modified one that incorporates your new changes.

In this blog post I will delve into all three technologies and show how we can link them easily to create a quick user registration site for any community event or contest you might be running. By harnessing the power of Google and Site44 you can give your organization a free online website simply and easily. For less technical people you could even choose to create your webpage with Microsoft Word and save it as an .htm file. For this demonstration though I will code a simple site using Notepad++ and I will also include some CSS, JavaScript and jQuery elements to show you the power of Site44.

Dropbox

Dropbox was founded in 2007 and it is a free cloud storage file system. Much like Microsoft’s SkyDrive or Google Drive you can upload numerous types of files to the Dropbox server so that they are accessible to your account anywhere is the world. It comes with 2GB of space initially. You can synchronize your files by using their web interface to upload and download items or you can install their program onto your machine which will create a Dropbox folder structure for you. You can then drag files into this folder and Dropbox will sync your items for you.

Dropbox allows both folder and file sharing with anyone, even if they are not Dropbox users. You can choose to make folders public or private and then you can share links to these items. For the purposes of this demonstration you will need a Dropbox account. You can create a Dropbox account here. (Full disclosure: this is my referral link).

Site44

The tag line for Site44 is “absurdly simple web hosting.” In essence the company’s service turns Dropbox folders into websites. Having played with the site for a little bit I can honestly say that their tag line lives up to its name. It was easy to get started and I had my test site loaded within minutes. In fact it took me longer to code the HTML page than it did to prep the site. As you will see in the demo below the process could not simpler!

It is free to use Site44 and with the unpaid account you get five websites and a data transfer limit for all sites of 100MB/month. A word of warning from the Site44 team though. The service is still in beta and so they have posted this disclaimer: “Although it has undergone significant testing and is not expected to change significantly prior to general release, the use of Site44 is not recommend for production environments. You are encouraged to use Site44 for testing and non-critical purposes only.”

Due to the bandwidth restrictions on the free Site44 account you will not want to stress the system out by placing large files or pages with heavy content on your site as you might run the risk of maxing out your limit. As Site44 says their service is for lighter loads and is an excellent way to debug some of your code. You could also use the service to house any non-sensitive project proposals or mock-ups that you might want to demonstrate to clients.

Finally, Site44 only supports client-side scripting which includes JavaScript. Any server-side scripting of PHP or ASP.NET pages is not allowed. Placing such pages on your site will not fail but will simply show the page code to the viewer.

Google Drive

Google Drive was released in April 2012 and it is similar to Dropbox in that it is a free cloud-based file storage system. Like SkyDrive and Dropbox it also provides a synchronization service from your computer to their servers. They offer an initial 5GB of space. Google Drive is an extension of Google Docs which is a set of tools that allow you to create and collaborate online to generate documents, spreadsheets, presentations, etc.. Files created in Google Docs get housed in Google Drive automatically. They can then be downloaded to your personal computer for editing. Both of these features are accessible to anyone with a Google or Gmail account.

Tutorial

Let’s first create the HTML page that will house an introduction, some instructions and the link to our Google Docs file. When it is rendered it will appear as a form on the page so people can enter their information. I will also include on this page some calls to CSS, JavaScript and jQuery to demonstrate that all three are supported on Site44. (Note: all of the example code used in this demonstration will be available for download at the end of this post.)

Listed below is the HTML for my site. As you can see it is pretty vanilla code that invites people to register for  a fictitious Windows 8 workshop that I am hosting. If you scan the code you will see I reference CSS, JavaScript and jQuery.

<html> 
<head> 
    <title>Beginning Windows 8 Workshop</title> 
    <link href="Site.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script type="text/javascript"> 
        $(document).ready( 
            function () { 
                $('#animate') 
                    .animate({ width: '+=150px' }, 2000) 
                    .animate({ width: '-=150px' }, 2000) 
            }); 
    </script>

    <script type="text/javascript"> 
        function ShowDate() { 
            var mydate = new Date(); 
            var year = mydate.getYear(); 
            if (year < 1000) { 
                year += 1900 
            } 
            var day = mydate.getDay(); 
            var month = mydate.getMonth(); 
            var daym = mydate.getDate(); 
            if (daym < 10) { 
                daym = "0" + daym; 
            } 
            var montharray = new Array("January", "February", "March", "April", "May", "June", 
                "July", "August", "September", "October", "November", "December"); 
            document.write(montharray[month] + " " + daym + ", " + year) 
        } 
    </script> 
</head> 
<body> 
    <h4> 
        <script type="text/javascript">ShowDate()</script> 
    </h4> 
    <div id="animate"> 
        <img src="windows8logo.jpg" alt="Windows 8 logo" /></div> 
    <h2> 
        Beginning Windows 8 Workshop 
    </h2> 
    <p> 
        <h3> 
            <b><u>Details:</u></b></h3> 
        <br /> 
        Holiday Inn<br /> 
        Grand Ballroom<br /> 
        123 Anylane Road<br /> 
        AnyTown<br /> 
        AnyProvince<br /> 
        A1A 1A1<br /> 
        Canada<br /> 
        <br /> 
        Friday July 27, 2012<br /> 
        Event starts at 6 pm 
    </p> 
    <p> 
        Seating is limited so act fast! 
    </p> 
    <p> 
        Please register below for my Windows 8 Workshop for beginners: 
    </p> 
</body> 
</html>

I am using JavaScript to show the current date on the page and jQuery to animate the Windows 8 logo upon $(document).ready. I have placed both of these client-side scripting items on the page to show that they can work on Site44 and that they can combined if needed. If you find though that one item is not responding you might need to use jQuery.noConflict to return control of the $ back to the other library.

The rendered HTML page will look like this:

This page is almost done but I need to add in my Google document. We will build this now to complete the site.

To create our registration form navigate to the Google Drive website. Click the red Create button on the site and choose Form. You will then get a template similar to this in which two fields are already created:

We can then edit this form to add a title and as many sections as needed. You can also select various input methods including text, checkbox and radio button under Question Type. Fields can also be marked as required to ensure a successful submission. To add subsequent sections click the Add Item button in the upper left. For my site I wish to collect the following items from each registrant:

• First Name
• Last Name
• Email
• Phone Number
• Company
• Poll – Is your company planning to switch to Windows 8?

The finished form will then look something like this:

The title you place on your Form page is the subsequent title of the file. If you close the form editor and return to your Google Drive page you will see the registration form you created in your list of documents. Clicking on the form will take you to the responses page.

This page is effectively an Excel spreadsheet. Notice how each field on your form is a column on the sheet. Every registration will be contained in a single record in this document. Once I have closed registration for this event I can then go to File | Download as to export all the responses to any file type listed there. If I choose something like .xls I could then use this spreadsheet to track attendance at my event. To edit the form or add additional fields just click Form | Edit form. Use this Help Center for more information on Google Docs.

Now that our Google form is ready we can embed the form’s link in our HTML page. This will make the form render on our registration page so that prospective registrants can start signing up for my course. To embed a Google document you need to find the key to the document. To find the link to our form click Form | Embed this form in a webpage. A dialog box will appear with an IFRAME link. Copy this link and paste it into your HTML page wherever you want your form to appear. In my HTML page I am pasting it at the bottom as the last paragraph. The IFRAME’s source attribute looks like this:

src="https://docs.google.com/spreadsheet/embeddedform?formkey=KEYVALUE
width="760" height="689" frameborder="0" marginheight="0" marginwidth="0"

Your form will appear at the bottom of the page like this:

Notice though the title we gave the form appears on the page. As well, the default width has pushed the form off to the left and is out of skew with the centered text on my page. I also get a vertical scroll bar. I will adjust the width to be 400px and I will append &ttl=0 to the src attribute of the IFRAME which will hide my form’s title on the page. (See more examples here of how else to modify Google Docs.)

My IFRAME source attribute now looks like this:

src="https://docs.google.com/spreadsheet/embeddedform?formkey=KEYVALUE&ttl=0" 
width="400" height="689" frameborder="0" marginheight="0" marginwidth="0"

And my page looks like this:

The next step we need to do is sign up of for Site44. To do this we will go to Site44.com. Make sure you have created and are logged into you Dropbox account. On the Site44 page you will see a button called “Sign in with Dropbox to get started.” This will allow Site44 to create a trusted link with your Dropbox account. Note though that you are NOT giving them access to your entire Dropbox contents. They will only create and share one folder that is necessary to build your websites.

Once the link is made you will see a page called Your Websites. Click the Create a new website button to start building your first site. A dialog box will appear and on this page you can create a free site44.com page or you can use a custom domain if you own one. We will choose a free site for this demo. I will use the site name windows8workshop.site44.com. I did not include the words “Beginner” to my site name so as to keep the webpage generic. This way if I want to add more advanced workshops later on I can keep my same site but just update my registration page as needed.

Once the site is created Site44 takes me to my new webpage. The page contains some default text including the URL of the site and where it is housed on Dropbox.

If we now move to our Dropbox account we can see that Site44 has created a new root folder called Apps. If we drill down into this folder you will a site44 folder and then a folder for your new webpage. Within this page there will be an index.html file. This is the default page shown above. You can edit this page or remove it all together.

Now depending on if you have installed Dropbox onto your computer or not (if not you can use the web interface) upload your HTML page and any resource files you might need to run your site. If your site is large enough you can create subfolders to house your images or style sheets if you want but just keep in mind that you will also need to update your source paths in your web page. My site folder now looks like this:

When we return to windows8workshop.site44.com we get a 404 error as I have removed the index.html file. I could use a landing page to redirect users but for this demo we can just go right to our new page at windows8workshop.site44.com/Registration.htm We will now see the following:

And if I register myself on the site my Google Docs form responses page will display my registration like this:

So, in this tutorial we saw how we could use Dropbox, Site44.com and Google Docs/Google Drive to create a quick registration site. We were able to incorporate both JavaScript and jQuery into the site as well as CSS. Let me know what other creative uses you can think of for using Site44 by leaving a comment below.

Sample Code