Wordpress Plugins Configurations and Settings Part 2g - Newsletter Sign-Up Plugin

Wordpress Plugins Configurations and Settings Part 2g - Newsletter Sign-Up Plugin

1. This tutorial will cover how to configure the NPE Newsletter Sign Up Form WordPress plugin.
2. The Newsletter Word-Press plugin allows you to add a newsletter sign up form that integrates directly with NonProfitEasy to your WordPress website. Contact information (name and email address) for sign-ups will automatically be added to your NonProfitEasy database.
3. The Wordpress plugin is an additional, one-time fee (see this tutorial for pricing). Alternatively, you could use our Zapier integration to connect a custom newsletter form on your website (via some WordPress Plug-In or via a link to a custom form builder such as SurveyMonkey, GoogleForms, Wufoo, etc.) to NPE. See our Zapier tutorial for more information..
4. To configure the Newsletter WordPress plugin, log into your WordPress admin panel. Find the Fundly CRM plugin in the left hand menu and click it.

   

5. This will take you to the CRM Plugin admin panel. Which tabs you have here will depend on which plugins you have purchased. Click on the Newsletter tab to configure/Edit/Add a newsletter form.

   

   

6. This will take you to the Configure Newsletters Index Page. If you have any newsletter sign up forms already configured, they will show here.

   

7. Hovering over any existing newsletter sign up form name will reveal options to Edit or Delete that form. You can also delete multiple pages at the same time by checking the white box to the left of any page and then selecting Delete from the Bulk Actions drop down menu and then click the Apply  button.

   

   OR

   

   

   

   

8. Checking or Unchecking the Publish checkbox will allow you to publish/make live or unpublish/remove (without deleting) that form from the public site.

   

9. The Configuration Button will allow you to configure which newsletter form (you can have more than one) will be displayed on the CRM "Sign Up for Public Profile" page, the CRM "View Public Profile" (after logging in) page, and/or the CRM "Cart/Checkout Page." You don't have to display your newsletter form on all three pages - you can select to display the same form on 1 page, all three pages, or one form on one page and a different form on another page. You will need to first configuration your newsletter sign up forms BEFORE you can make selections here. After making your selections here, click the Save button.

   

   

   

10. To Add a new Newsletter sign up form to your website, click the blue Add New button.

    

11. The Add/Edit Newsletter Form page has two tabs: Form Fields Configurations and Form Design Configuration.
12. The Form Fields Configuration tab allows you to configure which fields appear on your Newsletter Sign Up Form.
13. Start by entering the Newsletter Name. The name will appear on your newsletter list in the backend and will not appear in the Front End. 

    

    How it appears

    

14. If you want to give users the option to sign up for electronic/email newsletters, then toggle the E-Newsletters field to On. Otherwise, set it to Off.

    

    When Set to On , this is how it looks in FRONT END/to the online user

    

15. If you want to give users the option to sign up for snail mail/hard copy newsletters, then toggle the Snail Mail Newsletters field to On. Otherwise, set it to Off. If setting it to On, you can then add an optional description.

    

    

    How it looks in the FRONT END; once the user selects the snail mail option, the address fields will appear for the user to enter their address.

    

    

16. In the Custom Fields section, you can choose to add any existing custom data set fields from NPE into the newsletter sign up form by selecting the custom data set name from the drop down. The custom data set must already be created in your CRM account; you cannot create a new custom data set from here.
17. After adding a custom data set to the newsletter sign up form, you can choose which of the custom data set's fields to display  in the form and set if the  user is required to fill in the field (or can skip the field when filling out the sign up form).

    

18. Next, in the Mail Address Fields section, you can choose which mailing address related fields (if any) to display on the newsletter sign up form and if those fields will be required.

    

19. Next, choose whether or not to display Captcha on the form (highly recommended that you do in order to cut down on spam submissions).

    

20. In the Submit Button Text field, enter the text you want to appear on the button the user will click to submit the form.

    

    FRONT END

    

21. In the Allow Category Selection for User field, select whether or not the user will be allowed to choose which newsletter list they sign up for (only applicable if you have more than one newsletter list). If you do allow the user to pick which lists they sign up for, check the white box to the right of each list name to include it on the pick list presented to the user (you may have some private lists that you do  not want to display - leave these unchecked). If you have more than one list and don't allow the user to select which list(s) to sign up for, they will be signed up for ALL of your lists.
    Note: Users can unsubscribe newsletter and when they click on Unsubscribe, all categories/fields are PUBLIC/viewable on the unsubscribe page.
    When you set to Yes this is how it looks in FRONT END
22. Finally, enter a short description of your newsletter category(ies) that will explain to the user what the various category options are. This information WILL appear to the front end/online user and is an optional field.When you add a description, this is how it will show on the FRONT END
23. Finally, click the blue Create (if new form)/Save (if editing an existing form) button at the bottom of the screen to save your work.

    

24. In the Form Design Configuration tab, you can design the newsletter sign up form itself.

    

25.  The Headline Field will be the name of the Newsletter form on the public side/on the form filled out by the user. This WILL be visible on your website.

    

    HOW IT WILL DISPLAY ON THE FRONT END
26. The Description field will be the description/about the newsletter sign up form in general/why the person might want to sign up for your newsletter.

    

    How it looks on the front end/to online user:

    

• You will notice two tabs on the right hand side of the description box Visual and Text, which will let you toggle because the graphic/GUI toolbar and a plain text toolbar.

  

  

27. The Button Background Color selector lets you configure/change the color of the Subscribe button.

    

    FRONT END

    

28. Button Alignment sets the placement/direction of the subscribe button. Please Note: this field refers to the placement of the button relative to the (width of the) form and not to the page.

    

    How it looks in FRONT END if selected Left

    

    If selected Center

    

    If selected Right

    

29. Button Text Color sets the color of the text inside the button.

    

    FRONT END

    

30. The Background color lets you set the background color of the form. Please Note: If you set up a background image then the back ground color will not be applicable/will be ignored.

    

    FRONT END

    

31. The Font Color selector lets you configure/change the font color of all field labels on the form.

    

    FRONT END

    

32. Background Image allows you to set a background image for the form. Background Image Repeat allows the user to select if the background image is repeated over and over in the background (versus one very large image). Click on upload image button and you can choose the file from your system, from URL or even from your media library.

    

    

    FRONT END

    

33. Input Field Width lets you set the width of the boxes that the user inputs data into.                 When you keep the Width as 40%

    

    How it looks in FRONT END

    

    When you keep the width as 80%

    

    How it looks in FRONT END

    

34. Set Left Indent/Margin lets you set the amount of indent/left margin between the edge of the form and the input fields.

    

    FRONT END

    

35. Main Container Width lets you set the width of the form.

    

    FRONT END

    

36. When done making changes, click the Create button (if you are editing a previously created form the button text will read Update) to save your changes.

    

    OR