Blog

Gravity Form Checkbox Values

This post is an extension of Gravity Forms – Collecting Select Box Value.
In this demo we are capturing the values from a group of checkboxes.

Demo with Checkboxes

    Select the items to add to your order
  • ...we'll grab the checkbox values here
/**
* Wrap our JS for capturing values
*/
var checkboxHandler = {
 
 	//Change these IDs to match your form
 	checkboxFieldId: 'input_5_3',  //checkbox container ID
	outputFieldId:   'input_5_2',    //hidden field to capture values
	
	checkboxField: null,
	outputField: null,
	
    /*
	Listen to Checkboxes
	---------------------- */
    init: function() {
    
		this.outputField = document.getElementById(this.outputFieldId);
		
		if( typeof this.outputField === 'undefined' || !this.outputField ) {
			console.error('Missing output field ' + this.outputFieldId);
			return;
		}
		
        this.checkboxField = document.getElementById(this.checkboxFieldId);
        if(typeof this.checkboxField === 'undefined' || !this.checkboxField) {
			console.error('Missing checkbox field ' + this.checkboxFieldId);
            return;
        }
         
        jQuery(this.checkboxField).on(
			'change',
			'input[type=checkbox]',
			{
				checkbox: this.checkboxField,
				output:   this.outputField
			},
			this.setValues
		);
    },
    
	
    /*
	Set text (or hidden) field to list of checkbox values
    ----------------------------------- */
    setValues: function(ev) {
	
		var fields = ev.data;
        var valueString = '';
		
		jQuery(fields.checkbox).find('input:checked').each( function(i){
			valueString += this.value + ', ';
		});
		
		fields.output.value = valueString.replace(/, $/, '');
    }
};

jQuery().ready( checkboxHandler.init() );

If you are using a child theme or custom theme you can add this code to its JavaScript file.
Otherwise use WordPress’ wp_register_script and wp_enqueue_script functions to load a new file.
The value of the hidden/text box can then be included in your Gravity Forms notification.

Gravity Forms – Collecting Select Box Value

Gravity Forms for WordPress has a select box field type, which by default uses the same data for both value and label. The field can easily be configured to have separate value and label attributes, however only the label will be sent in the form notification. In many cases this is fine, but sometimes you need the <option> value data to be sent as well as the display label.

Alternative Option: Capturing Checkbox Values

Capture the Value Attribute in a Hidden Field

One solution is to use JavaScript to capture the <select> field’s value, and copy it to a hidden form field which can be included in the email notification.

We’ll use a bit of custom JavaScript to listen to the <select> change event and update our hidden form field. This example code uses specific field ids that Gravity Forms generates. You could also write more general JS and selectors to match more scenarios if your site has multiple forms.

The Form Setup

At minimum we’ll need a select input (drop down) and a hidden field. For this demo our hidden field is actually plain text so we can see what’s happening.

Demo Product Form

  • Choose a product...
  • ...we'll grab the select option value here

Here’s the JavaScript. This example matches the IDs in the demo form. You’ll need to change those selectors to suit your form.

/**
* Wrap our JS for capturing values
*/
var selectHandler = {

	// Setup & Event listener
	// ----------------------
	init: function() {
		
		var select = jQuery('#input_3_1')[0]; //change id to match your form
		if(typeof select === 'undefined' || !select) {
			return;
		}
		
		//Set Initial Value (before change)
		selectHandler.setEmail.apply( {value: select.value} );
		
		jQuery(select).on('change', this.setEmail);
	},
	
	// Set text (or hidden) field to option value
	// (change selector to match your form)
	// ------------------------------------
	setEmail: function(ev) {
		 jQuery('#input_3_2')[0].value = this.value;
	}
};
jQuery().ready( selectHandler.init() );

If you are using a child theme or custom theme you can add this code to its JavaScript file.
Otherwise use WordPress’ wp_register_script and wp_enqueue_script functions to load a new file.
The value of the hidden/text box can then be included in your Gravity Forms notification.

WordPress Backups to AWS S3

Amazon Web Services S3 (Simple Storage Service) is a cheap and reliable way of storing data and is ideal for backups. Scheduling regular automatic backups of your WordPress website to S3 is pretty easy with a plugin, but it can be worth tweaking your AWS Credentials for better security.

This post will show you how to create a new user on your AWS account that has limited S3 permissions. It means if your site is ever compromised and the credentials stolen you’ll be in a far better position than having used your root AWS details! It’s also especially useful if you are managing backups of multiple client sites and do not want cross-access.

Step 1 – Create a new user with IAM in the AWS Console

  • Log into the AWS Console. Go to Services > Security & Identity > IAM
  • Create a new user (e.g. backup_myexample)
  • Copy and paste the Access Key and Secret somewhere; we’ll use those within WordPress shortly.

After creating your new user, go to their Policies and create a new inline policy. We’ll use inline, rather than group permissions so that each user you create (for backing up different websites) is isolated to their own S3 path.

