Install CSS & Javascript Toolbox plugin on your WordPress site. Looking to setup scripts on the new 1Shop forms? Click here
[ez_btn color=”orange” url=”http://wordpress.org/plugins/css-javascript-toolbox/” target=”_blank”]CJT Plugin[/ez_btn][ez_btn color=”orange” url=”https://www.sugarsync.com/pf/D646892_84631739_6576075″ target=”_blank”]Scripts[/ez_btn]
[box title=”Use Above Address” color=”#333333″]This populates the person’s address as the event location from address1, address2, city, state and zip fields.
[sourcecode language=”plain”]
<script type="text/javascript">// <![CDATA[
function combineaddr(obj){
if(obj.checked== true){
var v= document.getElementById("Address1").value + ", " + document.getElementById("City").value + ", " + document.getElementById("State").value + ", " + document.getElementById("Zip").value;
document.getElementById("field4").value= v;
}else{
document.getElementById("field4").value= "";
}
}
// ]]></script>
[/sourcecode]
[spoiler title=”HTML Fields” style=”fancy”]
The Name, Address1, Address2, City, State and Zip fields all need ID's set in the HTML code! The default code doesn't have that. Add id="fieldname" to the field code for those fields. Look for this line in each field: <input name="Name" type="text" size="40"> Simply copy the name="fieldname" and rename it id="fieldname" So that same line would now look like this: <input name="Name" id="Name" type="text" size="40"> Additionally, the location field (field4) will need to be modified with the code for the checkbox. Use this code below to replace your existing field4 field: [sourcecode language="plain"] <tr><td><label for="field4">Party Location Address</label><input type="checkbox" id="C1" name="C1" value="ON" onchange="combineaddr(this)"> Use Above info</td><td><input type="text" id="field4" name="field4" size="30" ></td></tr> [/sourcecode] [/spoiler] [/box] [box title="Telephone Formatter" color="#333333"]This will properly format a phone number to this format (123) 420-4295. Make sure to add this code into the phone field: onblur="formatTel(this)" [sourcecode language="plain"] <script type="text/javascript" src="[wlm_website]/AS/scripts/format-tel.js"></script>[/sourcecode] [spoiler title="HTML Fields" style="fancy"] Add this to your phone fields that you want formatted: onblur="formatTel(this)" Here's an example: [sourcecode language="plain"] <tr> <td>Phone</td> <td><input name="Workphone" onblur="formatTel(this)" type="text" size="40"></td> </tr>[/sourcecode] [/spoiler]
[/box]
[box title=”Form Validator” color=”#333333″]Forces certain required fields to be filled in before form is able to be submitted. Learn more here
[sourcecode language=”plain”]<script type="text/javascript" src="[wlm_website]/AS/scripts/gen_validatorv4.js"></script>
[/sourcecode]
[spoiler title=”Error Messages” style=”fancy]
These are example error messages you can use with the “form validator”. These go in the “Amazing System” Javascript area below your WordPress page editor.
[sourcecode language=”plain”]
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("Name","req","Please enter your name");
frmvalidator.addValidation("Email1","req", "Please enter your email");
[/sourcecode]
[/spoiler]
[/box]
[box title=”Datepicker” color=”#333333″]This will make a pop up calendar widget appear on your “date of event” field (field2). Make sure to set as footer script in CJT. Get additonal info on datepickers here
[sourcecode language=”plain”]
<link href="[wlm_website]/AS/date_picker_CSS/redmond/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/box]
[box title=”Name Capitilization” color=”#333333″]Forces capitalization on names entered into forms. Also blocks certain words like “age” “boy” from the child’s name field. For whatever field you want to capitalize, make sure in the html code for the field the id is set. For example, id=”Name” Click here if you’re looking for the original capitalization script.
[sourcecode language=”plain”]
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
jQuery(‘#Name, #Company, #mc-firstname, #mc-lastname’).on(‘input’, function() {
var str = jQuery(this).val();
str = str.toLowerCase();
str = str.replace(/[\s]+[a][n][d][\s]+/g, ‘ ‘);
str = str.replace(/[^A-Za-z\-\s]/g, ”);
str = str.replace(/\w\S*/g, function(match){
return match.charAt(0).toUpperCase() + match.substr(1).toLowerCase();
});
str = str.replace( /-([a-z])/ig, function( match ) {
return ‘-‘ + match.substr(1).toUpperCase();
});
str = str.replace(/[\s]+/g, ‘ ‘);
str = str.replace(/^\s/g, ”);
jQuery(this).val(str);
});
jQuery(‘#field12’).on(‘input’, function() {
var str = jQuery(this).val();
str = str.toLowerCase();
str = str.replace(/^&+/g, ”);
str = str.replace(/^[,]+/g, ”);
str = str.replace(/[\s]+[a][n][d][\s]+/g, ‘ & ‘);
str = str.replace(/^[a][g][e][\s]+/g, ”);
str = str.replace(/[\s]+[a][g][e][\s]+/g, ‘ ‘);
str = str.replace(/^[b][o][y][\s]+/g, ”);
str = str.replace(/[\s]+[b][o][y][\s]+/g, ‘ ‘);
str = str.replace(/^[g][i][r][l][\s]+/g, ”);
str = str.replace(/[\s]+[g][i][r][l][\s]+/g, ‘ ‘);
str = str.replace(/^[t][w][i][n][s][\s]+/g, ”);
str = str.replace(/[\s]+[t][w][i][n][s][\s]+/g, ‘ ‘);
str = str.replace(/[^A-Za-z\-\s&,]/g, ”);
str = str.replace(/\w\S*/g, function(match){
return match.charAt(0).toUpperCase() + match.substr(1).toLowerCase();
});
str = str.replace( /-([a-z])/g, function( match ) {
return ‘-‘ + match.substr(1).toUpperCase();
});
str = str.replace(/[\s]*[&][\s]*/g, ‘ and ‘);
str = str.replace(/[\s]*[,][\s]*/g, ‘ and ‘);
str = str.replace(/[\s]+/g, ‘ ‘);
str = str.replace(/^\s/g, ”);
jQuery(this).val(str);
if(str.indexOf(‘ and ‘) > 0) {
jQuery(‘#field11’).val(‘multi’);
}
});
});
// ]]></script>
[/sourcecode]
[spoiler title=”HTML Field” style=”fancy”]
Here is an example HTML field with the id being set. By default, when generating forms with 1shop, the contact fields do not have id’s set already but custom fields do!
[sourcecode language=”plain”]
<tr>
<td>Name</td>
<td><input name="Name" id="Name" type="text" size="40"></td>
</tr>
[/sourcecode]
[/spoiler]
[/box]
[box title=”Discount Deadline” color=”#333333″]Use this code to populate tomorrow’s date based on when they fill out your form. We use this for typically for a discount deadline where they must respond before the end of the day tomorrow (the day after they request info).
[sourcecode language=”plain”]
<script type="text/javascript">// <![CDATA[
function asNdate() {
var ndate= new Date();
ndate.setDate(ndate.getDate()+1);
var nd1= ndate.getMonth()+ 1;
var nd2= ndate.getDate();
var nd3= ndate.getFullYear();
document.getElementById(‘ndate’).value= nd1 + ‘/’ + nd2 + ‘/’ + nd3;
}
// ]]></script>
[/sourcecode]
[spoiler title=”jquery line” style=”fancy”]This line needs to go in the javascript box of our AS plugin area under the standard WP editor. This would be on the page with the initial form, i.e. the Quick Info Request form. Make sure inside your 1shop you have a custom field with a shortname of “ndate”
[sourcecode language=”plain”]
jQuery(document).ready( asNdate() );
[/sourcecode]
[/spoiler]
[spoiler title=”Hidden Field” style=”fancy”]This line goes in the form code of the Quick Info Request form.
[sourcecode language=”plain”]
<input id="ndate" type="hidden" name="ndate" value=""/>
<pre>[/sourcecode]
[/spoiler]
[/box]