I've applied some custom styles to a form submit button but cannot get those styles to show up on a mobile device. When I preview my style changes with a web inspector, it appears the styles are working correctly on the button.
But when I pull up a link to the same page on my iPhone the button styles are not the same at all.I'm wondering if the styles visible on my phone due to a conflicting CSS class or something else I haven't spotted?
Hey Lauren, Creating great looking forms for desktop will always be askew on iOS devices. iOS typically throws in their own "Rounded Corners" on buttons and other things. It inherits these from their own default styles. To fix it, in the CSS for .hs-button.large.primary try adding this code.
Hey @uzma to change the text on a button in a HubSpot form, you should have the option to do that using a form module on a HubSpot hosted page or in the form editor itself.
If you are in the form editor then just click on the form button and a panel will slide out from the left of the screen allowing you to change that text. This should also be for embedding the form on an external page. If you are using a HubSpot hosted page and on that page is a form module, then when you click on the form in the HubSpot page editor you will see the option to edit the form and that text on the button in the form options in the editor.
Hey Lauren, Creating great looking forms for desktop will always be askew on iOS devices. iOS typically throws in their own "Rounded Corners" on buttons and other things. It inherits these from their own default styles. To fix it, in the CSS for .hs-button.large.primary try adding this code.
I had the same issuse and that fixed almost all of it. but the color of the button is still being overwritten and wont change on a mobile device to the correct color. any ideas?
I am not entirely sure. Do you have a link to the button you are talking about? I can try to take a peek to see if I can come up with a way to override the default colors being set by the mobile devices.