- Documentation
Design Templates
The Forms → Design templates page lets you create reusable styles for HMDIA forms.
Instead of styling every form separately, you can create one template and assign it to one or more supported forms.
How Design Templates Work
A design template contains the visual styling of a form, while the individual form settings control its content and behavior.
For example, the Registration form controls its heading, fields and Terms settings, while its assigned Design Template controls how those elements look.
A single template can be used by multiple forms. If you edit that template, the forms using it receive the updated design automatically.
The number beside each template shows how many forms currently use it.
In the screenshot:
HMDIA Default is used by Registration and Login.
Contact Form is used by the Contact form.
Account is used by the Account page.
HMDIA Default Template
HMDIA Default is the built-in form design supplied with the plugin.
The built-in template cannot be edited directly.
Click Duplicate to create an editable copy. You can then customize the copied template and assign it to your forms.
This protects the original HMDIA design while still giving you a starting point for your own styles.
Add Template
Click Add template to create a new reusable design.
Give the template a name, customize its appearance, and then assign it from the Design template section of the Registration, Login, Account or Contact form.
Custom templates can also be renamed, duplicated or deleted when they are no longer needed.
Design Sections
Each template is divided into expandable styling sections.
Main Section
Controls the main form container, including its background, border, spacing, width and overall appearance.
Headings & Text
Controls the appearance of headings, subheadings and normal form text.
Labels
Controls the styling of field labels and related label text.
Input Fields
Controls the appearance of text fields, password fields, selects and other form inputs.
Checkboxes & Choices
Controls checkbox, radio and other choice-field styling.
Submit Button
Controls the main form button, including its background, text, border, spacing and hover appearance.
Links
Controls links such as Sign in, Create an account, and password-reset links.
Messages
Controls the appearance of form messages, including success, error and informational notices.
Click the + beside a section to open its settings.
Assigning a Template
Templates are assigned from the form you want to customize.
For example:
Forms → Registration form → Design template
Select the template you want that form to use.
The same process applies to the Login form, Account page and Contact form.
Preview
The preview on the right lets you see the selected template without opening the frontend of your website.
You can switch between:
- Registration
- Login
- Account
- Contact
You can also preview the design in desktop or mobile view.
This makes it easy to create one consistent design and check how it looks across different HMDIA forms before using it on your website.
