Change Feedback button background with image

  • Profile Image
    estasporviajar
    Asked on July 15, 2013 at 11:05 AM

    Hello!

    I would consult if there is a possibility that the method of inclusion of the form "FeedBack" can be done with a background image instead of just color like today is?

    In addition, there is a tool that tells me that url was completed the form?

    I look forward to your prompt reply.

    Greetings!

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 12:20 PM

    Thanks for contacting us.

    Actually you can accomplish what you need by Injecting Custom CSS Code. Then you only need to grab the Feedback code method.

    To have an image as background insert the next CSS code to your form:

    .form-all

    {

    background-image:url('HERE THE IMAGE URL')

    }

    Please refer this guide to know how to inject custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Then just take the Feedback code. The form will look this way:

    I hope this helps.

    Thanks!

  • Profile Image
    estasporviajar
    Answered on July 15, 2013 at 01:08 PM

    Hello!

     

    Thank you for your prompt response.

     

    What I need to modify is the button that opens the form and not the form background.

     

    Let me know please?

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 01:34 PM

    Would yo ulike to modify the orientation of the button? Because that is possible by using the customize options:

     

    But if not, before opening a feature request ticket, I want to make sure if you want to change the background itself or the size of the button..

    We would appreciate your clear explanation about what you need to give you further assistance.

    Thanks!

  • Profile Image
    estasporviajar
    Answered on July 15, 2013 at 01:38 PM

    I need to change the background of an image Button specifically. The size and orientation is what I can give myself.

     

    Thank you very much.

  • Profile Image
    Welvin
    Answered on July 15, 2013 at 02:04 PM

    Hi,

    You can copy the codes from here: http://pastebin.com/gnFZErDu.

    1. Change the Form ID

    2. The Background Image URL

    3. Add the CSS to your Stylesheet (change the width and size - if needed).

     

    Let us know if you need any further assistance.

    Thanks

  • Profile Image
    estasporviajar
    Answered on July 15, 2013 at 02:29 PM

    HELLO

     

    THANKS FOR YOUR RESPONSE, I JUST DO ME CHANGE AND HAS NOT WORKED.

     

    I copy the code:

    <!--ACA COMIENZA LA VENTANA DE ASESORAMIENTO PERSONALIZADO-->

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.1060" type="text/javascript">

     new JotformFeedback({

        formId        : "21294230378957",

        buttonText    : "",

        base        : "http://jotformpro.com/",

        background    : "url(http://www.estasporviajar.com/images/IMG-ASES-1.png) no-repeat !important",

        fontColor    : "#FFFFFF",

        buttonSide    : "top",

        buttonAlign    : "right",

        type        : 1,

        width        : 600,

        height        : 421

      });

    </script>

    <!--ACA COMIENZA LA VENTANA DE ASESORAMIENTO PERSONALIZADO-->

     

    also, you can see at the following url through the source code.

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 03:20 PM

    I tested  your code and it is correct, you only need to add the Button Text.

    This is the code I used:

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.1060" type="text/javascript">

     new JotformFeedback({

        formId        : "21294230378957",

        buttonText    : "FEEDBACK BUTTON",    

        base          : "http://jotformpro.com/",

        background    : "url(http://www.estasporviajar.com/images/IMG-ASES-1.png) no-repeat !important",

        fontColor     : "#FFFFFF",

        buttonSide    : "top",

        buttonAlign   : "right",

        type          : 1,

        width         : 600,

        height        : 421

      });

     

    </script>

     

    Please add the text you prefer and try re-embeding it, and if that does not work, let us know.

    Thanks

  • Profile Image
    Welvin
    Answered on July 15, 2013 at 03:25 PM

    You have to add the style to show the Button Correctly.

    <style>

    .jotform-feedback-link{

    width: 150px;

    box-shadow:none !important;

    border:none;

    height:112px;

    }

    </style>


    The whole codes for your form:  http://pastebin.com/918N0yw1

     

    Thanks

  • Profile Image
    estasporviajar
    Answered on July 15, 2013 at 03:55 PM

    Now I check and notice you.

     

    Hug!

  • Profile Image
    estasporviajar
    Answered on July 15, 2013 at 04:00 PM

    Hello!

     

    I just checked and working properly. Except in FireFox and Explorer browsers takes me Mouse Style Over Grey shows me everything. It is possible to change this property so that when mouse continue displaying the image and not a color?

  • Profile Image
    jonathan
    Answered on July 15, 2013 at 06:42 PM

    Hi,

    I was able to see the issue when using Firefox.

     

    The workaround scripts provided by my colleagues probably needs some correction to negate this effect. We will get back to you as soon as we can with a fixed.

    Please stay tuned.

    Thanks.

  • Profile Image
    estasporviajar
    Answered on July 16, 2013 at 11:29 AM

    Perfect!

     

    I look forward to their news.

     

    Greetings!