EmailOctopus is an email marketing platform that competes with the likes such as MailChimp, Constant Contact, etc. In my opinion, they are friendlier and have better templates than other services I have tried.
They hired me to overhaul their existing plugin, which is currently just a widget.
Original EmailOctopus Plugin
Their original plugin was very basic. It was a widget that asked for a list id, and then showed a form on any widget based layout.
EmailOctopus Plugin Reinvisioned
With the widget and output not being all that flexible, I was hired with a spec to add a form builder, new widget, and a shortcode. I also added in a Gutenberg block, Beaver Builder compatibility, and Divi compatibility.
Top Level Navigation
I decided to do a top-level navigation menu for their settings. One is the forms list and the other an API key. Upon plugin activation, the user is taken directly to the API key entry point.
One of the requirements was to connect to the EmailOctopus API to get the user’s lists.
Once an API key is entered and connected, it redirects you to add a form.
One of the requirements was to have a form screen where a user could add a form.
Once the API is connected, users can view this screen. Otherwise, it prompts for an API key.
One of the harder tasks was creating a form builder. This form builder functionality allows you to use a list you have set up in your EmailOctopus dashboard.
The interface was built using React/jQuery.
From the form builder, you can modify which custom fields are dragged over, reorder them, select appearance settings, customize the theme used (and use custom colors), and modify output messages.
Finally, when you save, you are presented with a shortcode you can insert into any post or page.
One of the suggestions I had at the beginning of the project was to add a Gutenberg block to ensure WordPress 5.0 compatibility.
The Gutenberg block was of course built in React and allows you to customize the form further once entered.
Once a form is selected, you can customize the form further, even using custom colors that override the form’s saved settings.
You can view a frontend preview below.
Beaver Builder Integration
As I use Beaver Builder, I opted to add integration with the tool.
Here’s what happens when you drag the block into the layout.
And the final output to the frontend.
As Divi is very popular, I thought it would be nice to add Divi integration as well.
Below is the EmailOctopus Divi block.
And the block options.
And finally, the saved output.
Please note that Beaver Builder and Divi functionality were removed prior to the plugin being released. I still plan to create an add-on pack which will add this functionality back.
This was a fun project and it took me about 130 hours to complete, not counting the Beaver Builder and Divi integration, which I did at no cost because it was personal only to me.
If you have your own plugin to work on, please hire me and get in touch.
You can download EmailOctopus from the WordPress plugin directory.
More Questions? Hire Me.
Drop us a line today for a free quote!