Невозможно отправить контактную форму с мобильного устройства

Question

Я могу отправить свою контактную форму в нижнем колонтитуле для настольной версии, но не для мобильных устройств. Кнопка «Отправить сообщение» под контактной формой не активна на мобильном телефоне. Ссылка на мой сайт: https://expatguideturkey.com/ Ниже приведен мой код для этой формы. Пожалуйста, сообщите.

<div className="row">
  <div className="col-md-4"
  data-sal="slide-up"
  data-sal-delay="300"
  data-sal-duration="60s"
  data-sal-easing="ease">
    <h3>PROFESSIONAL ASSISTANCE</h3>
    <p className="expat-contact">Some Paragraph... </p>          
  </div>

  <div className="col-md-1"><br/></div>
  <div className="col-md-7"
  data-sal="slide-up"
  data-sal-delay="400"
  data-sal-duration="60s"
  data-sal-easing="ease">
    <h3>GET IN TOUCH</h3>
    <form 
    name="contact" 
    method="POST" 
    action="https://getform.io/f/192e20fe" 
    >

      <div className="half left cf">
        <input type="hidden" name="form-name" value="contact" />
        <input type="text" name="name" id="input-name" className="form-control" placeholder="Your Name" required /> 
        <input type="email" name="email" id="input-email" className="form-control" placeholder="Email address" title="Email (format: your@example.com)" required  />
        <div className="invalid-feedback">
          Please enter a valid email address.
        </div>
        <div style={{ paddingTop: '5px'}}>
          <select name="service" id="service" className="form-control" v-model="service" style={{ color:'crimson' }}>
            <option>General Enquiry</option>
            <option>Citizenship Application</option>
            <option>Residence Permit Application</option>
            <option>Work Permit Application</option>
            <option>Company Establishment</option>
            <option>Virtual and Ready Office</option>
            <option>Umbrella Services</option>
          </select> 
        </div>
        <IntlTelInput fieldId="phonenum" fieldName="phonenum" containerClassName="intl-tel-input" inputClassName="form-control" defaultCountry="tr"/>
      </div>
      <div className="half right cf">
        <textarea name="message" id="input-message" rows="4" className="form-control"  placeholder="Message"></textarea>
      </div>

      <input type='submit' id="input-submit" className="btn btn-primary btn-lg btn-block" value="Send Message"/>
    </form>
  </div>
</div>

Ниже приведен плагин Gatsby, который я использую для анимации:

   `gatsby-plugin-scroll-reveal`,
    {
      resolve: `gatsby-plugin-scroll-reveal`,
      options: {
          threshold: 1, // Percentage of an element's area that needs to be visible to launch animation
          once: true, // Defines if animation needs to be launched once
          disable: false, // Flag for disabling animations

          // Advanced Options
          selector: '[data-sal]', // Selector of the elements to be animated
          animateClassName: 'sal-animate', // Class name which triggers animation
          disabledClassName: 'sal-disabled', // Class name which defines the disabled state
          rootMargin: '0% 50%', // Corresponds to root's bounding box margin
          enterEventName: 'sal:in', // Enter event name
          exitEventName: 'sal:out' // Exit event name
      }
    },

Ниже css приведенной выше формы:

form {
  max-width: 600px;
  text-align: center;
  margin: 10px auto;
  max-height: 150PX;
  margin-left: 0px;
  padding-bottom: 10px;
}
form input, form textarea {
  border: 0;
  outline: 0;
  padding: 0.7em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 0.5em;
  font-family: 'Merriweather', sans-serif;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}

.form-control input:focus{
  background-color: rgb(255, 218, 232);

}

form #input-submit {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: white;
  background: rgba(221, 59, 59, 0.863);
  cursor: pointer;
  width: 295px;
  height: 50px;
 }
form #input-submit:hover {
  font-family: 'Raleway', sans-serif;
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 0px 2px #d22e !important;
  background: #d22e;
  font-weight: 600;
}

input[type="tel"] {
  border: 1px solid #ddd;
  padding: 4px 8px;
}

form #input-message{
  height: 145px;
}

form textarea {
  height: 115px;
  width: 370px;
}

Answer 1

Два div.col-md-4 элемента перекрывают кнопку «Отправить сообщение».

Быстрое исправление заключается в добавлении pointer-events: none CSS свойство элементов, это позволяет вам щелкать по элементу. Поскольку это кажется мне хакерским решением, а не вашим намеченным поведением, я бы предложил исправить макет и скрыть элементы в мобильном представлении. Это решать вам, поскольку я понятия не имею, каково ваше намерение.

РЕДАКТИРОВАТЬ: Я посмотрел на ваш макет, и кажется, что вы немного неправильно используете макет столбца. Я бы не советовал ставить разрывы строк в пустых столбцах.

В любом случае, решение состоит в том, чтобы удалить свойство max-height из вашего form в CSS. max-height выдвигает textarea и кнопку сообщения за пределы формы и позволяет столбцу перекрывать их.