biilmann

Webpop HTML5 Form Extension

This extensions makes it dead easy to handle form submissions of any HTML5 form with Webpop.

Place the forms.js file in the extensions folder of your project. Then just write the html for the form as you would for any normal HTML form. Replace the <form> tag with <pop:forms:form mailto="email@example.com"> and you're done.

Inside the <pop:forms:form> tag you can use <pop:success> and <pop:error> to display a message on successful form submission or on a validation error.

The HTML5 validations for the attributes required, min, max, minlength, maxlength and pattern will automatically be handled server-side (for browsers that doesn't handle them client-side). When a form submission fails due to a validation error, the form fields will keep the submitted values.

biilmann

// Helper methods from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

biilmann

The <pop:admin> tag can be used to add markup that will only be shown when an admin user has entered admin mode.

In this example we use it to add a bit of markup that will let client users change a "bg_image" field on the home section.

When the editing mode is activated, we add the class "yourwebisonline-edit-mode" to the body element of the website, you can use this to hide and show elements that should only be visible when editing.

biilmann

<pop:utils:grouped_entries size="4">
  <div class="row">
    <pop:entries>
      <div class="three columns">
        <h2><pop:title/></h2>
        <pop:description/>
      </div>
    </pop:entries>
  </div>
</pop:utils:grouped_entries>

biilmann

site.search

Lets you search through the content of the site, similar to <pop:search>.

The site search is quite flexible. In its simplest form it works by passing in a query:

site.search({query: "webpop"})

Will return content on your site matching the query "webpop". This returns an object with the following properties:

biilmann

<pop:mongo:find collection="users" wrap="ul" break="li">
  <pop:email/>
</pop:mongo:find>

<!-- querying -->
<pop:mongo:find collection="users" query='{"active": true}' wrap="ul" break="li">
  <pop:email/>
</pop:mongo:find>

<!-- by id -->

biilmann

var mailer = require('mailer');
var error = null;

/* Define the forms you want to process here.
Each form needs a name that you should add to the form in the template. That is, if the
form is called "kontakt_form" in the markup you should add a hidden input field to the form
like this:

<input type="hidden" name="form_name" value="kontakt_form"/>

biilmann

<pop:sections wrap="ul">
  <li><a href="<pop:permalink/>"><pop:title/></a></li>
</pop:sections>

biilmann

<command line>: cannot satisfy -package Cabal-1.14.0: 
    Cabal-1.14.0-c6d4670bd950298f6fdaae76fea539be is unusable due to missing or recursive dependencies:
      directory-1.1.0.2-5ce8ec4d96e120807d0ed0cb6a25d0c4 process-1.1.0.1-dd810a368ec79f28445811c5f39bd53a
    (use -v for more information)
World file is already up to date.

biilmann

<pop:content>
  <pop:gallery/>
</pop:content>