@ptp-us/power-the-polls-form

v1.2.55

Published

25 days ago

Power the Polls Volunteer Form

0High
0Medium
0Low

power-the-polls

svouse

crwallace

Power the Polls

https://www.npmjs.com/package/@ptp-us/power-the-polls-form

This is a custom web component that allows our partners to embed the Power the Polls signup form on their own web sites and intranets. Contact [email protected] to discuss any partnerships.

America needs poll workers to power our democracy

Power the Polls is working every day to recruit a new generation of poll workers — folks excited to serve their communities, help their neighbors vote, and ensure safe access to the ballot box for years to come.

You can help make sure we have a safe, fair, efficient election for all voters, and potentially get paid to do it!

Visit https://powerthepolls.org to sign-up and learn more.

How to embed the form

How to embed in HTML

Include the latest version of the scripts (use module and non-module to support down to IE11) and then use the <power-the-polls-form> element like any other HTML element:

<html>

<head>
   <script type="module"
      src="https://unpkg.com/@ptp-us/power-the-polls-form/power-the-polls-form/power-the-polls-form.esm.js"></script>
   <script nomodule
      src="https://unpkg.com/@ptp-us/power-the-polls-form/power-the-polls-form/power-the-polls-form.js"></script>
</head>

<body>
   <power-the-polls-form partner-id="your-ptp-partner-id" />
</body>

</html>

How to embed in React

Add to your project:

npm install @ptp-us/power-the-polls-form

In your index.jsx, add the following code to initialize the form element:

import { applyPolyfills, defineCustomElements } from "@ptp-us/power-the-polls-form/loader";

applyPolyfills().then(() => {
   defineCustomElements();
});

// ReactDOM.render( ... )

Include the form in your component:

import "@ptp-us/power-the-polls-form";

// ...

<power-the-polls-form
   partner-id={partnerId}
   custom-form-field-label={customFieldLabel}
/>

Note: in our testing with React, attribute names must be kebab-case and not camelCase
To test in your environment, set customFormFieldLabel to a non-null value and if it doesn't show up in the form, you need to use kebab-case.

How to customize the form

How to customize: Attributes

partner-id

This will allow us to track the source of signups back to you.

<power-the-polls-form
   partner-id="your-ptp-partner-id"
/>

custom-form-field-label

Optional label for an additional <input type="text"> field on the form. If null, no additional field will be displayed.

<power-the-polls-form
   custom-form-field-label="Union name"
/>

How to customize: Styles

The form does add some basic styling, but you can override with your own CSS. The elements in use are: <form>, <input>, <select>, <h3>, <h4>, <p>, <button>, and <a> as well as three relevant classes: a.poll-worker-action, a.poll-worker-action.cta, and a.jurisdiction.

Also of note, button and a.poll-worker-action.cta are styled the same and both set a background-color.

You can use the power-the-polls-form element in CSS, e.g.:

power-the-polls-form button {
  background-color: #f0f;
  color: #fff;
}

power-the-polls-form a.poll-worker-action.cta {
  background-color: #f0f;
  color: #fff;
}

How to customize: Events

You can listen for a submitCompleted or submitError event if desired in order to provide additional feedback to your users.

const form = document.querySelector("power-the-polls-form");

form.addEventListener("submitCompleted", () => {
   console.log("Power the Polls form has been submitted");
});

form.addEventListener("submitError", () => {
   console.log("Power the Polls form has encountered an error")
});