Button size and frames

Hi @elena189,

1) How can I change the button height and weight?

It’ll require using custom CSS to change height:

.forminator-button {
	height: 50px;
}

The above CSS can be added when you edit the form under Appearance > Custom CSS.

To change the weight, there is already a default feature under the “Appearance” tab as seen in the following screenshot:
https://i.imgur.com/ZQ0EaLt.png

2) How can I update a button frame that it should change color after clicking?

Did you mean to change the colour of the button or the border? There is already an option to change the colour in the “Appearance” tab under Colors > Custom.

Could we know did you check that option?

3) How can I change and adapt a captcha weight and locate it in the center of a form by using the desktop, tab and mobile versions? If you see my website in a mobile version, you can see that the captcha is moved on the right side.

It’ll require custom CSS to align captcha. However, could we know on which mobile device you are checking this? I gave a quick test on my Android mobile phone, and the captcha seems to be in the centre when checked.

You could also try switching to ReCaptcha v3, in that case, it would appear as an icon at the bottom of the page. Please check the following doc for more info about configuring v3:
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#google-recaptcha

Please do let us know how that goes. Have a nice day ahead.

Kind Regards,
Nithin

1) To change the weight, there is already a default feature under the “Appearance” tab as seen in the following screenshot:
https://i.imgur.com/ZQ0EaLt.png
– I mean, I need to change the button weight, not the button font weight. What CSS should I apply in this case?
What CSS should I use to locate the button in the center of my form? At the present time the button locates at the right side.

2) Did you mean to change the colour of the button or the border? There is already an option to change the colour in the “Appearance” tab under Colors > Custom.
– I mean the border of the button.

Could we know did you check that option?
– Yes, I checked this option, it changed the button colour before or after clicking.
But my question was about the border colour before or after clicking.

3) It’ll require custom CSS to align captcha. However, could we know on which mobile device you are checking this?
– I am checking it by using a mobile phone (Galaxy A5, Android): captcha V2.
I updated the captcha V3, and it is OK now.

HI @elena189

– I mean, I need to change the button weight, not the button font weight. What CSS should I apply in this case?
What CSS should I use to locate the button in the center of my form? At the present time the button locates at the right side.

Oh, you mean button width (as in “height and width” – size), right? I’m sorry for misunderstanding.

You would need CSS for this indeed. Assuming that the form in question is the one at the bottom of the page (right-most column of the footer), this should do the trick, including centering the button:

.forminator-button-submit {
	margin:0 auto;
	width:250px;
  display:block;
}

I used 250px width but you can adjust it of course to your liking. Make also sure to clear all cache on site/server after adding the code. If it doesn’t work, try this version

.forminator-button-submit {
	margin:0 auto!important;
	width:250px!important;
  display:block!Important;
}

– I mean the border of the button.

By default this button doesn’t have border but you can add it using CSS like this:

.forminator-button-submit {
	border:1px solid #FF0000;
}

This will set 1px thick solid red border but, again, you can adjust values to your needs.

Best regards,
Adam

1) I mean the border of the button.

CMS: WordPress
Theme: Astra

The below CSS code doesn’t work, do you have an another code to update border colors both before and after clicking?

.forminator-button-submit {
border:20px solid:#FF0000;
}

2) How should I change for 3 button locations within a form: right, center, left?

Hi @elena189,

1) I mean the border of the button.

I’m sorry but this is still not clear as the button on your form doesn’t have a border at the moment.
Are you trying to make it look like other buttons on your page, like this one for example:

View post on imgur.com

2) How should I change for 3 button locations within a form: right, center, left?

Are you referring to captcha field here, or the submit button?
I see only one button in your form so I’m not sure which 3 buttons are you referring to, can you elaborate this a bit more please?

Cheers,
Predrag

1) I’m sorry but this is still not clear as the button on your form doesn’t have a border at the moment.
Are you trying to make it look like other buttons on your page, like this one for example:

View post on imgur.com

– Yes, I am trying to make the button like as the screenshot above. What should I do?

2) Are you referring to captcha field here, or the submit button?
I see only one button in your form so I’m not sure which 3 buttons are you referring to, can you elaborate this a bit more please?
– I am referring to the submit button, as the only one.
I mean 3 ways/variants of the button location: right, or center, or left. Could you give me 3 CSS codes?

Hi @elena189

– Yes, I am trying to make the button like as the screenshot above. What should I do?

You can try this CSS:

.forminator-button.forminator-button-submit.btn-custom{
    background: transparent !important;
    border: solid 3px #b39573 !important;
    color: #b39573 !important;
}

.forminator-button.forminator-button-submit.btn-custom:active,
.forminator-button.forminator-button-submit.btn-custom:hover{
    border-color: #43403e !important;
}

– I am referring to the submit button, as the only one.
I mean 3 ways/variants of the button location: right, or center, or left. Could you give me 3 CSS codes?

You can do it modifying the margin:

/** Right side ( default ) **/
.forminator-ui.forminator-custom-form-1013.forminator-design--material .forminator-button-submit{
    margin: unset !important;
}

/** Center **/
.forminator-ui.forminator-custom-form-1013.forminator-design--material .forminator-button-submit{
    margin: 0 auto !important;
}

/** Left **/
.forminator-ui.forminator-custom-form-1013.forminator-design--material .forminator-button-submit{
    margin: unset !important;
    margin-left: auto !important;
}

Best Regards
Patrick Freitas

Hi @elena189

I hope you are doing well and safe!

We haven’t heard from you in a while, I’ll mark this thread as resolved.

Feel free to let us know if you have any additional questions or problems.

Best Regards
Patrick Freitas