Feedback button: How to make further changes to its CSS code?

While I like the Blogger Feedback button that I added, it doesn't have much in the way of customization and at least some of the customization choices don't seem to have much effect of how the button looks.  For example, I've tried changing the type, height, and width without noticing any apparent differences.  I would appreciate more control over how the button looks, such as being able to change or add font family, borders, border radius and other display options, even though I'll still use it even if it this doesn't happen.

<div_prefs href="http://workingestman.blogspot.com/p/contact-2.html" data-mce-href="http://workingestman.blogspot.com/p/contact-2.html" id="div_prefs">

To my understanding you are suggesting and requesting more customization options for the Feedback Button Code which you are using on Blogger.

It's possible to change the color, font, and such but I know those options are a bit limited and it seems you are asking for much greater control over it. So I have opened a feature request for this on your behalf for our developers to consider adding more options into our Feedback Button Customization Options.

However, I would like to point out as an alternative you can easily do most of that by manually editing the feedback code.

 

Example Original:

<script src="//d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.2.6885" type="text/javascript">

  new JotformFeedback({

     formId : "51164195447155",

     buttonText : "Feedback Blogger Test",

     base : "http://jotform.us/",

     background : "#F56B02",

     fontColor : "#FFFFFF",

     buttonSide : "bottom",

     buttonAlign : "center",

     type : 2,

     width : 700,

     height : 500

  });

 

</script>

 

Example Screenshot of Original:

 

Example Modified:

<script src="//d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.2.6885" type="text/javascript">

  new JotformFeedback({

     formId : "51164195447155",

     buttonText : "Feedback Blogger Test",

     base : "http://jotform.us/",

     background : "#0202F5",

     fontColor : "#FFFFFF",

     fontFamily    : "Impact",

     buttonSide : "bottom",

     buttonAlign : "center",

     type : 2,

     width : 500,

     height : 500

  });

</script>

 

Example Screenshot of Modified:

 

Here's what I added into the Modified Feedback Code:

I used the Background Element to change the button color. There is actually an option for this.

background : "#1E02F5",

I also added in a Font Family Element that wasn't originally there to change the font type.

fontFamily : "Impact",

You can also adjust the size of your feedback button with the the Height and Width. This is apart of the options for customization as well.

     width : 500,

     height : 500,

 

What I didn't find was the Font Family Type, Borders, Curvature, and other related styling methods.

However, it is likely that all of those are probably manually possible to add in to it with a couple of other customizations similar to how I manually added in the Font Family Type if you wish or have the knowledge to modify the current programmed script though I am aware that you want this simplified. But, please be advised that this is using Javascript so if there are any existing scripts running on your site already using something like it then this may cause it to break and|or not work properly.

 

Default properties:

buttonText   : "Contact",
background  : "#c66",
fontColor     : "#fff",
buttonSide    : "left",
buttonAlign   : "top",
type            : false,
width           : 500,
height          : 800,

The last three (type, width, and height) seem to make no change in the appearance of the button when I change their value.

 

Other properties I've tried:

fontFamily         : "Verdana",
fontSize : "32px",
border : "thick solid #fff",
borderBottomLeftRadius : "0",
fontWeight : "900",
textShadow : "1px 1px 0 #000000",
textAlign : "justify",
padding : "5px 1px 5px 6px",
outline : "5px dotted green",
direction : "rtl",
top : "10px"

Of these, only the first two seem to make any difference in the appearance of the button.  I'm just wondering if it's something I'm doing wrong or some limitation beyond my control.

 

Thanks for all your help so far.

<div_prefs id="div_prefs">

All of the CSS codes should work on it and further more, you could also use the ID of the form to create custom CSS that you would add on the page.

For example from the code mentioned by my colleague Kade above, we only need form ID:

  new JotformFeedback({

     formId : "51164195447155",

     buttonText : "Feedback Blogger Test",

The reason why we can use that is because the element holding the style has its ID structured as so:

jotform-feedback-{formID} which in our case would be jotform-feedback-51164195447155

This means that CSS rule such as this one:

a#jotform-feedback-51164195447155 {
   color: red;
}

would make our link text color red.

Do try it out for size and let us know how it goes.

Basically if it is working for you like this - you know the CSS code and how to change it, you can style it any way you wish, but please note that you will need to Form ID of your own form that you are styling the link for.

Here's what I finally came up with:

#jotform-feedback-51151299781157{
font-family: Arial !important;
font-size: 18px !important;
background: linear-gradient(#300 15%, #600 30%, #900 45%, #c00 47%, #f00 49%, #f00 51%, #c00 53%, #900 55%, #600 70%, #300 85%) !important;
border-right: 1px solid #c33;
border-left: 1px solid #c33;
border-bottom: 1px solid #c33;
height: 24px;
width: 58px !important;
padding: 0;
position: fixed !important;
left: 18px !important;
top: 0 !important;
border-radius: 0 !important;
text-align: center !important;
vertical-align: middle !important;
padding-left: 10px !important;
margin-bottom: 50% !important;
padding-bottom: 2px !important;
}

A couple of notes:

1) For some reason, the button seems to only accept the non-web fonts.  Web fonts will show up in the preview, but not on the page.  This seems to be a restriction on other widgets as well though (e.g., the weather widget I have on my blog from showmyweather.com) and not just the JotForm button.  Otherwise, I probably would have used a different font than Arial.

2) If you don't see the button at first, try scrolling down and looking at the top left of the screen.  It's purposely "camouflaged". which I thought was a nice effect (unless and until Blogger comes up with a way to directly link to the form using a static page button, that is),

Glad to see you found a way to achieve what you wanted.

Regarding the webfonts you can try adding it as illustrated in the code below

(If fonts are hosted on your server)

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
To utilize the font as called above use it like this
body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

If fonts are hosted online e.g goggle fonts use the folowing code)

@import url(//fonts.googleapis.com/css?family=Open+Sans);

To use the fonts call it within the selector you want to apply like this

body {
  font-family: 'Open Sans', sans-serif;
}