Support » Plugin: Forminator Payment, Quiz and Contact Form Plugin » button styles for back, next, submit

  • Resolved ratamatcat

    (@ratamatcat)


    I am content with Forminator’s styles but would like to modify the Back, Next, and Submit buttons so they are more like buttons used in other areas of my site.

    There isn’t a selector for these buttons in Forminator’s Custom CSS area (Edit form > Appearance > Custom CSS) so I’m not sure how to go about it.

    I notice that button colors can be changed (Edit form > Appearance > Colors) but also want the padding and a few other details tweaked.

    And can we add a fontawesome icon to the buttons. I see in Forminator’s admin interface icons are used with the text and they look great.

    thanks,

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    Hello @ratamatcat ,

    You can use a code inspector to check the classes of the elements in the forms.

    For buttons classes are:

    .forminator-button-back
    and
    .forminator-button-next

    for the submit button it’s:

    .forminator-button-submit

    And can we add a fontawesome icon to the buttons.

    If you have added fontawesome on the front end of the site, then you can use it in the buttons. In the Formintor backend we are using own set of fonts “wpmudev-plugin-icons”.

    kind regards,
    Kasia

    thanks Kasia,

    Got the styles successfully changed except for adding fontawesome.

    I’ve enqueued fontawesome in my functions.php, is that what you mean.

    Whenever I need I add their icon code to the html markup of the element directly, such as in a php template file, i.e.

    <button class=”button green”>Next <i class=”fas fa-arrow-right”></i></button>

    Can I use this approach and add this icon tag to the fontawesome button markup anywhere, or does it require a different approach

    thanks,

    Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    Hello @ratamatcat ,

    It’s not recommended to change plugin code, so I was thinking to use CSS for that:
    https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

    kind regards,
    Kasia

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.