Meta Box

How to customize appearance of front-end user submission form using Kadence

Support › MB Frontend Submission › How to customize appearance of front-end user submission form using Kadence

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 11, 2025 at 12:09 AM #47636
    John ConnorJohn Connor
    Participant

    Hi!
    I created a good field group and assigned it to a custom post type. I also made a new page and in that page I entered the [Meta Box] Submission Form block in the gutenberg editor. Now the custom fields group shows up on the front-end nicely. At this moment users can enter submissions. Great!

    However, it does not look like the rest of my theme. For example, i would like the submit button to be placed on the bottom right, not bottom left. Or, what if I would like to stretch the button to be more wide? Or, if I would like to change the borders of the text areas, maybe add a shadow? In something like Fluent Forms Pro this is easy with the form designer. Here not so much.

    How would I approach this challenge?

    February 12, 2025 at 10:03 PM #47643
    PeterPeter
    Moderator

    Hello John,

    The frontend form block doesn't support options to customize the form like the builder. If you want to change the style of the submit button or other elements, you can create some custom CSS code to change the style.

    Thanks.

    February 13, 2025 at 11:52 PM #47653
    John ConnorJohn Connor
    Participant

    Ok, good to know. I would like to suggest customizing the form like the builder as a feature request for the Front-end User submission. Could you give me a little bit of a starter help on how to make the submit button to stretch out? What should I enter where? Should I use the style.css to style it? How can i point to the button specifically?

    Thank you.

    February 14, 2025 at 9:17 PM #47660
    PeterPeter
    Moderator

    Hello,

    Here is the sample CSS code to style the submit button

    button.rwmb-button {
    width: 100%;
}

    you can add it to the file style.css in the theme/child theme folder. See how it works https://imgur.com/rY2KIpM

    Note: we don't support customization code. If you are not able to complete it, we offer a customization service for an extra fee. Please contact us here https://metabox.io/contact/ for more details.

    February 17, 2025 at 11:04 PM #47673
    John ConnorJohn Connor
    Participant

    Thank you Peter. I have tried this with the submit button of the default Registration form,... but it isn't working.

    I have not changed the id of the submit button, either.

    Is there something special about the registration form that does not allow its submit button to be 100% width?

    February 17, 2025 at 11:23 PM #47674
    John ConnorJohn Connor
    Participant

    Hm. Trying also with various ai tools. but it isn't working. I'm using Kadence,... does that have something to do with it?

    When i hit f12, and then control shift c, and then click on the button of the registration form, it is says I am selecting button#submit.rwmb-button

    but also
    button#submit.rwmb-button {
    width: 100%;
    }

    Doesn't help. Also not if i do !important.

    Still in developer mode, when i click in the Styles tab, and then go under element.styles, and there i add width: 100%, it works. obviously until i refresh the screen... any ideas?

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.