SOLVED

Replace Submit Button with JPG?

Go to solution
Anonymous
Not applicable

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! 
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Replace Submit Button with JPG?

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 solution in original post

13 REPLIES 13
Josh_Hill13
Level 10 - Champion Alumni

Re: Replace Submit Button with JPG?

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
Not applicable

Re: Replace Submit Button with JPG?

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
Not applicable

Re: Replace Submit Button with JPG?

@Haven Ramos Thanks! That worked beautifully. 
Colleen_Jones
Level 2

Re: Replace Submit Button with JPG?

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
Not applicable

Re: Replace Submit Button with JPG?

Hi Colleen,

Please send me the url and I can take a look
Colleen_Jones
Level 2

Re: Replace Submit Button with JPG?

Hi Haven-

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

Thanks
Anonymous
Not applicable

Re: Replace Submit Button with JPG?

Hi Colleen,

Do you have a public url?

Marketo will produce this when approving the page.
Colleen_Jones
Level 2

Re: Replace Submit Button with JPG?

Hi Haven-

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

Thanks
Anonymous
Not applicable

Re: Replace Submit Button with JPG?

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