Instructions

Setting up a field:

Use a ‘Sonder Wrapper‘ block within a table cell, and add the class ‘email-field‘. Any text within the Sonder Wrapper will have the paragraph <p> stripped. The text will also serve as the default text in the main input field. Set the parameters using the data- HTML attributes below:

data-label: The label over the main text input

data-placeholder: The placeholder text in the main text input

data-url: The default text for the url input

data-url-placeholder: The placeholder text of the url input

You can copy the field below:

If your field has a label, ensure that the label and field are wrapped in a common parent with class ’email-field-wrap‘.

You can copy the labelled field below:

Outlook:

Applying width=”100%” as an HTML attribute can force column to take up remaining whitespace

Margins/padding, borders are ignored on spans, better to apply these to table cells

Break tags also allow for vertical white space between fields without the use of empty table cells:

Horizontal whitespace can be achieved with non-breaking-space:

 

Fonts:

font-arial, font-calibri, font courier, font-georgia, font-helvetica, font-lucida, font-tahoma, font-times, font-trebuchet, font-verdana