Pre-Filling Acuity Scheduling forms

I hate it when forms are not filled in, when you know the person asking you to fill the form in has half your info already.

We do it a lot, and I just made our clients life a little easier, which ideally will help with our conversion rates long term too 🙂

Here is some JS that will easily be used on any acuityscheduling embeded calendar.

1.

Add id=”acuityiframe” to the embed code (Acuity could make this part of the embed code eventually)

2.

Add this code to your page, or a JS file and link to it from your site


function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function() {
url = $('#acuityiframe').attr('src');
url += '&first_name='+getParameterByName('firstname');
url += '&last_name='+getParameterByName('lastname');
url += '&email='+getParameterByName('email');
url += '&phone='+getParameterByName('mobile');
$('#acuityiframe').attr('src',url);
});

And away you go, you have pre-filling forms when your CRM sends the info in that format – which is easy to do.

eg.

This link

www.mybookingpage.com?firstname=~Contact.FirstName~&lastname=~Contact.LastName~&email=~Contact.Email~&mobile=~Contact.Phone1~

Will deliver the Infusionsoft Contact values for those fields to the embeded iframe for Acuity pages.

 

Please spread widely and freely to stop us all from having to fill in forms every again 🙂

Getting Trello to Wrap / float boards

So I love Trello, but I have a large screen that I put the board in an more vertical alignment, instead of across.

I therefore wanted my boards to wrap around, and bump down to the bottom….

trello wrap

Enter: Stylish chrome plugin and CSS tricks to make it do it:

.list {
/*margin: 0 5px 13px 10px;*/
float: left;
}
#board {
display: block;
white-space:normal;
}
.list-wrapper {
width:auto;
height: auto;
}
.board-canvas {
width:100%;
height:100%;
}
.board-header {
overflow:auto;
}