Implementing Form Script that Works with php 7

I recently upgraded hosting to php 7.0 since some of my WordPress sites were recommending the upgrade. The WordPress sites were fine, but one of my two last remaining HTML sites was using the Huggins Email Form php script, which isn’t compatible with php 7.0, and so the form started getting server 500 errors.

I looked up a resource I had used for a form for another HTML site, which was the ReusableContact Form Using Bootstrap And PHP.

Just download the zip file, and extract to the root directory for the site.

To test it, see the steps listed on the page where you got the zip file from.

To completely integrate it, I followed these steps:

  • Edit src/formhandler.php to change the email Subject and From.
  • Add any form field validations to handler.php.
  • If you’re using recaptcha, put the site key in the form (you’ll see the example in the formpage.html file), and put the secret key in handler.php.
  • Also, put the destination email address in handler.php.
  • Make sure you refer to the example formpage.html for including the link rels and script statements in the header and the recaptcha script in the body.

The next challenge was implementing a second form for that site. Fortunately the forms were on separate pages, so I didn’t need to use different form ids. I was able to use a generic Subject for both form emails, so no changes needed there. The second form worked fine. I suppose if I needed separate Subjects, separate recipients and separate field validation for each of the forms, then I’d need to figure out how to modify handler.php and formhandler.php. At some point, though, both of the remaining HTML sites will be converted to WordPress and I won’t need form scripts anymore!

 

Why Google Tag Manager Isn’t Tracking Your YouTube Video Event

Tracking YouTube Videos with Google Tag ManagerWhile working on a recent project, I discovered one reason why Google Tag Manager may not be tracking your YouTube video event. Being new to Google Tag Manager and Video Tracking, I assumed the reason that playing the video on my page wasn’t triggering a video event was due to a newbie mistake. After Googling for a while, I read a couple of posts where it was mentioned that this could be due to the way the video is embedded in the page. The light bulb went off!

I was using InfusionSoft’s Landing Page Builder and had inserted a video element in the page. I had pasted the YouTube video URL into the field, but after saving, it had transformed the URL. To get around this, I added an HTML element into the page and pasted the YouTube embed code for the video. Saved it, tested, and success! Google Tag Manager triggered the video event! Using an HTML element allows you control over exactly how the video is embedded.

Another plus of embedding the video this way is that I can append “?rel=0” to the video URL so that when my client’s video stops playing, the suggested videos are other videos on her channel and not just random videos from YouTube.

 

How to Troubleshoot Contact Form 7 Configuration Error

Process of Elimination for Contact Form 7 Configuration Error

I use the Contact Form 7 plugin on almost all of the WordPress sites I create. Recently, I was creating a very long form, saving frequently, and then noticed there was a configuration error: “Multiple form controls are in a single label element. ”

I looked through the code and nothing jumped out at me that could have been wrong.

So I thought, how am I going to find the error? There were almost 50 input fields!

Answer: Process of elimination

I opened up Notepad, copied the entire form, and pasted it into Notepad.

Next I went back to the form, and deleted all but the top several fields. Saved it. No error.

This told me that the error was somewhere in the remaining part of the form.

I copied the next few fields from Notepad and pasted it at the bottom of the form.

Saved again. The error showed up! So now I knew the error was in the fields I had just pasted.

So, I used this process to isolate the part of the form with the error. It saved a lot of time that I would have spent going over the code repeatedly, looking for some problem.

I hope this tip will save you time. It can be applied in situations other than just html forms, too.

Turned out the error was a misplacement of the closing ‘label’ tag.

Embedding Javascript HubSpot Contact form into DNN page

I found that just pasting the HubSpot javascript code into the DotNetNuke HTML module wouldn’t work – the editor just erases the javascript.

After Googling around for an hour or two, I found this article, How to Integrate HubSpot Forms with LeadPages, by Mike Hollis, on DoInbound.com’s blog. He created a ‘quick little script’ that converts the HubSpot Javascript to HTML. I plugged in the Portal ID and Form ID, copied the resulting HTML, pasted it into the HTML module, and it worked!

Thanks Mike!

Nice Tool for Website Responsiveness

On occasion, I will be working on a WordPress website using a responsive template, but have a need for a three-column page. Rather than use a table, I use a tool called the Responsive Grid System. As it says on the website, it’s not a framework or a boilerplate, and it works on anywhere from a two to a twelve column layout. It’s got examples of HTML and CSS code that plugs right in to your existing code. Check it out!

