Datepicker, Telephone formater, and auto-Capitalization made easy!
Requirements:
- WordPress site
- CSS & Javascript Toolbox Installed
- Scripts copied into CJT
Step 1:
Generate form in 1shoppingcart by going step by step through their wizard. At the end, select the 3rd option, “Get Form Code”
Step 2
Copy the code below to edit right here on this page (or into your favorite text editor).
See this screenshot. The highlighted sections you’ll need to add to the form code and need to match exactly as shown:
Here are the bits you’ll need to copy into your form html as seen above:
[sourcecode language=”plain”]
id="mc-firstname"
id="mc-lastname"
onblur="formatTel(this)"
id="field2"
[/sourcecode]
Step 3
Create a test page inside your WordPress. Put the modified form code onto this page. See this silent video:
Step 4
Apply the scripts to the appropriate page(s) in the CSS & Javascript Toolbox. If you don’t see the list of pages, simply click on the header of the script which will expand it and reveal the pages you can apply the scripts to.
Step 5
Test your form! Try to type in all lower case firstname, lastname, don’t space out the phone number and click the date field to see if the datepicker is working. It’s now time to celebrate!