PHPackages sciactive/pform - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sciactive/pform ActiveLibrary[Utility & Helpers](/categories/utility) sciactive/pform =============== Pixel perfect CSS form layouts. 3.3.0(8y ago)20235[2 issues](https://github.com/sciactive/pform/issues)[2 PRs](https://github.com/sciactive/pform/pulls)Apache-2.0HTML Since Dec 21Pushed 1mo ago5 watchersCompare [ Source](https://github.com/sciactive/pform)[ Packagist](https://packagist.org/packages/sciactive/pform)[ Docs](http://sciactive.com/pform/)[ RSS](/packages/sciactive-pform/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (4)DependenciesVersions (7)Used By (0) PForm - Pixel Perfect Forms =========================== [](#pform---pixel-perfect-forms) [![Latest NPM Version](https://camo.githubusercontent.com/c805e03541e803a214cc4473cafaa1a1f82700d00594d2f933b0f3ba82f4d489/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f70666f726d2e7376673f7374796c653d666c6174)](https://www.npmjs.com/package/pform) [![Latest Packagist Version](https://camo.githubusercontent.com/3be4c74171c081c6a84d1ddd2e407fb4f8bc51ea20c8b3589970ae72a3940d91/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7363696163746976652f70666f726d2e7376673f7374796c653d666c6174)](https://packagist.org/packages/sciactive/pform) [![License](https://camo.githubusercontent.com/2bf83ebe5077684068b2003b47dc49c4be634993073ed36cc27e943e13b81f17/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7363696163746976652f70666f726d2e7376673f7374796c653d666c6174)](https://packagist.org/packages/sciactive/pform) [![Open Issues](https://camo.githubusercontent.com/407ca222fe38fda3cd08e3a1b7872bc24b96b68be7249c3bfc2cf5ee9de53dde/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f7363696163746976652f70666f726d2e7376673f7374796c653d666c6174)](https://github.com/sciactive/pform/issues) PForm is a pixel perfect CSS form layout library. See for examples. Installation ------------ [](#installation) You can install PForm with NPM, Composer or Bower. ``` npm install pform ``` ``` composer require sciactive/pform ``` ``` bower install https://github.com/sciactive/pform.git ``` Getting Started --------------- [](#getting-started) PForm comes with the following files: - `pform.css` - The main stylesheet. - `pform-bootstrap.css` - Use this if you also use Bootstrap. - `pform-ie-lt-8.css` - Use this to support Internet Explorer 6 and 7. - `pform-ie-lt-6.css` - Use this to support Internet Explorer 5.01 and 5.5. So here's how you'd include them all: ``` ``` Notice the conditional comments to serve older versions of IE the right files. If you have to support older versions of IE, PForm can do it. Now you can use PForm like this: ``` Login Username Password Remember Me Lasts for 2 weeks. ``` Here's the same form, built with a fieldset: ``` Login Username Password Remember Me Lasts for 2 weeks. ``` Features -------- [](#features) ### Layouts [](#layouts) PForm has two different layout options, Inline (default) and Block. To use block layout for an entire form, add the `pf-layout-block` class to the `pf-form` element. To use block layout for an individual element, add the `pf-layout-block` class to a `pf-element` element. ### Headings [](#headings) ``` Sign Up Now You will receive 200 bonus points just for signing up! ``` ### Required Asterisk [](#required-asterisk) ``` * ``` You can also mark the element as completed (with JavaScript validation) by adding the `pf-completed` class, like so: ``` * ``` The best place I've found to put these is right after a label's text, like this: ``` Username * ``` You can put the `pf-completed` class on the `pf-element` element instead, to mark any required asterisks in that element as completed. ### Field Groups [](#field-groups) Sometimes you will need to group fields so they don't fall left below the label. You can do this by wrapping them in a `pf-group` element: ``` Favorite Food Hot Dogs Hamburgers Cheeseburgers Sushi Pizza ... ``` *Remember that you can use the `pf-group` class on a span instead. This lets you put a group inside a label element and have it validate.* ### Fieldset Groups [](#fieldset-groups) Fieldset groups must use the `pf-group` class: ``` Household Household Memebers Family members living in your house. ``` ### Label Alignment [](#label-alignment) Labels can be aligned left (default) or right. To align them, use the `pf-labels-left` and `pf-labels-right` classes. You can put these classes on a `pf-form` element, `pf-group` fieldset, `pf-element` element, or `pf-label` element. You can override an ancestor's alignment class too. ### Full Width Elements [](#full-width-elements) Elements can be extended to the form's width using the `pf-full-width` class: ``` Comments ``` ### Verification Forms [](#verification-forms) You can apply a form like layout to verification pages by simply providing no inputs: ``` Verify this Information Name Jake Sully Location This will not be displayed to visitors. Pandora. Species N/A Correct Make Changes ``` ### Health Score 42 — FairBetter than 90% of packages Maintenance58 Moderate activity, may be stable Popularity17 Limited adoption so far Community12 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~351 days Total 4 Last Release 3114d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/133c9c4eff1268723fc1be664b5312a40527c6a94bfd40215bf4ff276832738f?d=identicon)[hperrin](/maintainers/hperrin) --- Top Contributors [![hperrin](https://avatars.githubusercontent.com/u/195918?v=4)](https://github.com/hperrin "hperrin (38 commits)") --- Tags csshtmlform layout ### Embed Badge ![Health badge](/badges/sciactive-pform/health.svg) ``` [![Health](https://phpackages.com/badges/sciactive-pform/health.svg)](https://phpackages.com/packages/sciactive-pform) ``` ### Alternatives [matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M336](/packages/matthiasmullie-minify)[scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62827.7M220](/packages/scssphp-scssphp)[phpstrap/phpstrap Bootstrap layout generator 1214.7k](/packages/phpstrap-phpstrap) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)