Posted on by

A Custom Form Element that Simply Displays HTML

This post is about a kind of experiment I wanted to explore: create a form element that simply outputs some HTML in a Participants Database form. For instance, you could include a title, explanatory text, a video, an image, or really anything.

The UI should be simple: first, the user creates a field in Participants Database and sets its form element to “HTML” Then they set the “values” parameter to the HTML they want to show. When the field displays, instead of a form element, it will show the HTML. The HTML snippet can then be managed like any other form field.

This field will only appear in pdb_signup and pdb_record shortcodes. Note the “title” is blank.

Additionally, you can determine which shortcodes will show the field, since most of the time, you’ll only want it to show in specific places…the signup form, for instance. We do that by putting the name of the module in the “default” setting for the field definition.

The module is the base name of any shortcode: ‘signup’, ‘record’, ‘single’, etc. The field will only show in shortcodes that are named here.

The Plugin

I’m not going to go into much detail about the code. It does illustrate one way to use a simple PHP class to create a WordPress plugin to handle several different functions in a unified way.

The class is instantiated whenever the plugins are loaded and at that point, it sets up the filters and actions that will implement the new form element.

Customizing It

The code is easily customized: you can change the name of the form element in the first few lines of the class where those strings are defined.

This script is based on the one presented in Creating Custom Form Elements and that article has a more detailed description of the filters and how they work. Briefly, there is a filter for determining the form element’s output in a form context (such as a signup form), and another for determining what to show in a non-form context (such as a single record display) . This means you can easily change how things are displayed in either context.

If you know your way around PHP classes, you can customize this one by extending it with a child class.

The Code

Here’s the code, fully commented to help explain how it works: Below that. you’ll find the installation instructions.

Installing the Plugin

Download the plugin as a zip file here… Save it on your device. You may want to customize it at this point, or your can do it once it’s installed on the site.

When you’re ready to install the plugin, go to the plugins page in your site admin. Click on “Add New” at the top of the page, then click on “Upload Plugin” at the top of that page. Find your zip file, then upload it. When it’s activated the new form element will be added to the Participants Database plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *