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
  • 4023 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

Josh_Hill13
Josh_Hill13
Level 10
April 29, 2014
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.
A
Anonymous
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> 


A
Anonymous
April 30, 2014
@Haven Ramos Thanks! That worked beautifully. 
C
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?
A
Anonymous
June 2, 2014
Hi Colleen,

Please send me the url and I can take a look
C
Colleen_Jones
Level 2
June 2, 2014
Hi Haven-

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

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
Level 2
June 3, 2014
Hi Haven-

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

Thanks
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
 

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> 
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...