Read more about web design Cork and drop us a message!

zem_contact_reborn rework to be HTML5 compatible

Updates November 2013

Thanks to the very talented Stef Dawson the plugin now works as it should have with some great edits, it uses the existing zem_contact_text instead of the custom zem_contact_type, and supports tasty client side html5 validation before server side. Autocomplete now available and support for autofocus=autofocus. If you used the previous iteration just update the plugin and edit your zem_contact_type tag to read zem_contact_text instead. We removed dependency on zem_contact_lang so you can safely deactivate the sister plugin previously required.

Hi programmers and designers!

I have re-worked the fabulous Textpattern zem_contact_reborn plugin with the help of Stef Dawson to output HTML5 valid tags, and also to accept a new tag of:

<txp:zem_contact_text type="mytype" />

HTML5 placeholder

Just insert the placeholder content inside text input tags like:

<txp:zem_contact_text label="Name:*" required="1" placeholder="Full name..." />

HTML5 autofocus

Just insert the autofocus tag inside text input tags like:

<txp:zem_contact_text label="Name:*" required="1" placeholder="Full name..." autofocus="autofocus" />

HTML5 autocomplete

Just insert the autocomplete tag inside text input tags like:

<txp:zem_contact_email type="email" label="Email:*" required="1" placeholder="Email address..." autocomplete="on" />

HTML5 input type

  • input type=‘date’: Just output a tag in your form like:

<txp:zem_contact_text label="Best day to call back:" required="0" type="date" min="2013-06-01" max="2014-06-01" name="date" />

  • input type=‘range’: Just output a tag in your form like

<txp:zem_contact_text label="Importance of SEO ranking:" required="0" type="range" min="0" max="100" value="50" step="2" name="range" />

  • input type=‘number’: Just output a tag in your form like:

<txp:zem_contact_text label="Importance of SEO ranking:" required="0" type="number" min="0" max="100" value="50" step="2" name="number" />

  • input type=‘url’: Just output a tag in your form like:

<txp:zem_contact_text label="Url (Only if you have existing domain):" required="0" type="url" placeholder="Include http://..." />

(Note: No js fallback for url type, if used will default to plain input field on unsupported browsers)

Modernizr placeholder fallback

Download a copy of Modernizr with HTML5 input attributes and input types compatibility, host this via your own web site. It is not recommended to use the CDN for Modernizr, however there is a production copy available for temporary use only:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

Modernizr input type fallback

Input types currently supported for Modernizr fallback include:

  • input type=date
  • input type=range
  • input type=number

Jquery code for fallback solutions

Insert the Jquery and Modernizr links before the /head tag of your page. (I would usually prefer to load before /body for speed, however testing in IE7-IE9 revealed it only recognises the .js links in the head of the page, typical IE behaviour!) This includes a css file needed to style the Jquery fallbacks.

Jquery themes, including ‘roll your own’ available here.

Latest Google Jquery versions available here.

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Download Modernizr as instructed above and insert link:

<script type="text/javascript" src="<txp:site_url />js/modernizr.mycustomnumber.js"></script>

New tag to execute Modernizr check and Jquery fallback

Insert the tag below before the /body :

<txp:zem_contact_js />

This tag will load the Modernizr checks to see if the fallback Jquery is needed, and if it is it will execute that code.

Tested in Firefox, Safari, IE 7-10, Chrome

Please post any comments below, and to see a sample form just look at the web design cork page

Download the textpattern plugin – based on zem_contact_reborn v20

zem_contact_reborn_v4.5.0.0.txt

zem_contact_reborn_v4.5.0.0_zip.txt

Textpacks for different languages

Upload Textpacks for error messages under your site preferences, languages tab, scroll to the bottom you will see an upload option. The below Textpack is English, feel free to create your own Textpacks just download ied_plugin_composer and follow the instructions from the web site!

zem_contact_reborn_v4.5.0.0_all_textpack.txt

If anyone would feel so inclined as to help fund my HTML5/Jquery/Css/Responsive education so I can make more txp plugins do check out my wish list of books :)

Back to Top

Random Web Design Testimonials

“Hilary is personable and easy to work with. She has helped us over the last 15 years with our website and graphics. Nothing is a problem. She is reliable and trustworthy. We would recommend her.”

Laura Jane Walsh - Manager at Lindas Of Kinsale