This hack is in response to a request from a forum member for a way to pass variables into the contact form. This is easily accomplished using JavaScript. The process is focused on passing variables into text fields, and does not support select menus, checkbox sets or radio button sets. If I see sufficient demand I may write another tutorial or consider adding similar functionality to a future release of simpleContact Pro.
Because simpleContact Pro comes with the JavaScript library jQuery, it makes sense to take advantage of that rather than get into modifications to the form's code that might be too complex for users who are unfamiliar with PHP.
I'll be using a jQuery plugin called jQuery.query by Blair Mitchelmore. The current version at the time of writing is version 2.1.7 and is available under an amusing form of free use license.
Here is a direct link to download jQuery.query 2.1.7. The implementation steps are as follows:
1) Upload jQuery.query
For simplicity's sake, rename the file jquery.query.js and upload it to your sc_admin/js folder.
2) Link to the plugin
Add a link to the jQuery plugin in the head of your contact form page, after the link to jQuery itself e.g:
<script src="sc_admin/js/jquery.query.js" language="JavaScript" type="text/javascript"></script>
3) Modify forms.js
For the purposes of this tutorial, I'm going to add support for pre-filling the first name field with the querystring. Here is an example of how a querystring is constructed:
http://www.yourwebsite.com/contact.php?name_first=alex&last_name=hardy
The querystring is a series of keys and values following the ? sign and separated by & signs. I'm going to just deal with name_first, but you can set as many variables as you want in this way.
Open sc_admin/js/forms.js
Replace line 2 with the following:
if ($("#form_contact").is("form")) {
$("#form_contact").submit( function() { return validateContact(); } );
if ($("#name_first").val() == '' && $.query.get('name_first')) {
$("#name_first").val($.query.get('name_first'));
}
}
In addition to binding the form validation function usual, the middle lines of this code do the following:
* Check the name_first field is empty (anything a user enters should over ride the querystring)
* Check that a querystring variable name_first is present
* If both conditions are true, the value of the name_first variable is passed into the name_first field
You can repeat and modify those three lines in the middle as many times as you need to for additional fields within that block of code.
Please note: There is no requirement for the querystring value and the field name to be the same. If you have a custom field whose name is obj_5 but whose label is "telephone", you could do the following:
if ($("#obj_5").val() == '' && $.query.get('telephone')) {
$("#obj_5").val($.query.get('telephone'));
}
You should now be able to set up pre-filling of fields on your contact form as you wish.