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
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:
- the name of the page
- the public title for the page
- select the status – a new petition should have the status New. Once the petition is ready to be shared publicly, the status can be changed to Live. Other statuses: Blocked, Closed, Deleted, Tested
- template: pick the template you created on the previous step
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.
- Fields: here you can add fields for personal information, such as: first name, last name, country, email etc. Just drag and drop whatever fields are necessary for the petition you are building
- Opt-ins: from here you can drag opt-ins forms
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
- Handbook
- Integrate P4 with other engagement systems
- Technology intro
- Create P4 Donation pages (also in Engaging Networks)
- Block: Happy point (also in Engaging Networks)
- Block: Form (also in Engaging Networks)
- Engaging Networks documentation
- Access the Engaging Networks Greennet hub (for Greenpeace Staff only)
- Greenpeace Engaging Networks IDs for each domain and NRO – FULL LIST