EmailOctopus Plugin Re-Factor

EmailOctopus

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 Legacy Widget
EmailOctopus Legacy Widget
Email Octopus Legacy Frontend
Email Octopus Legacy Frontend

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.

EmailOctopus Menu
EmailOctopus Menu

API Key

One of the requirements was to connect to the EmailOctopus API to get the user’s lists.

EmailOctopus API Prompt
EmailOctopus API Prompt

Once an API key is entered and connected, it redirects you to add a form.

EmailOctopus API Connected
EmailOctopus API Connected

Forms Screen

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.

EmailOctopus Forms Screen
EmailOctopus Forms Screen

Form Builder

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.

EmailOctopus Form Builder
EmailOctopus Form Builder

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.

EmailOctopus Form Builder Settings
EmailOctopus Form Builder Settings
EmailOctopus Form Builder Appearance
EmailOctopus Form Builder Appearance
EmailOctopus Form Builder Messages
EmailOctopus Form Builder Messages

Finally, when you save, you are presented with a shortcode you can insert into any post or page.

EmailOctopus Form Builder Save
EmailOctopus Form Builder Save

Gutenberg

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.

EmailOctopus Gutenberg
EmailOctopus Gutenberg

Once a form is selected, you can customize the form further, even using custom colors that override the form’s saved settings.

EmailOctopus Gutenberg Settings
EmailOctopus Gutenberg Settings

You can view a frontend preview below.

EmailOctopus Gutenberg Frontend
EmailOctopus Gutenberg Frontend

Beaver Builder Integration

As I use Beaver Builder, I opted to add integration with the tool.

Beaver Builder Block
Beaver Builder Block

Here’s what happens when you drag the block into the layout.

Beaver Builder Block Options
Beaver Builder Block Options

And the final output to the frontend.

Beaver Builder Block Preview
Beaver Builder Block Preview

Divi Integration

As Divi is very popular, I thought it would be nice to add Divi integration as well.

Below is the EmailOctopus Divi block.

EmailOctopus Divi Block
EmailOctopus Divi Block

And the block options.

Divi Block Options
Divi Block Options

And finally, the saved output.

Divi Block Added
Divi Block Added
Divi Frontend with Custom Colors
Divi Frontend with Custom Colors

Conclusion

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.

Ronald Huereca

Ronald Huereca is the CEO of MediaRon LLC and enjoys WordPress plugin and theme development.

Leave a Reply

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

Scroll to Top