Newsletter signup is a form which allows users to subscribe to a newsletter for updates.
The Newsletter signup pattern is composed of the following elements:
Element | Description |
---|---|
Title (required) | Title text (to be placed in h2 or h3 heading) |
- h2 for 50-50 and 25-75 variants |
|
- h3 for col-2 and col-4 variants |
|
Description (required) | Description text (one or more paragraphs) |
Label + input (required) | Single-line input field with label |
Label + checkbox (required) | Checkbox with a label |
Button (required) | Single default button |
This is the default variant. It consists of a 25-75 split, with title on the left, and description(s) with form on the right.
This variant consists of a 50-50 split, with title on the left, and description(s) with form on the right.
This variant can be used to add a newsletter block within a grid. Internally, it utilizes the new 4-4-8 column grid. The newsletter block itself takes 2 columns on large dimension (hence the name "2-col"), and 4 columns on both medium and small dimensions. For the other adjacent content in the grid, you can utilize col_1..X slots, each of which takes 2 columns on large dimensions, and 4 columns on both medium and small dimensions.
This variant is another option to add a newsletter block within a grid. Internally, it also utilizes the new 4-4-8 column grid. The newsletter block itself takes 4 columns on all dimensions (hence the name "4-col"). For the other adjacent content in the grid, you can utilize col_1..X slots, each of which takes 2 columns on large dimensions, and 4 columns on both medium and small dimensions.
The vf_newsletter_signup
Jinja macro can be used to generate a Newsletter signup pattern. The API for the macro is shown below.
Name | Required? | Type | Default | Description |
---|---|---|---|---|
title_text
|
Yes |
string
|
N/A
|
h2/h3 title text
|
input_label
|
Yes |
string
|
N/A
|
Label for the input field |
checkbox_id
|
No |
string
|
canonicalUpdatesOptIn
|
ID for the checkbox field, used for agreeing to something before submitting the form. This may vary based on the backend used to collect form responses. |
checkbox_label
|
Yes |
string
|
N/A
|
Label for the checkbox |
layout
|
No |
string
|
25-75
|
Variant of the newsletter signup pattern One of `25-75` , `50-50` , `2-col` , `4-col`
|
form_id
|
Yes |
string
|
N/A
|
The ID passed to the form element. For example mktoForm_XXXX
|
form_action
|
No |
string
|
https://ubuntu.com/marketo/submit
|
Action URL for the form submission, typically the form endpoint. |
return_url
|
Yes |
string
|
N/A
|
URL to return to after form submission |
top_rule_variant
|
No |
One of: 'default' 'highlighted' 'muted' 'none'
|
'default'
|
Variant of the top rule
|
Name | Required? | Description |
---|---|---|
description
|
Yes | Paragraph-style content. One or more paragraphs |
addendum
|
No | Additional content to include in the form, such as a disclaimer or additional information. Paragraph-style content |
hidden_fields
|
No | Additional hidden fields to include in the form |
col_1..X
|
Only for '2-col' and '4-col' variants
|
Content for the neighbouring columns in the grid. Only applicable to '2-col' and '4-col' layouts.
|
To import the Newsletter signup Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_newsletter-signup.jinja" import vf_newsletter_signup %}
View the building with Jinja macros guide for macro installation instructions.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.