How can I increase the size of feedback button ?

  • Profile Image
    mystrategie
    Asked on February 20, 2012 at 08:17 AM

    Hi,

     

    I would like to increase the size of the feedback button, 

     

    Do you know how to do ?

     

    Thank you

  • Profile Image
    NeilVicente
    Answered on February 20, 2012 at 07:20 PM

    To customize your feedback button's size, color, lightbox style, etc:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Choose Feedback option
    4.  Click the Customize button. This will bring up custom options for your button.

    5.  After customizing, copy the embed codes in the textarea above the custom options

     

    Hope you find this helpful.

  • Profile Image
    mystrategie
    Answered on February 21, 2012 at 07:24 AM

    Hi, Thank you.

    But my question was How to change the size of the button not to change the size of the form.

     

    Is it possible ?

     

  • Profile Image
    liyam
    Answered on February 22, 2012 at 01:58 AM

    Yes, it is possible by using CSS and placing the CSS code in your HTML page.

    The class name of the feedback button is jotform-feedback-link, now that you have the link you can simply adjust the padding of the button using CSS like this:

    .jotform-feedback-link {
         padding: 30px 100px !important;
     }

    The 30px is the width and 100px is the height.  It is also important to put !important so that it will override the inline style embedded in the generated button.

    If you have other questions or concerns, please do let us know.

  • Profile Image
    mystrategie
    Answered on February 22, 2012 at 04:27 AM

    Hi,

     

    Thank you,

     

    I am not an expert in css.

    So, could you add an exemple, to see where i should past .

     

    jotform-feedback-link {

         padding: 30px 100px !important;

     }


    Thank you very much,

     

  • Profile Image
    abajan
    Answered on February 22, 2012 at 05:52 AM

    Hi mystrategie

    The CSS should be placed in the head of the web page's source. Go to http://formdemos.awardspace.biz/formTemplate81.html and view it's source. (Right-click the page and when the menu pops up, click "View source" or some similar item.) The code my colleague provided can be seen near the top (between the head tags).

    Of course, other aspects of the feedback button can be styled as well. If you have Firebug and drill down to the Feedback button (hit [F12] > and click the "+" next to body and scroll down to the text highlighted in red near the bottom) you'll see the default styles for the button. I've formatted them differently below, for easier viewing:

    .jotform-feedback-link {
    -moz-transform: rotate(-90deg);
    padding: 7px 15px;
    position: fixed;
    right: 0pt;
    font-family: Verdana; /* Changed to capital "V" */
    font-size: 18px;
    color: rgb(255, 255, 255);
    background: none repeat scroll 0% 0% rgb(245, 146, 2);
    z-index: 999;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border-radius: 5px 5px 0pt 0pt;
    margin-right: -108.5px;
    top: 50%; margin-top: -41px;
    text-shadow: none;
    }

    Since the actual CSS of the button is inaccessible to users, overriding any of the declarations would require your inserting the altered declaration into the CSS rule in the head of the page and including the !important keyword. (This ought to work but I haven't tested it as yet.)

    I realize that to the unitiated this may seem like an awful lot to digest in one reading. Here's a link on CSS basics. (Be sure to view the three presentations near the bottom.)

  • Profile Image
    mystrategie
    Answered on February 28, 2012 at 05:20 AM

    Hi, 

    First Thank you,

     

    1 - I could modified the size of the button but, the Botton did not work (no pop up after i modified the size)

     

    2- Where should I add the !important ?

     

    Please, find bellow myoriginal  code 

    <a class="jotform-feedback-link" id="jotform-feedback-20452722135" style="-webkit-transform: rotate(-90deg); padding-top: 7px; padding-right: 15px; padding-bottom: 7px; padding-left: 15px; position: fixed; right: 0px; font-family: verdana; font-size: 18px; z-index: 999; cursor: pointer; text-align: center; text-decoration: none; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; margin-right: -150.5px; top: 50%; margin-top: -18px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 102, 0); color: rgb(255, 255, 255); text-shadow: none; background-position: initial initial; background-repeat: initial initial; ">Demande de Rappel GRATUIT</a>

     

     

    3- Can you add !important in my code.

    Then, i will just have to modifie the size and I will past it in my website.

    Thank you


    Cheers, 

     

     

     

     

  • Profile Image
    liyam
    Answered on February 28, 2012 at 08:08 AM

    You will need to place your CSS code in between the tags or in your own CSS file.  Creating a separate button will definitely not work as this button is automatically generated by JotForm's feedback form.

    example:

    <html>
    <head>
       <title>  title page here </title>
       <style type="text/css">
    .jotform-feedback-link {
         padding: 30px 100px !important;
     }  
       </style>
       </head>
       <body>
          page layout goes here
       </body>
       </html>

    The use of !important is to set the highest priority given to the CSS code.  So if you example have the same class:

       .class1 { padding: 0; }
        and
       .class1 { padding: 1px 2px !important; }

    The 2nd one that has "!important;" gets prioritized.  Also you can only place "!important" in the CSS file or the CSS declared on the header area.