Creating Web Forms using Hype App and Web Form Builder

How to make web forms with HTML 5 Hype

I have been building up an email list for my Good and Geeky brand of books. Part of what you need, to do this is to create web forms and landing pages. I have my email list with Mail Chimp which is a really useful email list provider. There are forms you can make from within that system, but it looks nicer if you make your own. I did try using the Lead Pages service for making landing pages and I stopped using it after two or three months. It seemed to be working quite good for a month or so and I had more sign-ups than I’d had previously. Then it just stopped doing what it’s supposed to do and it was kind of expensive per month, so it just had to go. So I looked around for software that could give me great looking landing pages (sometimes called squeeze pages) for my email list. I do have the application Hype and I’ve been using it for a couple of versions. It’s a fantastic application that allows you to create animations in HTML 5. So I looked at a way I could include web forms within a page crafted in the Hype application. It will be possible to use the embedded forms code from Mail Chimp, but as I say, they are not too pretty. So it was time to do some googling and searching for an application to spice things up. I suppose, one of the possibilities would have been to spend time learning more about using CSS, but that would have taken extra time. I looked at a few apps but then I found an one called Web Form Builder. I gave the application a try and it works mostly okay. So I paid for it.

Setting up with Mail CHimp

Using Web Form Builder

It’s easy enough to get using this application and you have themes to help you get going. There are only 16 themes when you get started, but you can import extra themes into the application. I chose one I liked and I have stuck with it. When you have your theme sorted out you can then start to build your web form. You drag and drop items onto the form in the first instance. In the Elements tab you have three sections, Basic, Magical and Static.

Within the Basic section you have your text fields, drop-down boxes and radio buttons and you can even ask for a password. Within the Magical section you can add a request for email address or a phone number as well as ask for a date or a web address. Within the Static section you can add headers, footers, logos, submit buttons and even add form protection with Capcha.

Web Form Builder

Once you have all of the elements in there, the thing to do is to go into the settings and link up your form to your email list provider. This involves getting an API key from Mail Chimp and then you can match up the fields on your form to fields within the email list service. The next thing to do is to go to the properties tab and make adjustments to the elements you have added to your form. So for example, you might want to change the text giving people information about what to enter into a field. You can change colours of text and in the case of a drop-down list, say what you want to be in the list. There are lots of different options so you can set up your web form just as you want it.


There is a small problem

There are occasions when you will put your cursor into some parts of the application and it doesn’t go in there. This gives me the impression that maybe the software is a not very well done, port from software intended to use on another platform such as Windows. I have no doubt that if it was designed specifically to use on the Mac, it would certainly be prettier. It is a minor annoyance, but it does get irritating from time to time. It can take two or three tries to get in the editing area with the cursor.

Form Exported

Using the code from Web Form Builder

There is an extra service connected to this software to provide hosting for your forms. You do have to pay more to use this service. I go for the FREE export to manual server setup. After doing it a few times it’s not too difficult, but the process could be easier and better. It is necessary to make some small adjustments to the code for the forms to work. I have to add the URL part of the domain name so that it’s there in full rather than just a relative URL. I’ve also found that the code given is more than I need, so I just delete the bits I don’t want. It wasn’t too difficult to find out the information to be able to set this up, but it could have been easier. Also I think the software developer could have given options within the export so that, that this messing about wouldn’t have been necessary. So I put the code snippet which is displayed during the export process into a HTML editor to get it ready to put into Hype. The export process exports out to a folder giving you a PHP document and another folder full of code bits and pieces. It’s a good idea to use your FTP software to upload all of this to the server at this point in the process. If you do this before you do that bit of editing in the HTML software you’ll be able to see when you have got the code working properly.

Code in Hyperedit html code editor


Putting the code into a Hype document

All you need to do is to add a HTML widget to your Hype scene and click on the little round icon with a pencil in it situated underneath the widget. This opens up a window for you to paste in your web form code. I’ll go into more detail about making a landing page with Hype in another blog post. Once you have all of the work done within Hype you can upload it to the server and you’ll be in business.

form put into Hype app

Saying thank you

When you’re making a landing page you also need to make a thank you page. I use a new thank you page for each of the forms I make. This is so I can track clicks using Google Analytics to know how many people get to the thank you page. This way you can make comparisons as to which of your landing pages are working the best to build up your email list.


Here is the landing Page I made with Web Form Builder and Hype


Spend the money to do it easy or get geeky

I’d much rather spend the money as a one-off payment to give me the software facilities to do the job than to continually pay out a monthly basis. The monthly costs were working out in the region of €30 per month. If your business model can support that then why not pay out and have done with it. For me, it just didn’t make financial sense and I really don’t mind spending an hour or two to create a great looking landing page using Hype and Web Form Builder.

Hype is excellent Mac software for creating HTML 5 coded pages and I can thoroughly recommend it. Web Form Builder does the job even though it is not great as Mac software goes. Using these two applications along with the FTP software I use, Yummy FTP gets the job done. I have Transmit by Panic Software for my FTP needs on iOS.