Using WP X4

1. Create a form using WP. Change or keep the form ID, but make a note of it. You will need it for the CSS (stylesheet) at 8. below.

2. Delete labels if not required

3. Change ID’s and Names on all inputs to what the input is, i.e. name, email etc.

4. Un-check validation boxes.

5. Insert a line similar to this just before the _addcode on each input as shown lower down.

required="" placeholder="Your Name" pattern="^[A-Za-z ]{3,20}$" title="Your name"

 

<input type="text" id="name" name="name" size="27" style="width:300px; /*Tag Style*/" value=""        __AddCode="here">

 

required=””  This means that the field must have an entry before the form is submitted.

placeholder=”Your Name”  The label  Your Name  will appear in the edit/text box.

pattern="^[A-Za-z ]{3,20}$"  This is a client side validation. It means that the input must match the pattern. The pattern is known as a Regular Expression (regex or regexp for short). It is a special text string for describing an input pattern. Many are available for all sorts of uses. This one will accept upper and lower case characters and spaces. Min of 3 and max of 20.

For alternatives, have a look http://regexlib.com/DisplayPatterns.aspx, or search.

title=”Your Name”  Whatever you write here will be visible when when you hover over an edit/text/combo box.

6. For Combo boxes  use required and title when pasting before the addcode tag (5. above).  For the placeholder, right click the combo box  then edit. If you have many items in the box , click on the top one. Now click on  add option. In the name box  enter for example, Select Gender. Click the selected box and leave the value box blank. Move your new addition to the top of the list.

7. Paste this to the page head:

<script type="text/javascript" src="src/nwxforms.js"></script>

<!--

 can be started earlier using "DOMContentLoaded" if needed,

 this is just an example, you can use the more common form:

 

   window.onload = function() { nwxforms(this); }

 

 to achieve the same objective or just call it when needed

-->

<script type="text/javascript">window.onload = Function('nwxforms(this)');</script>

 

8. Copy the page stylesheet  from the form of your choice ( I have included notes “copy from here” - “copy to here” ) and paste into your page stylesheet. Where you see #form or #form2 change it to  #your form ID.

9. Make sure you have the file nwxforms.js loaded into folder src, or change the path listed in 7. above.

10. Make sure you have loaded the png’s used by the stylesheet.

 

Reference websites and downloads.

https://github.com/dperini/nwxforms

http://www.bradshawenterprises.com/blog/2010/fancy-forms-html5-css3-js/

DEMO of these two WP forms

Working example using the Form2 stylesheet