<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."
}
}
]
}
}
]
}
}
]
}
@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 */
}
@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);
}
}
}
There are no notes for this item.