I'm new to Yahoo small business web hosting. I created a HTML contact-us form as shown below -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Form</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>Untitled Form</a></h1>
<form id="form_774248" class="appnitro" method="post" action="">
<div class="form_description">
<h2>Untitled Form</h2>
<p>This is your form description. Click here to edit.</p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="element_1_1" name= "element_1_1" class="element text" maxlength="255" size="8" value=""/>
<label>First</label>
</span>
<span>
<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/>
<label>Last</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Phone </label>
<span>
<input id="element_2_1" name="element_2_1" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_2_1">(###)</label>
</span>
<span>
<input id="element_2_2" name="element_2_2" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_2_2">###</label>
</span>
<span>
<input id="element_2_3" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text">
<label for="element_2_3">####</label>
</span>
</li> <li id="li_3" >
<label class="description" for="element_3">Address </label>
<div>
<input id="element_3_1" name="element_3_1" class="element text large" value="" type="text">
<label for="element_3_1">Street Address</label>
</div>
<div>
<input id="element_3_2" name="element_3_2" class="element text large" value="" type="text">
<label for="element_3_2">Address Line 2</label>
</div>
<div class="left">
<input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text">
<label for="element_3_3">City</label>
</div>
<div class="right">
<input id="element_3_4" name="element_3_4" class="element text medium" value="" type="text">
<label for="element_3_4">State / Province / Region</label>
</div>
<div class="left">
<input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text">
<label for="element_3_5">Postal / Zip Code</label>
</div>
<div class="right">
<select class="element select medium" id="element_3_6" name="element_3_6">
<label for="element_3_6">Country</label>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="774248" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
Generated by pForm
</div>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>
I tried <form action="MAILTO:test#test.com" method="post" enctype="text/plain">, but nothing worked.
Now, I want to send an email to test#test.com which contains all the details of the fields in the website. Should I use PHP or can I do it directly. How can I do this.
This requires a script to act as a handler and sender of the email.
Like this one: http://www.tectite.com/formmailpage.php
HTML/JavaScript cannot send out email directly.
The mail() delivery method and the SMTP protocol still need a handler such as FormMail, above. The handler will use SMTP through mail() usually, in PHP.
That handler would be your form action= and depending on the handler you use, you will need to use specific input field names to have everything sent properly.
If You are working Locally then you must setup SMTP. it may help You Click Here
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/styles.css">
<title>Contact Us</title>
</head>
<body>
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain"></form>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
</body>
</html>
Hi! I am trying to make a contact form but i am not able to receive the Email send by the form....actually it never sends the data...what can i do? I want to receive the data on my gmail when the user clicks the send Button.
There is a closing tag at the end of the line where you start your form.
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain">
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
Try the above instead.
On top of this - all this code will do is open a client on your computer for the user to then send an email direct. It won't submit a message direct to the user from the browser. If you wish to do that, you will have to use back-end code. I suggest Node.js and Nodemailer. Here's a good link explaining that:
https://blog.mailtrap.io/nodemailer-gmail/
I was browsing around the internet and created this consensus form. the layout and everything is as I want it.What Id Like to do is when the user clicks the submit button I would like the contents of the form to be sent to an email for example somemail#mail.com
Can anyone help me please.This would be very useful to me. Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GoodJob - BadJob - Tenerife</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>Good - Bad - hmm</a></h1>
<form id="form_1136056" class="appnitro" method="post" action="">
<div class="form_description">
<h2>GoodJob - BadJob - Tenerife</h2>
<p>It's Anonymous. Keep the information REAL. Don't make things up. If anything is EVER going to change, it needs to be REAL information. This form will be sent to an email address and will then be posted Anonymously on Facebook for you.</p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">What is the Alias you want to use </label>
<div>
<input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_1"><small>You don't have to use your real name - Just remember your Alias for Facebook Comments</small></p>
</li> <li id="li_8" >
<label class="description" for="element_8">Is this about a ...... </label>
<span>
<input id="element_8_1" name="element_8" class="element radio" type="radio" value="1" />
<label class="choice" for="element_8_1">Bad job</label>
<input id="element_8_2" name="element_8" class="element radio" type="radio" value="2" />
<label class="choice" for="element_8_2">Good Job</label>
</span>
</li> <li id="li_6" >
<label class="description" for="element_6">What is the name of the workplace you want to tell us about? </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_6"><small>Type in the Name of the Business</small></p>
</li> <li id="li_16" >
<label class="description" for="element_16">Where is this Business Located? </label>
<div>
<input id="element_16" name="element_16" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_16"><small>Type in the town, or you can find the business on google maps and click on share and copy the link and paste it here.</small></p>
</li> <li id="li_7" >
<label class="description" for="element_7">If you want to mention the bosses name, Put it here. </label>
<div>
<input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_7"><small>Type in the Name of the Boss</small></p>
</li> <li id="li_15" >
<label class="description" for="element_15">If you know the personal facebook page you can copy and paste it in here </label>
<div>
<input id="element_15" name="element_15" class="element text large" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_15"><small>Go to the top address bar of the boss/owner you want to tag for this post. Select all the text and paste it in the box.</small></p>
</li> <li id="li_9" >
<label class="description" for="element_9">How many hours a week do you work? </label>
<span>
<input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
<label class="choice" for="element_9_1">1 to 10</label>
<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
<label class="choice" for="element_9_2">10 to 20</label>
<input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" />
<label class="choice" for="element_9_3">20 to 30</label>
<input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" />
<label class="choice" for="element_9_4">30 to 40</label>
<input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" />
<label class="choice" for="element_9_5">40 to 50</label>
<input id="element_9_6" name="element_9" class="element radio" type="radio" value="6" />
<label class="choice" for="element_9_6">50 hours Plus</label>
</span><p class="guidelines" id="guide_9"><small>Keep it REAL. </small></p>
</li> <li id="li_18" >
<label class="description" for="element_18">Exactly how many hours do you work? </label>
<div>
<input id="element_18" name="element_18" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_11" >
<label class="description" for="element_11">Does your Job Pay Extra Hours? </label>
<span>
<input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
<label class="choice" for="element_11_1">Yes</label>
<input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
<label class="choice" for="element_11_2">No</label>
</span>
</li> <li id="li_10" >
<label class="description" for="element_10">What type of contract do you have? </label>
<span>
<input id="element_10_1" name="element_10" class="element radio" type="radio" value="1" />
<label class="choice" for="element_10_1">Part Time</label>
<input id="element_10_2" name="element_10" class="element radio" type="radio" value="2" />
<label class="choice" for="element_10_2">Full Time</label>
<input id="element_10_3" name="element_10" class="element radio" type="radio" value="3" />
<label class="choice" for="element_10_3">Hourly per week</label>
<input id="element_10_4" name="element_10" class="element radio" type="radio" value="4" />
<label class="choice" for="element_10_4">Dont know</label>
</span><p class="guidelines" id="guide_10"><small>DON'T GUESS..This is crucial. Every worker MUST have a copy of their contract. If you don't have one ask your boss or go to the Employment office (SEPE) with ALL your credentials and they will tell you there what contract you have.</small></p>
</li> <li id="li_12" >
<label class="description" for="element_12">Did you get Holiday pay? </label>
<span>
<input id="element_12_1" name="element_12" class="element radio" type="radio" value="1" />
<label class="choice" for="element_12_1">Yes</label>
<input id="element_12_2" name="element_12" class="element radio" type="radio" value="2" />
<label class="choice" for="element_12_2">No</label>
</span>
</li> <li id="li_17" >
<label class="description" for="element_17">How much holiday pay did you get? </label>
<div>
<input id="element_17" name="element_17" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_17"><small>A NUMBER ONLY no symbols or text</small></p>
</li> <li id="li_13" >
<label class="description" for="element_13">Did you know That there are actually 14 months in a Spanish working year? </label>
<span>
<input id="element_13_1" name="element_13" class="element radio" type="radio" value="1" />
<label class="choice" for="element_13_1">Yes</label>
<input id="element_13_2" name="element_13" class="element radio" type="radio" value="2" />
<label class="choice" for="element_13_2">No</label>
</span><p class="guidelines" id="guide_13"><small>Its true, In Spain ins a 14 month pay scheme, where you get a double pay in summer and another Christmas. Most employers will actually incorporate these two payments within your monthly wage...Meaning you get less :)</small></p>
</li> <li id="li_14" >
<label class="description" for="element_14">Got a story to tell about this Job? Bad or good - let it rip here!</label>
<div>
<textarea id="element_14" name="element_14" class="element textarea large"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="1136056" />
<input id="saveForm" class="button_text" type="submit" name="Submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
Copyright Goodjob-BadJob - Visit the facebook page CLICK HERE
</div>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>
Use php.redirect the action to the php file in your server. example mail.php
<form method="post" action="mail.php">
and in the php file use these
<?php
$element1 = $_POST['element_1'];
$element8 = $_POST['element_8'];
$element6 = $_POST['element_6'];
$formcontent="From: $element1 \n Message: Is this about a $element81, Where is this Business Located? element6, blah blah blah";
$recipient = "youremail#email.com";
$subject = "Contact Form";
$mailheader = "From: $element1 \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "<script type='text/javascript'>alert('Mail sent successfully!')</script>";
?>
and add fields from your form. i just added some. edit the formcontent message as you want.
Add to the action mailto:youremailaddress.com
For your example --
form id="form_1136056" class="appnitro" method='post' action='mailto:youremailaddres.whatever?Subject=whatever' ENCTYPE="text/plain"
I have a form which has a div tag within it to help style the second part of my form into a second column. However my close form tag now doesn't work. Is there a reason why?
I have a localstorage.js which is working perfectly up until <div id="form-group">. Please, help! I'm so close to completing this page.
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr />
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
You have unclosed div tags try closing them. close the <div id="form-group> and the div before <div class= "line-seprator">
You've forgotten to close a <div> tag. Use this:
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr>
</div>
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</div>
</form>
</div>
You can check markup errors with an HTML validator. This one is good enough for most cases.
I am trying to format a two-column form so that:
the labels are above each input field or text area
everything in class col1 is in the column on the left
everything in class col2 is in the column on the right
everything in class col12 spans both columns
Here is the HTML code I need this to work with:
<div id="contactForm">
<form method="post" action="">
<h3>Contact us</h3>
<p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
<fieldset>
<div class="col1">
<label for="form_firstname">Firstname <span class="required">*</span></label>
<input type="text" id="form_firstname" name="form_firstname" value="" />
</div>
<div class="col2">
<label for="form_lastname">Lastname <span class="required">*</span></label>
<input type="text" id="form_lastname" name="form_lastname" value="" />
</div>
<div class="col1">
<label for="form_address">Address</label>
<input type="text" id="form_address" name="form_address" value="" />
</div>
<div class="col2">
<label for="form_city">City</label>
<input type="text" id="form_city" name="form_city" value="" />
</div>
<div class="col1">
<label for="form_email">Email <span class="required">*</span></label>
<input type="text" id="form_email" name="form_email" value="" />
</div>
<div class="col2">
<label for="form_phone">Phone <span class="required">*</span></label>
<input type="text" id="form_phone" name="form_phone" value="" />
</div>
<div class="col12">
<label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
<textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<textarea id="form_message" name="form_message" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<input type="submit" value="Send" formnovalidate="formnovalidate" />
</div>
</fieldset>
</form>
</div>
How do I code the CSS to style this HTML as required?
Here is the code on JSFiddle.
Try this CSS:
#contactForm{
width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
display: block;
width: 100%;
}
http://jsfiddle.net/rx2gjpdw/3/
I'm trying to create a two column form in HTML using the below code.
<div id="form-wrapper">
<form class="contact_form" action="" method="post" name="contact_form">
<ul>
<div id="form_left">
<li>
<span class="required_field"> * Denotes a required field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
</li>
<li>
<label for="telephone">Contact Number:</label>
<input type="tel" name="telephone" placeholder="(01225) 123456">
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email address" placeholder="example#example.com">
</li>
</div>
<div id="form_right">
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" >
</li>
</div>
</ul>
</form>
</div>
(http://jsfiddle.net/qrttZ/)
But for some reason, it is showing the bottom half of my HTML code inside of the text area window.
I can't see any open tags so i'n not sure why this is.
The fact that HTML doesn't need the XHTML self closing short tags, e.g. <input /> means it's very easy for rookies to make this mistake as textarea performs a very similar purpose. It's just that for a very good reason it needs closing.
<textarea name="message" cols="40" rows="6" ></textarea>
...
That done, this
<ul>
<div id="form_left">
<li>
is bad. <li> show follow <ul> there should not be a <div> there.
Also
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">
Without an id in the input, that for is useless.
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="John Doe">
But if you're going to use a label with no markup between it and the input and if you're not styling it
<label>Name: <input type="text" name="name" placeholder="John Doe"></label>
is less to output