1

Type
contact
Tags
validation
interactive
no-script
anti-spam

Preview

Implementation

Markup
form-1({ settings })
ParameterDescriptionType
legendform caption (core fieldset)object
actionURL for the form processing logicstring
methoddata transfer methodstring
phonetoggle the phone number fieldboolean
selecttoggle the select boxobject
spamtoggle the simple spam questionnaireboolean
hookadditional CSS class attributestring
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')