Manage
#Blocks #Content #Engagement

Block: Happy Point

Embed (via iFrame) a "Subscribe" or engagement form in Planet 4 pages

Purpose of block: This block ends a page with an image that can include the default subscribe link. In the default P4, we use this block right before the footer on almost all pages to show a final inspirational photo and ask supporters to signup to a newsletter from Greenpeace.

 

Gutenberg editor

Setting up the happy point

Pages: Home, Act, Explore, Take Action, Issue, Campaign Tag

  • KEY INFO >> the Happy Point is never mandatory and should NOT affect the layout of any page

Setting a background image

Editor is able to place an image and have it auto-centered.

Select focus point for background image

On each image there is a circle displayed, so you can simply hover over the image and select where the focal point to be.

Overlay option/ Opacity

Mailing list iframe option

It is possible to add alternative Subscription forms in the Block, if for example you need forms in multiple languages.

By ticking “Use Mailing List iFrame” and adding the custom url your non-standard Happy Point form will be iFramed in that page.

Adding the link to the alternative form, the original Happy Point form is replaced!

 

Setup form in Engaging Networks

Once you logged in into Engaging Networks account, here are the steps to create the Engaging Networks “Subscribe” form

  1. Go to Pages ⇒ Create Page
  2. Select List Management page ⇒ Sign Up Form ⇒ Next
  3. Next will lead to Page settings.
    • Fill up the name, public title etc
  4. Once done, in the same page click on Manage Templates. You will be redirected to the template listing page
  5. click on “New Template”
  6. Add the template name and Add the header, footer content. You can copy the demo header and footer content from this repo
  7. Click on save button at the bottom of the page
  8. Once done you will see the new template in the Home page menu. Now click on Use Selected Component.
  9. Click Next button on Page Settings page
  10. On the Notifications Settings page leave Default Transaction Recipient as is and click Next
  11. In page listing page, click on Edit icon to edit particular form
  12. On right side, there is Settings icon (Hammer / key)
  13. Here you can add row and insert multiple columns or components in each row by dragging them
  14. Using the hammer icon Add Row and drag the “One Column” block
  15. Select and drag from Components the Text block to the row you have created and add your text (eg. Get action alerts in your inbox) with h2 heading.
  16. Using the hammer icon Add Row and drag the “Custom layout” block
  17. Add 1 more column
  18. Add the following classes to each column as per below:
    1. For Column 1 : col-lg-5 col-md-6
    2. For Column 2 : col-lg-4 col-md-6
    3. For Column 3 : col-lg-3 col-md-8
  19. Add content to the 3 columns

     

    • Column 1
      • Add the email field in Column 1: Select Forms ⇒ drag the Form block to this column

    • Column 2
      • Add the country field in Column 2: Select Forms ⇒ drag the Form block to this column
    • Column 3

       

      • Enable the submit button: Select Forms ⇒ drag the Form block to this column ⇒ Tick Enable the submit button option
  • KEY INFO >> each column should contain ONE field, to obtain a simple, effective Happy Point
    • Select and drag from Components the Text block in order to insert text like eg. You can unsubscribe or contact us at any time for enquiries
    • Add the opt-in question: Select Forms ⇒ drag the Form block ⇒ Go To Opt-ins tab ⇒ add the opt-in question

    Since the Happy Point is not a classic “Sign-up” form, we do not need the opt-in question to be visible so you need to add this script to the footer:

    <script>
    $(‘.en__field–email-ok input’).prop(‘checked’, true).parent().hide();
    </script>

  2. Add your Thank YOU message by selecting and dragging from Components the Text block to Page 2 to insert your text (eg. Thank you for subscribing!)
  3. Go to your Engaging Networks Page Settings and change the Status to “LIVE”
  4. Copy the URL of your live form (open it in a new tab to test it, here’s the GPI form – https://act.greenpeace.org/page/16381/subscribe/1 )
  • KEY INFO >> these instructions will result in a form with 2 fields (e.g. email, country), like the International Happy Point.

Should your Happy Point require extra fields and / or longer text, like the Greek Happy Point, you will have to increase the iFrame height of your P4 child theme accordingly. 

The P4 Team added some custom JS in the footer of the form to make sure fields take full width in the mobile screen.

Now, depending on which field your NRO needs in the form, you have to apply the classes for them. Your Planet 4 team can help you.

 
Here’s the fields currently available for you to use:

Connect the Engaging Networks form to Planet 4

Set up the Happy Point form in other tools

If your office is not using Engaging Networks then there is also the possibility to configure a form hosted in another source. You can do this by adding the URL of your form in the Engaging Network ID field like is shown below.

Multilingual domains: Set up different form for each language

In order to set up a different form for each of the languages in your site you need to follow the same set up procedure for each language. If your site has more than one language, you’ll see at the top of the page a language option:

Insert the happy point in Planet 4 pages

Hit “Add Page Element” in the edit mode of the P4 page (the ideal place for the Happy Point is the bottom of the page, right before the footer) and select the Happy Point block

Below a good example of a Live Happy Point!

Here’s the Thank You message of our form

 

Design files are here

Links & Resources