Build Forms Easily with a Single Pop Tag

Mitchell Warren

Forms are one of those things mankind has struggled with since the dawn of time (or at the very least since the web began to take shape). Today we're happy to announce a new way to make life with forms a lot easier.

We all know how to handle the markup for a typical web form. I'm willing to bet, that if you have a static HTML mockup to be turned into a dynamic website, somewhere in there at least one form is hiding. HTML and CSS makes it easy to mark up and style a form. With HTML5 its even straight forward to specify a reasonable amount of validations. But once it comes to actually making a form do something - like sending data, there's no help to find in the HTML standard: you're on your own.

This is where our new <pop:form> tag comes in. Now all you have to do to get your form working, is simply replace the normal <form> tag with our <pop:form> tag. It takes about five seconds and works with any HTML form - even those with file uploads or forms with considerable complexity, like our recent Annual User Survey.

A Typical Form Example

Let's take a look at a typical contact form that you'll find on most websites:

<form name="contact_form">
<p>
<label for="name">Name</label>
<input id="name" name="name"/>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email"/>
</p>
<p>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>

This is a really basic contact form with a name, email and message field. To make it work in Webpop, we'll simply replace the <form> tag with the new <pop:form> tag. We'll also include a <pop:success> message to be shown once the form has been submitted:

<pop:form name="contact_form">
<pop:success>
<h2>Thank You! I'll get back to you real soon...</h2>
</pop:success>
<p>
<label for="name">Name</label>
<input id="name" name="name"/>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email"/>
</p>
<p>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</pop:form>

Thats it!

We now have a working contact form. The entries will get stored in our database and can be browsed, searched and exported to CSV from the on-site admin interface.

Other Nifty Tricks

Adding a "mailto" attribute to the <pop:form> tag will make the form send you (or your client) an email containing the form data, each time there's a new submission.

The <pop:form> tag is also smart enough to understand the new HTML5 form validation methods. If you add a "required" attribute to a field, the <pop:form> tag will validate and determine whether the field has been filled out server-side for older browsers. No need to duplicate validation code in the client and the backend.

You can find the full documentation for the <pop:form> tag in our Reference Guide, but it all comes down to just replacing <form> with <pop:form>. Making a form work has never been simpler!

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
×
blog comments powered by Disqus