PHP – N77 Design | NickClaeboe.com https://www.nickclaeboe.com Atlanta Web, Graphic & Flyer Design • Design Portfolio & Rates for Nick Claeboe Custom Design Work Wed, 03 Mar 2021 14:31:41 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://www.nickclaeboe.com/wp-content/uploads/2016/05/favicon-60x60.png PHP – N77 Design | NickClaeboe.com https://www.nickclaeboe.com 32 32 Rotate URLs with PHP Location Header Exit Code at Fifty Percent Random While Preserving URL string https://www.nickclaeboe.com/2018/06/13/rotate-urls-with-php-location-header-exit-code-at-fifty-percent-random-while-preserving-url-string/ Wed, 13 Jun 2018 11:30:17 +0000 http://www.nickclaeboe.com/?p=557

This is a great piece of code to rotate 2 separate landing page urls using PHP location headers and a 50% random string. This code also preserves the URL string so that any url string variables are sent to the rotated links of the outbound pages.

We achieve this by using a simple redirect script php header.

This snippet of code is excellent for the testing of different landing page offers with different designs and elements, so you may determine which page layout and design performs better.

First, I set up an index.php page in a directory on my site. In this case is was just a simple /r directory. So the file structure would look something like this

https://www.nickclaeboe.com/r/

and the php code would be added to the index.php file in this /r directory.

<?php
if (mt_rand(0,1) == 0) {
header("Location:https://www.nickclaeboe.com/blog/post1/?". $_SERVER['QUERY_STRING']);
exit;
} else {
header("Location:https://www.nickclaeboe.com/blog/post2/?". $_SERVER['QUERY_STRING']);
exit;
}
?>

Using this code, and with it preserving your url string, your traffic link would look something like:

https://www.nickclaeboe.com/r/?yourVariable=this

and with the script above installed on the index.php of the /r directory, the random string in the php snippet will send your traffic to each link approximately 50% of the time, evening out the traffic sent to the 2 pages you are testing. Ultimately, you will see your traffic sent to each page and those links will now look something like this:

https://www.nickclaeboe.com/blog/post1/?yourVariable=this

and

https://www.nickclaeboe.com/blog/post2/?yourVariable=this

I hope this helps you out as much as it’s helped me out.

It’s a very quick and easy way to test 2 separate landing pages with different landing page elements to test what page converts better based on your page variables.

]]>
Simple Javascript Form Validation https://www.nickclaeboe.com/2017/06/11/simple-javascript-form-validation/ Sun, 11 Jun 2017 14:58:19 +0000 http://www.nickclaeboe.com/?p=519

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.

]]>
Get User Agent For Custom Browser Styles – PHP Get User Agent Variables https://www.nickclaeboe.com/2016/09/28/get-user-agent-custom-browser-styles-php-get-user-agent-variables/ Wed, 28 Sep 2016 11:36:29 +0000 http://www.nickclaeboe.com/?p=435

Often, I come across the need to pull the user agent from the browser to echo custom CSS styles for that specific browser. This comes in very handy when developing for mobile. Below is a list of the major user agent/browsers and the php call to get the user agent from the session.

Use the following code below to grad the user agent for you development needs.

/// get user agent for custom browser styles
function get_browser_name($user_agent)
{
if (strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR/')) return 'Opera';
elseif (strpos($user_agent, 'Edge')) return 'Edge';
elseif (strpos($user_agent, 'Chrome')) return 'Chrome';
elseif (strpos($user_agent, 'Safari')) return 'Safari';
elseif (strpos($user_agent, 'Firefox')) return 'Firefox';
elseif (strpos($user_agent, 'MSIE') || strpos($user_agent, 'Trident/7')) return 'IE';

return 'Other';
}
?>

<style>
.IE #form form select {
width: 185px;
height: 26px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.IE input[type="text"]{
height:27px;
width: 185px;
margin-left: 8px;
/* margin-right: 8px; */
text-indent: 10px;
border: 1px solid #ccc;
}
.Firefox #form form select {
width: 159px !important;
height: 30px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.Chrome #form form select {
width: 190px;
height: 26px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.IE input::-ms-clear {
display:none;
}
</style>

<body class="<?php echo get_browser_name($_SERVER['HTTP_USER_AGENT']); ?>">

 

]]>
Carry and Pass Variables From Page to Page in WordPress – Google UTM Tags Vars https://www.nickclaeboe.com/2016/09/17/carry-pass-variables-page-page-wordpress-google-utm-tags-vars/ Sat, 17 Sep 2016 12:50:39 +0000 http://www.nickclaeboe.com/?p=406

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

 

]]>