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!

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.

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