🎨 Styling A Form: Colours, Buttons, Floating Labels And The Thank You Message

Every ResultsAiX form is a card with its own look, set per form in the builder, so one site can run a light contact form and a dark feedback form side by side. This guide covers the Style and After submit boxes, the defaults in Settings, and the colour scheme of the admin screens.

Where to find it:

Open a form in the builder. Style and After submit are the first two boxes in the settings column. Defaults for new forms, and the admin colour scheme, are in Settings, under Appearance.

The Style box:

• Accent color: one colour drives the button, the focus ring on boxes, ticked choices and lit stars. Click the swatch to pick it.
• Card theme: Light or Dark. A dark card keeps its light text and dark boxes on every theme and page builder, so it always reads clearly.
• Button style: Filled, Outlined, Gradient or Minimal.
• Button alignment: Left, Center, Right or Full width.
• Button text: the words on the button, for example Request my free quote. Left empty, it says Submit.
• Floating labels on text fields: the label sits inside the box, which keeps short forms compact.
• Google reCAPTCHA v3 on this form: see Spam Protection: Five Built In Layers, reCAPTCHA v3 And Akismet.

Three looks from the demo:

• Contact Us: light card, teal accent, Filled button on the left, Send message.
• Customer Feedback: dark card, light blue accent, Gradient button in the centre, Send feedback.
• Home Tips Newsletter: light card, Outlined button at Full width, floating labels, Send me the tips.

The After submit box:

• What happens: Show a thank-you message, or Redirect to a page.
• Thank-you heading: for example "Thanks, your quote request is in". Left empty it says Thank You!
• Thank-you message: a few friendly lines. Line breaks are kept, so you can write in short paragraphs.
• Redirect URL (when redirecting): the full address of the page to open, for example a thank you page with your next offer.

With a thank you message, the form is replaced by a panel with a tick, your heading and your message. Screen readers read it out. With a redirect, the visitor goes straight to your page. Either way the entry is saved, your emails go out and Mailer and WP Sync receive the lead.

Setting a redirect, step by step:

1. Create a thank you page on your site, for example yoursite.com/thanks-for-your-request/.
2. In the form's After submit box, change What happens to Redirect to a page.
3. Paste the page address into Redirect URL (when redirecting).
4. Click Save form, then send a test entry.

Defaults for new forms:

In Settings, under Appearance, Default form accent color and Default form card theme are used for every new form. Each form can change both in its own builder. Click Save settings.

The admin colour scheme:

Color scheme changes how the plugin's own admin screens look, not your forms. Leave it on Follow the ResultsAiX Hub to match your other ResultsAiX plugins, or pick one of nine schemes: WordPress Native, Clean White, Ivory Cream, Snow Light, Developer Dark, Midnight Blue, Ocean Blue, Sunset Warm and Rose Pink. The swatches under the dropdown are shortcuts. The screen previews your choice straight away; click Save settings to keep it.

How forms look on phones:

Half width fields stack into one column on a phone, choice options become large tap targets, and Full width buttons stretch across the screen. The live preview in the builder shows the desktop look; open the page on your phone to check the mobile one.

Writing your thank you message:

Good thank you messages answer the visitor's next question.

• When will I hear back? "One of our estimators will call you within one working day."
• Did it work? "Keep an eye on your inbox: we have sent you a copy."
• What if it is urgent? "If it is urgent, call us on 0161 496 0000."

Choosing a button style:

• Filled: a solid button in your accent colour. The clearest choice for most forms.
• Outlined: a border in your accent colour with matching text, which fills with colour when the mouse is over it. Lighter, good for a newsletter box in a footer.
• Gradient: a slightly larger button with a colour blend that starts from your accent colour. Stands out on a dark card.
• Minimal: underlined text in your accent colour, with no button shape. For forms where the button should not shout.

When to use a dark card:

Use Dark when the form sits on a dark section of your page, or when you want it to stand out from light content around it. The Northfield Renovations feedback form uses a dark card with a light blue accent and a centred Gradient button.

Redirect or message?

• A thank you message keeps the visitor on the same page, and is the quickest to set up.
• A redirect sends them to a page you designed: good for a next offer, a booking link or a download. The entry is saved before the visitor leaves.

Previewing changes:

Every change in the Style and After submit boxes shows in the Live preview under the builder a moment later, before you save.

Tips:

• Use your brand colour as the accent and keep the same button style across forms.
• Full width buttons work well on long forms and on phones.
• Keep the thank you message short and say what happens next, for example when you will call.
• Text and colours inside the card come from the plugin, so your form looks the same in any theme.