Setting the ‘to:’ address in Contact Form 7 from a custom field

This does assume you have the Contact Form 7 and Dynamic Text Extension plugins installed. If you don’t, this article will mean bugger all.

On our works web site, we use Contact Form 7, about 30 in all, and after being asked to change the ‘to:’ address once too often, I thought ‘fuck this’ and came up with a solution where the content editors can do it themselves without pestering me all the time.

The quickest way is to simply set a custom field on the page/post you want the Contact Form 7 to appear on. At the bottom of the editor screen, there is the option to Add New Custom Field. For the sake of this tutorial, I’m going to call the key cf_email_to_address and then enter the email address you want to test.

Click Update or Save depending on what you’re doing, and now head over to the Contact Form 7 that you want to edit and in the Form tab, add this at the top:

[dynamichidden recipient-email "CF7_get_custom_field key='cf7_email_to_address' obfuscate='on'"]

This is a CF7 dynamic field that put the value of the custom field cf7_email_to_address that we created above, and puts it into variable recipient-email.

All we have to do now is click on the Mail tab and in the To address, add this:

[_post_title] <[recipient-email]>

Will send an email with the post title name to the email address we specified in the custom field.

Simple.

50 shades of grey. Almost.

I was sent this by a developer in the office, from the SASS file for a web app.


/* greys */
$grey1: #DEDEDE;
$grey2: #CCCCCC;
$grey3: #333333;
$grey4: #666666;
$grey5: #999999;
$grey6: #f7f7f8;
$grey7: #dddddd;
$grey8: #eeeeee;
$grey9: #777777;
$grey10: #f5f5f5;
$grey11: #f9f9f9;
$grey12: #e8e8e8;
$grey13: #e5e5e5;
$grey14: #555555;
$grey15: #737373;
$grey16: #e6e6e6;
$grey17: #adadad;
$grey18: #262626;
$grey19: #f8f8f8;
$grey20: #e7e7e7;
$grey21: #888888;
$grey22: #222222;
$grey23: #080808;
$grey24: #9d9d9d;
$grey25: #4A4A4A;
$grey26: #101010;
$grey27: #d5d5d5;
$grey28: #e3e3e3;
$grey29: #ebebeb;
$grey30: #bbbbbb;
$grey31: #efefef;

Notice the wonderful concise and informative referencing of the classes, easy reference was not top of the priority list I presume. But this is what happens when you are sent PDF’s from the designer.

MAMP Pro to the cloud

After my my Mac decided to fuck up after installing Sierra, it gave me a chance to reorganise my shit as I forgot to backup my MAMP Pro installation, so I had to rebuild all 20+ web sites and databases from scratch. Not doing this again as it’s a right pain in the ass.

So after playing around a bit, I’ve moved the htdocs folder and the MySQL databases to Dropbox. I could use iCloud but I’m not installing that shit on my Workstation PC at home.

Before we go to Terminal, make sure MAMP and your MySQL management tool (phpmyadmin/Sequel Pro/Workbench) of choice is closed.

Copying the databases

If you want to use another cloud storage solution, here are the default install path for iCloud:
~/Library/Mobile\ Documents/com~apple~CloudDocs/

Google Drive:
~/Google\ Drive/

Microsoft OneDrive:
~/OneDrive/

Just replace the Dropbox path in these examples. So let’s copy the databases folder to Dropbox in a folder called MAMP_db.

cp -r /Library/Application\ Support/appsolute/MAMP\ PRO/db ~/Dropbox/MAMP_db

Rename the default folder to something else

mv /Library/Application\ Support/appsolute/MAMP\ PRO/db /Library/Application\ Support/appsolute/MAMP\ PRO/delete_db

Create a symbolic link to the new folder.

ln -s ~/Dropbox/MAMP_DB /Library/Application\ Support/appsolute/MAMP\ PRO/db

Now start MAMP Pro and wait to see if MySQL loads without errors. I double checked by loading Sequel Pro to see if my databases were there.

If you want to use iCloud instead, use

If that was a success, we can now move the web sites.

Copying the htdocs

Exactly the same commands, just a different folder.

cp -r /Applications/MAMP/htdocs ~/Dropbox/MAMP_htdocs
mv /Applications/MAMP/htdocs /Applications/MAMP/delete_htdocs
ln -s ~/Dropbox/MAMP_htdocs /Applications/MAMP/htdocs

Load MAMP Pro and click localhost and hey presto.

I did this on a fresh installation, and when tried to access localhost I got a Forbidden 403 error. All I did was make a new host and it worked fine.

WordPress Contact Form 7 Postcode plugin

Edited: 18/3/2018 with screenshots and to recognise an update.

Some genius at work pointed out that the contact forms on the works web site weren't validating properly.

Whoops, my bad.

So I changed the email and telephone inputs to their proper HTML5 types, but there was the postcode box that the spammers where filling in with crap, so I wrote this little plugin for Contact Form 7 that adds postcode validation.

Once installed, it adds the Postcode option to the form builder:

Add the usual id, class and required options.

It's free to use and abuse as you feel necessary, just a link back to the original would be nice.

Congrats to MrJoshFisher for adding placeholder support, I LOL'd and LOL'd when that came up 🙂

Download here.

WordPress plugin to replicate Pluralsight’s search

The development team are being reskilled (NOT retrained) to use technologies for mobile apps like AngularJS and MVC5 and as we’re MSDN members, we get Pluralsight free 🙂

So we all get our subscriptions through and the first thing I notice is the search.

live-search-pluralsight

That’s nice, so my mind is already writing the code in my head, but I’m a lazy shit so can I rip it? Nope, it’s in ReactJS.

Bollocks.

Ok, let’s break down each step and write it in jQuery. For WordPress. As a plugin. Piece of piss.

Ta dah!

Ta dah! If I could get my own domain URL right. Duh.

This is provided as is. It’s very basic, no responsiveness, no options and written and tested in Chrome. Sure it can be improved greatly, but this was just me messing around more than creating a finished project.

Download it here, add it to your site and activate.

After a little bit of tidying, I’ve added it to GitHub along with other shite I’ve done.

If you want to reconfigure it, you’ll have to edit the files and colours and stuff.

Try the search box on the left hand side on this blog and you’ll see it in action.