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

Replace Submit Button with JPG?

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.
Accepted solution
April 30, 2014
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> 


View reply

13 replies

Bou_Xiong
Bou_Xiong
Level 2
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?
Translate
Anonymous
August 29, 2014
You solved it again!

Thanks a lot  Haven
Translate
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> 
Translate
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> 
Translate
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
 

Translate
Colleen_Jones
Level 2
June 3, 2014
Hi Haven-

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

Thanks
Translate
Anonymous
June 2, 2014
Hi Colleen,

Do you have a public url?

Marketo will produce this when approving the page.
Translate
Colleen_Jones
Level 2
June 2, 2014
Hi Haven-

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

Thanks
Translate
Anonymous
June 2, 2014
Hi Colleen,

Please send me the url and I can take a look
Translate
Colleen_Jones
Level 2
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?
Translate
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...