Contact Form

To create a contact form, I'll be using the Contact Form 7 to generate the HTML for me. Although this is pretty easy to set up in HTML, it's much easier for me to edit and configure using a plugin without having to mess around too much. If need be I can always go into the back and alter a few things anyway.

So to use Contact Form 7, I just simply activate the plugin after installing. Afterwards, a tab opened up on the side-panel (as shown in the figure) with a default contact form shown as Contact form 1. So I'll just be modifying this Contact form to create the one for my website.

Specifying Contact form 1 by clicking on it, it brings up a screen allowing me to edit the form and configure what fields I want to display for collection. What is nice about this plugin is that they provide all the different modes of input that you can collect in a form and clicking the desired one provides the HTML.

So here I've just added a temporary field to collect organisation and school. I think I'll change it probably to take either or but for now its fine. Then to implement it, I'll just copy and paste the widget into my contact page like so:

The end result is something that looks like this. Nice, simple and clean. Could do with some colour maybe if I decide to go MSA purple.

Last updated