Arc and Angle To me programming is more than an important practical art. It is also a gigantic undertaking in the foundations of knowledge. – Grace Hopper

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.