Skip to content

Instantly share code, notes, and snippets.

@bengolder

bengolder/center-aligned_form---multiple_fields.html

Last active September 7, 2018 17:45
Show Gist options
  • Save bengolder/052773c0d58de1d203e61f986cb2ac8e to your computer and use it in GitHub Desktop.
Save bengolder/052773c0d58de1d203e61f986cb2ac8e to your computer and use it in GitHub Desktop.
Download ZIP
GCF 5.0 Layout HTML Sketches (doesn't yet include signpost or confirmation types)
Raw
center-aligned_form---multiple_fields.html
<!DOCTYPE html>
<html>
<head>
<!-- The title should just be the main question in the center-aligned form -->
<!-- If there are two questions, We define an explicit title -->
<title>Let's calculate your monthly income. | GetCalfresh.org</title>
<!-- When there are errors, prepend them -->
<title>We need you to fix 2 answers on this page. | Let's calculate your monthly income. | GetCalfresh.org</title>
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<!-- Just the header for the site includes home link and spanish link -->
<div class="toolbar">
<div class="toolbar__left">
<div class="main-header__title">
<a class="main-header__logo" href="/en">GetCalFresh.org</a>
</div>
</div>
<div class="toolbar__right">
<a class="toolbar__item text--small" href="?new_locale=es">En Español</a>
</div>
</div>
</header>
<div class="slab">
<div class="grid">
<div class="grid__item width-five-sixths shift-one-twelfth">
<form class="form-card form-card--simple">
<!-- hidden inputs -->
<div class="form-group">
<label for="">
<h1 class="form-question">What is your hourly wage?</h1>
</label>
<input type="text">
</div>
<div class="form-group">
<label for="">
<h1 class="form-question">How many <strong>hours a week</strong> do you work?</h1>
<p class="text--help">If this changes, give an average for the last 30 days.</p>
</label>
<input type="text">
</div>
<button type="submit">Continue</button>
</form>
</div>
</div>
</div>
</div>
<footer class="main-footer">
</footer>
</body>
</html>
Raw
center-aligned_form--yes_no.html
<!DOCTYPE html>
<html>
<head>
<!-- The title should just be the main question in the center-aligned form -->
<!-- If there are two questions, use the first -->
<title>Do you have a job? | GetCalfresh.org</title>
<!-- When there are errors, prepend them -->
<title>We need you to fix your answer on this page. | Do you have a job? | GetCalfresh.org</title>
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<!-- Just the header for the site includes home link and spanish link -->
<div class="toolbar">
<div class="toolbar__left">
<div class="main-header__title">
<a class="main-header__logo" href="/en">GetCalFresh.org</a>
</div>
</div>
<div class="toolbar__right">
<a class="toolbar__item text--small" href="?new_locale=es">En Español</a>
</div>
</div>
</header>
<div class="slab">
<div class="grid">
<div class="grid__item width-five-sixths shift-one-twelfth">
<form class="form-card form-card--simple">
<div class="form-group">
<h1 class="form-question">
Do you have a job?
</h1>
<p class="text--help">
Make sure to include self-employed work.
</p>
<button type="submit" value="true">Yes</button>
<button type="submit" value="false">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="main-footer">
</footer>
</body>
</html>
Raw
center-aligned_form.html
<!DOCTYPE html>
<html>
<head>
<!-- The title should just be the main question in the center-aligned form -->
<!-- If there are two questions, We define an explicit title -->
<title>What's your zip code in California? | GetCalfresh.org</title>
<!-- When there are errors, prepend them -->
<title>We need you to fix 2 answers on this page. | What's your zip code in California? | GetCalfresh.org</title>
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<!-- Just the header for the site includes home link and spanish link -->
<div class="toolbar">
<div class="toolbar__left">
<div class="main-header__title">
<a class="main-header__logo" href="/en">GetCalFresh.org</a>
</div>
</div>
<div class="toolbar__right">
<a class="toolbar__item text--small" href="?new_locale=es">En Español</a>
</div>
</div>
</header>
<div class="slab">
<div class="grid">
<div class="grid__item width-five-sixths shift-one-twelfth">
<form class="form-card form-card--simple">
<!-- hidden inputs -->
<div class="emoji emoji--big emoji--map"></div>
<div class="form-group">
<label for="">
<h1 class="form-question">What's your <strong>zip code</strong> in California?</h1>
<p class="text--help">If where you stay changes regularly, provide the zip code where you usually buy groceries.</p>
</label>
<input type="text">
</div>
<button type="submit">Continue</button>
</form>
</div>
</div>
</div>
</div>
<footer class="main-footer">
</footer>
</body>
</html>
Raw
left-aligned_form.html
<!DOCTYPE html>
<html>
<head>
<!-- The title should just be the main title in the form card header -->
<title>Let's get started. | GetCalfresh.org</title>
<!-- When there are errors, prepend them -->
<title>We need you to fix 2 answers on this page. | Let's get started. | GetCalfresh.org</title>
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<!-- Just the header for the site includes home link and spanish link -->
<div class="toolbar">
<div class="toolbar__left">
<div class="main-header__title">
<a class="main-header__logo" href="/en">GetCalFresh.org</a>
</div>
</div>
<div class="toolbar__right">
<a class="toolbar__item text--small" href="?new_locale=es">En Español</a>
</div>
</div>
</header>
<div class="slab">
<div class="grid">
<div class="grid__item width-five-sixths shift-one-twelfth">
<form class="form-card">
<!-- hidden inputs -->
<div class="form-card__header">
<h1 class="form-card__title">
Let's get started.
</h1>
</div>
<div class="form-card__content">
<div class="form-group">
<label for="calfresh_application_household_size">
<p class="form-question">How many people live in your household?</p>
<p class="text--help">
Only include spouses, children, parents, and people who you regularly buy food and make meals with.</p>
</label>
<div class="select">
<select class="select__element" name="calfresh_application[household_size]" id="calfresh_application_household_size">
<option value="1">Just me</option>
<option value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value="5">5 people</option>
<option value="6">6 people</option>
<option value="7">7 people</option>
<option value="8">8 people</option>
<option value="9">9 people</option>
<option value="10">10 people</option>
<option value="11">11 people</option>
<option value="12">12 people</option>
</select>
</div>
</div>
<div class="form-group"></div>
<div class="form-group"></div>
</div>
<div class="form-card__footer">
<button type="submit">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="main-footer">
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment