Jarret Cade

The ramblings of a not so mad man…

Category: WordPress

  • Reducing Setup Friction

    I was recently reviewing some email marketing services along with their WordPress plugins for a project of mine. In this particular instance, MailerLite is the email service and their WP plugin at https://wordpress.org/plugins/official-mailerlite-sign-up-forms/ ( version 1.7.26 as of this post )

    Upon plugin activation you are asked to enter an API key as it is required to be able to use the forms.

    API key input for MailerLite WordPress plugin

    The “Check it here!” link links to https://www.mailerlite.com/help/where-to-find-the-mailerlite-api-key-groupid-and-documentation which provides a helpful video explaining where to find the API key as well as a list of steps on how to create one.

    While this help article page is useful, I would have provided a bit of different context for the description there as I typically am looking for a straight link to where I need to go…

    Improved API key input for MailerLite WordPress plugin with descriptive "Create API Key" and "View Help Article" links styled as buttons

    The “Create API Key” links to https://dashboard.mailerlite.com/integrations where you create the key while the “View Help Article” links to https://www.mailerlite.com/help/where-to-find-the-mailerlite-api-key-groupid-and-documentation

    Both links ( styled as buttons ) explain exactly what they do while also providing a larger target area for users to click.

    Once the API key is verified, you are allowed to either create a form directly inside of WordPress or embed a form created on the website.

    I wanted to test their form builder in WordPress so I choose to create a form inside of WordPress. This is where I encountered a hiccup and the main reason for this post. Once you get to the form creation screen you are presented with the following

    Create new signup form error message

    Having never used MailerLite before aside from creating an account and API key, I was having a hard time figuring out where the Interest Groups are created. I checked both the Settings and Status pages for the plugin to see if they were created there with no luck.

    I also reviewed the plugin’s readme.txt file as well as the WP plugin page without even a mention of how to create a group. Thus, I decided to dig into the plugin code to find out where this mysterious groups feature is hiding.

    Opened up VSCode and did a search in the plugin files for “Please create an Interest Group first” text which I found inside of CreateCustomView.php file

    <?php if ( count( $groups ) === 0 ) {
         ?>
         <div class="notice notice-error">
              <p>
                   <?php _e( 'Please create an Interest Group first.', 'mailerlite' ); ?>
              </p>
         </div>
         <?php
    } ?>

    Essentially, if no groups are found, display the above message. Without finding how the $groups variable was being populated within that file, I tasked Claude to determine this for me with the following prompt:

    “In the mailerlite plugin, where does the $groups variable come from in terms of getting the list to show when creating a new form using
    /page=mailerlite_main&view=create&noheader=true”

    After some quick investigation and after a thorough explanation, I was presented with the summary:

    “So: the list ultimately comes from a live MailerLite API call (getGroups), not from local WordPress storage — $groups on line 176 is just that API result reordered so the form’s currently-selected
    groups appear first.”

    With this knowledge I revisited the MailerLite dashboard and found the Groups page at https://dashboard.mailerlite.com/groups under the “Subscribers” menu item and created a group. Once I did that and refreshed the custom form creation page in the WP admin I was then allowed to continue with the form creation

    Create new signup form display after group creation

    Granted finding the Groups page only took me a few minutes, but with a very minimal change to the error wording the friction is greatly reduced

     <?php if ( count( $groups ) === 0 ) { ?>
          <div class="notice notice-error">
               <p>
               <?php
                    /* translators: %s: URL to create a new group in MailerLite dashboard */
                    printf( __( 'No groups found, after creating a group please refresh this page: <a href="%s" target="_blank">Create Group</a>', 'mailerlite' ),
                    esc_url( 'https://dashboard.mailerlite.com/groups' )
                    );
               ?>
               </p>
         </div>
    <?php } ?>

    Which results in the following

    Improved create new signup form error message

    Now you have a more descriptive error message with instructions as well as a direct link for the user to visit.

    You could also skip the error message entirely and in keeping form with the previous improvement, using a styled link to create a group with an additional <hr /> to help separate the submit/cancel buttons

    Different improvement to create new signup form error message