Replace Submit Button with JPG? | Community
Skip to main content
A
Anonymous
April 29, 2014
Solved

Replace Submit Button with JPG?

  • April 29, 2014
  • 13 replies
  • 4022 views
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! 
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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> 


13 replies

Bou_Xiong
Bou_Xiong
New Participant
April 30, 2015
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?
A
Anonymous
August 29, 2014
You solved it again!

Thanks a lot  Haven
A
Anonymous
August 29, 2014

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> 
A
Anonymous
August 28, 2014
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> 
A
Anonymous
June 3, 2014
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
 

C
Colleen_Jones
New Participant
June 3, 2014
Hi Haven-

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

Thanks
A
Anonymous
June 2, 2014
Hi Colleen,

Do you have a public url?

Marketo will produce this when approving the page.
C
Colleen_Jones
New Participant
June 2, 2014
Hi Haven-

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

Thanks
A
Anonymous
June 2, 2014
Hi Colleen,

Please send me the url and I can take a look
C
Colleen_Jones
New Participant
June 2, 2014
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?
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...