@ptp-us/power-the-polls-form
v1.2.50
Published
Power the Polls Volunteer Form
Downloads
2,517
Readme
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 notcamelCase
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 usekebab-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")
});