SanfordWhiteman_1-1706991508244.jpeg

Prevent your Unsubscribe form from creating new leads

SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator

SanfordWhiteman_1-1706991508244.jpeg

Help, new leads are coming in from our Unsubscribe form!

 

Yep, that happens. When people forward emails to other accounts and click a tracked Marketo link, they may think the pre-filled Email Address is wrong and “correct” it.

 

The form field is visible and editable by default, so nothing stops them:

SanfordWhiteman_0-1706991464071.jpeg

Problem is, they haven’t unsubscribed the address you’re actually sending to. Instead, they’ve created a new (and instantly unsubscribed) lead. Then you’ll keep sending to the old address, they’ll keep thinking your form is broken, and so on. Lose-lose.

 

Solution: set the disabled attribute on the <input>. The JS couldn’t be simpler:

MktoForms2.whenReady(function(readyForm){
  const formEl = readyForm.getFormElem()[0],
        emailEl = formEl.querySelector("input[name='Email']");
  
  emailEl.disabled = true;
});

 

That alone will prevent them from editing the field. Styling the input makes its locked-ness more apparent:

.mktoForm input[name="Email"] {
  background-color: lightgray;
  border-style: inset;
  border-width: 1px;
  cursor: not-allowed;
  text-transform: lowercase;
  outline: none;
}
.mktoForm label[for="Email"] .mktoAsterix {
  visibility: hidden;
}
.mktoForm label[for="Email"] .mktoAsterix:after {
  visibility: visible;
  content: "\D83D\DD12\FE0E";
  color: #333;
}

 

Now you’ve got a much better UX:

SanfordWhiteman_1-1706991508244.jpeg

You can also add a Rich Text under the field to detail why it’s locked. I’ll leave that copy up to you!

381
0