Cards: Use custom button image on feedback form

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 gracias

Yes its possible.

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

Working demo:

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

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? 

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>

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.

https://www.nutrikalia.com

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.

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

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

Gracias EltonCris !!

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

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.

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

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.

Please, can you tell me where is the difference between yours and the EltonCris code.

I do not appreciate the difference

.jfFeedbackButton {

    background-color: transparent;

    border-radius: none;

    padding: 0;

    max-width: 80px;

    height: 80px;

}   

.jfFeedbackButton {

        background-color: transparent !important;

        border-radius: none;

        padding: 0;

        max-width: 80px !important;

        height: 80px !important;

    }

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

Thank you

Glad to see that you have solved the issue! 

Let us know if we can assist you better.