Replace Submit Button with JPG?

[Anonymous]

I see a bunch of articles about changing the style of a form submit button (forms 2.0) but nothing around swapping out our own JPG. I would like to use the buttons that our website uses but I don’t know a lot about javascript. Any suggestions from the community? Much appreciated! 

[Bou_Xiong]

Hello Haven,

I've been trying to make updates to my form button, but it doesn't seem to be working for me.
Would you be able to help out?

[Anonymous]

You solved it again!

Thanks a lot  Haven

[Anonymous]

Jahel please try

<script type="text/javascript">

$(document).ready(function(){

    setTimeout(function(){

        $('button.mktoButton[type=submit]').after('<img src="http://go.exinda.com/rs/exinda2/images/getthewp_orange.png" style="cursor:pointer" class="myOwnButton"/>');

        $('img.myOwnButton').click(function(){

            $('button.mktoButton[type=submit]').click();

        });

        $('img.myOwnButton')

                .mouseenter(function() {

                    var src = "http://go.exinda.com/rs/exinda2/images/getthewp_green.png";

                    $(this).attr("src", src);

                })

                .mouseleave(function() {

                    var src = "http://go.exinda.com/rs/exinda2/images/getthewp_orange.png";

                    $(this).attr("src", src);

                });

    },2000)

});

</script> 

[Anonymous]

Thanks Haven this code worked!

In addition to this, do you have a code to change the image on mouseover?

I have tried this, but to no avail:

<script type="text/javascript">

$(document).ready(function(){

setTimeout(function(){

$('button.mktoButton[type=submit]').after('<img src="http://go.exinda.com/rs/exinda2/images/getthewp_orange.png" 

onmouseover="http://go.exinda.com/rs/exinda2/images/getthewp_green.png'" 

onmouseout="this.src='http://go.exinda.com/rs/exinda2/images/getthewp_orange.png'" style="cursor:pointer" class="myOwnButton"/>');

$('img.myOwnButton').click(function(){

$('button.mktoButton[type=submit]').click();

});

},2000)

});

</script> 

[Anonymous]

Hi Colleen,

Pls try

pasting this code instead into a custom html element

<script type="text/javascript">

$(document).ready(function(){

$('input#mktFrmSubmit').after('<img src="PUT THE URL PATH OF YOUR IMAGE HERE" style="cursor:pointer" class="myOwnButton"/>');

$('input#mktFrmSubmit').hide();

$('img.myOwnButton').click(function(){

$('input#mktFrmSubmit').click();

});

});

</script>

change the source value to your button image.

This code applies to the legacy version of marketo forms

[Colleen_Jones]

Hi Haven-

Let's try this: http://pages.ams.net/Web-Lead-Nurturing_Button-Test.html

Thanks

[Anonymous]

Hi Colleen,

Do you have a public url?

Marketo will produce this when approving the page.

[Colleen_Jones]

Hi Haven-

Hope this works: https://na-sj02.marketodesigner.com/m#LPTP1028

Thanks

[Anonymous]

Hi Colleen,

Please send me the url and I can take a look

[Colleen_Jones]

My page uses the code listed above and I changed the url for the new image. It is still referencing the standard submit button. Is there anyother step I'm missing?

[Anonymous]

@Haven Ramos Thanks! That worked beautifully. 

[Anonymous · Accepted solution]

Hi Mary,

You can try a solution that we use.

Paste the code below in a custom html element in a marketo landing page.

Also replace the code where

PUT THE URL PATH OF YOUR IMAGE HERE

appears with the url path of your jpg image.

<style>

button[type="submit"].mktoButton{

display:none !important;

}

</style>

<!-- jquery if needed OPTIONAL -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

setTimeout(function(){

$('button.mktoButton[type=submit]').after('<img src="PUT THE URL PATH OF YOUR IMAGE HERE" style="cursor:pointer" class="myOwnButton"/>');

$('img.myOwnButton').click(function(){

$('button.mktoButton[type=submit]').click();

});

},2000)

});

</script> 

[Josh_Hill13]

Mary,

You would need to use a custom script. I believe there are some threads on this which may include real scripts.

BUT in Forms 2.0 you can edit the CSS, so you could do it this way too.