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! 

[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.

[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> 

[Anonymous]

@Haven Ramos Thanks! That worked beautifully. 

[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]

Hi Colleen,

Please send me the url and I can take a look

[Colleen_Jones]

Hi Haven-

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

Thanks

[Anonymous]

Hi Colleen,

Do you have a public url?

Marketo will produce this when approving the page.

[Colleen_Jones]

Hi Haven-

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

Thanks

[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