• FORM DESIGN AND LAYOUT • SETUP GUIDE

How to Customize Input Fields and Labels

By Rivio Support Team
2 min read

What you will achieve in this guide

Follow this step-by-step documentation to configure custom B2B registration forms, approval workflows, and customer tagging.

EXPECTED SETUP TIME 5-10 Minutes
COMPATIBILITY All Shopify Themes & Plans
TECHNICAL DIFFICULTY Zero Code Required

Style Shopify application inputs with label size, input colors, focus color, borders, and corner radius.

Before you begin

Open the selected form’s Appearance settings for visual changes. Check every page and popup using that form, because the same saved appearance is reused. Keep a copy of existing Custom CSS before changing it.

Style the full input state

Input styling includes backgrounds, entered text, placeholders, borders, focus colors, and typography. Labels tell applicants what to enter; placeholder examples disappear once they type. Both need enough contrast to remain useful.

Inspect an empty field, a completed field, keyboard focus, and an error state on the actual storefront. Styling should clarify the question and correction path, not hide a label or make validation messages unreadable.

Set up this workflow

  1. Open the form Settings and select Appearance.

  2. Find the input and field-label styling controls.

  3. Set input background, text, placeholder, border, and focus colors.

  4. Choose label size and color, input text size, and corner radius.

  5. Review Fields layout and save the changes.

  6. Test empty, focused, and completed inputs on desktop and mobile.

Example

Use dark labels, a light input background, and a visible focus color. Test an empty field, entered text, and keyboard focus.

Expected result

Labels, placeholder text, entered answers, and focus state remain distinguishable.

Limits and important behavior

  • A subtle placeholder color should still be readable.
  • A focus color should make the selected field visible.
  • Wide blocks can span the full row even when half-width field layout is selected.

Troubleshooting and verification

If a style does not appear, reopen the saved Appearance settings and verify the page loads the same form slug. For clipping or excess width, check the containing theme section and Custom CSS as well as the form’s padding and field layout.

Screenshots to add

Screenshot placeholder: Capture the relevant app screen for “How to Customize Input Fields and Labels” after completing the setup. Show the controls used to open the form Settings and select Appearance. Add a second screenshot showing the result of this check: Test empty, focused, and completed inputs on desktop and mobile. Use dummy applicant details and mask any secrets.

Related guides