When it comes to contact forms, validating the information submitted by your visitors is key.

With proper form validation, we can help cut down fraudulent submissions and keep you relatively free from spam submissions as well. Below, I’ve gathered one of the simplest methods for validating your contact forms to keep your collected data valid and useful.

I’ve used javascript to validate my webform. You may copy and paste the code below to your site or application, but be sure to update the dependent code to match your web site.

One thing to remember is to invoke the javascript validation of your form with the ‘onSubmit’ tag.

I’ve Included 3 snippets of code to get your web form functioning and validating properly.  Although, the form is validated with javascript, I’ve used PHP to process the mailing function, so that your form sends on submit.

Part 1: The Contact Web Form

The form I’ve provided here is a very simple 4 field form to collect data for you web site or application. Here we’re gathering the basic information we need to gather from a visitor to contact them further regarding their inquiry. Here, we’re collecting Name, Email, Phone Number and their message or question.

<form class="form-container" name="myForm" method="post" onsubmit="return validateForm()" action="sendmail.php">
<div class="frm-element-lg fl">
<input type="text" name="name" id="name" class="icon-1" placeholder="Name*"></div>
<div class="frm-element-lg fl">
<input type="text" name="email" id="email" class="icon-3" placeholder="Email*"></div>
<div class="frm-element-lg fl">
<input type="text" name="phone" id="phone" class="icon-4" placeholder="Phone*" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"></div>
<div class="frm-element-lg fl">
<input type="text" name="message" id="message" class="icon-5" placeholder="Message*"></div>
<div style="clear:both;"></div>
<input type="submit" value="Submit" class="submit-btn">
</form>

Part 2: The Form Validation

As stated above, we’re using javascript to validate our form submissions. Here, we set a javascript alert box to pop up on submission if a user has submitted incomplete form fields and we have set our email input field to confirm that the visitor is submitting a correctly formatted email address as well.

There are also 3rd party services you may integrate into your validation to confirm that the email provided is, in fact, a ‘real’ email as well, but that’s getting ahead of ourselves regarding our simple validation here.

