Styling RegistrationMagic Form

Resolved Presson
(@pressonforlife)

11 months, 2 weeks ago

This is a Page ( https://fodwalker.com/sign-in ) where I have a RegistrationMagic Form.

I am trying to style the Form, and I have followed your Documentation here ( https://registrationmagic.com/knowledgebase/form-style/) and here ( https://registrationmagic.com/knowledgebase/design/), but I still can’t figure out what to do.

What I need is simple: I need my:

a.) Form Label to be Grey colour, and Placeholder Asterisk to be 16px.

a2.) In another instance, I need the Form Labels to be hidden, or the Form Fields should not have Labels.

I tried to remove all the Labels, but then, it refuses to save. So How can I have Forms without Form Labels ?

b.) Form field background should be white, and Form field Placeholder colour should be grey.

c.) Submit button Background colour should be grey.

Please, how can I achieve all these ?

Even if it has to be done by Custom CSS, I won’t mind: I will only appreciate it, if you can also send me the Custom CSS to help me achieve all these ( if Custom CSS is the only available way ).

Regards.

Viewing 1 replies (of 1 total)

Plugin Support

(@registrationmagicsupport)

Thank you for reaching out. Based on your requirements for the RegistrationMagic form on this page: https://fodwalker.com/sign-in, below is the custom CSS that will help you achieve the exact look you’re aiming for.

You can add this CSS to your WordPress site by navigating to:
Appearance → Customize → Additional CSS (or in your theme’s stylesheet if you’re managing it directly).

✅ a.) Form Label Color + Asterisk Font Size

/* Make form label text gray */ .rmformui .rmform-row .rmform-field label.rmform-label {color: gray !important;} /* Make required asterisk (*) 16px */ .rmformui .rmform-row .rmform-field .rmform-label sup.rmform-req-symbol,.rmformui .rmform-row .rmform-field .rmform-label span.rmform-req-symbol {font-size: 16px !important;}

✅ a2.) To Hide Form Labels (Optional Alternative Layout)

If you want a form without visible labels (useful when placeholders are descriptive enough):

/* Hide all form labels */ .rmformui .rmform-row .rmform-field label.rmform-label {display: none;}

Note: You don’t need to remove labels from the backend; just use this CSS to hide them visually. This keeps the form functional and accessible.

✅ b.) Form Field Styling

/* Make input fields white with grey placeholder text */ .rmformui .rmform-row .rmform-field input,.rmformui .rmform-row .rmform-field textarea {background-color: #fff !important; color: gray !important;} /* Placeholder text color */ .rmformui .rmform-row .rmform-field input::placeholder,.rmformui .rmform-row .rmform-field textarea::placeholder {color: gray !important; opacity: 1; /* Ensure full visibility in all browsers */}

✅ c.) Submit Button Styling

/* Change submit button background to gray */ .rmformui #rm_form_submit_button input[type='button'],.rmformui #rm_form_submit_button input[type='submit'] {background-color: gray !important; color: white !important; /* Optional: make text visible on gray */}

Viewing 1 replies (of 1 total)

The topic ‘Styling RegistrationMagic Form’ is closed to new replies.