Website management
#Engagement

Create Engaging Networks Petitions with P4 Style

Set up P4-alike petitions with your advocacy tool (Engaging Networks..)

⚠ Please keep in mind that the Engaging Networks connection with Planet 4 will be phasing out in 2023.

Petitions are complementary action tools frequently used to engage with supporters. As you may have guessed while understanding your NRO engagement systems suite (of which P4 is just one of the tools!), petitions are often set up in a 3rd party tool, usually an advocacy tool.

This page will help you integrate your petition tool with Planet 4.

 

 

Petitions, what, why and how

Online petitions are an awesome way to engage with supporters, gathering signatures to support specific goals and ultimately win campaigns and increase our supporter baseline. At Greenpeace, the most used Petition tools are Engaging Networks, ControlShift Labs, Blue State Digital, Hubspot, Change.org, EveryAction and Avaaz.

Online petitions usually consist of two subpages.

The first page usually holding the form, campaign information, call-to-action, etc. The second subpage is the one people are redirect to once they submit the form, also called “thank you” page.

 

Set up Engaging Networks (EN) Petitions

petition

Create a New Template

First step is to create a new template for the new Petition. Click Pages, then select Components. From the left sidebar choose Templates and the “New Template”. On the new dialog window choose “Start from Scratch”.

Once the editor is open, give a name to your template. Remember that name in order to use it on the next step. Copy-paste header & footer source code. Source code can be found here: header & footer. Then click “Save”.

Create a New Petition in EN

In the top right menu, click on Pages, then select Manage pages. 

From the “New Page” menu choose the Petition option, in order to start building a new petition page, and click Next.

In the new opened window, several information about the new petition need to be added. IMP: user can`t skip this page, details are mandatory. Here is what you should define on this page:

Once all details are settled, click on Next. 

 

On top right corner, there is a hammer and a wrench symbol. Click on that to be able to edit the layout of the petition.  

 

Layout

Between the header and the footer there an area where the main layout and content can be created. Our design consists of two columns.

So the first thing is to delete the row that is already there and create a two column row by dragging the relevant option from the right toolbar. Then you can easily drag other components into these columns.

For the Call to Action content you can drag a Text block inside the left column. This will open a rich text editor where you can populate with content.

IMP: If you want to publish a mobile version (less content, for instance), click the “Add mobile version” checkbox. A new text editor will open. Add mobile version copy there.

After the content is edited, click Save.

 

Dark Blue background on Form

If you want the form on the right column to have a dark blue background, go back to the template editor and on the footer add this line of code somewhere inside the <script> tag.

$('div[class$="__component--column--2"]').addClass('dark-blue');

Navbar & Footer links

To change where the top navigation bar and Footer links point to, go back to the template editor and  go near the bottom of the footer code.

There is a block of code that defines those links, which by default point to GPI links. The block looks like this:

var p4_site_url = "https://www.greenpeace.org/international/";
varp4_site_act_page="https://www.greenpeace.org/international/act/";
varp4_site_explore_page="https://www.greenpeace.org/international/explore/";
...

Replace the links with the right ones.

 

Sticky form

If you want the form to be “sticky” and follow the scroll movement you can do that by adding a custom class. Inside the form editor click the Styles button, enable the “Custom class names” checkbox and type the word sticky in the field.

Caveat: Making the form sticky also means that it will render above any other element during scrolling. So this should be used only when the form is the only component on the right column.

 

Form Subheader

If you want a heading on top of the Form just drag a Text block from the Components section on the right toolbar.

For the Form you can drag a Form block inside the right column. This will open the Form editor where you can choose the fields to include.

Click Save when you are done.

 

 

Video

If you need to insert a Video on either column you first need to drag a Code block from the Components section on the right toolbar.

One the Code block editor just give a description title to that video and paste the iframe code inside the editor. For instance Youtube provides that iframe code directly from the Embed option if you try to share a video.

Custom background image

If you want to change the default background image you need to add a new row below the main one. For simplicity this can be an “One column row”. Then just drag an Image block inside from the Components. You can upload an image or paste an existing url. You will need to also add a custom class named page-background.

Thank you page in EN

Clicking “Page 2” will get you to the page that people are redirected to once they submit the form. In this page you add an “One column” block from the Row section on the right toolbar.

Inside that Column you should drag at least one Text block and fill in the content from the rich text editor.
Social buttons
In order to add some buttons and give the chance to people to share this petition to social media you need to add Code block from the Components section on the right toolbar.

In the Code editor just paste this code:

<div class="share-buttons text-left">
  <a href="https://act.greenpeace.org" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook-f"></i>
    <span class="sr-only">Share on Facebook</span>
  </a>
  <a href="https://act.greenpeace.org" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
    <span class="sr-only">Share on Twitter</span>
  </a>
</div>

Make sure to replace the highlighted links above with your urls that also include a tracking code.

 

 

Links & Resources