Layout and styling

Forms use the field layout of the edit screens, so the settings you make in a field group apply to its forms too.

Setting	Where	In forms
Width (12 columns)	Field → Width	Fields share a row until it is full, like on edit screens.
Label placement	Field group → Label Placement, or the form's `label_placement`	`top` (default) or `left` (label beside the field). The form's setting wins.
Instructions placement	Field group	Below the label, or below the field.
Tabs	Tab fields	One tab bar, like on edit screens.
Collapsible Section, Field Set	Layout fields	Same.

The form's HTML

<form class="cafe-form cafe-form--new-event" id="cafe-form-new-event" data-cafe-form="new-event" …>
	<div class="cafe-form__messages">…</div>
	<!-- hidden inputs: signed settings, nonce, submission key, honeypot -->
	<div class="cafe-scope cafe-fields cafe-form__post-fields">…title, content…</div>
	<div class="cafe-scope cafe-fields">…the field group's fields…</div>
	<div class="cafe-form__actions">
		<button type="submit" class="cafe-form__submit button button-primary">Submit</button>
		<span class="cafe-form__spinner"></span>
	</div>
</form>

States: .is-submitting while sending, .is-done after a create form saved (only the message stays). Messages: .cafe-form-message.is-success / .is-error. Field errors: .cafe-field.has-error with .cafe-field__error.

Styling

Give a form its own classes to style it: in PHP with css_class, or in CAFE → Forms → CSS Classes:

cafe_dynamic_form( [ 'id' => 'add-property', 'css_class' => 'property-form is-wide' ] );

.property-form { max-width: 720px; margin-inline: auto; }
.property-form .cafe-form__submit { width: 100%; }

Every form also has cafe-form and cafe-form--{id} (e.g. .cafe-form--add-property) and the ID cafe-form-{id}, so you can style one form without adding classes.

Field styles come from CAFE's field stylesheet and use the same CSS custom properties as edit screens (see Styling). Change them for forms only:

.cafe-form {
	--cafe-accent: #16a34a;
	--cafe-radius: 4px;
	--cafe-input-height: 44px;
}

The submit button has WordPress's button button-primary classes (many themes style them) and CAFE's .cafe-form__submit. Replace it with cafe_dynamic_form_submit_button.

Text above and below the fields

Text that belongs to the form only, not to the field group, so it does not show on edit screens: goes in intro_html and footer_html (in CAFE → Forms: Text Above The Fields and Text Below The Fields):

cafe_dynamic_form( [
	'id'          => 'add-property',
	'intro_html'  => '<h3>Sell your home</h3><p>Fill in the details and we will call you within a day.</p>',
	'footer_html' => 'We only use your data for this request. <a href="/privacy/">Privacy</a>',
] );

HTML is allowed like in posts (wp_kses_post(): headings, paragraphs, links, lists, images, no scripts); line breaks become paragraphs. The text is shown in .cafe-form__intro and .cafe-form__footer.

For text between fields, use a Message field in the field group (it also shows on edit screens).

Adding your own HTML

Before the fields: cafe_dynamic_form_before_fields
After the fields: cafe_dynamic_form_after_fields
Everything: cafe_dynamic_form_html

Layout and styling

#The form's HTML

#Styling

#Text above and below the fields

#Adding your own HTML

The form's HTML

Styling

Text above and below the fields

Adding your own HTML