Community Post

Creating a New Kind of Contact Form WordPress Plugin

💬 comments

All of my professional life, I’ve been annoyed with the need to create large contact forms. It’s a need that comes up frequently for the clients I work with, and always is very time consuming, which means higher costs for the clients. No one wins.

There are solutions to writing quick forms that are large, but they always suffer from the same problems. They are usually difficult to style, and it’s even harder to work in any custom features or functionality. Some plugins offer simpler solutions, but do not give you any flexibility without a large time investment.

I wanted to write contact forms in HTML and use the styles I’ve already put in place for the site I’m working on. If I do this, I would then need to write all of the back end logic required to process the form submissions, send email notifications, and then present the entries database in a way that clients can see their submissions if they are having email troubles.

Table of Contents

    The solution I came up with was a WordPress plugin called Alchemyst Forms. With Alchemyst Forms, I let site administrators or editors supply any HTML they would like for their form, and then the plugin handles all the server-side processing, email notifications, and entries database automatically. With this, I can even abstract some more commonly used complicated features, such as repeatable sections and form validation, down to simple HTML tags and attributes.

    The result is most forms never require any custom style overrides and are completely customizable to the site they are placed in.

    From the technical angle, this is all possible due to a PHP-based HTML parser. The HTML supplied for the form code is parsed down to a list of names, which then lets us interpret submissions. We can use the parser to determine field types at the same time to handle the data differently as needed. File uploads benefit from this the most, which are then processed exactly as file uploads are when done through the media library.

    It still needs to be incredibly flexible, though. Alchemyst Forms is full of filters and actions to let developers tap into the form wherever needed to add custom functionality. Even better than other forms, you can manipulate forms directly with Javascript to achieve very complicated front-end forms without the cumbersome need to find extensions for the plugin you’re trying to work with. If you know a little jQuery, the possibilities are practically endless.

    The server-side customizations available are incredibly flexible as well. Adding a custom notification type is possible from every angle with a few filters and actions. Need to see some example code? Check out our “Insert Post” notification type on GitHub.

    Forms are still tedious. That will never change. This technique at least takes the process of hacking apart some other complicated form builder’s styles out of the equation. HTML is easy to learn, and with the flexibility it brings, you can create forms that are far more interesting than otherwise is possible.