Office of Diversity and Inclusion Component Library

Support Finder Form 

<form action="#" method="POST" class="support_finder_form is_type_block">
    <div class="support_finder_form_header">
        <h3 class="support_finder_form_title">
            How can we Help Support You?
        </h3>
    </div>

    <div class="support_finder_form_rows">
        <div class="support_finder_form_row">
            <label class="support_finder_form_label">
                <div class="support_finder_form_label_text">
                    I want to learn more about
                </div>

                <div class="support_finder_form_content">
                    <div class="support_finder_form_select_wrap">
                        <select class="support_finder_select" name="learn_about">
                            <option value="" selected>All Types</option>
                            <option value="Sexual Orientation">Sexual Orientation</option>
                            <option value="Adipisicing irure occaecat">Adipisicing irure occaecat</option>
                            <option value="Adipisicing enim">Adipisicing enim</option>
                        </select>
                        <span class="support_finder_form_select_icon">
                            <svg class="icon icon_expand">
                                <use href="/images/icons.svg#expand" />
                            </svg>
                        </span>
                    </div>
                </div>
            </label>
        </div>

        <div class="support_finder_form_row">
            <fieldset class="support_finder_form_fieldset">
                <legend class="support_finder_form_legend">
                    <div class="support_finder_form_label">
                        <div class="support_finder_form_label_text">
                            For
                        </div>
                    </div>
                </legend>

                <div class="support_finder_form_content">
                    <div class="support_finder_form_checkbox_list">
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="for" value="Undergrad Students">
                            <span class="support_finder_form_checkbox_list_label">Undergrad Students</span>
                        </label>
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="for" value="Grad Students">
                            <span class="support_finder_form_checkbox_list_label">Grad Students</span>
                        </label>
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="for" value="Faculty & Staff">
                            <span class="support_finder_form_checkbox_list_label">Faculty & Staff</span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="support_finder_form_row">
            <fieldset class="support_finder_form_fieldset">
                <legend class="support_finder_form_legend">
                    <div class="support_finder_form_label">
                        <div class="support_finder_form_label_text">
                            Show me
                        </div>
                    </div>
                </legend>

                <div class="support_finder_form_content">
                    <div class="support_finder_form_checkbox_list">
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="show_me" value="Educational Resources">
                            <span class="support_finder_form_checkbox_list_label">Educational Resources</span>
                        </label>
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="show_me" value="Programs & Initiatives">
                            <span class="support_finder_form_checkbox_list_label">Programs & Initiatives</span>
                        </label>
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="show_me" value="Events">
                            <span class="support_finder_form_checkbox_list_label">Events</span>
                        </label>
                        <label class="support_finder_form_checkbox_list_item">
                            <input type="checkbox" class="support_finder_form_checkbox_list_input" name="show_me" value="Offices & Organizations">
                            <span class="support_finder_form_checkbox_list_label">Offices & Organizations</span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="support_finder_form_row is_submit">
            <div class="support_finder_form_submit_wrap">
                <div class="support_finder_form_submit_wrap_item is_submit">
                    <button type="submit" class="button_link">
                        <span class="button_link_inner">
                            <span class="button_link_label">
                                Show Me Results
                            </span>
                        </span>
                    </button>
                </div>

                <div class="support_finder_form_submit_wrap_item is_reset">
                    <input type="reset" class="support_finder_form_reset_btn" value="Reset Selections">
                </div>
            </div>
        </div>
    </div>
</form>
 
<form action="#" method="POST" class="support_finder_form is_type_{{ type|default('block') }}">
	<div class="support_finder_form_header">
		<h3 class="support_finder_form_title">
			{{ title }}
		</h3>
	</div>

	<div class="support_finder_form_rows">
		<div class="support_finder_form_row">
			<label class="support_finder_form_label">
				<div class="support_finder_form_label_text">
					I want to learn more about
				</div>

				<div class="support_finder_form_content">
					<div class="support_finder_form_select_wrap">
						<select class="support_finder_select" name="learn_about">
							<option value="" selected>All Types</option>
							{% for option in i_want_to_learn_options %}
								<option value="{{ option }}">{{ option }}</option>
							{% endfor %}
						</select>
						<span class="support_finder_form_select_icon">{{ icon('expand') }}</span>
					</div>
				</div>
			</label>
		</div>

		<div class="support_finder_form_row">
			<fieldset class="support_finder_form_fieldset">
				<legend class="support_finder_form_legend">
					<div class="support_finder_form_label">
						<div class="support_finder_form_label_text">
							For
						</div>
					</div>
				</legend>

				<div class="support_finder_form_content">
					<div class="support_finder_form_checkbox_list">
						{% for option in for_options %}
							<label class="support_finder_form_checkbox_list_item">
								<input type="checkbox" class="support_finder_form_checkbox_list_input" name="for" value="{{ option }}">
								<span class="support_finder_form_checkbox_list_label">{{ option }}</span>
							</label>
						{% endfor %}
					</div>
				</div>
			</fieldset>
		</div>

		<div class="support_finder_form_row">
			<fieldset class="support_finder_form_fieldset">
				<legend class="support_finder_form_legend">
					<div class="support_finder_form_label">
						<div class="support_finder_form_label_text">
							Show me
						</div>
					</div>
				</legend>

				<div class="support_finder_form_content">
					<div class="support_finder_form_checkbox_list">
						{% for option in show_me_options %}
							<label class="support_finder_form_checkbox_list_item">
								<input type="checkbox" class="support_finder_form_checkbox_list_input" name="show_me" value="{{ option }}">
								<span class="support_finder_form_checkbox_list_label">{{ option }}</span>
							</label>
						{% endfor %}
					</div>
				</div>
			</fieldset>
		</div>

		<div class="support_finder_form_row is_submit">
			<div class="support_finder_form_submit_wrap">
				<div class="support_finder_form_submit_wrap_item is_submit">
					<button type="submit" class="button_link">
						<span class="button_link_inner">
							<span class="button_link_label">
								Show Me Results
							</span>
						</span>
					</button>
				</div>

				<div class="support_finder_form_submit_wrap_item is_reset">
					<input type="reset" class="support_finder_form_reset_btn" value="Reset Selections">
				</div>
			</div>
		</div>
	</div>
</form>

No notes defined.