Components - Forms

1

Type: contact
Tags: validation; interactive; no-script; anti-spam

Preview

Implementation

Markup

form-1({ *settings* })
Parameter	Description	Type
legend	form caption (core fieldset)	object
action	URL for the form processing logic	string
method	data transfer method	string
phone	toggle the phone number field	boolean
select	toggle the select box	object
spam	toggle the simple spam questionnaire	boolean
hook	additional CSS class attribute	string

Brief

A basic contact form relying only on HTML and CSS. Supports input validation and feedback. A simplistic anti-spam section can be enabled or replaced with a more robust solution.

Optionally use with the included form module to send form submissions and enable better spam protection.

Paths

location: components/forms/1
activate: templates/_/mixins.pug

Placement

markup: templates/views/**/*.pug
style: styles/_/elements/form.styl

Dependencies

_.pug
index.styl
*.svg

Examples

// minimal form that does not require any additional JavaScript
+form-1({
    action: "assets/logic/php/process-form.php",
    method: "post",
    spam: true,
})

// this form can use Platframe's form module to take care of spam and sending
+form-1({
    legend: {
        text: "Post Box",
        center: true,
    },
    phone: true,
    select: {
        name: "subject",
        label: "Subject:",
        options: [
            {
                name: "Option 1",
                value: "option 1",
                selected: "selected"
            },
            { name: "Option 2", value: "option 2" },
            { name: "Option 3", value: "option 3" },
        ]
    }
})

// activate form styles with flat button
form-1()

// or use alternative 3D button
form-1(button-type: '3d')