зеркало из https://github.com/mozilla/protocol.git
Merge pull request #804 from craigcook/fractal-newsletter
Migrate newsletter form
This commit is contained in:
Reem H
GitHub
Коммит
a396a2c180
|
|
@ -0,0 +1,71 @@
|
|||
<style>
|
||||
/* Styles for visual demo only. Ordinarily these styles would be applied by a validation script. */
|
||||
.mzp-c-newsletter .mzp-c-form-errors,
|
||||
.mzp-c-newsletter .mzp-c-newsletter-details {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<aside class="mzp-c-newsletter">
|
||||
<div class="mzp-c-newsletter-image">
|
||||
<img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
|
||||
</div>
|
||||
|
||||
<form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
|
||||
<header class="mzp-c-newsletter-header">
|
||||
<h3 class="mzp-c-newsletter-title">Love the Web?</h3>
|
||||
<p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
|
||||
</header>
|
||||
|
||||
<fieldset class="mzp-c-newsletter-content">
|
||||
<div class="mzp-c-form-errors" id="newsletter-errors">
|
||||
<ul class="mzp-u-list-styled">
|
||||
<li>Please enter a valid email address.</li>
|
||||
<li>You must agree to the privacy notice.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email">Your email address</label>
|
||||
<input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true" value="not-an-email">
|
||||
</div>
|
||||
|
||||
<div id="newsletter-details" class="mzp-c-newsletter-details">
|
||||
{% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
|
||||
{% render '@select', { required: True }, true %}
|
||||
|
||||
<fieldset class="mzp-u-inline">
|
||||
<legend>Format</legend>
|
||||
<p>
|
||||
<label for="format-html" class="mzp-u-inline">
|
||||
<input type="radio" id="format-html" name="fmt" value="H" checked> HTML
|
||||
</label>
|
||||
<label for="format-text" class="mzp-u-inline">
|
||||
<input type="radio" id="format-text" name="fmt" value="T"> Text
|
||||
</label>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
<label for="privacy" class="mzp-u-inline">
|
||||
<input type="checkbox" id="privacy" name="privacy" required aria-required="true">
|
||||
I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/">this Privacy Notice</a>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="mzp-c-form-submit">
|
||||
<button type="submit" class="mzp-c-button" id="newsletter-submit">Sign up now</button>
|
||||
<span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
|
||||
<h3>Thanks!</h3>
|
||||
<p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<script src="{{ '/protocol/js/protocol-newsletter.js' | path }}"></script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<style>
|
||||
/* Styles for visual demo only. Ordinarily these styles would be applied by a validation script. */
|
||||
.mzp-c-newsletter .mzp-c-newsletter-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mzp-c-newsletter .mzp-c-newsletter-thanks {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<aside class="mzp-c-newsletter">
|
||||
<div class="mzp-c-newsletter-image">
|
||||
<img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
|
||||
</div>
|
||||
|
||||
<form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
|
||||
<header class="mzp-c-newsletter-header">
|
||||
<h3 class="mzp-c-newsletter-title">Love the Web?</h3>
|
||||
<p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
|
||||
</header>
|
||||
|
||||
<fieldset class="mzp-c-newsletter-content">
|
||||
<div class="mzp-c-form-errors" id="newsletter-errors">
|
||||
<ul class="mzp-u-list-styled">
|
||||
<li>Please enter a valid email address.</li>
|
||||
<li>You must agree to the privacy notice.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email">Your email address</label>
|
||||
<input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div id="newsletter-details" class="mzp-c-newsletter-details">
|
||||
{% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
|
||||
{% render '@select', { required: True }, true %}
|
||||
|
||||
<fieldset class="mzp-u-inline">
|
||||
<legend>Format</legend>
|
||||
<p>
|
||||
<label for="format-html" class="mzp-u-inline">
|
||||
<input type="radio" id="format-html" name="fmt" value="H" checked> HTML
|
||||
</label>
|
||||
<label for="format-text" class="mzp-u-inline">
|
||||
<input type="radio" id="format-text" name="fmt" value="T"> Text
|
||||
</label>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
<label for="privacy" class="mzp-u-inline">
|
||||
<input type="checkbox" id="privacy" name="privacy" required aria-required="true">
|
||||
I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/">this Privacy Notice</a>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="mzp-c-form-submit">
|
||||
<button type="submit" class="mzp-c-button" id="newsletter-submit">Sign up now</button>
|
||||
<span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
|
||||
<h3>Thanks!</h3>
|
||||
<p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<script src="{{ '/protocol/js/protocol-newsletter.js' | path }}"></script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
context:
|
||||
options:
|
||||
- text: Germany
|
||||
value: DE
|
||||
- text: France
|
||||
value: FR
|
||||
- text: India
|
||||
value: IN
|
||||
- text: Japan
|
||||
value: JP
|
||||
- text: Spain
|
||||
value: ES
|
||||
- text: United States
|
||||
value: US
|
||||
- text: And so on…
|
||||
value: ''
|
||||
variants:
|
||||
- name: Errors
|
||||
notes: An error summary can be shown at the top of the form.
|
||||
- name: Success
|
||||
notes: On a successful submission the form is hidden and a “thank you” message is shown in its place.
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<aside class="mzp-c-newsletter">
|
||||
<div class="mzp-c-newsletter-image">
|
||||
<img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
|
||||
</div>
|
||||
|
||||
<form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
|
||||
<header class="mzp-c-newsletter-header">
|
||||
<h3 class="mzp-c-newsletter-title">Love the Web?</h3>
|
||||
<p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
|
||||
</header>
|
||||
|
||||
<fieldset class="mzp-c-newsletter-content">
|
||||
<div>
|
||||
<label for="email">Your email address</label>
|
||||
<input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true">
|
||||
</div>
|
||||
|
||||
<div id="newsletter-details" class="mzp-c-newsletter-details">
|
||||
{% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
|
||||
{% render '@select', { required: True }, true %}
|
||||
|
||||
<fieldset class="mzp-u-inline">
|
||||
<legend>Format</legend>
|
||||
<p>
|
||||
<label for="format-html" class="mzp-u-inline">
|
||||
<input type="radio" id="format-html" name="fmt" value="H" checked> HTML
|
||||
</label>
|
||||
<label for="format-text" class="mzp-u-inline">
|
||||
<input type="radio" id="format-text" name="fmt" value="T"> Text
|
||||
</label>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
<label for="privacy" class="mzp-u-inline">
|
||||
<input type="checkbox" id="privacy" name="privacy" required aria-required="true">
|
||||
I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/">this Privacy Notice</a>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="mzp-c-form-submit">
|
||||
<button type="submit" class="mzp-c-button" id="newsletter-submit">Sign up now</button>
|
||||
<span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
|
||||
<h3>Thanks!</h3>
|
||||
<p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<script src="{{ '/protocol/js/protocol-newsletter.js' | path }}"></script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
The standard newsletter subscription form.
|
||||
|
||||
This example only provides the essentials of the form component. Making this
|
||||
subscription form fully functional requires some additional functionality.
|
||||
See the [Basket example](https://github.com/mozilla/basket-example/) for more.
|
||||
|
||||
- Some newsletters are only available in one language, so don’t require a
|
||||
language selection.
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 78 KiB |
Загрузка…
Ссылка в новой задаче