Categories
Websites

Suntuf Website – WordPress Development

Suntuf was a project I worked on for Myadd in Adelaide. Suntuf is one of Myadd’s clients. Suntuf was looking for a website where they can easily display all their products with galleries and pdf downloads. This website also features their calculator.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Bring your own pet – Listing Website

I’ve set up a listings website for dog lovers. If you are a dog lover you are always looking for places to go with your dog. The park, a coffee shop or even a nice beach. Well, this is the place to go, either if you find a place and you want to share it or if you are looking for something new.

In this project I used:

In this project, I used WordPress, PHP,  Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Coding

Create a cookie based Newsletter Sign-Up with jQuery and Gravity Forms

In this article, I will show you how I’ve created a fancy looking newsletter sign-up form which slides from the bottom right of a web page once a user scrolls halfway down the page.

I am sure there are many plugins available for WordPress but it’s always a good idea to code something of your own. So let’s see how it actually works!

The HTML

We will have a div container which is going to have a fixed position. Once a user reaches halfway down the page the sliding form will slide up using jQuery. Now let’s see how it is done.

<div class="slideout-form">
   <button class="close" type="button">
      <span aria-hidden="true">×</span>
   </button>
   <div class="slideout-form-header">
      <h3>Sign up to Newsletter</h3>
   </div>
   <div class="slideout-form-body">
      //Gravity Forms Shortcode will go here
   </div>
</div>

The CSS (SASS)

We have “slideout-form-header” and “slideout-form-body” divs inside the “slideout-form” div which is positioned fixed. The “slideout-form-body” div contains form the Gravity Forms shortcode, and the “button” will close the slider and drop a cookie on a users browser.

/*Slide out form*/
body{
   position:relative;
}
.slideout-form {
    position:fixed;
    right:0;
    bottom:0;
    display:none;
    text-align:left;
    background:#ffffff;
    color:#333333;
    padding:0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom:0;
    border-top:1px solid #333333;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
    z-index:999;
    .slideoutform-header {        
        padding:15px 30px;
        h3 {
            padding:0;
            margin:0 0 15px 0;
            color:#333333;

        }
    }
    .close{
        right:10px;
        top:0;
        color:#ccc;
        font-size:30px;
        opacity:0.6;
        &:hover{
            opacity:1;
        }
    }    
}

The jQuery (JavaScript)

In the javascript below, you will notice some cookie script and also the slider effects.

Cookies are data, stored in small text files, on your computer. Cookies were invented to solve the problem “how to remember information about the user”:

  1. When a user visits a web page, his name can be stored in a cookie.
  2. Next time the user visits the page, the cookie “remembers” his name.
    Cookies are saved in name-value pairs like (username = John Doe).

In this example, the cookie will be dropped if a user signs up or if the user clicks on the close button. This will make sure the user doesn’t see the slider of x amount of days, depending on how long you set the cookie for.

In the example, the cookie will expire in 30 days which will then slide up again once the user goes to your site again.

//Slider with Form Script

//Create the cookie
function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + "; path=/";
}

//Get the cookie if it exists
function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

//Detect the user's scrolling on the page
$(window).scroll(function () {
   if ($(window).scrollTop() > $('body').height() / 2) {
     
      //Do a check if a cookie exists
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideDown();
      }
   } else {
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideUp();
      }
   }
});

//If cookie exists hide slider
if (getCookie('slideHideGF')) {
   $('.slideout-form').hide();
}
//Set the cookie on the close button for x amount of days, below it's set to 30
$('.slideout-form .close').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

//Set the cookie on the submit button for x amount of days, below it's set to 30
$('.slideout-form .gform_button').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

Gravity Forms Shortcode

All that is left now is to insert your shortcode for Gravity Forms. If you are not using Gravity Forms you can use any other form builders shortcode.

<?php 
   echo do_shortcode( '[gravityform id="your form id" title="false" description="false"]' );
?>

Download

You can download the code and play around with it, please click on the link.  jQuery Slide-Up with Form

That is it

The code above is purely an example and you may need to update the styling so that it works well with your theme. If you need any help with this or if you would like me to help you implement this on your website, feel free to contact me.

Categories
Websites

Australian Outdoor Living

I recently joined Australian Outdoor Living’s team. One of my first requirements was to rebuild their website, to make it load faster and also to improve the user experience. I’ve built a custom page builder making use of Advanced custom fields. My job is not done yet, I will continue to improve the site speed and user experience, to give our clients a unique experience everytime they visit our website.

In this project I used:

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Lightfactory.online

Lightfactory.online was a project I worked on for Myadd in Adelaide. Lightfactory.online is one of Myadd’s clients. Lightfactory.online was looking for a site where they could easily upload and sell their products. Lightfactory.online required a customised homepage where new products could be featured and new events.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

No Shock Energy – Website Redesign

I was asked by Uniting Communities for a website redesign. Uniting communities required a more business-like website design, which will also allow their users to easily navigate through the site, subscribe to newsletters and share articles on social media.

In this project I used PhotoshopWordPress, PHP, Underscores starter theme, Advanced Custom Fields, jQuery, Bootstrap and SASS.

You can take a look at the live site here.

Categories
Websites

AFL Masters

AFL Masters was a project I worked on for Myadd in Adelaide. AFL Masters is one of Myadd’s clients. AFL Masters was looking for a site where they could easily show upcoming event dates, have the ability to add footy clubs and display their details. Post latest news articles and more.

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Agix Linux

Agix Linux is a project I did for Paradox Marketing in Adelaide. Agix Linux is a client of Paradox Marketing. The client needed a new website which would let them show more content and have a space for Whitepaper downloads and ads.

In this project, I used WordPress, PHP, jQuery, and CSS.

You can take a look at the live site here.

Categories
Websites

Tech-Dry

Tech-Dry was a project I have done for Myadd in Adelaide. Tech-Dry is one of Myadd’s clients. Tech-Dry are the trusted professionals for Salt Damp treatments throughout South Australia.

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Star Academy

Star Academy was a project I have done for Myadd in Adelaide. Star Academy is a client of Myadd. Star Academy is a performing arts studio in Adelaide who have various trainers with various passions of the entertainment arts.

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.