Last week I had some downtime from client work and my partner who is working for a local charity Bonny Downs Community Association (BDCA) was experiencing some technical issues with a method of getting referrals to their Foodbank.

So we offered our services to help with this and build them an online form to solve this process.

Solution

So their Content Management System (CMS) is Wordpress, which is an Open Source CMS that powers almost 40% of all the websites in the world. Although there was no form functionality in the CMS.

There are a number of Form Plugins for Wordpress. The requirements that I had for this were:

  • Free, to save on extra expense
  • Full control of the code generated on the frontend
  • Simple to use and embed in a page

Contact Form 7

The solution I opted for was Contact Form 7 as it met all the requirements, mostly.

It is not like many other form builders drag and drop, which can be easy for some users although you still need to know what you are dragging and dropping. It has fantastic documentation and gave me full control over the frontend HTML. this meant that I could make sure taht I was using the input elements that I wanted and make sure the from was easy to use and accessible.

The only downside to Contact Form 7 is that it does not store the form submission in the Wordpress Database. This may not be an issue if you just want the form to send emails. If however you do want to collect the data, then there is another plugin for use with Contact Form 7 that does exactly that, called Flamingo.

You can see the code I used to build the form on my github account.

Other articles from the blog

  • Device displaying the blog post I have a problem

    I have a problem, an HTML problem

    Hi my name is Dave and I am an HTML-aholic. Well it’s not really a problem, let me explain.

    Date

  • a simple array of numbers and an array of objects

    Array.some()

    An array is a list of things in programming languages, in JavaScript a method is something that you can do to a variable, such as an array. Today I am focussing on the .some() array method.