Praise God!
After weeks (months actually) of struggle, The Surly Curmudgeon’s contact form and e-mail notification subscription functions have been restored.
A Long Latent Issue
The trouble began last summer when suddenly Popup Maker – a WordPress plugin I was using to display the site’s contact form – suddenly stopped working after a WordPress update. At the time, we were in the throes of trying to sell our home in the SC Midlands, and move up to our final (I SWEAR) earthly home in the Appalachian foothills of the Upstate. I just didn’t have the time then to invest in trying to restore the lost function, so I simply eliminated the Contact and Subscription options from the site’s navigation structure. Then right around the beginning of 2021 we finally sold our home in the Midlands and completed the move Upstate. So I finally had the time to tackle the issue.
The site’s contact form was created with Ninja Forms. When I first set it up, I went ahead and sprang for the premium bundle of add-ons for Ninja Forms which provided a visual style editor, conditional logic for displaying and hiding form fields, and Mailchimp integration for e-mail subscription forms. Since the price of the subscription for this add-on was going up, and my renewal was coming up fast, I decided to try out some other options.
Struggles with Popup Builder
Since the trouble first started when Popup Maker failed, I started looking into a plugin called Popup Builder. This plugin offers a rich set of styling options and a wide variety of form integrations – at least on paper. The plugin had a premium add-on to create a native e-mail subscription list using a built-in form. I reasoned that Mailchimp was probably overkill for my single digit list of subscribers, and Popup Builder’s in-house subscription management seemed to fit the bill for my needs. So after a little bit (not enough) testing with the basic free Popup Builder plugin, I decided to buy the premium bundle that included not only the Subscription+ add on, but also a variety of advanced popup triggering options – e.g. on scroll percentage, exit intent, etc. that I thought might be useful later.
But I could never get Popup Builder’s subscription add-on to work. The Popup Builder support people were very helpful and attentive, but they just couldn’t seem to find out what was causing my issue. So I decided that I would just stick with Mailchimp and use the Ninja Forms Mailchimp integration. So I put Popup Builder aside for the time being.
Struggles with Ninja Forms
The Ninja Forms Mailchimp integration had been working for me before Popup Maker failed, so I went back to it. But I wanted to change my subscription design around a little bit. Instead of my subscribers being given an “all or nothing” subscription option, I wanted to be able to let them specify which content on The Surly Curmudgeon is of interest to them. I experimented with segmenting my Mailchimp audience into a variety of my site’s content categories, but in the end I settled on segmenting my audience into – those interested only in my Bible studies, those who only wanted to hear about new blog posts, and those who wanted both.
I watched a bunch of YouTube tutorials from folks like WP Learning Lab and Larry Snow that got me up to speed on segmenting my Mailchimp audience into the two categories I wanted, and setting up automatic e-mail notifications from my site’s RSS feeds for the target audiences based on their expressed interests when they signed up.
From there it should have been an easy jump to implementing Mailchimp signups by visitor-selected interests in Ninja Forms. I struggled for literally weeks back and forth with the Ninja Forms support people to get it working. Then on the eve of my Ninja Forms subscription’s expiration, I found out that Ninja Forms’ Mailchimp integration doesn’t support overwriting an existing Mailchimp subscriber’s interest group preferences. Instead, when a Ninja Forms Mailchimp subscription form is submitted, the resulting interest group selection ends up being the union of the new selections and the old selections. So Ninja Forms can’t do what I wanted to do, and I went looking for another solution.
Whew! I got out of plowing another $99 into Ninja Forms just in the nick of time.
Ibericode to the Rescue
In several of the tutorial videos I watched, a plugin called Mailchimp for WordPress (MC4WP) from ibericode was mentioned. It is the most popular Mailchimp integration plugin for WordPress. The user interface is straightforward, and minimalistic. Best of all, it actually works to overwrite the selected interests for existing Mailchimp subscribers as I desired. After experimenting briefly with MC4WP and determining it was going to work for me, I decided to also go ahead and buy the premium package for MC4WP which includes a style editor and the capability to create multiple MC4WP forms. Thus MC4WP was able to replace Ninja Forms in my application – at least for Mailchimp subscriptions. At the time I thought it might also work for my contact form. That was the theory anyway. I wasn’t able to find a way to get a MC4WP form to just send an e-mail to my site admin mailbox and not submit the data to Mailchimp. There may very well be a way to do this, but I couldn’t find it.
A Brief Flirtation with WP Forms
Early on in my WordPress indoctrination, I ran across a site called WP Beginner which offers a wide variety of helpful tutorials on WordPress. WP Beginner is run by a group called WP Forms, which is also the name of their flagship WordPress plugin. I was already using another of their plugins – WP Mail SMTP – to send e-mail from The Surly Curmudgeon. So I thought I might try using WP Forms as my contact form maker. I didn’t stay with WP Forms very long, though, for a variety of reasons.
First of all, WP Forms was continually bugging me to send them 5-star ratings, and to upgrade to their Pro version. The free version of WP Forms doesn’t include a style editor, but that wasn’t really an issue. Most of the free WordPress form plugins don’t include a style editor. I had been using the styling add-on for Ninja forms, but I found it less than ideal with no on-screen visual feedback to track the effects of the styling done through it, and a fairly limited selection of styling options. I didn’t want to take a chance on WP Forms Pro just to get a style editor, especially since WP Beginner has great tutorials on how to style WP Forms in CSS without a style editor plugin.
But the real problem for me personally with the free version of WP Forms was that the free versions doesn’t allow insertion of non-input fields into the form. I wanted to be able to add a site logo, some form header text, and a little warning message about unacceptable contact form message content into my form. Only the Pro version of WP Forms would allow me to do that, and the price for that add-on was too steep for the minimal needed additional capability I would get out of it.
Ibericode to the Rescue Again
In the meantime, I began playing around with another form plugin from ibericode called HTML Forms. Its user interface is very similar to MC4WP’s allowing direct editing of the form’s HTML. The free version of this plugin also allows creation of multiple forms unlike MC4WP which requires a premium upgrade (which I had already purchased) to create multiple forms. HTML Forms doesn’t have a visual style editor even in the premium version. In fact, one of ibericode’s selling points for this plugin is that the forms it generates are slender and efficient unlike the bloatware of CSS associated with visual form style editors.
ASIDE – By this time I was getting fairly proficient at manual form styling with CSS using my browser’s built-in inspection function, and surfing the web for CSS tips and tricks pertaining to my various plugins. This effort was aided greatly by a sweet little free add-on to my WordPress theme of choice – GeneratePress. Dissatisfied with the WordPress built-in CSS customizer that was added to WordPress starting with version 4.7, Tom Usborne – the creator of the GeneratePress theme – created a free plugin called Simple CSS that integrates elegantly with GeneratePress and likely with other themes as well. Highly recommended! One word of warning, though – the Simple CSS pane is right above the WordPress native Additional CSS pane in the Appearance Customizer. It would be easy to get them confused, and I’m unsure how they might interact with deleterious effect. It is possible to remove the WordPress-native Additional CSS function in the Customizer by editing the functions.php file (so I hear) which should only be done in a child theme so that automatic theme updates don’t wipe out your work.
Anyway, together MC4WP and HTML Forms allowed me to create the Contact and Subscription forms I needed efficiently, and Simple CSS allowed me to style them to my tastes. I put shortcode links to the forms onto a test page and verified they worked and looked as I wanted them to.
Making Mailchimp Interest Group Selection Required
I implemented the Mailchimp interest group selection as a pair of checkboxes on my MC4WP Mailchimp signup form. But I needed a way to force my subscribers to select at least one interest group. After all, what use would subscribing to my site be if the subscriber didn’t want e-mail notifications about any new site content? Unfortunately, MC4WP has no native means of making a checkbox input field required. I found a helpful article in the MC4WP support forum that addressed the issue – Make Interest Groupings a required field.
This article recommends a two-pronged approach. The first is to pre-check at least one of the checkboxes in the form markup. The second is to run a short Javascript when the form is submitted prior to triggering the form’s submit action. That worked like a charm. If the visitor didn’t select any interest before submitting the form, a Javascript alert() warning was displayed. Unfortunately, the subscription form was submitted to Mailchimp anyway! After opening a ticket with MC4WP support (available because I had bought the MC4WP premium subscription), I learned that I needed to uncheck “Enable AJAX form submission” in the form’s settings. After that, my MC4WP form was ready to go.
Prettier Warning Messages from Sweetalert2
Once I had the Javascript set up in the MC4WP Mailchimp signup form to check for at least one interest group selection, I wanted to style the Javascript alert() warning box, but there is no native way to style the ugly alert boxes. In researching the possibilities for styling Javascript alert()s, I found mention of a Javascript applet called Sweetalert2. This applet displays a popup message box when its swal2() function is called. The function can be passed a number of styling and event handling parameters. Also, the HTML objects created by the function may be styled with CSS.
I first had to install a plugin called Insert Headers and Footers that allowed me to add <scripts> to my WordPress page headers containing the Javascript library and style sheets used by Sweetalert2. Then it was only a matter of inserting a call to the swal2() function with the appropriate warning text and styling parameters into my MC4WP Mailchimp signup form invoking the Sweetalert2 popup message when the interest checkbox validation script identified the form had been submitted with no interests selected. The call to swal2() was placed into the form checking Javascript in place of the original Javascript alert().
Unfortunately there was another wrinkle. I didn’t find it out until a little later when I started trying to use Popup Builder HTML popups to invoke my MC4WP Subscription form. What I found was that the Sweetalert2 warning popup was being displayed behind the Popup Builder popup. To fix that I had to apply a CSS style to the .swal-container CSS class making its z-index property higher than the Popup Builder popup’s z-index.
More Struggles with Popup Builder
So with my Contact and Subscriptions now ready to go, I went back to Popup Builder and created a popup that would display the Contact form. I put a link to this popup into the page body of a test page not readily available to site visitors through the ordinary site navigation menus. The contact popup worked great and looked exactly as I wanted it to through both the Popup Builder style editor and some custom CSS. Once the Contact form and popup were working on the test page it was time to add a new Contact item to the site’s main navigation menu to invoke the popup. Theoretically that should have been dirt simple. But I found that when I invoked the pop link either from a main menu item or from a sidebar widget, everything would appear to be working correctly until the form was submitted, but at that point the popup would close and the form submission would never be carried out.
I worked for over a week with the support folks from Popup Builder, Generate Press, and ibericode. Not only were they unable to resolve the issue, they were not even able to reproduce the symptom. I decided to try using one of Popup Builder’s premium features – a Contact Form popup – bypassing my beautiful and functional HTML Forms Contact form altogether. But I found if I partially configured one of these Contact Form popups and saved it as a draft, when I came back to complete the configuration I could no longer access the Contact Form field configuration and styling options. This was very frustrating, and I was getting really tired of fighting with it. I decided to pursue other options.
Ibericode to the Rescue Yet Again
It turns out that ibericode also makes a popup plugin called Boxzilla. Like ibericode’s other offerings – MC4WP and HTML Forms – the Boxzilla user interface is minimalistic, and focuses on efficiency and function rather than implementing a lot of bells and whistles which would bloat the code and likely never really be used anyway. Best of all, Boxzilla offers most of the functionality I needed in its free version. There is a premium add-on which I have only marginal need of but may eventually buy just to make sure ibericode gets some revenue. They deserve it. It stands to reason that Boxzilla works just fine with the other two ibericode offerings I’m using, and although native styling options are minimal I was able to implement some custom CSS that made my Boxzilla popups look almost as nice as the Popup Builder popups did. Better yet, the Boxzilla popups work just fine with links embedded in menu items on my main navigation menu, and I have no reason to believe they won’t work embedded into widgets elsewhere on the site, or being invoked through scrolling depth and time on page.
And It’s All Working Now at Long Last
So the Contact and Subscribe functions are now implemented as menu items on the site’s main navigation menu bar which each invoke their own Boxzilla popup – one for the HTML Forms Contact Form, and one for the MC4WP Mailchimp signup form. Eventually, I may add some more functionality like scroll depth, time on page, and/or exit intent triggering for the Subscribe popup. I may even go back to Popup Builder and try to implement one of their “Why Not Share the Content on Social Media” popups, or even an annoying auto-play video popup like the news sites have. After all, I have paid for the Popup Builder premium add-on bundle for a year. It would be nice if I could get at least one of the Popup Builder popup types to work on my site before my subscription runs out.
In the meantime, at long last I can now get back to creating that sweet sweet curmudgeonliness that everyone has been craving, and maybe even post some new Bible study notes and recordings.