CSS for form labels, field background & form border

  • Resolved swoolrich

    (@swoolrich)


    1 year, 11 months ago

    I want to alter the label font, and add a border to the Forminator form on this (and other) pages. I imported a Contact 7 form to create it, which is also on the page at present – this is a test website. I prefer the look of the Contact 7 form, but choose Forminator as it is undoubtedly easier for less technically minded people to work with.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    1 year, 11 months ago

    Hi @swoolrich

    Hope you are doing fine.

    You can try the following code to increase the label font size and adopt the same style as the CF7 form:

    .forminator-ui#forminator-module-2203.forminator-design--default .forminator-label { 
        font-size: 16px!important; 
        font-weight: 400!important; 
    }

    And for the border, include the code below:

    #forminator-module-2203 {
    border-style: solid;
    border-width: medium;
    border-color: #e2e8f0;
    padding: 15px!important;
}

    You can apply the same layout to other forms by adding the selectors with the corresponding form id as indicated below (for instance ids = 2204,2205, etc):

    #forminator-module-2203,
#forminator-module-2204,
#forminator-module-2205 {
border-style: solid;
border-width: medium;
border-color: #e2e8f0;
padding: 15px!important;
}

    Hope this information helps.

    Kind regards.

    Luis

    Thread Starter swoolrich

    (@swoolrich)

    1 year, 11 months ago

    Thanks, will try that next time I’m updating the site.

    Plugin Support Jair – WPMU DEV Support

    (@wpmudevsupport15)

    1 year, 11 months ago

    Hi @swoolrich,

    I hope you are doing well today!

    Please let us know how it goes on your tests, for now we are marking this thread as resolved. You can change its status and reopen if you need further help or the provided solution did not work for you.

    Have a good one!

    Kind regards,
    Zafer

    Thread Starter swoolrich

    (@swoolrich)

    1 year, 11 months ago

    I’ve got most of what I want. .forminator-guttenberg has applied the same border to every form in the site, .forminator-label has applied the same style to all labels in all forms, and .forminator-background and #forminator-textarea have applied the same background to all fields in all forms in the site.

    I’m left with wondering if there is another class and/or id that will apply the same style to the border for all input fields in all forms in the site. I’ve inspected and experimented without luck. I notice that the colour of the border changes, subtly, when the field has focus.

    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    1 year, 11 months ago

    Hi @swoolrich

    Please check Appearance Presets which will allow you to create own design and later on you will be able to use that style for all forms you have on site:
    https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#appearance-presets

    Kind Regards,
    Kris

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    1 year, 11 months ago

    Hello @swoolrich ,

    We haven’t heard from you for over a week now, so it looks like you don’t have more questions for us.

    Feel free to re-open this topic if needed.

    Kind regards
    Kasia

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS for form labels, field background & form border’ is closed to new replies.