The contact form on my website doesn't work on phones and it supposed to open a program like gmail or mail app to send a message to me or just send right away.
I don't really know how to search for this problem but already tried to find a solution on multiple forums and google but couldn't find any :(
hope you guys know how to help me out
my own website
(still learning html and css so please try keep it simple if you know a solution)
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center animateup">
<h2>Contact</h2>
</div>
</div>
<div class="gap-50"></div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animateup">
<form role="form" action="mailto:jacootje14#gmail.com" method="post" enctype="text/plain">
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="Name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="email">Email Address</label>
<input class="form-control" type="email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<label for="message">Message</label>
<textarea placeholder="Message" class="form-control" name="message" id="message" rows="5"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-lg btn-success">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Comment:
Alright so now the mail works on mobile but now i have a new issue with the form because i cant type a message in the form before it opens outlook mobile app. (this issue also occurs on pc)
thanks in Advance!
Related
I'm newbie using bootstrap, so I would like you help to center these couple of textBoxes and the button. I appreciate if there any other enhancement I can do with the code
This is part of the code I did and I'm using this as template: https://github.com/BlackrockDigital/startbootstrap-agency
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
</div>
The final idea is to have something like this:
login
You can use Flex too, see this link to more information: https://getbootstrap.com/docs/4.0/utilities/flex/
Basically, you can use <div class="d-flex justify-content-center">...</div> to center your div. In my opnion you can use grid to define the macro layout of your view, for example, use grid to define the number of columns in one component of your view and inside this component you can use flexbox. This approach make the view more responsive. And if you understand flexbox you can do anything. I hope this help you. Good luck.
Hope this can help you. Just add "m-auto" class to col-md-6
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
<div class="text-center"><!-- Code goes here --></div>
I'm having a problem with my site which I'm doing for Freecodecamp. Everything works perfectly on desktop but it's been a nightmare on iOs. I have a few issues, but the main issues are that my last page (contact page) is not showing. iOs is cutting about 75% off from the bottom of the page, AND I can't get what little of the form that I can see to be clickable. (I've only tried this on my iPhone 7+ so far) Can anyone help please? I'll post the markup for that particular page below, but I'll also post the link to the whole site on Codepen which may help.
<div id="parralax4" class="img-responsive">
<div class="container">
<div class="row formtitle">
<div class="col-sm-3">
<h2 class="formtitle1 raleway">Contact Us</h2>
<p class="raleway">Please use the contact form...
</div>
<form id="xform">
<div class="row">
<div class="form-group col-sm-4">
<label for="name"></label>
<input type="name" class="form-control" id="name"
required placeholder="Enter name">
</div>
</div>
<div class="row">
<div class="form-group col-sm-4">
<label for="email"></label>
<input type="email" class="form-control" id="email"
required placeholder="Enter email">
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="Message"></label>
<textarea class="form-control" rows="5" id="message"
required placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<button type="submit" class="btn btn-md btn-success">Submit</button>
</form>
</div>
</div>
My CodePen
Any help greatly appreciated. I've been at this for hours trying to sort this.
Got this sorted. After a process of elimination, I hosted the site directly outside of Codepen, and it showed perfectly in Ios. So it was an issued within Codepen along with iOs.
<form action="mailto:mail#mail.com" method="post" class="wow fadeInUp" data-wow-delay="0.6s">
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="Naam" name="name">
</div>
<div class="col-md-4 col-sm-6">
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control" placeholder="Onderwerp" name="subject">
</div>
<div class="col-md-12 col-sm-12">
<textarea class="form-control" placeholder="Bericht" rows="7" name"message"></textarea>
</div>
<div class="col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8">
<input type="submit" class="form-control" value="SHOOT MESSAGE">
</div>
</form>
The above code gives the underneath result when I 'shoot the message'.
It should fill in the message with the message from the form, same goes for the subject.
Now the question is: can this be done with HTML 5 only? I know that I can send it with PHP but that is not my question.
If you are able to use JavaScript, the following might come in handy:
Source: MailTo with HTML body
All of my other pages do not have this gap, I am using Bootstrap but am a beginner. What do you think it could be? Is the whole page coded wrong because the contact form works fine, just when I am on a mobile device I can see a very thin white line under the footer.
<div class="section-md">
<div class="container container-normal">
<div class="row">
<div class="col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<?php if (isset($_SESSION[ 'contact_success'])): ?>
<h2>Message Sent</h2>
<div class="alert alert-success">
Your information has been received. We will contact you within 1 business day.
</div>
Back to Homepage
<?php unset($_SESSION[ 'contact_success']) ?>
<?php else: ?>
<h1>Contact Us</h1>
<p class="text-muted">This is our contact page...</p>
<hr>
<div class="error-msg alert alert-danger cnt-error">
<p>Please fill in all required fields.</p>
</div>
<form id="contact_form" action="<?= site_url() ?>contact/save" method="post">
<div class="form-group">
<label for="name" class="form-label">Your Name*</label>
<input id="cnt_name" type="text" class="form-control" name="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email" class="form-label">Your Email*</label>
<input id="cnt_email" type="text" class="form-control" name="email" placeholder="user#example.com">
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject*</label>
<input id="cnt_subject" type="text" class="form-control" name="subject" placeholder="This website rocks">
</div>
<div class="form-group">
<label for="message" class="form-label">Comments*</label>
<textarea id="cnt_message" class="form-control" name="message" rows="10" placeholder="Enter a few questions in here..."></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
Cancel
</div>
<!-- /.form-group -->
</form>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.section-md -->
I think you had margin in your
Let's try this code
body{
margin: 0;
}
I am having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated!
I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x, which destroys the layout. Is there any way of making this layout work in bs3?
Here's a fiddle, problem shows up in Safari, Firefox and Chrome:
http://jsfiddle.net/Au5vM/3/
The form code looks like this, I am not so familiar with bs3 forms and grid, maybe someone might spot the problem:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="inputAcademicTitle">Degree</label>
<input type="text" class="form-control" id="inputAcademicTitle" placeholder="Titel" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputFirstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your first name" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputLastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Your last name" value="Resizing causes me to disable">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="inputMotto">Comment</label>
<textarea class="form-control" rows="3" id="motto" placeholder="Your comment">textareas are not affected</textarea>
</div>
</div>
</div>
</div>
</form>
They're not disabled. The problem is that you're nesting class="row". You can verify this by opening your browser's web tools, you'll see that the row containing the textarea overlaps the textboxes.
</div>
<div class="row">
should become
</div>
</div>
<div class="row">
And
</div>
</form>
should become
</form>