Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Landing, submit, and confirmation page copy #115

Merged
merged 5 commits into from
Oct 2, 2024
Merged

Landing, submit, and confirmation page copy #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5baa533
Confirmation page
neilmb Sep 20, 2024
6cac3e1
New landing page content
neilmb Sep 20, 2024
ed4ad19
Submit copy
neilmb Sep 20, 2024
65dc1e1
Add CTA button on home page
neilmb Sep 26, 2024
d9732f5
Add hand-rolled javascript
neilmb Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions site/assets/js/question1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Conditional state handling for question1.html

if (document.readyState !== 'loading') {
attachRadioStateChangeHandlers();
} else {
window.addEventListener("DOMContentLoaded", function () {
attachRadioStateChangeHandlers();
// adjust the initial visibilty to match
adjustDynamicContent();
});
}

function attachRadioStateChangeHandlers() {
// need a listener on each radio input because un-checking a radio button
// doesn't fire the "change" event
document.getElementById("individual-organization").querySelectorAll("input").forEach((item) => {
item.addEventListener("change", adjustDynamicContent);
});
document.getElementById("organization-type").querySelectorAll("input").forEach((item) => {
item.addEventListener("change", adjustDynamicContent);
});
}

function adjustDynamicContent(event) {
// check if certain radio buttons are checked and decide whether to
// enable certain questions

var organization_radio_button = document.getElementById("organization");
if (organization_radio_button.checked) {
document.getElementById("organization-type").removeAttribute("disabled");
// form goes to question 2 for an org
document.getElementById("question1").setAttribute("action", "/question2/")
} else {
document.getElementById("organization-type").setAttribute("disabled", "");
// form goes straight to submit if they aren't submitting for an
// org
document.getElementById("question1").setAttribute("action", "/submit/")
}

// second dynamic question
var corporation_radio_button = document.getElementById("corporation");
if (organization_radio_button.checked && corporation_radio_button.checked ) {
document.getElementById("corporation-type").removeAttribute("disabled");
} else {
document.getElementById("corporation-type").setAttribute("disabled", "");
}

var agency_radio_button = document.getElementById("agency");
if (organization_radio_button.checked && agency_radio_button.checked ) {
document.getElementById("agency-type").removeAttribute("disabled");
} else {
document.getElementById("agency-type").setAttribute("disabled", "");
}
}
42 changes: 42 additions & 0 deletions site/assets/js/question2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// Conditional state handling for question1.html

if (document.readyState !== 'loading') {
attachRadioStateChangeHandlers();
} else {
window.addEventListener("DOMContentLoaded", function () {
attachRadioStateChangeHandlers();
// adjust the initial visibilty to match
adjustDynamicContent();
});
}

function attachRadioStateChangeHandlers() {
// need a listener on each radio input because un-checking a radio button
// doesn't fire the "change" event
document.getElementById("parent-company").querySelectorAll("input").forEach((item) => {
item.addEventListener("change", adjustDynamicContent);
});
document.getElementById("other-permits").querySelectorAll("input").forEach((item) => {
item.addEventListener("change", adjustDynamicContent);
});
}

function adjustDynamicContent(event) {
// check if certain radio buttons are checked and decide whether to
// enable certain questions

var permits_radio_button = document.getElementById("has-permits");
if (permits_radio_button.checked) {
document.getElementById("permit-numbers").removeAttribute("disabled");
} else {
document.getElementById("permit-numbers").setAttribute("disabled", "");
}

// second dynamic question
var parent_radio_button = document.getElementById("has-parent");
if (parent_radio_button.checked) {
document.getElementById("parent-info").removeAttribute("disabled");
} else {
document.getElementById("parent-info").setAttribute("disabled", "");
}
}
37 changes: 37 additions & 0 deletions src/confirmation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
layout: layouts/question.njk
title: Form summary
---

<h1>Confirmation</h1>

<p>Thank you! We have received your SF-299 and supporting documents.</p>

<h2>What happens next?</h2>

<p>A member of the Forest Service national broadband team will contact you to
help you complete your proposal.</p>

<p>After your proposal is complete,</p>

<ol>

<li>The proposal will pass through a screening process to check that it is
eligible for a special-use permit.</li>

<li>If the proposal is accepted, it will become an application. The
application will undergo additional review, such as environmental review, that
is specific to the proposed project and location.</li>

<li>If your application is approved, you will be issued a permit.</li>

</ol>

<p>How long this process takes depends on many factors, including the location
and complexity of your proposed project.</p>

<h2>Who can I contact for help?</h2>

<p>For help, contact the National Broadband Action Team at <a
href="mailto:[email protected]">[email protected]</a>.
</p>
191 changes: 49 additions & 142 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,145 +3,52 @@
title: USDA Forest Service E-Permits
---

<section id="forest-finder">
<section id="forest-finder-intro" class="dot-0 forest-hero">
<div class="forest-picker-hero">

<div class="forest-picker-callout">
<span id="skip-nav-target" tabindex="-1" class=
"callout-title">Choose Your Permit</span>

<p>The USDA Forest Service invites you to obtain
permits for select forest products now available
online, with more to come in the future.<br>
<br>
Get started by selecting your desired forest and
product.</p>

