Form

<form id="" action="#" method="POST" class="Form " style="">
    <h2 class="u-text-size-500 " style="">
        Request a Demo for More Information
    </h2>

    <div class="row " style="">
        <div class="col _span-6  " style="">
            <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="First Name"
    type="text"
    class=""
    
    
    placeholder="Bruce" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

        </div>

        <div class="col _span-6  " style="">
            <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Last Name"
    type="text"
    class=""
    
    
    placeholder="Wayne" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

        </div>

    </div>

    <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Email"
    type="email"
    class=""
    
    
    placeholder="bruce@wayneenterprises.com" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

    <div class="row " style="">
        <div class="col _span-6  " style="">
            <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Company Name"
    type="text"
    class=""
    
    
    placeholder="Wayne Enterprises" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

        </div>

        <div class="col _span-6  " style="">
            <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Phone Number"
    type="tel"
    class=""
    
    
    placeholder="800-867-5309" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

        </div>

    </div>

    <label>
        <span>
            TextArea
        </span>
<textarea
    id="textarea"
    name="Notes"
    class=""
    style=" "
    placeholder="I would like to cover..."
    rows="3"
    
    autocomplete
    
    
    
></textarea>
	</label>

    <div class="row " style="text-align: center;">
        <div class="col _span-12  " style="">
            <button class="button _large _submit " type="submit">
        Submit Request
    </button>

            <p id="" class="fineprint " style="">Someone from our sales team will be in touch soon with more information or to schedule a private demonstration.</p>

        </div>

    </div>

</form>
<form
    id="{{id}}"
    action="{{action}}"
    method="{{method}}"
    class="Form {{modifier}}"
    style="{{style}}"
>
	{{> @children}}
</form>
{
  "modifier": null,
  "id": null,
  "style": null,
  "action": "#",
  "method": "POST",
  "children": [
    {
      "component": "heading",
      "context": {
        "level": 2,
        "text": "Request a Demo for More Information",
        "modifier": "u-text-size-500"
      }
    },
    {
      "component": "row",
      "context": {
        "children": [
          {
            "component": "column",
            "context": {
              "span": 6,
              "children": [
                {
                  "component": "input",
                  "context": {
                    "id": "text",
                    "type": "text",
                    "name": "First Name",
                    "placeholder": "Bruce",
                    "inputvalue": null,
                    "labelfor": null,
                    "autofocus": null,
                    "autocomplete": true,
                    "disabled": null,
                    "required": null,
                    "modifier": null,
                    "style": null,
                    "label": "Text",
                    "actiontext": null,
                    "actionmodifier": null,
                    "actionarialabel": null,
                    "helptext": null,
                    "pattern": null,
                    "maxlength": null,
                    "minlength": null,
                    "showerrors": null,
                    "errormessage": null,
                    "arialabelledby": null,
                    "min": null,
                    "max": null,
                    "ampreplace": null,
                    "labelText": "First Name"
                  }
                }
              ]
            }
          },
          {
            "component": "column",
            "context": {
              "span": 6,
              "children": [
                {
                  "component": "input",
                  "context": {
                    "id": "text",
                    "type": "text",
                    "name": "Last Name",
                    "placeholder": "Wayne",
                    "inputvalue": null,
                    "labelfor": null,
                    "autofocus": null,
                    "autocomplete": true,
                    "disabled": null,
                    "required": null,
                    "modifier": null,
                    "style": null,
                    "label": "Text",
                    "actiontext": null,
                    "actionmodifier": null,
                    "actionarialabel": null,
                    "helptext": null,
                    "pattern": null,
                    "maxlength": null,
                    "minlength": null,
                    "showerrors": null,
                    "errormessage": null,
                    "arialabelledby": null,
                    "min": null,
                    "max": null,
                    "ampreplace": null,
                    "labelText": "Last Name"
                  }
                }
              ]
            }
          }
        ]
      }
    },
    {
      "component": "input",
      "context": {
        "id": "text",
        "type": "email",
        "name": "Email",
        "placeholder": "bruce@wayneenterprises.com",
        "inputvalue": null,
        "labelfor": null,
        "autofocus": null,
        "autocomplete": true,
        "disabled": null,
        "required": null,
        "modifier": null,
        "style": null,
        "label": "Text",
        "actiontext": null,
        "actionmodifier": null,
        "actionarialabel": null,
        "helptext": null,
        "pattern": null,
        "maxlength": null,
        "minlength": null,
        "showerrors": null,
        "errormessage": null,
        "arialabelledby": null,
        "min": null,
        "max": null,
        "ampreplace": null,
        "labelText": "Email"
      }
    },
    {
      "component": "row",
      "context": {
        "children": [
          {
            "component": "column",
            "context": {
              "span": 6,
              "children": [
                {
                  "component": "input",
                  "context": {
                    "id": "text",
                    "type": "text",
                    "name": "Company Name",
                    "placeholder": "Wayne Enterprises",
                    "inputvalue": null,
                    "labelfor": null,
                    "autofocus": null,
                    "autocomplete": true,
                    "disabled": null,
                    "required": null,
                    "modifier": null,
                    "style": null,
                    "label": "Text",
                    "actiontext": null,
                    "actionmodifier": null,
                    "actionarialabel": null,
                    "helptext": null,
                    "pattern": null,
                    "maxlength": null,
                    "minlength": null,
                    "showerrors": null,
                    "errormessage": null,
                    "arialabelledby": null,
                    "min": null,
                    "max": null,
                    "ampreplace": null,
                    "labelText": "Company Name"
                  }
                }
              ]
            }
          },
          {
            "component": "column",
            "context": {
              "span": 6,
              "children": [
                {
                  "component": "input",
                  "context": {
                    "id": "text",
                    "type": "tel",
                    "name": "Phone Number",
                    "placeholder": "800-867-5309",
                    "inputvalue": null,
                    "labelfor": null,
                    "autofocus": null,
                    "autocomplete": true,
                    "disabled": null,
                    "required": null,
                    "modifier": null,
                    "style": null,
                    "label": "Text",
                    "actiontext": null,
                    "actionmodifier": null,
                    "actionarialabel": null,
                    "helptext": null,
                    "pattern": null,
                    "maxlength": null,
                    "minlength": null,
                    "showerrors": null,
                    "errormessage": null,
                    "arialabelledby": null,
                    "min": null,
                    "max": null,
                    "ampreplace": null,
                    "labelText": "Phone Number <i>(Optional)</i>"
                  }
                }
              ]
            }
          }
        ]
      }
    },
    {
      "component": "textarea",
      "context": {
        "id": "textarea",
        "name": "Notes",
        "placeholder": "I would like to cover...",
        "text": null,
        "resize": null,
        "rows": 3,
        "autofocus": null,
        "autocomplete": true,
        "disabled": null,
        "required": null,
        "modifier": null,
        "style": null,
        "label": "TextArea",
        "labelfor": null,
        "labelText": "Notes <i>(Optional)</i>"
      }
    },
    {
      "component": "row",
      "context": {
        "style": "text-align: center;",
        "children": [
          {
            "component": "column",
            "context": {
              "span": 12,
              "children": [
                {
                  "component": "button",
                  "context": {
                    "type": "submit",
                    "text": "Submit Request",
                    "modifier": "_large _submit"
                  }
                },
                {
                  "component": "fineprint",
                  "context": {
                    "text": "Someone from our sales team will be in touch soon with more information or to schedule a private demonstration."
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content:
    @import "../../axioms/Forms";
    @import "../../axioms/Animation";
    @import "./FormBase";
    .Form {
        &-inputaction {
            color: theme-color(link);
            background: none;
            border: 0;
            &:hover,
            &:focus {
                text-decoration: underline;
                outline: none;
            }
            &._right {
                float: right;
                text-align: right;
            }
        }
        &-select._rounded {
            select {
                @include font-weight-semibold;
                color: get-color(neutral, 500);
            }
        }
    }
    .Form._gray {
        label > span {
            color: get-color(neutral, 500);
        }
        input,
        select {
            color: get-color(neutral, 800);
        }
        input,
        select {
            background-color: get-color(neutral, 200);
            border-color: transparent;
            &:hover {
                background-color: get-color(neutral, 100);
                border-color: transparent;
            }
            &:focus {
                color: get-color(neutral, 0);
                background-color: get-color(neutral, 600);
                border-color: transparent;
                box-shadow: none;
            }
        }
    }
    .Form._dark {
        label.is-floating > span {
            color: get-color(neutral, 200);
        }
        input,
        .Form-select select:not(:focus) {
            border-color: transparent;
        }
        .fineprint,
        .fineprint a {
            color: get-color(neutral, 100);
        }
    }
    .Form.Form--light {
        h2,
        label > span,
        .fineprint,
        .fineprint a {
            color: get-color(neutral, 0);
        }
    }
    
    // Styles needed for parsely error states
    // TODO: explore updating parsely classes to ones we can add to sprout-brand
    .Form {
        &-error {
            > ul,
            > p {
                margin: 0;
            }
            > ul {
                padding: 0;
                list-style: none;
            }
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        textarea {
            &.parsley-error {
                border-color: get-color(red, 700);
                border-radius: $form-border-radius $form-border-radius 0 0;
            }
            &.parsley-error + .Form-error,
            &.parsley-error + .Form-error {
                border-radius: 0 0 $form-border-radius $form-border-radius;
            }
            &.parsley-error:hover,
            &.parsley-error:focus,
            &.parsley-error:hover + .Form-error,
            &.parsley-error:focus + .Form-error {
                border-color: get-color(red, 700);
            }
            &.parsley-error:focus,
            &.parsley-error:focus + .Form-error {
                box-shadow: 0 0 0 $form-border-width get-color(red, 700);
            }
        }
    }
    .Form {
        input._invalidsubtle:invalid:not(:focus):not(:hover) {
            background: transparent;
            border-color: rgba(0,0,0,0);
            box-shadow: rgba(0,0,0,0);
        }
        input._shortwidth,
        label._shortwidth {
            display: inline-block;
            width: auto;
        }
        @keyframes validshow {
            from {
                opacity: 0;
            }
        }
        &:invalid button._invalidhidden,
        &:invalid input[type="submit"]._invalidhidden,
        &:invalid input[type=submit]._invalidhidden {
            @include visuallyhidden;
        }
        &:valid button._invalidhidden,
        &:valid input[type="submit"]._invalidhidden,
        &:valid input[type=submit]._invalidhidden {
            animation: validshow $transition-time-500;
        }
    }
    
    /* Hide HTML5 Up and Down arrows. */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        margin: 0;
        appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield; /* stylelint-disable-line property-no-vendor-prefix */
    }
    
  • URL: /components/raw/form/Form.scss
  • Filesystem Path: components/molecules/Form/Form.scss
  • Size: 3.7 KB
  • Content:
    @import "../../axioms/Forms";
    @import "../../axioms/Animation";
    
    // TODO: this could be tidied up a bit. probably lots
    // of overlap of declarations from bambu merger
    legend,
    label {
        @include form-label;
    }
    input,
    textarea {
        @include form-input;
    }
    select {
        @include form-select;
        &::-ms-expand {
            display: none;
        }
    }
    textarea {
        resize: none;
    }
    .Form {
        .row + .row,
        .row + label,
        label + .row,
        .InputGroup + label,
        label + .InputGroup {
            margin-top: Space(400);
        }
        .row {
            width: calc(100% + 20px);
            margin: 0 -10px;
        }
        &-select {
            position: relative;
            &:hover {
                &::after {
                    border-color: theme-color(main);
                }
            }
            // Arrow character on the select dropdown
            &::after {
                position: absolute;
                top: 45%;
                right: .75rem;
                display: block;
                width: 10px;
                height: 10px;
                border-width: 0 1px 1px 0;
                border-style: solid;
                border-color: get-color(neutral, 500);
                content: "";
                transform: translateY(-50%) rotate(45deg);
                pointer-events: none;
            }
        }
        &-checkbox {
            @include form-checkbox;
        }
        &-error {
            @include form-error;
        }
        &-radio {
            @include form-radio;
        }
    }
    @media screen and (max-width: 600px) {
        .Form {
            .col + .col {
                margin-top: Space(400);
            }
        }
    }
    
  • URL: /components/raw/form/FormBase.scss
  • Filesystem Path: components/molecules/Form/FormBase.scss
  • Size: 1.5 KB

There are no notes for this item.