[Resolved] Style forgot password form submit button

[Author]

Posts

[nicolaS-3]

Hi
I am trying to style the Submit button of the forgot-password form created by the shortcode. I know the appropriate Avada classes, but I don't know how to apply them to this specific button that already has it's own basic class "button-primary".
For the other forms (login, etc) I simply grabbed the form HTML from the Inspector, added the code to a page, wrapping the button in divs with classes and it worked great, but with this one if I do it this way the message appearing after submitting the email (Please check your email) doesn't work as expected, it appears immediately. So I am trying to use the shortcode, but I can't style the button then.
Any clue ?
Thanks
Regrads,
Nicola

[Shane]

Hi Nicola,

You are using out Toolset shortcode to generate the forget form submit button?

Would you mind allowing me to have access to the page where this form is so that I can provide you with the exact classes that is needed?

THanks,
Shane

[nicolaS-3]

Hi Shane

this is the test page with the form generated by the shortcode (ignore the table below, it's a test page)
hidden link

this is the "real" page still with the form code and the button styled with Avada button style
hidden link
Code as follows:

<form name="forgotpasswordform" id="forgotpasswordform" action="<em><u>hidden link</u></em>" method="post">
			<div class="wp-success">Controlla la tua posta elettronica.</div>
			<p class="login-username">
				<div style="margin-bottom:1%"><label for="user_login">Nome utente o e-mail</label></div>
				<input type="text" name="user_login" id="user_login" class="input" value="" size="20">
			</p>
			
			<p class="login-submit">

				<div style="text-align:center;"><input style="border-radius: 10px;" type="submit" name="wp-submit" id="wp-submit" class="fusion-button fusion-button-default fusion-button-default-size" value="OTTIENI UNA NUOVA PASSWORD"></div>
				<input type="hidden" name="redirect_to" value="<em><u>hidden link</u></em>">
			</p>
			<input type="hidden" name="wpv_forgot_password_form" value="on"><input type="hidden" name="wpv_forgot_password_form_redirect_on_fail" value="<em><u>hidden link</u></em>"><input type="hidden" name="wpv_forgot_password_form_reset_password_url" value="">
		</form>

see Fusion classes manually added by me. This one looks good but message doesn't work like the other form.

Thanks
Regards
Nicola

[Shane]

Hi Nicola,

Thank you.

You can workaround this by adding this jquery to your site .

jQuery( ".login-submit input[name='wp-submit']" ).addClass( "fusion-button fusion-button-default fusion-button-default-size" );

If you have somewhere to add your custom javascript for the page you can use this and it will add the classes for the button to get the styling like your theme.

Please let me know if this helps.
Thanks,
Shane

[nicolaS-3]

Hi Shane,
Thanks for this solution, but like many other Toolset users I'm not a programmer and although I can play with HTML and CSS I am not confident with JS. I really don't know how to use this code. Is there any chance to make the other solution work ? I mean copy the form code I sent you above and make it work like the original form generated by the shortcode ? I am sure this solution could be interesting to all Toolset user, after all every site needs a forgot password form with a nice button ...
Thanks
Regards,
Nicola

[Christian Cox]

Hello, Shane is out this week on holiday so I'm checking in on his open tickets. I misunderstood the problem and thought you wanted to style the submit button of a CRED Form. Instead, you are trying to style the submit button of the Forgot Password form. Sorry for the misunderstanding. I do not recommend copy + pasting the HTML code of a forgot password form like this. It's prone to break in the future when the software is updated, and it does not add the required script and styles.

Unfortunately there is no direct way to modify the CSS classes applied to the submit button here other than using custom JavaScript as Shane mentioned. There is no attribute available for this shortcode that will modify the CSS classes: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-forgot-password-form

I'll be glad to help you set up the custom JavaScript on your site if you are uncomfortable using JavaScript. Please provide login credentials in the private reply fields here, and let me know where I can see the Forgot Password form on your site. I'll make the necessary adjustments and we can review them together.

I am sure this solution could be interesting to all Toolset user, after all every site needs a forgot password form with a nice button ...
That's a great idea, and I agree this would be a good feature. I encourage you to submit your request in our form for software improvements here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[Christian Cox]

Here is the updated code that also adds the border radius style:

<script>
jQuery(document).ready(function(){
  jQuery( ".login-submit input[name='wp-submit']" ).addClass( "fusion-button fusion-button-default fusion-button-default-size" ).css('border-radius','10px');
});
</script>

I added this code in a "Code block" element in the Avada Fusion Builder. Please see the screenshot here. You should be able to add the same code in a Code Block element on any page that contains the login form shortcode. Let me know if you have questions about that.

[nicolaS-3]

Hi Christian,
I managed to style the button applying your JS, thanks, although the button appears for one second in its raw format and then it gets styled by the JS. It's perceivable and looks quite bad to see .... but better than nothing! I hope you find a better solution someday (maybe talking to the WP developers ?) as these forms are an important piece of every WP website.
Thanks
Kind regards,
Nicola