Give the policy a name and paste and modify this Policy Document. Change my_awesome_bucket and my_directory to the bucket and path you’re using for these backups.

{
  "Version": "2012-10-17",
  "Statement": [
  {
  "Sid": "Stmt1441240868000",
  "Effect": "Allow",
  "Action": "s3:*",
  "Resource": [
  "arn:aws:s3:::my_awesome_bucket",
  "arn:aws:s3:::my_awesome_bucket/website_backups/my_directory/*"
  ]
  }
  ]
}

Your screen should look a bit like this
AWS IAM Policy

Step 2 – Install & Configure BackWPUp

  • Log into your WP Dashboard, go to Plugins > Add New Plugin and search for BackWPUp
  • Install it and create a new job. For testing you may want to do Database backup only, or list of plugins. This is much faster that a full site (Files) backup. Once you know it’s working setup a full site backup.
  • Set the backup to S3 Service.
  • On the S3 Service page select your Region and paste in the Access Key and Secret key from before.
  • Type in your bucket name and path to store the backups. It should match the IAM Policy Document

s3-plugin-cfg

Save your settings and run the job.

The plugin logs will let you know if it worked.

A few notes

  • The IAM Policy allows all S3 actions on the given S3 path. I was not able to get this plugin to work with more restrictive permissions.
  • The new S3 Standard-IA class is good for these backups. The storage cost is cheaper than the Standard class without sacrificing redundancy as with Reduced Redundancy Storage. The downside is that downloads of these objects are more expensive.
  • Remember to check your backups periodically

Don’t Host Your Email with your Website

When you get a new website and you’ve registered a shiny new domain name it makes sense to also have a good looking email address to go with it. Advertising with an email like bills_plumbing245@bigpond.com.au looks a lot less professional than masterplumber@billsplumbing.com.au !

Just about all web hosting accounts come with the ability to host mail too. Creating an inbox this way using your own domain is cheap and easy, but it’s not the best way.

Limitations of using your web hosting for email

Server Space

Whenever you get mail it’s stored on a server. If you’re piggy backing on your web hosting you’ll have to choose between using up your hosting disk space allowance with accumulated mail; or configuring Outlook to delete mail off the server after it’s been downloaded. Deleting from the server solves the full account issue, but it means your local computer and a single hard drive become the single source of all your mail. Transferring it can be a hassle if you get a new device and there’s a serious risk of data loss.

Synchronization

The standard POP3 web hosting approach to mail is very limited. If you send a message from your desktop PC it only exists there. You won’t be able to find that message in the sent items of your phone or tablet or laptop. You can partially work around this by using an IMAP account, which keeps a copy of everything on the server and syncs between devices, but you run straight back into the problem of server disk space above.

Reliability

Most web hosts are pretty good at keeping your files around. Many will take weekly off-server backups too. But given how important email is for many businesses this may not be enough. Downtime can be a big problem if it affects your mail and a week old backup may be too old.

Dedicated Email Hosting

The solution to these issues is to use a robust system designed for email. If you consider the importance of business email and the cost of downtime it’s well worth it.

There are a few good options including:

  • Google Apps for Work — essentially Gmail and the Google Apps suite using your own domain name. You can use the Gmail web interface, or Outlook. You can connect from any device. There’s powerful search and its fast.
  • Office 365 – Some Microsoft Office subscriptions include access to Office 365 which is a cloud hosted service designed to fix these issues.
  • Exchange Server — for larger business it may make sense to run your own Exchange server. This is an advanced approach that requires IT support.
  • Hosted Exchange Account — like an Exchange server, except you outsource the hosting and pay on a per-account basis.

Any of these approaches will solve the issues of web hosting based email.
I recommend Google Apps for Work. It’s around $50/year per user – a small price for the benefits.

Get in touch with me if you need help configuring your domain name and setting up a hosted email solution

Google Apps Referral

If you want to use Google for Work consider using my referral link: https://goo.gl/j6dgdR

Beauty vs Bandwidth

Some visual flair, a bit of bold imagery and a beautiful custom font or two can be great ways of making your website enticing. Those elements bring trade offs though in the form of increased page weight and load time.

The great thing about a website is that it can be accessed anywhere, from a bucketload of different devices. It’s also a challenge because you don’t know what context your users are coming from.

Those design enhancements that delight someone in their office could be a source of frustration when your page loads slowly when they’re out and in a hurry. It is possible to detect devices and remove some of the unnecessary, heavier items from the page, but this approach isn’t perfect. An iPhone struggling to hold onto a 3G connection is a different beast from one connected to a good WiFi connection; so knowing what sort of device your user is on is only part of the story.

It’s important to consider everything added to the page as having pros and cons. Being too stingy with the page weight could lead to a boring design. Being too fast and free with image sliders, video and graphics could come back to bite you when a busy user on a bad connection gets frustrated and leaves.

The design needs to balance these needs.