Cards: Use custom button image on feedback form

  • Profile Image
    pinfor
    Asked on February 19, 2018 at 03:42 AM

    Hola

    Es posible de disponer de un icono de cita previa en "Floating FeedBack Button" para colocar en mi web. Le adjunto imagen de ejemplo para la Home.

    Muchas gracias1519029748CLOCK-icon-for-appointment.jpg

  • Profile Image
    aubreybourke
    Answered on February 19, 2018 at 09:51 AM

    Yes its possible.


    You need to edit the CSS for the anchor tag. For example:

    15190518799re8j.png


    Working demo:

    https://aubreythankyou.000webhostapp.com/Feedback-Icon.html

  • Profile Image
    pinfor
    Answered on February 19, 2018 at 11:10 AM

    Utilizo la plantilla DIVI y no soy experto en edición de código.

    Supongo que debo encontrar el HTLM dónde está alojado el código CSS de Jotform que me has pegado en tu respuesta, editarlo y cambiar el appointment-scheduling-icon.png de la linea Background-image: 


    Por favor ¿Me puedes guiar? 

  • Profile Image
    pinfor
    Answered on February 19, 2018 at 11:19 AM

    Este es el script generado que tengo colocado en el Widgets.¿Me puede enviar una linea de código en el el script para que yo coloque mi propio ICON? Gracias...

    <script src="https://form.jotformeu.com/cardforms/feedbackEmbedButton.min.js"></script> <script> new JF_FeedbackEmbedButton({ buttonText: "CITA", buttonFontColor: "#000000", buttonBackgroundColor: "#fff200", buttonSide: "Bottom", buttonAlign: "Right", buttonIcon: "questionMark", formId: 80375510762354 }); </script>

  • Profile Image
    Victoria_K
    Answered on February 19, 2018 at 12:34 PM

    Can you please share with us a webpage, where you want to add this button?

    In order to provide the correct code, it would be better to check what you already have there.

    We will wait for your reply.

  • Profile Image
    pinfor
    Answered on February 19, 2018 at 02:22 PM

    https://www.nutrikalia.com

  • Profile Image
    EltonCris
    Answered on February 19, 2018 at 03:50 PM

    Append this CSS code in the card form feedback embed code.

    <style type="text/css">

    .jfFeedbackButton {

        background-color: transparent;

        border-radius: none;

        padding: 0;

        max-width: 80px;

        height: 80px;

    }

    .u-questionMark {

        background-image: url(http://karenwarelaw.com/wp-content/uploads/2016/02/appointment-scheduling-icon.png) !important;

        background-repeat: no-repeat !important;

        background-size: 80px 80px !important;

    }

    .jfFeedbackButton-text {

        display: none;

    }

    .jfFeedbackButton-icon {

        width: 80px !important;

        height: 80px !important;

    }

    </style>

    Make sure to replace the image icon http://karenwarelaw.com/wp-content/uploads/2016/02/appointment-scheduling-icon.png found in the above code with your image icon.

    Demo: https://shots.jotform.com/elton/feedback_cardForm.html

    If you have more questions, let us know.

  • Profile Image
    pinfor
    Answered on February 20, 2018 at 02:57 AM

    Estupendo!

    Este código puedo colocarlo en el witgets de WordPress junto al script para que sustituya al icono (? CITA) que tengo en el pie de nutrikalia.com

    Muchas Gracias EltonCris

  • Profile Image
    EltonCris
    Answered on February 20, 2018 at 04:35 AM

    Yes, or just put the above CSS code after the feedback embed code where you have embedded it.

  • Profile Image
    pinfor
    Answered on February 20, 2018 at 05:27 AM

    Gracias EltonCris !!

  • Profile Image
    pinfor
    Answered on February 20, 2018 at 06:08 AM

    Disculpa Elton, ¿cómo puedo centrar el icono ? sale así---->


    1519124871icon descentrado.jpg

  • Profile Image
    Victoria_K
    Answered on February 20, 2018 at 08:04 AM

    It seems that your feedback buttons overlap and cause the conflict. 

    In order to fix the issue, you need to find the embedded code and replace some parts of it with the one that EltonCris provided earlier. 

    Let us know if you need more help.

  • Profile Image
    pinfor
    Answered on February 20, 2018 at 09:01 AM

    Please tell EltonCris what parts of the code should be changed.

    It is not easier to incorporate a new "appointment" button on your "Select Button Icon" of the "FLOATING FEEDBACK BUTTON"

    Gracias

  • Profile Image
    gizem
    Answered on February 20, 2018 at 11:39 AM

    Since you deleted CSS code which is mentioned above, I could not test it on your website. But, when I use this code in my sample website, it is working correctly. 

    You can change this part of the code and try again:

        .jfFeedbackButton {

            background-color: transparent !important;

            border-radius: none;

            padding: 0;

            max-width: 80px !important;

            height: 80px !important;

        }

    If this doesn't solve your problem, let us know.


  • Profile Image
    pinfor
    Answered on February 20, 2018 at 12:27 PM

    I have corrected  border-radius: none; by  border-radius: 0; and it works !

    Thank you

  • Profile Image
    Victoria_K
    Answered on February 20, 2018 at 12:45 PM

    Glad to see that you have solved the issue! 

    Let us know if we can assist you better.