Styling the Web Forms Submit Button -...

Jan 12th, 2017 at 09:02 AM
User 2349793 Photo

Tom
Registered User
18 posts

I hope that this is a simple one. I had originally submitted this to support but since it was a coding issue they suggested I ask here on the forums.

A bit of background. I am trying to put together a small site to support a part-time consulting business I am starting. Retirement is a bit boring, especially in the winter here in Ohio.

I am using Wordpress running on Godaddy. I wanted to get the framework put together before I flushed out the content.

The problem I am having is I am trying to style the Submit button on my Contact Web Form to look like the rest of the buttons on my site. The page where the Web Form is loaded is https://tcconsulting.info/contact.. The button style I am looking for is on the Home and Services pages.

I created a submitbutton.css and I stored it in the same folder as default.css on the server.

Whatever I try to do, I am not getting the CSS to effect the style of the button.

I first added a Link to the new stylesheet in the generated ContactForm.html. When I got no results, I used the Chrome inspect and was able to determine the the submitbutton.css resource was loading.

I then added the "! important" property to each element in my CSS file. This had no effect.

Finally, I added an @import directive at the end of the default.css file. Again I could determine that the resource was loading.

I'm stumped at this point. Any hints would be appreciated.

Here is the css I am trying to use.

Thanks in advance for your advice.

/* Style the SUBMIT button to match the rest of the site */

#fb-submit-button a {
-ms-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
font-size: 1.1em !important;
padding: 1em 2em !important;
background: #ba0000 !important;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#870000),color-stop(1,#ba0000)) !important;
background: -ms-linear-gradient(bottom,#870000,#ba0000) !important;
background: -moz-linear-gradient(center bottom,#870000 0%,#ba0000 100%) !important;
background: -o-linear-gradient(#ba0000,#870000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba0000', endColorstr='#870000', GradientType=0) !important;
border: 1px solid !important;
border-color: #780000 #6e0000 #5e0000 #6e0000 !important;
color: #ffffff !important;
-webkit-border-radius: 0.5em !important;
-moz-border-radius: 0.5em !important;
border-radius: 0.5em !important;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065) !important;
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065) !important;
text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

#fb-submit-button a:hover {
font-weight: 800 !important;
text-decoration: none !important;
background: #c40000 !important;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#910000),color-stop(1,#c40000)) !important;
background: -ms-linear-gradient(bottom,#910000,#c40000) !important;
background: -moz-linear-gradient(center bottom,#910000 0%,#c40000 100%) !important;
Jan 12th, 2017 at 09:53 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

Have you tried putting that code into a new stylesheet? I would create one called custom.css and add the above code there, then put the <link rel="stylesheet" href="css/custom.css"> in the header. Of course correct the bolded part to where you uploaded your file too.

I say this because everytime you export the form again it will overwrite any changes you made to the existing css files.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Jan 12th, 2017 at 09:58 AM
User 2349793 Photo

Tom
Registered User
18 posts

It is already in a separate file called submitbutton.css. It is loaded in the same folder as the default.css. I have tried both linking to the file in the html and importing it from default.css. Chrome shows that the resource submitbutton.css is being loaded but it isn't having any effect.

I guess my next thing is to test just putting the code at the bottom of default.css to see if that might work but as you said, that will become a maintenance headache.
Jan 12th, 2017 at 11:24 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,188 posts

Try altering your css to include targeting the form.
#docContainer #fb-submit-button a {


}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jan 12th, 2017 at 12:30 PM
User 2349793 Photo

Tom
Registered User
18 posts

Eric

Thanks so much. That got me part of the way there. The initial button state is now being styled. The CSS I used was as you suggested:

#docContainer #fb-submit-button {
-ms-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
etc...
}


Now I just need to get the hover to work :)

I have tried all of these combinations:


#docContainer #fb-submit-button a:hover {
etc...
}
&
#fb-submit-button a:hover {
etc...
}
&
#docContainer #fb-submit-button hover {
etc...
}
&
#fb-submit-button hover {
etc...
}


Thanks again
Jan 12th, 2017 at 07:28 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,188 posts

I think the hover for the submit button is done with JQuery.You may need to change the ID of the submit button to keep it from overriding your css.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jan 13th, 2017 at 03:15 AM
User 1948478 Photo

Per
Senior Advisor
1,850 posts

Tom wrote:

Now I just need to get the hover to work :)

I have tried all of these combinations:


#docContainer #fb-submit-button a:hover {
etc...
}
&
#fb-submit-button a:hover {
etc...
}
&
#docContainer #fb-submit-button hover {
etc...
}
&
#fb-submit-button hover {
etc...
}

The hover works with CSS alone, but you have a colon missing.
Use this:
#fb-submit-button:hover {
etc...
}

(The key is to remove the "a" and, instead, associate the pseudo class with the button id, since there is no "a" defined for the button in the HTML.)
Per
www.mingas.com
Jan 13th, 2017 at 06:05 AM
User 2349793 Photo

Tom
Registered User
18 posts

Eric, Per, Steve, thank you so much. Removing the "a" and the missing colon did the trick for the hover.

I did take things a bit further though and used the Web Form HTML element to over-ride the CSS. I figured that way I would not have to edit the Form.HTML file on my server to link to MY custom CSS every time I changed the form.

Works like a champ.

Thanks again.
Jan 13th, 2017 at 08:43 AM
User 2349793 Photo

Tom
Registered User
18 posts

Update: The CSS changes made DO work when linked to from the form.html. However I was premature stating that using the HTML element in Web Forms worked. It appeared to work but I believe that was due to the cache from the "linked" implementation still being around. When I went to test on IE, Firefox and my mobile, I discovered it was not working using the HTML element.

I went back and reimplemented linking in the HTML file. All is good.

I imagine I could get the HTML element to work but I have spent too much time on this button as its is.

Thanks again for all of the help.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.