Change submit button text by simple CSS (only for Landing Pages)

Sudhakar_Pandey
Level 2

Change your existing form button with your choice of text, here is small css code, paste “Landing Page Action” > Edit Meta Tags,

<style>

button {text-indent: -9999px; line-height: 0;}
button::after { content: "MY NEW BUTTON TEXT"; /* Write you own button name */ text-indent: 0;  display: block; line-height: initial; }

</style>

This is fastest sweet css code, works in all type of landing pages, please write your feedback or questions...

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Yep, generated content has been known and used for awhile, see here and elsewhere. Also used to fix this bug.

Sudhakar_Pandey
Level 2

i have seen this​ solution, didn't work...(not replacing existing text), thanks!

SanfordWhiteman
Level 10 - Community Moderator

As it says at the link, you empty your text first! If you absolutely require that the text be replaced, use the simplest JS.

MktoForms2.whenReady(function(form){

  var formEl = form.getFormElem()[0],

  buttonEl = formEl.querySelector("button[type='submit']");

  buttonEl.textContent = "Go for it!"; // or use innerHTML for rich button markup

}); 

Supports HTML, too.

Anyway, you have to change the "Please Wait" text as well in your CSS, if you're throwing the real button text offscreen...

Sudhakar_Pandey
Level 2

my code is to replace existing submit button text with new one, rest going to be same... that's it. i "prefer" css to achieve this small task.

SanfordWhiteman
Level 10 - Community Moderator

But you aren't changing the "Please Wait" text, which is another expected part of the form descriptor. So while it is submitting, it won't change state as expected.