Dynamic Contact Form for WordPress
I wanted to write a little bit about some challenges encountered while creating dynamic contact forms using WordPress. There are many wonderful plugins that are suitable for the majority of user's requirements. However, every now and then, there comes a scenario where a user-friendly plug-in just isn't going to do the trick (or, if there is a suitable plug-in out there, we may not want to spend several hours installing several different ones trying to see if they work for our specific needs).
Today at work I encountered one of those situations that falls outside of the typical contact form protocol and I thought it might be useful to walk through the problem and how we solve it.
Real-Life WordPress Contact Form Scenario
We are developing a website using WordPress as a platform for a client who wants to be able to add and edit their own pages down the road by themselves without calling us for every little edit & update that comes there way. Wonderful, we love building sites out on WordPress. We do this quite a bit, partly because WordPress is quite flexible. It's open source and has a huge community of developers creating plug-ins and widgets for all sorts of purposes and if we ever have a question, we're hardly ever the first WordPress users to encounter it and the answer is nearly always found online after a bit of searching.
Our aforementioned client sent us about 40 pages of content which included a Word Document (.doc) where they created a contact form as best as one can reasonably expect in a Word document. Obviously, instead of text boxes, check boxes, buttons and so on they simply utilized underscores and brackets with descriptions of what they wanted:
For example: [SUBMIT BUTTON]
Usually, when we're working on a WordPress site, we install a plug-in called Contact Form 7. It generally strikes an appropriate balance of simplicity making it easy to quickly create a nice looking form with a nice behind-the-scenes complexity that creates a processing page without us even needing to look at it. It's flexible so that we can easily control the layout/wording of both the form and corresponding email and it's quick. It is almost always good enough for any form that is simply meant to send data as an email instead of being stored in a database.
This client does not need any data stored in a database, just an email that gets sent to their main email address containing the content filled out in the form. The problem is that they want a form that is rather complex and more dynamic than a typical contact form. This is no fault of theirs; they're not web developers and don't know what they're asking.
The client wants visitors to be able to select one option from a series of "status" descriptions and then, for some of the options, they want additional information if it is selected.
For example:
( ) I am a friend / relative of a former client....IF SELECTED....enter client’s name: ______
( ) I would like to become a client...IF SELECTED.... click here to be redirected to appropriate form
This is a bit more of an involved effort because it has a select box with 15-20 options, several of which include follow-up questions if selected. If we had known what they'd be needing, we probably would have accounted for additional time building out the contact form in our estimate. As is sometimes the case, we did not know specifically what they'd want and they did not know that it was beyond the typical realm of contact form creation. So, we have a situation that requires a bit more coding and we want to accomplish it as quickly as possible because we've only allotted a certain amount of time to dedicate towards form development.
This is a bit beyond the scope of our usual handy dandy contact form plugin. So, what we do then is create the form in a php document using Dreamweaver. We then use some software called "Forms To Go" that we upload our form to and it helps us quickly create a corresponding PHP processing page. We then upload the php processing page to the server, copy the HTML form that we created in Dreamweaver and paste it into a WordPress post or page and voilá , we have a great form.
Forms To Go won't be sufficient for this particular form either (although we can still use it to create a processing page), but this form will ALSO require client-side Javascript so that it responds to user choices as they fill out the form instead of only responding when the submit button is clicked and sends that data to a server. We need a dynamic form that, when a specific option is clicked from a selection menu, reveals a related text field requesting further information or redirecting the user to another page/form.
I wrote a similar post on how to create a dynamic menu using Javascript.
Building A Website for Affiliate Advertising
I've been reading a bit about various ways to make money with advertising. I'm looking into various affiliate programs, trying to decide how to focus my next website/blogging project. My first experiment with Google Adsense is on an informational site running on the WordPress platform called marinecorpsrecruit.com. It's doing fairly well, making around $15-$20/month, but it took a lot of blog posts just to get it to that point and since its my first blog with ads, I'm not sure how well that will last in the longer term. The answer to how often I have to update it to maintain a steady (or better, growing) amount of traffic is yet to be known.
I'm looking for my next idea. I was considering trying my hand at an affiliate program, but there's so much out there and I'm not finding a ton of useful information about which programs are actually good, how people are making money with them, how to promote certain products, etc. I don't mind putting in some time making a website, but I don't want something that's going to take several weeks and then only pay a few cents a week. It should be worth it I hope!
I checked out Commission Junction, which looks OK, but I can't get approved to use their advertisers links until I have a website to put them on. I don't want to spend time building out a site, only to not get approved by the advertisers; it's too much risk. For my Marine recruit site, I applied for a hotel ad and was automatically denied...not sure why.
How To Use Adsense Selection Targeting
Just thought I'd share a little thing I just learned about: Google Adsense selection targeting. Adsense ads are placed on your site based on matching adsense keywords with keywords found on your pages. Sometimes, you may be writing a few paragraphs that are relevant to the overall purpose of your site, but when you look at the keywords out of context, they aren't usually ones that your target audience would be interested in and would therefore not click. So you want to try to make sure that the ads that are shown on your site are relevant to your audience.
For example, for this blog, it's safe to say that most of my readers would be interested in web design. Since I write about that a lot, Google will often display ads that have web design-related keywords and the content is often very relevant to anyone who might be visiting my page. BUT, maybe I was writing a tutorial on how I developed a website for a car insurance company and as part of that post, I wrote a paragraph describing that company. Google would pick up those keywords like "car insurance", and suddenly that post would have ads trying to entice people to get a free insurance quote, which is not very relevant to my audience and will probably mean that I get less ad clicks.
A way to help make the ads that are showing up on your site relevant to your visitors, you can insert code in your page to target a selection that you do not want Google to consider for adsense keywords.
<!-- google_ad_section_start -->
Here is the content that I do not want Google to use for adsense keyword targeting.
<!-- google_ad_section_end -->
It's super simple and can help you deliver relevant content to your visitors.
Google Font API
At work we discovered that a few websites had some pretty awesome looking fonts that weren't image based and also weren't installed on our own computers. Up until recently, web pages would only show fonts that are installed on your computer, so web developers always use common and easy to read ones that are installed on almost every computer like Arial, Georgia, etc. If you were seeing a cursive or stylized font, you were usually seeing an image or Flash.
One of the developers at my work noticed that the site was linking to a Google stylesheet, and lo and behold we discovered the Google Font Directory and Google Font API. It looks pretty cool; we'll need to be trying it out soon.
Google Font Directory
Google's font directory is fun to explore. It lets you browse a bunch of the fonts and read a bit about the font designer. It seems super easy too. I'd do an example of it now but I'm not on a computer where I have FTP and a text editor installed, so it's too much work to upload the header file. However, assuming that wasn't the case, all you have to do is choose the font you like and Google will provide two bits of code. One line needs to go in the header section of your HTML file and the other part just needs to be applied just like any other CSS class. Why didn't this exist a long time ago?
SEO Outline
So I've been working at my "new" job for several months now and have learned quite a bit. Shamefully, I've neglected to record the things I"m interested in and learning on a regular basis. I will make a Thanksgiving reconciliation to try a bit harder to record and share what's up in my web world.
First off, I've been working at a web design firm that specializes in SEO (search engine optimization). SEO is interesting because in some ways, it's really really basic. It means making sure your website is structured in a way that search bots can easily navigate and index your site, making sure that you use various HTML tags to "optimize" your content and checking out your competition to come up with a few strategies for improving your page rank.
That's a really basic explanation and for a long time, that's really all I thought that SEO meant. In reality, success in SEO is a much more strategic affair that involves some rather complex strategies, which is both the most challenging and rewarding and exciting part of SEO. There's a certain morale boost that comes in the form of boosting your site or a client's site a few positions or even a few pages higher in search engine rankings. It's not just a scorecard competition; a single boost in page rank can equal hundreds of additional page hits (and thus sales or ad conversions) a month. It's fun and important basically.
The basics of SEO:
Learn how to research keywords & phrases
- You need to identify your competition and figure out why they are ranking high in search engines
- You need to understand how people are searching for the services your site/business provides
- You need to consider your goals in relations to your strategy. Do you plan on making money through ad clicks or by getting people to fill out an affiliate quote form? Or purchase products from your store? A high visitor rate is great, but pay off only really occurs when you are pulling in targeted visitors who are looking for the service you're offering.
Build your site in a way that search bots can easily navigate and index it
- Make sure you use correct HTML structure and properly nest your content
- Create meta information that targets your keywords and phrases
- Don't forget to use alt and title tags for things like images and links
- Don't overuse your top keywords. Change them up. Your most important ones should be in your domain name, title tag and h1 tags (but not worded exactly the same). Use long-tail keywords for additional headings tags.
- Include an .htaccess file that will instruct bots on what files/folders should be indexed or ignored. Try to avoid having duplicate content indexed...like blog archives. Most search engines will recognize duplicate content and consider it as spam or as irrelevant.
- Keep the most important information early on in your code.
- Online advertising is a whole conversation in and of itself. It can be incredibly beneficial if done right, but it can also be a gigantic waste of money if done wrong. Generally speaking, you want to use ads if your site offers a service that you know people are looking for and usually its a competitive field. Sometimes a client sells a product that is highly highly competitive, like auto insurance for example. They can optimize their site to death, but it still will have a hard time ranking high because there are so many other sites out there doing the same or similar thing that have been around a long time. To make money, they often have to advertise to pull targeted customers into their site.
Promote your site
That's the general outline of what I've been learning about SEO at Zeus. I know I should probalby write more useful specific posts and I intend to do so. But for today, you can my outline. Enoy.
Faster Google Search | SEO Longtail Keywords
Wow! Google's new search is so fast! I wonder how this is going to affect SEO strategies. We discovered this new feature while I was at work today and one of the first things we noticed was that people may be less likely to type in longtail keyword searches. At the stroke of a single key, Google is suggesting new keywords directly below the search box and offering up search results in real-time. Are people going to bother typing in their words or will they see a bunch of promising leads before they even get to the keywords?
This may have a rather disproportionate affect on smaller and newer websites, because premium domain names are already taken, so the majority of people building sites are chasing after various longtail keywords now. Time will tell.
WordPress Upgrade “Cannot Copy” FTP Permission Issue In Layman Terms
Solution: Contact your webhost and ask them to change your ftp server to ProFTPd.
Oh my goodness, WordPress upgrades have been giving me such a headache! As previously posted in "Automatic Update Fail" I was only able to upgrade my accounts either manually or after deleting the "upgrade" folder myself. I had hoped that this would solve future problems, but with the release of WordPress 3.0.1, all my blogs were failing to upgrade (including plugin updates) giving me a variety of changing error messages saying some variation of "cannot copy /public_html/..." and it would give me a path to different files, usually ending in dev.css. After countless hours of messing around with file permissions through Filezilla and/or through the file manager in CPanel, after deactivating my plugins, after manually deleting the upgrade folder and the .maintenance.html file...I was extremely frustrated and nothing was solving the problem.
The repeated "solution" posted on several forums was to simply manually upgrade when things don't automatically upgrade...which works, but I'm a "why" person. It bugs me to not know why something is occurring and it's a pain to have to repeatedly manually upload & upgrade when you have several different WordPress blogs & plugins, as is my case.
The solution has been found and is resolved (knock on wood). I had read a few forums where people had mentioned a thing or two about ftp user permissions and how sometimes there are permissions problems with your ftp server. I honestly didn't understand it all (and still don't entirely) as I'm not a server person by any means, but my understanding was that it wasn't a permission issue that I was going to be able to manually change through Filezilla or the CPanel file manager and it had something to do with dhappache user or Nobody User permissions.
On a whim, I decided to check out my web host's forum to see if other folks were have similar issues. I found out they were, but there were no posted solutions besides the usual manual upgrade. Argh. I then checked out their twitter account and they had posted a link to a WordPress forum thread that explained this:
"From what I'm able to tell by looking at the logs during an upgrade or plugin installation, the script attempts to write to an invalid path (usually /public_html/somefile rather than /home/username/public_html/somefile) before using the correct path. It does this for each and every file, so during a major operation like an upgrade where a lot of files are involved it takes a very long time. Eventually the script freaks out and tries to access more memory than is allowed by our suhosin php security module. In most cases it attempts to access 256MB while our default limit is 32M. Suhosin blocks the script and the installation fails."
This made sense to me because I had used an .htaccess file to increase the amount that PHP memory could use and it helped for a plugin I was trying to upgrade, but it didn't solve my overall upgrading problems.
Long story short, I needed to contact my web host to change my ftp server so that instead of using pureFTPd, it uses proFTP. For now, whenever I want to upgrade, I have to send them a ticket (thankfully they respond quickly) and have them change it. When that is done, I do my upgrades and then let them know when I'm done so that they can change it back. Hopefully this will be fixed in the future, but for now, it's nice to know what the problem is and how to go about easy upgrades.
WordPress Automatic Update Fail
I host two WordPress blogs on my hosting plan and the past few upgrades have been a pain in the arse to put it mildly. In simple terms, the "automatic upgrade" failed giving a variety of error messages. One time I was simply having permissions issues; that was a while ago and wasn't a difficult one to fix.
The previous automatic update didn't work, so I did it manually and that worked fine for a little bit, until I got an error message about duplicate header information. After a bit of research I found out that Dreamweaver had inserted a space after one of my php files and it was causing all sorts of havoc.
Now, the most recent update to WordPress 3.0 failed, but I wasn't getting any error message whatsoever, just a frozen screen that said something along the lines of "unpacking core updates...". Finally, I solved the problem...sort of.
I had to delete my wp-content/upgrade folder. I don't know why this happens and would love it if someone does know and can explain it to me, but sometimes WordPress fails to delete the temporary files in your upgrade folder from a previous upgrade. This causes problems. So, all you have to do is go delete that entire folder and try running your update.
I was having some trouble using the automatic update for several plug-ins and that solved those problems as well. Unfortunately, I still have to go delete the upgrade folder myself before doing any automatic updates, but at least that's easy to do and blog life moves forward.
Side Note: It's amazing how much disk space is freed up after deleting the upgrade folder. I did it for both blogs and checked the disk space in CPanel, wow. I highly recommend you do this occasionally.
Logorama (I asked ListofNow to suggest a post title for me…I’m sorry)
I love logos. They're pretty. I love the constraints that a designer is given to work with and seeing how creative people can be. They look easy, but they actually need to accomplish a lot. They need to be readable. They need to communicate a feeling or an idea. They need to be unique and memorable. I think they're fabulous little things.
I've been working on my own logo for a little while now as one of the first steps in designing a portfolio site. It's usually a better idea to spend a lot of time on the logo before jumping into actually making a website because the logo needs to work with the rest of the site and can inform other thematic or color-specific choices. It's one of those pieces that's worth spending extra time on and making sure it's right before going too far forward.
The reason I'm thinking about logos this Sunday is because I sat down at my elderly laptop with a cup of coffee and put on some excellent music to check out my feedly page (which for anyone that subscribes to feeds, I HIGHLY recommend. It's a much more pleasant way of reading your feeds than Google Reader or other similar readers). I came across a Smashing Magazine article titled "Design a Print-Ready Promotional Ad Using Photoshop and Illustrator". It mentioned BrandsoftheWorld.com as a place that print designers can go to find vector-based (easily editable) logos of tons of major corporations. It eliminates a lot of emails and phone calls trying to track down high-quality logos.
It's an awesome place to go to just check out some logos and then, if you're so inclined, you can download them and work with them yourself. Eeeexceeellent.
I particularly enjoyed this recently uploaded logo:
Diaspora: The Anti-Facebook?
Oh my goodness, what is Facebook thinking!? It's so disappointing to see the company so blatantly focus on revenue instead of the users. I'm not going to repost every good article I've read about its disregard for privacy issues, its terrible user interface, or the highly questionable behaviors of its current CEO because there are plenty of well-documented articles out there. Facebook and Zuckerberg are the talk of the town, at least in the computer world, and its mostly negative.
A few months ago I watched a video online of Matt Mullenweg, the founder of WordPress, being interviewed and he mentioned that he strongly believed that in due time, Facebook would eventually succumb to an open-source social networking application.
It seems that we may be seeing the beginning of this. Fueled by a high state of disenchantment with Facebook, a small group of young motivated guys (still in college) are getting a lot of attention and a lot of verbal and financial backing for a decentralized, open-source social network. They're starting this at the right time. They've named it Diaspora and it hasn't even been programmed yet, but they're off to a good start having raked in several thousands of dollars in less than two weeks. They have vowed to spend all summer staring at their computer screens hacking this project out. I'm excited for them and hope it spawns some awesome alternative to Facebook.