Embeddable Petition Signature Forms

ControlShift supports embedding petition signature forms into external sites. The embed code is only visible to org admins, but can be shared with partner organizations or more advanced campaigners who may wish to embed the petition signature form on their main site. 

To find the embed code for a petition, go to the petition signature page > Settings > Embed A Petition Form. (This code is included in the petition creator's Settings page, but is only visible to org admins.)

From this page, you can customize and preview the embeddable form. The Background color and Text color boxes allow you to customize the appearance of the signature form. You can enter an HTML color name (a list of supported color names is available here) or a color code (like CSL blue #0f91c2). When using a color code, be sure to include the # before the code itself.

If you want the text of the sign button to be something other than Sign, enter the text into the Submit text box.

When you're done entering your specifications, click Update and the code will be generated for you. You can then share the code or paste it into the page where you'd like the signature form to display. Please note: The embed will only include the signature form itself, not the text of the petition. When embedding the form on an external site, you'll need to manually add the petition text or additional context to the external site. 

After signing on the external site, the user will be automatically redirected to the petition's main signature page to leave a reason for signing the petition and see the post-signing flows.

Embedded Forms and Source Codes

If you'd like to include a source or bucket for signatures added via the embed form, add "?source=foo" or "?bucket=bar" to the end of the petition URL (where foo and bar are the source or bucket that you'd like to use). For example, if you wanted signatures to be tagged with the source code "partner-homepage" and the bucket "partner-org", the code would look like this:

<script src="https://demo.controlshiftlabs.com/assets/embed_sign_form.js" id="controlsfhift-embed-sign-form-script" data-petition-url="https://demo.controlshiftlabs.com/petitions/repair-the-yellow-brick-road-1/embed?source=partner-homepage&bucket=partner-org"></script>

You can also add UTM parameters to this code if you'd like to track signatures that way.

Signatures from embedded petitions will also have from_embed set to true. (from_embed is a column in the admin signature export.)

You can also change the height and width of the iframe by manually adding 'height="##px"' or 'width="##px"', where ## is the number of pixels you'd like the iframe to be.

Embedded Forms in Other Languages

By default, the embed code included in a petition's manage section displays the signature form in your organization's primary language or the site visitor's language (when known and matching one of your organization's supported locales).

If you need to display the form in another language, you can do so by adding ?preferred_locale=[the code of the language you want to use] to the end of the petition's URL.

For example, if the default code for the signature form is:

<script src="https://demo.controlshiftlabs.com/assets/embed_sign_form.js" id="controlsfhift-embed-sign-form-script" data-petition-url="https://demo.controlshiftlabs.com/petitions/repair-the-yellow-brick-road-1/embed"></script>

Then to display the form in Spanish, this is the code you'd use:

<script src="https://demo.controlshiftlabs.com/assets/embed_sign_form.js" id="controlsfhift-embed-sign-form-script" data-petition-url="https://demo.controlshiftlabs.com/petitions/repair-the-yellow-brick-road-1/embed?preferred_locale=es"></script>

To display the signature form in other languages, use the codes in the table below. 

ControlShift Supported Languages

If you have any questions, please send an email to support@controlshiftlabs.com