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 info@powerthepolls.org to discuss any partnerships.
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.
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>Add to your project:
npm install @ptp-us/power-the-polls-formIn 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-caseand notcamelCaseTo test in your environment, set
customFormFieldLabelto a non-null value and if it doesn't show up in the form, you need to usekebab-case.
This will allow us to track the source of signups back to you.
<power-the-polls-form
partner-id="your-ptp-partner-id"
/>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"
/>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;
}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")
});