Restoring a Hacked WordPress Site

Recently a client contacted me about having difficulty logging in to the dashboard of their WordPress website. Sure enough, each time I attempted to log in, a ‘Connection was Reset’ message was displayed by the browser. The frontend of the site displayed correctly. Upon closer inspection of the WordPress files, it became obvious that some of them had been infiltrated. Upon editing the wp-config.php file, I could see code injected into the first line of the file. There were more files infected all through the site.

Looking at the last few backups, I could see that the files had already been infected before they were backed up. The best option would be to install the latest version of WordPress manually. First I removed files that were not part of WordPress, and then I uploaded the WordPress files. I was able to successfully log in to the backend.

Next steps:

Make sure WordPress and all plugins are updated.

Change all administrator passwords – use a combination of uppercase letters, lowercase letters, special characters, and numbers.

Make sure your website files AND database are being backed up daily or weekly.

Consider a security plugin.

 

 

 

Example of Why WordPress Sites Need to be Kept Updated

On April 27, 2015, WordPress.org posted this message:

“Posted April 27, 2015 by Gary Pendergast. Filed under Releases, Security.

WordPress 4.2.1 is now available. This is a critical security release for all previous versions and we strongly encourage you to update your sites immediately.

A few hours ago, the WordPress team was made aware of a cross-site scripting vulnerability, which could enable commenters to compromise a site.”

This is when it becomes very important to update your WordPress site. I am currently in the process of visiting each of the WordPress sites that I maintain and updating to the latest version. At the same time, I also update any plugins that need updates, and check to ensure backups are still being completed. As a last step, I visit the site, navigate through the pages, and ensure that the site appears as it should and functions as it should. This is part of the support that I provide as part of my maintenance package.

Fixing the Image Facebook uses when the page is shared

Recently a client of mine with a WordPress site said that the image Facebook uses when the page is shared is not the image that she wanted to have show up. Sure enough, when I checked I saw that an image from her Pinterest page was showing up instead of her company logo!

When determining an image to use, Facebook looks for certain meta tags in the <head> section of the page, specifically these:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

If these tags are not present, it will look for the older ‘link rel=’ method of specifying an image. If neither are there, Facebook looks at the content of your page for images that meet its criteria, such as size, aspect ratio and PNG, JPEG or GIF format.

Sometimes, SEO plugins may override the tags. Since this site uses WordPress SEO by Yoast, I edited the page, and under the Social tab I specified the image that my client wants to use.

Next, I went to the Facebook Debugger: https://developers.facebook.com/tools/debug/, entered the site URL, and clicked ‘Fetch new  scrape information’.  This confirmed the og:image.

Another Reason to Keep Your WordPress Site Updated

wordpress-updatesIn a previous post, I talked about how important is it to keep your WordPress site updated to prevent it from being vulnerable to hackers. Another very good reason to keep your site updated is to keep it from becoming so out-of-date that you eventually have to scrap it and start over.

I’ve been asked to work on sites that have not been updated for years. Often, so much has changed in WordPress and the plugins that it can be an impossible task to bring all of the software up to date. Sometimes, a new release of WordPress can mean that a plugin has to be updated before it will work properly on the new WordPress release. Sometimes plugins affect other plugins and it can be quite a problem to track down the cause.

In order to avoid a situation where a site needs to be completely re-done, it is well worth the small investment of time to keep current with the latest version of WordPress, any plugins that are installed on the site, and themes.

By |January 4th, 2015|code, software, website maintenance, WordPress|Comments Off on Another Reason to Keep Your WordPress Site Updated

Website Designers Should Document Code

Tip: Make sure the website designer’s contract/agreement for website design or maintenance services includes wording requiring the designer to document their work, especially for any customizations that are done. Designers should add comments to their code (Ex: PHP code, HTML code, CSS). This makes it easier for other designers and programmers who might also be looking at or working with the code. Website designers should document code because it will come in handy some time later when the designer works on the code again. Just a short phrase or reason describing why the edit was made can be very helpful and can save time.
I learned about documenting code in college while pursuing my Bachelor of Science degree and it is something I’ve always used.
By |December 28th, 2014|code, contract, CSS, HTML, PHP, website design|Comments Off on Website Designers Should Document Code