<div class="gravity-form gravity-form--dark gravity-form--durp gravity-form--large">
<h2 class="gravity-form__heading" id="Title of form component">
Title of form component
</h2>
<div class="gravity-form__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi est sit amet facilisis. Nisl tincidunt eget nullam non nisi est sit. Sed egestas egestas fringilla phasellus faucibus scelerisque
eleifend. Sed lectus vestibulum mattis ullamcorper velit sed
</div>
<div class="gravity-form__form">
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1">
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
<form method="post" enctype="multipart/form-data" target="gform_ajax_frame_1" id="gform_1" action="/about-us/contact-us/#gf_1">
<div class="validation_error">Validation error message: There was a problem with your submission. Errors have been highlighted below.</div>
<div class="gform_body">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below">
<li id="field_1_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_1">Required text field with validation error<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_text"> <input aria-invalid="true" name="input_1" id="input_1_1" type="text" value="" class="medium" aria-describedby="gfield_description_1_1" aria-required="true" aria-invalid="false"> </div>
<div class="gfield_description" id="gfield_description_1_1">Description for text field</div>
<div id="validation_message_1_1" class="gfield_description validation_message" aria-live="polite">This field is required.</div>
</li>
<li id="field_1_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_1">Required text field<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_text"> <input name="input_1" id="input_1_1" type="text" value="" maxlength="8" class="medium" aria-describedby="gfield_description_1_1" aria-required="true" aria-invalid="false"> </div>
<div class="charleft ginput_counter warningTextareaInfo">0 of 8 max characters</div>
<div class="gfield_description" id="gfield_description_1_1">Description for text field</div>
</li>
<li id="field_1_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_2">Paragraph text field that is not required</label>
<div class="ginput_container ginput_container_textarea"> <textarea name="input_2" id="input_1_2" class="textarea medium" aria-describedby="gfield_description_1_2" aria-invalid="false" rows="10" cols="50"></textarea> </div>
<div class="gfield_description" id="gfield_description_1_2">This is a paragraph description</div>
</li>
<li id="field_1_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_2">Paragraph text field that is required and has a validation error<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_textarea"> <textarea aria-invalid="true" name="input_2" id="input_1_2" class="textarea medium" aria-describedby="gfield_description_1_2" aria-invalid="false" rows="10" cols="50"></textarea> </div>
<div class="gfield_description" id="gfield_description_1_2">This is a paragraph description</div>
<div id="validation_message_1_1" class="gfield_description validation_message" aria-live="polite">This field is required.</div>
</li>
<li id="field_1_3" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_3">Select box or drop down field that is required<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_select"> <select name="input_3" id="input_1_3" class="medium gfield_select" aria-required="true" aria-invalid="false"><option value="First Choice">First Choice</option><option value="Second Choice">Second Choice</option><option value="Third Choice">Third Choice</option></select> </div>
</li>
<li id="field_1_3" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"> <label class="gfield_label" for="input_1_3">Select box or drop down field that is required with error<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_select"> <select aria-invalid="true" name="input_3" id="input_1_3" class="medium gfield_select" aria-required="true" aria-invalid="false"><option value="First Choice">First Choice</option><option value="Second Choice">Second Choice</option><option value="Third Choice">Third Choice</option></select> </div>
<div id="validation_message_1_1" class="gfield_description validation_message" aria-live="polite">This field is required.</div>
</li>
</ul>
</div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_1" class="gform_button button" value="Submit"> </div>
<div id="gf_1" class="gform_anchor" tabindex="-1"></div><br><br>
<div id="gform_confirmation_wrapper_1" class="gform_confirmation_wrapper ">
<div id="gform_confirmation_message_1" class="gform_confirmation_message_1 gform_confirmation_message">Submission confirmation message: Thanks for contacting us! We will get in touch with you shortly.</div>
</div>
</form>
</div>
</div>
</div>
<div class="gravity-form gravity-form--{{ background }} gravity-form--{{ siteUnit }} gravity-form--{{ componentSpacing }}">
{% if component.heading|default and (component.heading|trim) %}
<h2 class="gravity-form__heading"
id="{{ component.heading|sanitize }}">
{{ component.heading }}
</h2>
{% endif %}
<div class="gravity-form__description">
{{ component.description | raw }}
</div>
<div class="gravity-form__form">
{{ component.form | raw }}
</div>
{% if component.hasRecaptcha %}
<div class="gravity-form__captcha-disclosure">
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
</div>
{% endif %}
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "gravity-form",
"heading": "Title of form component",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi est sit amet facilisis. Nisl tincidunt eget nullam non nisi est sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sed lectus vestibulum mattis ullamcorper velit sed",
"form": "<div class=\"gf_browser_chrome gform_wrapper\" id=\"gform_wrapper_1\"><div id=\"gf_1\" class=\"gform_anchor\" tabindex=\"-1\"></div><form method=\"post\" enctype=\"multipart/form-data\" target=\"gform_ajax_frame_1\" id=\"gform_1\" action=\"/about-us/contact-us/#gf_1\">\n<div class=\"validation_error\">Validation error message: There was a problem with your submission. Errors have been highlighted below.</div><div class=\"gform_body\"><ul id=\"gform_fields_1\" class=\"gform_fields top_label form_sublabel_below description_below\"> <li id=\"field_1_1\" class=\"gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_1\">Required text field with validation error<span class=\"gfield_required\">*</span></label> <div class=\"ginput_container ginput_container_text\"> <input aria-invalid=\"true\" name=\"input_1\" id=\"input_1_1\" type=\"text\" value=\"\" class=\"medium\" aria-describedby=\"gfield_description_1_1\" aria-required=\"true\" aria-invalid=\"false\"> </div> <div class=\"gfield_description\" id=\"gfield_description_1_1\">Description for text field</div> <div id=\"validation_message_1_1\" class=\"gfield_description validation_message\" aria-live=\"polite\">This field is required.</div> </li><li id=\"field_1_1\" class=\"gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_1\">Required text field<span class=\"gfield_required\">*</span></label> <div class=\"ginput_container ginput_container_text\"> <input name=\"input_1\" id=\"input_1_1\" type=\"text\" value=\"\" maxlength=\"8\" class=\"medium\" aria-describedby=\"gfield_description_1_1\" aria-required=\"true\" aria-invalid=\"false\"> </div> <div class=\"charleft ginput_counter warningTextareaInfo\">0 of 8 max characters</div> <div class=\"gfield_description\" id=\"gfield_description_1_1\">Description for text field</div> </li> <li id=\"field_1_2\" class=\"gfield field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_2\">Paragraph text field that is not required</label> <div class=\"ginput_container ginput_container_textarea\"> <textarea name=\"input_2\" id=\"input_1_2\" class=\"textarea medium\" aria-describedby=\"gfield_description_1_2\" aria-invalid=\"false\" rows=\"10\" cols=\"50\"></textarea> </div> <div class=\"gfield_description\" id=\"gfield_description_1_2\">This is a paragraph description</div> </li> <li id=\"field_1_2\" class=\"gfield field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_2\">Paragraph text field that is required and has a validation error<span class=\"gfield_required\">*</span></label> <div class=\"ginput_container ginput_container_textarea\"> <textarea aria-invalid=\"true\" name=\"input_2\" id=\"input_1_2\" class=\"textarea medium\" aria-describedby=\"gfield_description_1_2\" aria-invalid=\"false\" rows=\"10\" cols=\"50\"></textarea> </div> <div class=\"gfield_description\" id=\"gfield_description_1_2\">This is a paragraph description</div> <div id=\"validation_message_1_1\" class=\"gfield_description validation_message\" aria-live=\"polite\">This field is required.</div> </li> <li id=\"field_1_3\" class=\"gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_3\">Select box or drop down field that is required<span class=\"gfield_required\">*</span></label> <div class=\"ginput_container ginput_container_select\"> <select name=\"input_3\" id=\"input_1_3\" class=\"medium gfield_select\" aria-required=\"true\" aria-invalid=\"false\"><option value=\"First Choice\">First Choice</option><option value=\"Second Choice\">Second Choice</option><option value=\"Third Choice\">Third Choice</option></select> </div> </li>\n<li id=\"field_1_3\" class=\"gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible\"> <label class=\"gfield_label\" for=\"input_1_3\">Select box or drop down field that is required with error<span class=\"gfield_required\">*</span></label> <div class=\"ginput_container ginput_container_select\"> <select aria-invalid=\"true\" name=\"input_3\" id=\"input_1_3\" class=\"medium gfield_select\" aria-required=\"true\" aria-invalid=\"false\"><option value=\"First Choice\">First Choice</option><option value=\"Second Choice\">Second Choice</option><option value=\"Third Choice\">Third Choice</option></select> </div> <div id=\"validation_message_1_1\" class=\"gfield_description validation_message\" aria-live=\"polite\">This field is required.</div> </li>\n</ul></div>\n<div class=\"gform_footer top_label\"> <input type=\"submit\" id=\"gform_submit_button_1\" class=\"gform_button button\" value=\"Submit\"> </div>\n<div id=\"gf_1\" class=\"gform_anchor\" tabindex=\"-1\"></div><br><br><div id=\"gform_confirmation_wrapper_1\" class=\"gform_confirmation_wrapper \"><div id=\"gform_confirmation_message_1\" class=\"gform_confirmation_message_1 gform_confirmation_message\">Submission confirmation message: Thanks for contacting us! We will get in touch with you shortly.</div></div></form>\n</div>"
}
}
$primaryParagraphOverride
color cloudDarkDarkest
font-family proximaNova
font-size responsive 16px 20px
font-weight var(--paragraphFontWeight)
line-height 1.4
$primaryLinkOverride
color charcoalLight
font-family proximaNova
font-size 20px
font-weight var(--primaryLinkFontWeight)
line-height 1.5
.gravity-form
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor altgeld
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor altgeld
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor illiniOrange
--gfSelectColor charcoalLight
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 28px
--gfSubmitButtonBorder none
--gfSubmitBackgroundColor charcoalLighter
--gfSubmitTextColor white
--gfSubmitTextColorActive white
--textColor charcoalLight
&--arch
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor industrialBlue
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor industrialBlue
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor industrialBlue
--gfSelectColor charcoalLight
--gfSelectIconColor industrialBlue
--gfSubmitButtonBorderRadius 0
--gfSubmitButtonBorder none
--gfSubmitBackgroundColor charcoalLighter
--gfSubmitTextColor white
--gfSubmitTextColorActive white
--textColor charcoalLight
&--art
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor arhcesBlue
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor archesBlue
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor archesBlue
--gfSelectColor charcoalLight
--gfSelectIconColor archesBlue
--gfSubmitBackgroundColor cloud
--gfSubmitButtonBorderRadius 8px
--gfSubmitButtonBorder 2px solid archesBlue
--gfSubmitTextColor charcoalLighter
--gfSubmitTextColorActive black
--textColor charcoalLight
&--college
--gfConfirmationMessageBackgroundColor charcoalDarker
--gfRequiredColor altgeld
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor illiniOrange
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor illiniOrange
--gfSelectColor charcoalDarker
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 50px
--gfSubmitButtonBorder 2px solid illiniOrange
--gfSubmitBackgroundColor transparent
--gfSubmitTextColor illiniBlue
--gfSubmitTextColorActive illiniBlue
--textColor illiniBlue
&--dance
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor arhcesBlue
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor archesBlue
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor archesBlue
--gfSelectColor charcoalLight
--gfSelectIconColor archesBlue
--gfSubmitBackgroundColor cloud
--gfSubmitButtonBorderRadius 28px
--gfSubmitButtonBorder 2px solid archesBlue
--gfSubmitTextColor charcoalLighter
--gfSubmitTextColorActive black
--textColor charcoalLight
&--landarch
--gfConfirmationMessageBackgroundColor charcoalDarker
--gfRequiredColor altgeld
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor illiniOrange
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor illiniOrange
--gfSelectColor charcoalDarker
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 28px
--gfSubmitButtonBorder 2px solid illiniOrange
--gfSubmitBackgroundColor transparent
--gfSubmitTextColor black
--gfSubmitTextColorActive black
--textColor charcoalDarker
&--theatre
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor altgeld
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor altgeld
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor illiniOrange
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor illiniOrange
--gfSelectColor charcoalLight
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 28px
--gfSubmitButtonBorder 2px solid illiniOrange
--gfSubmitBackgroundColor transparent
--gfSubmitTextColor illiniBlue
--gfSubmitTextColorActive illiniBlue
--textColor charcoalLight
&--music
--gfConfirmationMessageBackgroundColor charcoalLight
--gfRequiredColor illiniOrange
--gfValidationMessageBackgroundColor white
--gfValidationMessageColor illiniOrange
--gfValidationErrorBackgroundColor altgeld
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor illiniOrange
--gfSelectBackgroundColor white
--gfSelectBorderColor grey
--gfSelectBorderFocusColor illiniOrange
--gfSelectColor charcoalLight
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 8px
--gfSubmitButtonBorder 2px solid illiniOrange
--gfSubmitBackgroundColor transparent
--gfSubmitTextColor illiniBlue
--gfSubmitTextColorActive illiniBlue
--textColor charcoalLight
&--dark
--gfConfirmationMessageBackgroundColor charcoalLightest
--gfInvalidSelectBorderColor illiniOrange
--gfInputFocusBackgroundColor altgeld
--gfSelectBorderColor white
--gfSelectBorderFocusColor illiniOrange
--gfSelectBackgroundColor charcoalLighter
--gfSelectColor white
--gfSelectIconColor illiniOrange
--gfSubmitButtonBorderRadius 28px
--gfSubmitBackgroundColor cloud
--gfSubmitTextColor charcoalLight
--gfValidationMessageBackgroundColor altgeld
--gfValidationMessageColor white
--textColor white
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__heading
@extends $headline1
color var(--textColor)
margin-bottom 0.5em
&__description
@extends $richText
color var(--textColor)
&__captcha-disclosure
@extends $richText
color var(--text-color)
margin-top 32px
label
@extends $secondaryLink
color var(--textColor)
display inline-block
margin 0 0 8px 4px
.gfield:not(:last-child)
margin-bottom 32px
.gfield_description
.ginput_counter
@extends $detail
color var(--textColor)
margin 4px 0 0 4px
.gfield_required
color var(--gfRequiredColor)
font-size 23px
line-height 16px
margin-left 8px
vertical-align bottom
.gform_footer
margin-top 32px
.gform_ajax_spinner
background-color white
display inline-block
border-radius 50px
margin 0 16px
padding 10px
vertical-align middle
.validation_message
background-color var(--gfValidationMessageBackgroundColor)
color var(--gfValidationMessageColor)
.validation_error
background-color var(--gfValidationErrorBackgroundColor)
color white
font-weight bold
margin-bottom 16px
padding 16px
.gform_confirmation_message
.gform_confirmation_message_1
@extends $primaryParagraph
background-color var(--gfConfirmationMessageBackgroundColor)
color white
padding 16px
.ginput_container_select
position relative
width fit-content
&:after
content ""
display block
position absolute
right 16px
top 24px
triangle(12px, 6px, 'bottom', var(--gfSelectIconColor))
input[type=text]
input[type=tel]
input[type=email]
textarea
width 100%
input[type=text]
input[type=tel]
input[type=email]
textarea
select
background-color var(--gfSelectBackgroundColor)
border 2px solid var(--gfSelectBorderColor)
color var(--gfSelectColor)
padding 10px 16px
@extends $primaryParagraphOverride
&:focus
border-color var(--gfSelectBorderFocusColor)
outline none
&[aria-invalid=true]
border-color var(--gfInvalidSelectBorderColor)
outline none
select
appearance none
padding-right 40px
position relative
input[type=submit]
align-items center
background-color var(--gfSubmitBackgroundColor)
border var(--gfSubmitButtonBorder)
border-radius var(--gfSubmitButtonBorderRadius)
color var(--gfSubmitTextColor)
display inline-block
padding 8px 20px
text-align center
text-decoration none
transition all 0.3s ease
@extends $primaryLinkOverride
&:hover
&:focus
background-color var(--gfInputFocusBackgroundColor)
color var(--gfSubmitTextColorActive)
There are no notes for this item.