@ptp-us/power-the-polls-form
Advanced tools
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.
As coronavirus continues to impact Americans across the country, we are also seeing a staggering decrease in poll workers — which could mean closed polling places and long delays for elections in 2020.
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:
<script type="module" src="https://unpkg.com/@ptp-us/power-the-polls-form@latest/power-the-polls-form/power-the-polls-form.esm.js"></script>
<script nomodule src="https://unpkg.com/@ptp-us/power-the-polls-form@latest/power-the-polls-form/power-the-polls-form.js"></script>
Reference it like any other HTML element:
<html>
<head>
<script type="module"
src="https://unpkg.com/@ptp-us/power-the-polls-form@latest/power-the-polls-form/power-the-polls-form.esm.js"></script>
<script nomodule
src="https://unpkg.com/@ptp-us/power-the-polls-form@latest/power-the-polls-form/power-the-polls-form.js"></script>
</head>
<body>
<power-the-polls-form
partner-id="your-ptp-partner-id"
custom-form-field-label="Label for your own custom field here"
/>
</body>
</html>
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-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"
/>
Power the Polls is following up by email to ensure users who sign-up continue on and fill out the poll worker application form in their local jurisdiction. If you do not want us to follow up with people who sign up using your embed of the PtP form, you can set this field to true.
<power-the-polls-form
opt-user-out-of-chase="true"
/>
The form will take on whatever styles you use on your site for standard elements like <form>, <input>, and <select>. It does add some basic styling, but you can override with your own CSS.
For further styling, you can use the power-the-polls-form element in CSS:
power-the-polls-form form {
}
power-the-polls-form input {
}
power-the-polls-form select {
}
power-the-polls-form label {
}
power-the-polls-form h3 {
}
power-the-polls-form h4 {
}
power-the-polls-form p {
}
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")
});
FAQs
Power the Polls Volunteer Form
The npm package @ptp-us/power-the-polls-form receives a total of 82 weekly downloads. As such, @ptp-us/power-the-polls-form popularity was classified as not popular.
We found that @ptp-us/power-the-polls-form demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.