Can't get the contact form to send to email - html

I can't seem to get my contact form box to direct the mail to my email, like after I hit the send message button it just refreshes the page as a continuous loop.
<div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
<h1>Questions/comments</h1>
<div class="contact-form">
<form id="contact-form" method="post" action="mailto:kaykaesu#gmail.com">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
<div class="contact-submit">
<input type="submit" class="form-control submit" value="Send a message">
</div>
</form>
</div>
</div>

<div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
<h1>Questions/comments</h1>
<div class="contact-form">
<form id="contact-form" method="post" action="mailto:kaykaesu#gmail.com" enctype="text/plain">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
<div class="contact-submit">
<input type="submit" class="form-control submit" value="Send a message">
</div>
</form>
</div>
</div>
Try adding
enctype="text/plain"
To the form tag.
If this doesn't work then it most likely an OS problem
Microsoft file association to mailto
*On my side your code is working fine

This will work only if the one who is filling the form has a mail client setup in his / her device. To ensure it works properly in all scenarios, you need a server script and point the action attribute of form to that script.
Or else you can use a third party service like Typeform

<?php
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];
$body="Name:".$name."\n"."Email:".$email."\n"."Message:
\n".$message;
if(mail("abc#gmail.com","Query through
Website",$body,"From:".$email))
echo "<p align='center' style='color:green'>Your message has reached
destination.Rest Easy (^_^)..!! We will contact you Shortly</p>";
else
echo "<p align='center' style='color:red'>Damn server!Apologies, but
something went wrong.Please try again (T_T)</p>";
}
?>
<div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="1.6s">
<h1>Questions/comments</h1>
<div class="contact-form">
<form method="post" name="myform" onsubmit = "return validate()">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea>
<div class="contact-submit">
<input name="submit" value="Send Message" type="submit" class="form-control submit" value="Send a message">
</div>
</form>
</div>

Related

Form data not getting entered in mail

when I submit this form, after entering some data, Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
<form class="" action="mailto:exampl#gmail.com" method="post">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
You need to add the name attribute to each field, which will appear in the mail's body. It'll format itself as mail={your_message} and so on.
Your code becomes:
<form class="" action="mailto:exampl#gmail.com" method="post" enctype="text/plain">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JSFiddle

I've tried to console log the request body of a form. But not all the input fields are displayed. One textarea is missing in the log

<form action="/contact/submit" method="POST">
<br style="clear:both">
<p style="margin-bottom: 25px; text-align: center; font-size: 20px"><b>Contact Form</b></p>
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="number" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<input class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140"></input>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
What I get when I console log the req.body of this post using console.log(req.body) is
{ name: 'aa',
email: 'xyz#gmail.com',
mobile: '232',
subject: 'yo',
submit: '' }
But not the the message.
Textarea is not a type of input, it's an element itself...
<textarea id="message" name="message"></textarea>

Why is my html form not sending to email or won't submit when I put code needed?

Here is the code to my form, if anyone has a way of fixing this that would be awesome.
<form id="rendered-form">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div><div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea></div>
<div class="fb-submit form-group field-button-1480832953294"><button type="submit" class="button-input btn btn-warning" name="button-1480832953294" style="warning" id="button-1480832953294">CONTACT US</button></div></form>
</div>
Here is the new code, I have just updated it and it still doesnt work.
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">We will contact you as soon as possible!</div>
</div>
<form id="rendered-form" action="mailto:zach#ztmartin.net" method="post">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div>
<div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea>
</div>
<div class="fb-submit form-group field-button-1480832953294">
<button type="submit" class="btn btn-primary">CONTACT US</button>
</div>
</form>
You should send your form through an action
<form action="example.php" method="post">
It doesn't have to be PHP, but it is an example for how to make an action attribute.
For posting data, you should put method="post" in your form tag, as in
<form method="post">
...
</form>
The default method is get.
The action attribute is not needed if your post url is the same as the current url. in fact, by not putting anything in your form tag, and assuming your page is found at http://myhost.com/mypage, you're actually using the equivalent of this:
<form action="http://myhost.com/mypage" method="get">
...
</form>

Moving some fields from the form to the right

So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.

How can i create message box using bootstrap?

I am using Bootstrap 3. I am just unable to create message box which should have 4 rows inside. can anyone please help me? My code is below:
<div class="row">
<div class="col-lg-12">
<form action="" method="POST" enctype="multipart/form-data" id="form_id">
<div class="form-group">
<h5><label for="inputName">Name</label></h5>
<input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
</div>
<div class="form-group">
<h5><label for="inputEmail">Email</label></h5>
<input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<h5><label for="inputMobile">Mobile</label></h5>
<input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
</div>
<div class="form-group">
<h5><label for="inputMessage">Message</label></h5>
<input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
</form>
</div>
</div>
I want my message box something like this.
Your problem is you are not using textarea! Replace the below code:
<input type="text" name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required>
With:
<textarea name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required></textarea>