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

This topic has 5 replies, 2 voices, and was last updated 3 days, 20 hours ago by John Connor.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 11, 2025 at 12:09 AM #47636

John 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?

Add New Note to this Reply

February 12, 2025 at 10:03 PM #47643

Peter
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.

Add New Note to this Reply

February 13, 2025 at 11:52 PM #47653

John 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.

Add New Note to this Reply

February 14, 2025 at 9:17 PM #47660
Peter
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.

Add New Note to this Reply
February 17, 2025 at 11:04 PM #47673

John 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?

Add New Note to this Reply

February 17, 2025 at 11:23 PM #47674

John 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?

Add New Note to this Reply
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.