Jump to main content

Newsletter signup

Work in progress

Vanilla's patterns are newly released and still evolving as we receive feedback.

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

25-75

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.

View example of the 25-75 newsletter signup

50-50

This variant consists of a 50-50 split, with title on the left, and description(s) with form on the right.

View example of the 50-50 newsletter signup

2-col

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.

View example of the 2-col newsletter signup

4-col

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.

View example of the 4-col newsletter signup

Newsletter block rule on smaller screens

The 2-col variant comes with a muted-rule on small screens.
Similarly, the 4-col variant comes with a muted-rule on both small and medium screens.
To hide this rule, you can pass hide_newsletter_block_rule.
The following example shows both 2-col and 4-col variants not having a muted rule on medium/small screens.

View example of the 2-col/4-col newsletter signup without a newsletter block-level rule on smaller screens

Jinja Macro

The vf_newsletter_signup Jinja macro can be used to generate a Newsletter signup pattern. The API for the macro is shown below.

Parameters

Name Required? Type Default Description
title_text Yes string N/A h2/h3 title text
  • h2 for '25-75', '50-50' variants
  • h3 for '2-col', '4-col' variants
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
  • Use 'default' for a default rule. This can also be used when the pricing block is a standalone section
  • Use 'highlighted' for a highlighted rule. This should be used when the pricing block is a standalone section
  • Use 'muted' for a muted rule. This should be used when the pricing block is a subsection and has other subsections before it
  • Use 'none' for no rule. This should be used when the pricing block is the first or only item in a subsection.
hide_newsletter_block_rule No boolean False Whether to hide the newsletter block rule on medium/small screens.
Only applicable to 2-col and 4-col variants
submit_btn_class No string 'js-submit-button' Additional classes added to form submit button

Slots

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
honeypot_fields No Hidden honeypot fields for spam prevention
col_1..X
  • X = 3, for '2-col'
  • X = 2, for '4-col'
 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.
  • In the 4-col variant, the newsletter block takes up 4 columns on large screens. This leaves space for two 2-column blocks, which can be populated with the `col_1` and `col_2` slots.
  • In the 2-col variant, the newsletter block takes up 2 columns on large screens. This leaves space for three 2-column blocks, which can be populated with the `col_1`, `col_2`, and `col_3` slots.
For more information, please see the new 4-4-8 column grid.

Import

Jinja Macro

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.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.