EmailOctopus Plugin Re-Factor

EmailOctopus Plugin Re-Factor

By Ronald Huereca | October 25, 2018
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.

More Questions? Hire Me.

Drop us a line today for a free quote!