Unable to submit contact form from mobile device - html

Question

I am able to submit my the contact form in the footer on desktop version but not on mobile. "Send message" button below the contact form is not clickable on mobile. My website link: https://expatguideturkey.com/ Below is my code for this form. Please advise.
<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>
Below is the Gatsby plugin that I am using for animation:
`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
}
},
Below is the css of the above form:
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

Two div.col-md-4 elements are overlapping the "Send Message" button.
A quick fix would be to add the pointer-events: none CSS property to the elements, this allows you to click through the element. Since that seems like kind of a hacky solution to me, and not your intended behaviour, I'd suggest fixing the layout and hiding the elements in the mobile view. This is up to you to decide as I have no idea what your intention is.
EDIT: I looked into your layout, and it seems like you're misusing the column layout a little bit. I wouldn't suggest putting line breaks in empty columns.
Anyways, the solution is to remove the max-height property from your form in the CSS. The max-height pushes the textarea and message button outside of the form and allows the column to overlap them.