Styles and templates
A form has a style, picked in its Advanced tab, and each field can pick its own in the sidebar. Re:Maily style is the plugin’s own look. Inherit from theme loads no Re:Maily CSS at all, so the theme styles the form. A field’s Same as the form follows the form’s style.
Override a template
Everything Re:Maily prints around your fields is a template, and every file in the plugin’s templates/ folder can be replaced by a copy at the same path in your-theme/remaily/. A child theme’s copy wins over the parent theme’s. An add-on’s templates work the same way.
| Path | What it is |
|---|---|
form/{style}/response.php, style.css | The response box and the look of the form |
form/{style}/group.php | A group: the wrapper around its part of the form |
form/{style}/repeater.php | A repeated group: its rows, the template of a new row and the Add button |
form/{style}/repeater-row.php | One row of a repeated group, with its Remove button |
form/{style}/repeater-button.php | The Add and Remove buttons |
fields/{type}/{style}/field.php, style.css, script.js | What goes around one field type’s control |
fields/{kind}/{style}/… | The same for a group of types: input (text, email, URL, tel, number, date), choices (checkbox, radio) or payment (Stripe, PayPal). Every other type has a folder of its own, such as textarea or select. |
mail/html.php | The wrapper of HTML mails |
icons/{name}.svg | Icons Re:Maily prints |
preview/page.php | The page the editor’s Preview shows the form on |
A field.php gets $field (the field’s settings), $control (the input itself), $error (its error message), $choices (each option of a checkbox or radio, with its own input) and $form. Re:Maily builds the control with its name, ID, ARIA and validation attributes, so a template wraps it and never loses them.
The group and repeater templates get $attributes: the attributes the form’s script needs, ready and escaped. Print them on whatever element you use, and the rest of the markup is yours: <div<?php echo $attributes; ?>>. Each template’s header lists what it gets.
Add a style
A new folder is a new style. your-theme/remaily/fields/choices/pills/field.php adds a Pills style to checkbox and radio fields, and your-theme/remaily/form/compact/ adds a form style. The picker names the style after its folder; the remaily_styles filter changes the name. The folder’s style.css and script.js load only on pages where a form uses that style.
Turn the plugin’s CSS off
add_filter( 'remaily_default_styles', '__return_false' ); stops all of Re:Maily’s styles, or define REMAILY_DEFAULT_STYLES as false. The theme’s own copies still load. remaily_include_styles and remaily_exclude_styles narrow the list of styles offered, with * as a wildcard.
The Preview
The editor’s Preview renders the unsaved form on a bare page of your site, with your theme’s styles. To make it match your pages, add your context with remaily_render_args (classes on the form, here and on the site) and the remaily_preview_before, remaily_preview_after, remaily_preview_classes and remaily_preview_body_class hooks (a card around the form, an icon sprite, body classes). The page itself is templates/preview/page.php, which a theme can override like any other.