<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == "") {
alert("Email Address must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
var x = document.forms["myForm"]["phone"].value;
if (x == "") {
alert("Phone number must be filled out");
return false;
}
var x = document.forms["myForm"]["message"].value;
if (x == "") {
alert("Message must be filled out");
return false;
}
}
</script>

Part 3: The Send Function

I’ve included the send function, as well, below. Here we use PHP to ‘send’ the email once the form is filled out by your site visitor and they click submit. You may take the code below and create a ‘sendmail.php’ file that is included in the form code above as the form action.

Be sure that all of your variables and form input name match correctly so that your send function operate correctly.

<?php $email_to = "your@email.com";
$name = $_POST["name"];
$email_from = $_POST["email"];
$message = $_POST["message"];
$phone = $_POST["phone"];
$email_subject = "Feedback from website"; $headers = "From: " . $email_from . "\n";
$headers .= "Reply-To: " . $email_from . "\n"; $message = "Name: ". $name . "\r\nEmail: " . $email_from . "\r\nMessage: " . $message . "\r\nPhone: " . $phone;
ini_set("sendmail_from", $email_from);
$sent = mail($email_to, $email_subject, $message, $headers, "-f" .$email_from);
if ($sent) { header("Location: http://yoursite.com/thankyou.php"); }
else { echo "There has been an error sending your comments. Please try later."; }
?>

There’s several ways available to validate and send your web forms. The method above, I’ve found, is the lightest and simplest way to achieve web form validation. I hope this helps and enjoy.

Last week I posted about grabbing Google UTM tags from a url string and using that to hide or show specific content based on a variable. After that task, I kept running into another issue with Google UTM tags… Grabbing them from an incoming link, grabbing those variables, and passing each of them along in the url to each page that the visitor navigates.

At first I was searching for a plugin or a WordPress function to rewrite the url’s with my url string but kept getting nowhere.

After several hours of research and a day later, I found a javascript/php hack that produced the results that I was ultimately looking for. Yes, it could be prettier but it WORKS!

Locate your template footer.php file in your theme folder and place the following code just before the closing tag to grab Google UTM tags and pass them to each page of your WordPress site.

Here’s 5 of the most common Google UTM tags that we grab from the session:

utm_source
utm_medium
utm_camgpaign
utm_terms
utm_content


<?php $utm_source = isset($_GET['utm_source']) ? $_GET['utm_source'] : ""; ?>
<?php $utm_medium = isset($_GET['utm_medium']) ? $_GET['utm_medium'] : ""; ?>
<?php $utm_campaign = isset($_GET['utm_campaign']) ? $_GET['utm_campaign'] : ""; ?>
<?php $utm_term = isset($_GET['utm_term']) ? $_GET['utm_term'] : ""; ?>
<?php $utm_content = isset($_GET['utm_content']) ? $_GET['utm_content'] : ""; ?>


<script type="text/javascript">
jQuery(document).ready(function ($) {
$(function() {
$("a").attr('href', function(i, h) {
return h + (h.indexOf('?') != -1 ? "&utm_source=<?php echo $utm_source; ?>&utm_medium=<?php echo $utm_medium; ?>&utm_campaign=<?php echo $utm_campaign; ?>&utm_term=<?php echo $utm_term; ?>&utm_content=<?php echo $utm_content; ?>" : "?utm_source=<?php echo $utm_source; ?>&utm_medium=<?php echo $utm_medium; ?>&utm_campaign=<?php echo $utm_campaign; ?>&utm_term=<?php echo $utm_term; ?>&utm_content=<?php echo $utm_content; ?>");
});
});
});
</script>

The first 5 snippets of php code are how you grab the Google UTM tag variables from the incoming link.

As you can see, we are grabbing the variables from the session that being passing in from the link. We’re grabbing the dynamic variable and echoing that variable in the javascript below it.

The javascript is where the magic happens on page redirect.

When a visitor clicks on any internal site link, the variables are picked up from the session and echoed behind the hardcoded variable tokens.

Sidenote: the code can be optimized, but this down and dirty method works

While coding websites for several different clients, I’ve repeatedly had the need to a smooth scroll anchor function. Through several hours of searches and digging, I found something, that was actually in a comment somewhere, that executed the scroll function perfectly. Just a few lines of code and viola! It’s very light weight and uses a bit of css and jquery.

Place the code below right before the closing head tag “</head>”

<!-- SMOOTH SCROLL PLACE IN HEAD -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!-- End of SMOOTH SCROLL -->

And now with the following code, place it just after the opening <body> tag.

<body>
tag ==> <div name="top"> </div>
<p>somethings</p>
ANCHOR LINK ==>    <a href="#top"> Go to top </a>

Try it out for yourself and enjoy the results.

This is a great tutorial I’ve used to fight back again spam on some of the website that I design. Most site use a captcha system to deter spam but that can kill your conversions sometimes. With the method in this tutorial, you can set up a spam-free contact for without captchas. It uses simple css, javascript and html. You’ll need to have a basic understanding of all three of these to complete this tutorial.

How to build a spam-free contact form without captchas: Read More…

javascript window.open function

Thewindow.open()function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes thewindow.open()function.

<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

Display:

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window thatpopsup.

javascript window.open arguments

There are three arguments that thewindow.openfunction takes:

1. The relative or absolute URL of the webpage to be opened.
2. The text name for the window.
3. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

• dependent– Subwindow closes if the parent window (the window that opened it) closes
• fullscreen– Display browser in fullscreen mode
• height– The height of the new window, in pixels
• width– The width of the new window, in pixels
• left– Pixel offset from the left side of the screen
• top– Pixel offset from the top of the screen
• resizable– Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
• status– Display or don’t display the status bar

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

upgraded javascript popup window!

Now that we have the tools, let’s make a sophisticated JavaScript popup window that we can be proud of!

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Display:

Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!