I made a subscribe button for a mailing list and it works on PC/desktop view, but not on mobile devices (touchscreens).

You can click it and it works on desktop, but it doesn't do anything when you touch it on a mobile device.

It's just plain html and CSS. The code is below along with the media only properties.

Thanks in advance!

HTML

  <div >
    <form 
    action="mailto:[email protected]?subject=Mailing List" 
    method="POST"
    enctype="text/plain"
    name="EmailForm" 
    id="singular-form">
      <button  type="button" id="subs">Subscribe to our mailing list!</button>
      <div id="email-input">
        <input type="text" placeholder="Email" id="email" name="Email Address">
        <button type="button" >Subscribe</button>
      </div>
      <div id="success">Successfully subscribed to mailing list!</div>
    </form>
  </div>

CSS

.main {
  align-items: center;
  margin: auto;
  width: 25rem;
  height: 5rem;
  padding: 12px;
  background-color: rgb(41,47,51);
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
  transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(41,47,51);
}
.main>#singular-form button {
  width: 9rem;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 3rem;
  cursor: pointer;
}
.main>#singular-form>#subs {
  padding: 0;
  width: 100%;
  color: white;
  font-weight: bold;
  background-color: transparent;
  z-index: 3;
}
.main>#singular-form>#email-input {
  z-index: 2;
}
.main>#singular-form>#email-input>input {
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background-color: white;
  box-sizing: border-box;
  border: none;
  outline: none;
  padding: 0 26% 0 3%;
  opacity: 0;
  transform: scale(0);
  transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-radius: 5px;
  background-color: rgb(13, 110, 253);
  color: white;
  opacity: 0;
  transform: scale(0);
  transition: all .6s ease .4s;
}
.main>#singular-form>#success {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  z-index: 1;
}
.main>#singular-form>#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0);
  opacity: 0;
}
.main>#singular-form>#subs {
  transition: all .6s ease;
}
.main>#singular-form>#email-input {
  transform: scale(1);
  opacity: 1;
  transition: all .6s ease .4s;
}

.main>#singular-form>#success {
  transition: all .2s ease .6s;
}
.main>#singular-form>#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
  transform: scale(1);
  opacity: 1;
}

MEDIA ONLY VIEW

  .main {
    max-width: 350px;
    margin: auto;
  }

CodePudding user response：

you must change the type of button to submit or leave it with out type just like this

<button type="submit" >Subscribe</button>

or

<button >Subscribe</button>

so the code will be like this

<div >
    <form 
    action="mailto:[email protected]?subject=Mailing List" 
    method="POST"
    enctype="text/plain"
    name="EmailForm" 
    id="singular-form">
      <button  type="button" id="subs">Subscribe to our mailing list!</button>
      <div id="email-input">
        <input type="text" placeholder="Email" id="email" name="Email Address">
        <button >Subscribe</button>
      </div>
      <div id="success">Successfully subscribed to mailing list!</div>
    </form>
  </div>