A minor update has been pushed out to the UA WordPress Theme that adds a bit of new functionality as well as an update to the form HTML/CSS.
The first major difference is the addition of two new shortcodes: [linksbox] and [uaform]. If you are unfamiliar with shortcodes, they are custom WordPress tags that allow you to add things which normally require lots of code. Please refer to the UA WordPress Theme page on WebGuide for more information on the [linksbox] shortcode.
The shortcode I want to focus on today is [uaform]. By adding [uaform] to your post/page, you will have a fully functional contact form.
Here are some of the features:
- Shortcode attributes to control form name/email subject and email(s) it sends to
- JS validation using the jQuery Form Validation plugin
- Logic verification question
- SPAM honey pot field
The main reasons I chose to write my own shortcode and not use a plugin to process my data is twofold:
- I wanted an integrated shortcode to ship with our UA WordPress Theme
- I scoured the Internet in search of a similar solution and was never able to find anything
With that in mind and before we get to the code, here is how to customize the shortcode, should you want to.
Customization Options
| Option |
Description |
Choices |
Default Setting |
| form_name |
The name of the form and subject of email |
Any string of text |
Contact Us |
| to |
Email(s) the message will be sent to. |
Single or Multiple emails. If using multiple emails, separate each with a comma |
Administrator’s email |
Here are several examples how you would use some of those attributes:
[uaform to="nottheadmin@test.com"]
[uaform form_name="Website Feedback"]
[uaform form_name="Ask Us a Question" to="firstperson@test.com,secondperson@test.com"]
PHP
Before you can use the shortcode, you will need to add the following PHP to your functions.php file. If you are using the UA WordPress Theme, you do not have to do this.
<?php
/************************************
Smart Jquery Inclusion
************************************/
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-form-validation', 'http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js', '' , '1.7', true);
}
/************************************
Contact Form shortcode
form_name - name of form, also used as subject of email. DEFAULT is Contact Us
to - email(s) the message will be sent to. Multiple emails can be used; separate each email with a comma. DEFAULT is the Administrator's email address
************************************/
function ua_form($atts){
if(($_SESSION['contact_form_success'])){
$contact_form_success = '<p id="form_success">Thank you for your inquiry. We will contact you shortly to answer your questions.</p>';
unset($_SESSION['contact_form_success']);
}
$admin_email = get_bloginfo('admin_email');
extract(shortcode_atts(array(
'form_name' => 'Contact Us',
'to' => $admin_email
), $atts));
$_SESSION['ua_form_subject'] = $form_name;
$_SESSION['ua_form_to'] = $to;
$output .= $contact_form_success . '<form method="post" action="' . get_permalink() . '" id="contactform">
<fieldset>
<div>
<h3>' . $form_name . '</h3>
</div>
<ul>
<li>
<label>Name <span>*</span></label>
<div>
<input type="text" name="name" maxlength="100" id="name" />
</div>
</li>
<li>
<label>Department/Organization</label>
<div>
<input type="text" name="department" maxlength="150" id="dept" />
</div>
</li>
<li>
<label>Telephone Number</label>
<div>
<input type="text" name="phone" maxlength="50" id="phone" />
</div>
</li>
<li>
<label>E-mail Address <span>*</span></label>
<div>
<input type="text" name="email" maxlength="150" id="email" />
</div>
</li>
<li>
<label>Enter your question, comment, or issue report <span>*</span></label>
<div>
<textarea name="question" cols="50" rows="10" id="question"></textarea>
</div>
</li>
<li>
<label>Please enter any two digits with <strong>no</strong> spaces (Example: 12) <span>*</span></label>
<div>
<input type="text" name="secret" id="secret" />
</div>
</li>
<div style="display:none;">
<li>
<label for="spam">This box is for spam protection - <strong>please leave it blank</strong>:</label>
<div>
<input name="spam" id="spam" />
</div>
</li>
</div>
<li>
<input type="submit" name="submit" value="Submit" id="sendmail" />
</li>
<input type="hidden" name="contact_form_submitted" value="true">
</ul>
</fieldset>
</form>';
return $output;
}
add_shortcode('uaform', 'ua_form');
function ua_form_process() {
session_start();
if(!isset($_POST['contact_form_submitted'])) return;
foreach($_POST as $key=>$value){
$key = strtolower(str_replace('_', ' ', $key));
$form_fields[$key] = $value;
$value = strip_tags(htmlentities($value));
if($key == "spam" || $key == "secret" || $key == "submit" || $key == "contact form submitted"){
//do nothing
}
else{
$message .= ucwords($key) . ": $value\n";
}
}
//Test for spam and verification, then email
//"secret" is a REQUIRED field name in order for this script to work
if($form_fields["spam"] == '' && is_numeric($form_fields["secret"]) && strlen($form_fields["secret"]) == 2){
$to = $_SESSION['ua_form_to'];
$subject = $_SESSION['ua_form_subject'];
$mail_sent = mail($to, $subject, $message, "From: " . $form_fields["name"] . "<" . $form_fields["email"] . ">");
}
if(!$mail_sent) wp_die("Error: <strong>verification failed</strong>. Your form was not submitted due to an incorrect answer for the verification question. Please be sure to enter the answer carefully.", "Verification Failed");
$_SESSION['contact_form_success'] = 1;
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit();
}
add_action('init', 'ua_form_process');
function ua_form_validation(){
echo '<script>
jQuery(document).ready(function(){
jQuery("#contactform").validate({
rules:{
secret:{
maxlength:2
}
},
errorPlacement: function(error, element) {
if(element.is(":radio") || element.is(":checkbox")){
error.appendTo(element.parent().parent());
}
else{
error.insertAfter(element);
}
}
});
});
</script>';
}
add_action('wp_footer', 'ua_form_validation');
?>
CSS
Here is the CSS that we use to get a nice looking form (thanks to WuFoo for their rock solid form CSS/HTML).
/*********************************************************
Form Styles
*********************************************************/
form.uaform{
font-family:"Lucida Sans",Lucida Sans Unicode,Verdana,Arial,sans-serif;
margin:20px 0;
}
form.uaform li{width:auto !important;}
.uaform ul{
list-style:none;
margin:0 14px;
padding:0;
font-size:1.2em;
}
.uaform li{
clear:both;
margin:0;
padding:6px 1% 9px;
width:64%;
}
.uaform li div span, span.full input, span.full select{
display:block;
float:left;
width:100%;
}
.uaform span.left{
float:left;
width:48%;
}
.uaform span.right{
float:right;
width:48%;
}
.uaform span.right input, .uaform span.right select, .uaform span.left input, .uaform span.left select{width:100%;}
.uaform li div label, .uaform li span label{font-size:90%;}
.uaform fieldset{
background-color:#eeeeee;
-webkit-box-shadow:2px 2px 10px #ADADAD;
-moz-box-shadow:2px 2px 10px #ADADAD;
box-shadow:2px 2px 10px #ADADAD;
margin:15px 0;
clear:both;
}
.uaform legend{
font-size:1.4em;
font-weight:bold;
color:#990000;
margin-left:5px;
}
.uaform .legend{
margin:5px 14px;
padding:0 6px;
color:#990000;
border-bottom:1px dotted #CCCCCC;
}
.uaform label, label.desc{
display:block;
margin:0;
padding-bottom:3px;
color:#000;
}
label.desc{font-weight:bold;}
.uaform label.choice{
font-size:100%;
line-height:150%;
margin:-17px 0 0 23px;
padding:0 0 5px;
width:88%;
}
.uaform label span{
color:#BC1212;
vertical-align:middle;
}
input.text, textarea.textarea, select.select{
font-size:100%;
font-family:"Lucida Sans",Lucida Sans Unicode,Verdana,Arial,sans-serif;
margin:0;
padding:2px 0;
}
input.medium, select.medium{width:50%;}
input.large, select.large, textarea.textarea{width:100%;}
textarea.medium{height:10em;}
.submit{font-size:1.1em;}
input.checkbox, input.radio{
font-size:1.1em;
display:block;
height:13px;
width:13px;
margin:4px 0 0;
}
label.error{
color:red;
font-weight:bold;
}
input.error, select.error, textarea.error{border:1px solid red;}
p#form_success{
color:green;
font-weight:bold;
}
After adding all of that code to your theme and inserting the [uaform] shortcode into a post or page, you should see something like this:
I hope this proves useful to those who just need a simple contact form. If you have any feedback, suggestions, problems with the code, or spot any bugs please let me know!
Those of you familiar with the UA WordPress Theme have probably seen the contact form shortcode. It’s a basic contact form with a couple of customizations. For most people looking to add a contact form to a web page, the shortcode does the job. However, when you want a custom form things can get more complicated. I have recently built a new plugin that I hope will make things a bit simpler.