<div id="forest-finder-form">
<form novalidate="" name="forestPickerForm"
autocomplete="off" class=
"usa-forms ng-untouched ng-pristine ng-valid" id=
"forestPickerForm">
<input type="hidden" name="CSRFToken" value="not-a-random-nonce"/>
<span class="select-forest-label">Select your
forest</span>
<div class="dropdown-container">
<div tabindex="0" class="dropdown dropdown-input"
aria-label="Select your forest">
<svg alt="Menu Button" aria-hidden="true"
focusable="false" xmlns=
"http://www.w3.org/2000/svg" viewbox=
"0 0 24 24" class="value">
<path d=
"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z">
</path></svg>
</div><!---->
</div><span class="select-product">Select a
product</span>
<div class="dropdown-container disabled">
<div tabindex="0" class="dropdown dropdown-input"
aria-label="Select a product">
<svg alt="Menu Button" aria-hidden="true"
focusable="false" xmlns=
"http://www.w3.org/2000/svg" viewbox=
"0 0 24 24" class="value">
<path d=
"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z">
</path></svg>
</div><!---->
</div>
<div id="forest-finder-error" aria-live="assertive"
class="hidden">
<!---->
</div><input role="button" aria-label=
"Get Your Permit" id="forest-finder-submit" type=
"submit" value="Get Your Permit" disabled class=
"disabled">
</form>
</div>

</div>
<div class="welcome-callout usa-section-light">
<span>Welcome to Forest Service Special Forest Product
E-Permit Application</span>
</div>

</div>
</section>
</section>

<section id="home">
<h1 class="section-heading">How E-Permits Works</h1>

<div id="how-it-works">
<div class="step">
<div class="icon-and-step-name">
<div class="step-icon"><img src=
"assets/img/step-1.svg" alt=
"Step 1 icon"></div><span class="step-name">Step
1</span>
</div>
<div class="step-instuctions">
<span class="step-title">Find & Select Your
Forest</span> <span class="step-text">From this
homepage, select your forest and desired product to get
started.</span>
</div>
</div>

<div class="step">
<div class="icon-and-step-name">
<div class="step-icon"><img src=
"assets/img/step-2.svg" alt=
"Step 2 icon"></div><span class="step-name">Step
2</span>
</div>
<div class="step-instuctions">
<span class="step-title">Review Permit Details</span>
<span class="step-text">Read important information
about your permit before you obtain it.</span>
</div>
</div>

<div class="step">
<div class="icon-and-step-name">
<div class="step-icon"><img src=
"assets/img/step-3.svg" alt=
"Step 3 icon"></div><span class="step-name">Step
3</span>
</div>
<div class="step-instuctions">
<span class="step-title">Get Your Permit</span>
<span class="step-text">Complete your permit form, then
pay with Pay.gov using a debit card, credit card, or
check to purchase your permit.</span>
</div>
</div>

<div class="step">
<div class="icon-and-step-name">
<div class="step-icon"><img src=
"assets/img/step-4.svg" alt=
"Step 4 icon"></div><span class="step-name">Step
4</span>
</div>
<div class="step-instuctions">
<span class="step-title">Print Your Permit</span>
<span class="step-text">You will immediately be able to
view and print your permit, and will receive a
confirmation email to access your permit later.</span>
</div>
</div>
</div>

<h1 tabindex="-1" class="section-heading">What is E-Permits</h1>

<p class="section-paragraph what-is-e-permits">With E-Permits
you can obtain firewood permits for a few forests. More
forests and permits for items like berries and mushrooms will
be added over time.<br>
<br>
<a href= "/about">Visit 'About' to learn more</a></p><br>
<br>
</section>
<h1>Get started with special-use permits for broadband</h1>

<h2>This website will guide you through the process of initiating a proposal for a special-use permit.</h2>

<p>You will be asked to provide information about your broadband project. We
will use this information to help you complete and submit form SF-299, along
with additional documents that you will need to support your proposal.</p>

<a href="/question1/" class="usa-button">Start my application</a>

<h3>What happens after I submit the form?</h3>

<p>A member of the Forest Service National Broadband Team will contact you to help you complete your proposal.</p>

<p>After your proposal is complete,</p>

<ol>
<li>The proposal will pass through a screening process to check that it is eligible for a special-use permit.</li>

<li>If the proposal is accepted, it will become an application. The application
will undergo additional review, such as environmental review, that is specific
to the proposed project and location.</li>

<li>If your application is approved, you will be issued a permit.</li>
</ol>

<p>How long this process takes depends on many factors, including the location
and complexity of your proposed project.</p>

<p>You can find more information about this process on the <a
href="https://www.fs.usda.gov/specialuses/special_app_process.shtml">Forest
Service special-uses website</a>.</p>

<h3>Tips and reminders</h3>

<ul>

<li>The best way to help the proposal screening process move more quickly is to
provide complete and accurate information about your project.</li>

<li>The Forest Service advises that you do not begin work on any project that
requires a special-use authorization until a permit has been issued.</li>

</ul>

<h3>Who can I contact for help?</h3>

<p>For help, contact the National Broadband Action Team at <a
href="mailto:[email protected]">[email protected]</a>.</p>
25 changes: 22 additions & 3 deletions src/submit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,24 @@

<script type="text/javascript" src="/assets/js/formsummary.js"></script>

<h1>Your information so far</h1>
<h1>Review and submit</h1>

<p>Here is a summary of the information you have submitted so far:</p>
<h2>Review your information</h2>

<h3>SF-299</h3>

<p>We have entered the information you have share into SF-299, the official
form for initiating a proposal for a special-use permit.</p>

<p><a href="javascript:void(0);">Preview your completed SF-299</a></p>

To edit the form, use the navigation menus to return to your previous response.

<h3>Supporting documents</h3>

You have uploaded these supporting documents.

<div id="file-summary"></div>

<div id="form-summary">

Expand All @@ -19,6 +34,10 @@ <h1>Your information so far</h1>
<dt>Existing permit:</dt>
<dd data-field-key="existing-form-existing"></dd>

</ul>
</dl>

</div>

<form action="/confirmation/" method="get">
<input class="usa-button" type="submit" value="Submit your SF-299 and supporting documents"/>
</form>
Loading