The editor

Clicking a form in Contact Form → Contact Forms opens it in Re:Maily’s editor. The header has the form’s title and note, Copy shortcode and Save. Under it are the tabs Form, Mail, Messages and Advanced, then one for each add-on that adds one, with the Preview button at the end of the row. A dot on a tab means it has unsaved changes, and a warning sign means something there needs checking.

The Form tab

The form is plain HTML, and each field is a blue chip in it, such as [[your_name]].

• Drag a field button into the code to add a field. While you drag, thin lines mark the places it can go, and it lands at the marked place nearest the pointer.
• Drag a chip to move it. Its old place stays faded until you drop it.
• Double-click a chip to remove it from the form.
• Click a chip, or a name in the sidebar’s list, to change that field’s settings.
• A field can’t sit inside an HTML tag, as in <div clas[[name]]s>. Such a chip turns red and is named above the code; drag it between tags.
• Right-click a chip to duplicate its field (a copy with settings of its own) or remove it. Right-click inside a group to edit it or ungroup it, and on selected code to wrap it in a group.

The bar above the code shows the shortcode and has 2 Space and 4 Space to re-indent the code, Beautify HTML to tidy it, and Describe your form.

CSS and JavaScript of the form

HTML, CSS and JavaScript above the code switch what you edit. Both are saved with the form and load only on pages that show it.

• CSS styles this form and no other. Write selector for the form’s wrapper: selector .remaily-field { margin-bottom: 1rem; }.
• JavaScript runs once the form is ready, with root (the form’s wrapper) and form (the <form> element). Only people who may post any HTML on the site, usually administrators, can change it.

Preview

Preview opens the unsaved form in a window over the editor, with your theme’s styles. It reloads a moment after each change. Try the fields there as visitors would: the checks run, but nothing is sent. The gear on a field closes the window on that field’s settings. Escape, a click outside or the close button closes it.

Describe your form

Describe your form writes the whole form from a sentence: its fields, conditions, mail and messages. It uses the AI service connected to WordPress (Settings → Connectors, in WordPress 7.0 and later). Nothing is saved until you click Save, and Undo AI changes puts the form back as it was.

Saving

Save publishes the form. The arrow beside it has Save and publish and Save as draft; a draft stays off the site and shows a Draft badge by the title. Save is at the top and again at the bottom of the editor, next to Move to trash.

Keyboard shortcuts

The list is under the field list in the sidebar. On a Mac, Ctrl+Alt is ⌃⌥ and Ctrl is ⌘.

Shortcut	What it does
Ctrl+S	Save
Ctrl+Alt+P	Preview
Ctrl+Alt+D	Describe your form
Ctrl+G	Make the selected code a group
Ctrl+Alt+1 to 9	The tabs in order: Form, Mail, Messages, Advanced, then the add-ons’ tabs
Esc	Back to the field list

On a phone or a narrow window, the sidebar moves under the code.