Blueprint - How to use it
What’s in this documentation?
Skip to the specific part you need using the links below, or work through this document from beginning to end to create a sign up page.
Facebook title, Facebook description and Facebook image
Twitter title, Twitter description and Twitter image
Slide ID and chaining slides together
What the form slide looks like
Radio buttons, Checkboxes and Select fields
How analytics and cookie consent work
Creating a page
To start creating a new page from scratch select the ‘Create Sign up page’ button.
That will bring you to the page below:
Page Details Section
Internal name
This will be how your page will be identified by other internal users on the platform.
Slug
The ‘Slug’ is the URL of the page e.g. /test-1
Published
If this is ticked then the page is live and available to anyone.
Global Background
This will show for all slides on desktop, except on slides where you specify a background. Max file size 2MB.
Fixed Background?
If this is ticked then the background will appear fixed and slide with the user scrolls.
Show Progress Bar
If this is ticked then the progress bar will show.
Meta section
Page title
The name that will show up for the external users in their browser tab and in search engine results.
Meta description
The text used by search engines under the title.
Facebook title, Facebook description and Facebook image
‘Facebook title’, ‘Facebook description’ and ‘Facebook image’ are what users will see before they share the handraiser on Facebook like below.
Twitter title, Twitter description and Twitter image
‘Twitter title’, ‘Twitter description’ and ‘Twitter image’ are what users will see as the preview when they share on Twitter.
Header and footer HTML
‘Header HTML’ and ‘Footer HTML’ are optional fields to allow further style edits - these can be left blank if you do not have anything to add.
Content
Add the various slides that will make up your user journey. This will usually begin with the ‘Form Slide’.
Creating slides
What are slides?
There are four types of slide that can be used to make up a page: a form slide, a share slide, a generic slide and two types of embed slides (one-column and two-column). You can add as many of these as you want, in any order.
It is possible to add multiple form slides, however we generally advise not to include more than one form on a single page. If you do, you should make sure the Slide ID of each is unique. You could for example create a second form that submits to a different list in Mailchimp.
One reason not to create more than one form slide is that the signature counter is specific to each page, not to each form. So having multiple forms on one page would increase the signature count of the page each time, and count the same user twice if they filled out both forms.
Slide ID and chaining slides together
At the top of each slide creation window you will see a space for ‘Slide ID’. This needs to be a unique name and allows our code to identify each slide within the page that you are creating. For example, if you used e.g ‘Slide_2’ or ‘Share_slide’ you’d then be able to use this to say which slide to progress to after the user signs a form.
You are free to name it as you see fit, however there can be no spaces in the name!
Types of slide
Form slide
This will typically be the first slide in the journey. It contains the petition/handraiser content and the form. The form slide is the most complicated of the slide types with a lot of options to change and update.
Note that a form slide will use a Blueprint-hosted form - to embed a form, say from Engaging Networks or another platform, please see the Embed Slide (two column).
What the form slide looks like
Title
The title that will appear at the top of the page.
Image
The image that will appear above the content. It is recommended that you use an image with 16:9 dimension so it doesn’t take up too much space on the page.
Make image page header
This checkbox determines whether or not the image will be used as a page header. It would turn the example above into the following:
Content
This is a text editor that allows you to add any text you want to persuade your supporters to sign the form. You can format this text, add images and include links here if you want.
Read more content
The same text editor as the main content but will be hidden behind a "Read More" button on mobile. It will always show on desktop.
Show signature counter
This will show or hide the signature counter progress bar. If this box is ticked then it will be visible right away and automatically increase the target as more people sign.
Above form content
A text editor for any text you want to include at the top of the form
Form fields title
A title for your form fields - typically “Add your name”, but it can be anything.
Mailchimp integration
By default, forms integrate with Mailchimp, but this can be customised on each Blueprint project. If the Mailchimp integration is active you will see the following fields
List
A dropdown with all the lists that exist in your Mailchimp account. Select the one you want submissions to this form to be added to.
Tags
Add any tags here that you want to add to supporters who complete this form. Tags should be separated by a comma e.g. tag1,tag2,tag3
Form Fields
There are 10 options for ‘Form Fields’ which lets users interact with your page. Note that although most of the setting up is the same for these options, there are clear differences between each which have been highlighted below.
‘Name’ is the ID for these fields within the form which show up behind the scenes when you are looking at the data. This value can be used in subsequent slides to pull in the user’s details (eg, addressing them by their first name). More on this below.
‘Label’ is what the external user sees so they know what information to input.
Text field
This is for entering text such as names, addresses e.t.c
1. Ticking ‘required’ means the user must enter information for the form to be submitted
2. If you do not write an error message then the system will auto generate one (if required is ticked)
3. When creating fields for your petition form, select which field in Mailchimp the data should go to. This is based on the Mailchimp List that you have picked earlier and will mean data entered in this field will go here in Mailchimp.
Email field
This is the area for entering the user’s email address. It is the best method for submitting email addresses as Mailchimp uses it as an ID for each user. You do not have to set the Mailchimp field when using the Email type.
Validation: Both ‘Required’ and ‘Email’ options should be checked for this type of field. This will help reduce the risk of a fake email being used
Primary Email: This should only be ticked when multiple email addresses are being asked for e.g. to email on behalf of someone
Note - more than one ‘Primary Email’ should not be ticked as it may confuse the system.
Hidden field
Get From URL Param: If you select this box and then enter the name of a URL parameter below, the field will be automatically filled with the value of the URL parameter and can be sent to Mailchimp (or your preferred integration). The user will not see it.
Country field
Country is self explanatory and will be listed from a dropdown list when added to the form/page.
Radio buttons, Checkboxes and Select fields
This is for mutually exclusive options like gender e.t.c.
Adding these options to the petition is similar to previous examples, it is the ‘Add option’ button which is unique for Radio buttons, Checkboxes and Select fields.
The ‘value’ is what gets sent to the database
The ‘label’ is what the user sees
You can have as many radio buttons, as many checkboxes and as many select fields (and messages to go with each option) as you want.
Opt in
This has to be separate from the above fields due to how Mailchimp (and other integrations) work. There are two types: Radio button opt in and Checkbox opt in.
Radio buttons are for multiple responses like ‘Yes’ or ‘No’, while a checkbox is just for ticking to signify opting in.
If a user declines to opt in, they are not removed or unsubscribed from a list if they are already on there. Usually, Blueprint will not pass their details to the CRM integration at all, in line with GDPR.
Opt-in questions should be worded in a way that makes it clear that a user will not be unsubscribed and that they could still be contacted if they have opted in previously.
Due to the explicit nature of GDPR opt-ins, we recommend the use of radio buttons here so that users can explicitly select ‘Yes’ or ‘No’.
Opt-in fields should also never be pre-ticked as this is also against GDPR guidelines.
Label before opt in: The opt in statement - this should be clear in what the user is signing up for
Accept/decline labels: Labels that the user sees and which are used as options for the radio buttons
Decline Message: This is the area to input copy for the popup that appears when the user selects ‘No’. If there is no text here, the popup will not appear
HTML content
This area is for the development team to put in extra text in between fields or extra branding for when the request comes in.
Other form options
Finally, at the bottom there are options for editing the submit button, directing the user to the next slide once the form has been submitted and entering copy for content below the form such as privacy statements etc.
Next you have to create the slide that users will see after they have submitted the form. You have four options: Share slide, Generic slide, embed slide (one- or two-column).
Whichever slide you choose next, make sure the slide ID matches what you put in the ‘Goto on submit’ field on the Form slide. Otherwise they may not follow each other.
Generic Slide
This slide can be moulded into any kind of slide that you need for your project/campaign.
Slide content
This is where you put the copy which you want users to see. This text can be used to convince users to take another action.
You can add the values from the form the user submitted previously here. This can be done by using the following shortcode, eg:
[form_value:firstName]
This will pull in the value of the field that is specified - here it pulls in value of the ‘first-name’ field but can pull in any value that was submitted in the form.
Buttons
The fields to fill out for the buttons are:
Text - the text of each button e.g. ‘Yes’ or ‘No’
Slide ID - based on what information you put in here the system will work out whether it’s a URL or another slide ID
URL - Opens in a new window
Event Type - This is used to add context to the analytics event that fires when the button is clicked. It is in the form of a dropdown. It is used to specify the type of event that is being sent to analytics and makes up the first part of the event name. Eg. an event with the type of "Donate" will start with "donate_" and end with the value of the Event field. The options are:
Donate
- Share Ask
- Link
Other (selected by default)
Event - This makes up the second part of the event name that gets sent to analytics. Eg. if the Event Type value is set to "Donate", and the Event is set to "yes", the event that appears in analytics will be "donate_yes". If you have selected "Other", the value of the Event field will be sent in full to analytics and will act as the event name.
Type - this is effectively talking about the style and there are six options:
Primary
- Secondary
- Text
You can specify both a ‘Slide ID’ and ‘URL’ for a button. So when the button is clicked the linked page will open in a new tab AND the Blueprint page will scroll to the next section
Share Slide
Share slide is more simple than the ‘Form Slide’ since there are no fields to edit. This area controls which social share options are shown to the user.
All share options are optional. Make sure you have checked the box for the type of share you would like. Whatsapp share button will only appear on mobile.
You can edit the message for the Whatsapp share text and the Twitter text.
As mentioned above in the Meta section, you can define the meta title, description and image for Facebook and Twitter. A preview box will appear on the share slide below the share buttons.
Embed Slide
There are 2 types of Embed slide. Both have the same features but slightly different layouts.
The one-column embed slide will appear in a similar format to the Share and Generic slides (content and embed arrange vertically).
The two-column embed slide will appear in a similar format to the Form slide (content on the left, embed on the right).
These slides can be used to embed donation forms or external sign up forms so that users can take actions that aren’t supported by Blueprint.
Below is an example of a donation form embed.
Common slide options
There are some options common across all slides.
Background
You can add a background image to any slide.
Progress bar
If you have enabled the Progress bar on the page (Page Details section above), you can specify if a slide should appear in the progress bar and what its name should be. Once a user has completed that slide, it will be reflected in the progress bar.
How analytics and cookie consent work
There are currently two ways that analytics is being recorded:
Matomo (Forward Action’s GDPR compliant internal analytics tool)
\*This tool is being retired for new Blueprint projects as of November 2022*Google Analytics (for client specific accounts).
These analytics tags will have been included in the project during development. These can’t be edited without a developer. We can also add custom analytics to pages when requested.
It is best practice for analytics to only fire once someone has accepted cookies (using the cookies banner), but we defer to our partners’ internal policies on this.
Blueprint does not store any user data.
Presets exist already for the data most collected such as shares on whatsapp, facebook, opt in e.t.c so these will automatically be included on any page created.
To create something specific, add ‘buttons’ (using the set up above) onto the page which can fire an event when clicked or selected e.g. create a ‘Donate £5’ button and fill out the ‘event’ input to give it an action and label to match that. This should be in dot notation eg. share.facebook
Cookies banner
As mentioned above, it’s best practice for analytics cookies not to be fired without the user's explicit consent.
Blueprint includes the option to turn on a cookie banner (it will be turned on by default) that will appear at either the top or bottom of a page and inform the user that analytics cookies are being used on the page.
Users can accept or decline cookies using buttons on the banner.
If they accept:
- All analytics cookies will fire
- The cookie banner will disappear
- A cookie will be set on the users browser so that the cookie banner will not appear again the next time they visit the page
If they decline
- The cookie banner will disappear
- No cookies are set and no analytics events are fired
Some partners choose to use the cookie banner to merely inform the user that cookies are used on the page, so whether they accept or not, consent is implied by having seen the cookie banner notice.
All cookie banner options can only be edited by a developer.
Here is an example of the cookie banner which asks for explicit consent from the user:
