Form Submit Button styling

Develop, Build & Integrate CMS Development
1

Hi everyone-

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?

--------------------------------------------------------

The markup for my button styles is below:

.hs-button.primary, body input[type=“submit”] { position:relative; width:35%; background-color: #eb922d; border-radius:0px; border-style:none; color:#ffffff;
font-family:‘Merriweather Sans’, ‘Helvetica’, sans-serif;
text-transform:uppercase; letter-spacing:2px; margin-left:35%; margin-right:35%; text-align:center; padding:5% 5% 5% 5%; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }

.hs-button.large.primary {font-size:1.4em; margin:1% 1% 1% 35%; border-style:none; border-radius:0px;
background-color:#eb922d;
color:white;
font-family:‘Merriweather Sans’, ‘Helvetica’, sans-serif; margin-left:35%; margin-right:35%; padding:5% 5% 5% 5%;
font-weight:700;
text-transform:uppercase;
text-align:center; position:relative; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;}

@media only screen
and (min-device-width:320px)
and (max-device-width:600px){.hs-button.large.primary{ font-size: .6em; background-color: #eb922d; color: white;
font-family:‘Merriweather Sans’;
font-weight: 700;
text-transform: uppercase;
text-align: center; margin: 1% 35% 1% 35%;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}}

@media only screen
and (min-device-width:320px)
and (max-device-width:600px){.hs-button.primary, body input[type=“submit”] { width:35%; height:10%; font-size: .9em; background-color: #eb922d; color: white;
font-family:‘Merriweather Sans’;
font-weight: 700;
text-transform: uppercase;
text-align: center; margin: 1% 25% 1% 25%;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}}

2

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.

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Also for the border radius problem add this as well,

-webkit-border-radius: 0;
-moz-border-radius: 0;

I hope you make out well.

3

Hi Eric- Thanks so much for your help! I really appreciate it. It worked like a charm.

4

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?

5

Hey Jason,
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.

6

How can we change the submit button text in HubSpot forms? from “Submit” to “Request Quote”?

7

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.