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