larva objects: o-email-capture-form.minimal

Available Variants

minimal prototype
o-email-capture-form README

o-email-capture-form is an object intended to collect emails via the ExactTarget API. It accepts an array of c-hidden-fields for this the Opted In and Date ExactTarget data.

Although it could be used to collect emails via other services, developers should consider creating project-level patterns for anything other than ExactTarget.

Also note that o-email-capture-form should not be used to provide an email input in a longer form – it should be used only when a form required a single input for an email.

This pattern is intended to go along with the EmailCapture larva-js package that will handle appending the input value to a success URL when the form is submitted.

Available configuraitons:

  • o-email-capture-form.minimal – This configuration shows the input as a single line, and the submit button as a small arrow to the right of the input.
o-email-capture-form Twig The markup file. 
<form class="o-email-capture-form lrv-js-EmailCapture {{ o_email_capture_form_classes }}" method="post" action="{{ o_email_capture_form_action_url }}" name="{{ o_email_capture_form_name_attr }}" target="_blank">

	<div class="o-email-capture-form__inner {{ o_email_capture_form_inner_classes }}">
		{% include "@larva/components/c-email-field/c-email-field.twig" with c_email_field %}
		{% include "@larva/components/c-button/c-button.twig" with c_button %}
	</div>


	<input type="hidden" name="__contextName" value="{{ o_email_capture_form_context_name_attr }}"/>
	<input type="hidden" name="__executionContext" value="Post" />
	<input type="hidden" name="__successPage" data-email-capture-success-url="{{ o_email_capture_form_success_url }}" value="" />

	{% for item in o_email_capture_form_hidden_field_items %}
		{% include "@larva/components/c-hidden-field/c-hidden-field.twig" with item %}
	{% endfor %}
</form>
o-email-capture-form.minimal JSON The data object for this pattern. 
{
	"o_email_capture_form_classes": "",
	"o_email_capture_form_context_name_attr": "FormPost",
	"o_email_capture_form_inner_classes": "lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center lrv-u-border-b-1 lrv-u-border-color-currentColor",
	"o_email_capture_form_action_url": "",
	"o_email_capture_form_button_text": "Sign up",
	"o_email_capture_form_name_attr": "email-capture-form",
	"o_email_capture_form_success_url": "",
	"c_button": {
		"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-display-inline-flex lrv-a-icon-after lrv-a-icon-arrow-right",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "lrv-a-screen-reader-only",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "Sign Up",
		"c_button_type_attr": "submit",
		"c_button_url": ""
	},
	"c_email_field": {
		"c_email_field_classes": "lrv-u-font-size-14 lrv-u-flex lrv-u-align-items-center",
		"c_email_field_label_classes": "lrv-u-padding-r-050 lrv-u-font-weight-bold lrv-u-whitespace-nowrap",
		"c_email_field_label_text": "Your Email",
		"c_email_field_input_id_attr": "",
		"c_email_field_input_name_attr": "",
		"c_email_field_input_placeholder_attr": "email@example.com",
		"c_email_field_input_classes": "lrv-u-background-color-transparent lrv-u-border-a-0 lrv-u-color-currentColor lrv-u-padding-a-050 lrv-u-font-size-14"
	},
	"o_email_capture_form_hidden_field_items": []
}