This question already has answers here:
Send email with PHP from html form on submit with the same script
(8 answers)
Closed 6 years ago.
So, I want to set up a feedback section on my site, and the code seemed to work just fine in w3school's TryIt Editor but for some reason it didn't work on my site.
I found another question, also here on stack overflow which is pretty similar but I saw this answer...
mailto: form actions depend on browsers and local email clients playing together nicely. They do this so rarely that mailto: form actions are unusable on the WWW.
Replace it with a server side program that sends the email.
Could someone possibly give an example of what this meant? It was pretty vague, I'm assuming they meant something like PHP, but I'm not quite sure.
CSS:
.form-style-1 {
margin:10px auto;
max-width: 400px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style-1 label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
width: 49%;
}
.form-style-1 .field-long{
width: 100%;
}
.form-style-1 .field-select{
width: 100%;
}
.form-style-1 .field-textarea{
height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style-1 .required{
color:red;
}
HTML:
<html>
<head>
</head>
<body>
<form action="MAILTO:feedback#itzjavacraft.tk" method="post" enctype="text/plain">
<ul class="form-style-1">
<li>
<label>
Full Name <span class="required">*</span>
</label>
<input type="text" name="field1" class="field-divided" placeholder="First"/>
<input type="text" name="field2" class="field-divided" placeholder="Last"/>
</li>
<li>
<label>
Email <span class="required">*</span>
</label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>
Subject
</label>
<select name="field4" class="field-select">
<option value="Feedback">Feedback</option>
<option value="Suggestion">Suggestion</option>
<option value="General">General</option>
</select>
</li>
<li>
<label>
Your Message <span class="required">*</span>
</label>
<textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
</li>
<li>
<input type="submit" value="Submit" />
</li>
</ul>
</form>
<body>
Replace it with a server side program that sends the email.
Means, mailto will not work, you need to use any server side
programs to process the email like PHP mail function.
Example:
<?php
$to = 'nobody#example.com';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: webmaster#example.com';
mail($to, $subject, $message, $headers);
?>
Learn detail about PHP mail function from PHP.net
You can retrive data from the form and use in the mail function of PHP.
Related
I have built a working form that does what I want in IE an upon cross testing I have found that it jumps to the lower id= in Chrome instead of the upper name= as in IE. I know the name tag has been depreciated but I for the life of me cannot get this to open and move the form to the top any other way. I need this to work without JS. I have never used PHP before and have built this around a template for a php form. Im not sure how to hack this one any further. I have put in a lot of work to get this functional and any changes I make just break it completely.
So far I have changed names and id's but everything breaks it. I know it has to do with having both a name and an id but I'm not sure how to fix this without JS. I am testing on IE 11 and Chrome 77. I don't so much care about "old browsers" but would like to get most of the stuff being used on win 7 and up, so legacy support is not an issue but I do want to follow best practices. I am new to forms so I'm not sure where to go from here. As I said, it works, just not everywhere.
#quotejump {
display: none;
}
#quotejump:target {
display: block;
}
.form-style{
max-width: 400px;
margin: 10px auto;
padding: 0px;
background: #a0a0a0;
font-family: inherit;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
text-align: center;
}
.form-style a, .form-style h1{
text-decoration: none;
display: inline-block;
background: linear-gradient(45deg, #00f, #0ff);
padding: 20px 0;
font-size: 30px;
font-weight: 300;
width: 100%;
color: #fff;
margin: 0;
border-radius: 50px;
}
.form-style input[type="text"],
.form-style input[type="date"],
.form-style input[type="datetime"],
.form-style input[type="email"],
.form-style input[type="number"],
.form-style input[type="search"],
.form-style input[type="time"],
.form-style input[type="url"],
.form-style textarea,
.form-style select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 92%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #;
font-family: inherit;
border-radius: 30px;
}
.form-style input[type="text"]:focus,
.form-style input[type="date"]:focus,
.form-style input[type="datetime"]:focus,
.form-style input[type="email"]:focus,
.form-style input[type="number"]:focus,
.form-style input[type="search"]:focus,
.form-style input[type="time"]:focus,
.form-style input[type="url"]:focus,
.form-style textarea:focus,
.form-style select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.quotebutton {
text-decoration: none;
border: none;
background: linear-gradient(45deg, #00f, #0ff);
border-radius: 30px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 30px;
margin: 0 2px;
transition: 0.25s;
}
.form-style a:hover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
position:relative;
z-index:5;
}
.quotebutton:hover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
position:relative;
z-index:5;
}
<h1>Top of Page</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>some filler text to move the page down</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="quotejump"> </a>
<div class="calltoaction">
<h1>Contact us today for a quote!</h1>
<p>Due to the nature of the customization process all prices are figured for each specific job. This allows us to ensure the quality of your products while maintaining the lowest prices possible for you. You won't find this quality cheaper anywhere else! We guarantee it! </p>
</div>
<div class="form-style">
<a href="#quotejump" >Get Your FREE Quote Here!</a>
<div id="quotejump">
<span id="quoteform"><br />Learn How We Can Save You Money On Quality Produts Today!
<form method="post" action="send_mail.php">
<p><input type="text" name="first_name" placeholder="Your Name" required></p>
<p><input type="email" name="email_address" placeholder="Email Address" required></p>
<p><textarea name="comments" placeholder="Type your message" maxlength="1000" ></textarea></p>
<p><button class="quotebutton">Submit Form</button></p>
</form>
</span>
</div>
</div>
It should jump to the name tag and it does in IE 11 but jumps to the id tag in chrome. Any idea how to fix this without messing up the php and the display hidden until clicked on? I tried a check box but couldn't make it jump. I don't want it to be able to toggle as I want it to stay open once clicked on. Any help would be greatly appreciated.
IE11 What it should do
Chrome What it does in chrome when opened
Image of form before opening
I am trying to make a way that I can decide in what table the name and the hour goes, by selecting it from one or both checkboxes.
For example, if I have a new name and hour, I can choose whether it is going in the table of "standard" or "advanced" or both by selecting it through the checkboxes.
#myform .plus, .minus {
text-decoration: none;
color: #fff;
background-color: #fdd818;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.collapsible-header{
color: #ffffff;
}
.row{
margin: 0;
width: 100%;
}
.uren{
display: -webkit-inline-box;
padding-left: 10px;
padding-right: 10px;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #ffcc00;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #dbaf00;
text-decoration: none;
}
/* Pop up */
.letspop{
background-color: #fff;
width: 120px;
display: block;
margin: 5% auto;
padding: 20px;
position: relative;
text-align: center;
float: right;
margin-right: 20px;
margin-top: 0px;
}
.letspop:hover{
cursor: pointer;
}
.overlay{
display: none; /* Default Hidden */
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
width: 100%;
}
.popup{
display: none; /* Default Hidden */
position: fixed;
left: 50%;
top: 5%;
z-index: 2;
background-color: #fff;
height: 450px;
width: 300px;
overflow: hidden;
padding: 40px;
transform: translate(-50%, 0);
}
#new_module{
width: 195px;
}
h1, h2{
color: steelblue ;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
line-height: 1;
}
h2{
color: dodgerblue ;
}
small{
color: #444 ;
font-size:0.4em;
display: block;
margin: 0.2rem auto 0;
}
.close{
position: absolute;
top: 8px;
right: 8px;
display: block;
color: #666666;
font-family: sans-serif;
}
.close:hover{
cursor: pointer;
color: #444444;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<form action="#" method="POST">
<div class="row">
<div class="input-field col s6">
<input id="new_module" type="text" class="validate">
<label class="active" for="new_module">Name</label>
</div>
</div>
<form action="#">
<p class="range-field">
<input type="range" id="test" min="0" max="20" />
</p>
</form>
<p>
<input type="checkbox" class="filled-in" id="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced"/>
<label for="advanced">Advanced</label>
</p>
<hr>
<button class="btn waves-effect waves-light" type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<div class="close">X</div>
</form>
You need to set name for html elements to submit to server.
try the following changes:
<form action="checkbox.php" method="post">
<p>
<input type="checkbox" class="filled-in" id="standard" name="chk[]" value="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced" name="chk[]" value="advanced"/>
<label for="advanced">Advanced</label>
</p>
<input type="submit" />
</form>
and try the following php code to find selected checkbox
foreach($_POST['chk'] as $key => $chk){
if($chk == 'standard'){
// do some code
}
if($chk == 'advanced'){
// do some code
}
}
quick answer to begin to help you.
Do a "indatabase.php" where there is your SQL actions in. After, do something like :
<form action="/indatabase.php" method="POST">
See this :
https://stackoverflow.com/a/22836074/8695939
If you want a bit more security, use PHP PDO instead.
You can have sqli and PDO exemples here :
https://www.w3schools.com/php/php_mysql_insert.asp
Recently I've given a task to create a data inquiry system. The system required user to fill in the form. When it is submitted, the data will be validated by the admin and connected to the database.
This is my form.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>data</title>
<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body bgcolor="#13b4ff">
<div id="header" style="background-color: #4169E1;"><hr>
<form class="form" action="submit.php" method="post" name="form" >
<ul>
<li>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" required />
</li>
<li>
<label for="position:">Jawatan:</label>
<input type="text" name="position" />
</li>
<li>
<label for="unit">Unit:</label>
<input type="text" name="unit" required />
</li>
<li>
<label for="institute">Institute:</label>
<input type="text" name="institute" required />
</li>
<li>
<label for="telefon">No. Telefon:</label>
<input type="number" name="telefon" placeholder="eg: 012-345-6789" required />
</li>
<li>
<label for="faks">No. Faks:</label>
<input type="number" name="faks" placeholder="eg: 03-12345678" />
</li>
<li>
<label for="email">E-mail:</label>
<input type="email" name="name" placeholder="name#something.com"/ required>
<span class="form_hint">proper format<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></span>
</li>
<li>
<label for="data">Data Required:</label>
<input type="text" name="data" required/>
</li>
<li>
<label for="purpose">Purpose:</label>
<input type="text" name="purpose" required/>
</li>
<li>
<button class="submit" type="submit">Submit</button>
</li>
</ul>
</form>
</body>
</html>
This is the styles.css for the form:
.form {
background-color:#ffffff;
margin: 0 auto;
width:750px;
height: 825px;
}
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.form h2, .form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
.form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.form li{
padding:13px;
border-bottom:1px solid #eee;
position:relative;
}
.form li:first-child, .form li:last-child {
border-bottom:2px solid #777;
}
/*header*/
.form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
.form label {
width:200px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
.form textarea {padding:8px; width:300px;}
.form button {margin-left:156px;}
.form input, .form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
padding-right:30px;
}
.form input:focus, .form textarea:focus {
padding-right:70px;
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
}
button.submit {
margin: 250 auto;
width:100px;
}
button.submit {
background-color: #2F68B1;
background: -webkit-gradient(linear, left top, left bottom, from(#2F68B1), to(#10468B));
background: -webkit-linear-gradient(top, #2F68B1, #10468B);
background: -moz-linear-gradient(top, #2F68B1, #10468B);
background: -ms-linear-gradient(top, #2F68B1, #10468B);
background: -o-linear-gradient(top, #2F68B1, #10468B);
background: linear-gradient(top, #2F68B1, #10468B);
border: 1px solid #2C6BB8;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 7px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
input:required, textarea:required {
background: #fff url(asterisk.jpg) no-repeat 98% center;
}
/*invalid, valid*/
.form input:focus:invalid, .form textarea:focus:invalid { /* when a field is considered invalid by the browser */
background: #fff url(invalid.jpg) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
.form input:required:valid, .form textarea:required:valid { /* when a field is considered valid by the browser */
background: #fff url(valid.jpg) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
}
And the form will be transfered to submit.php (I did the database using mysql). I use wampserver.
<?php
//debug mode
error_reporting(E_ALL);
ini_set('display_errors', 'On');
//to show some error is smthng went wrong
$errors = array();
function connect(){
$connection = mysql_connect(localhost, root, "" ); //I have no idea what the password is. where could I set one?
$db = mysql_select_db(permohonan_data,$connection);
if (!$connection || !$db){
return false;
}
else{
return true;
}
}
echo "first stage";
//will run if user did submit the form
if (!empty($_POST)){
echo "second stage";
//connect sql server:
if (!connect()){
$errors[] = "Can't establish link to MySql server";
}
$name = $_POST['name'];
$position = $_POST['position'];
$unit = $_POST['unit'];
$institute = $_POST['institute'];
$telefon = $_POST['telefon'];
$faks = $_POST['faks'];
$email = $_POST['email'];
$data = $_POST['data'];
$purpose = $_POST['purpose'];
echo "third stage";
//no error til here
if (empty($error)){
//prevent SQL injection
$name = mysql_real_escape_string($name);
$position = mysql_real_escape_string($position);
$unit = mysql_real_escape_string($unit);
$institute = mysql_real_escape_string($institute);
$telefon = mysql_real_escape_string($telefon);
$faks = mysql_real_escape_string($faks);
$email = mysql_real_escape_string($email);
$data = mysql_real_escape_string($data);
$purpose = mysql_real_escape_string($purpose);
}
echo "fourth stage";
//try insert value
$query = "INSERT INTO 'user'
(name,position,unit,institute,telefon,faks,email,data,purpose)
VALUES ('$name', '$position', '$unit', '$institute', '$telefon', '$faks', '$email', '$data', '$purpose')";
if (!mysql_query($query)){
//
//die(mysql_error());
$errors[] = "Can't insert the values";
}
else {
//on success
header('location:C:\wamp\www\FORM\thankyou.php');
}
}
?>
Which the result gives no errors, I've put the reporting error syntax, but also nothing is displayed to the screen. The script are still visual at the page source though. And when I put the echo part, the script just runs until "first stage". It didn't redirect to thankyou.php. What did I do wrong? And how can I connect this to the database? I did the $connect part, but it still vague to me. please help.
This is the thankyou.php:
<html>
<head>
<meta charset="utf-8">
<title>thank you!</title>
<link rel="stylesheet" media="screen" href="stylesphp.css" >
</head>
<body bgcolor="#13b4ff">
<div class="boxed";>
<div id="thankyou" style= "text-align:center; font-size:50px;">THANK YOU</div><br>
Your inquiry has been submitted. Please wait 24 hours. <br>
You will be notify by email.
<p> return to <a class="a" href="http://www.moe.gov.my/en/home" target="_self">main page.</a>
</div>
</body>
</html>
EDIT, thanks to Fred -ii- and Joni Salmi, I have fix the error.
but it shows this instead:
Notice: Undefined index: email in C:\wamp\www\FORM\submit.php on line 39.
this is line 39
$email = $_POST['email'];
As per your original question
$_POST is a "superglobal" and MUST be in uppercase.
You have:
if (!empty($_post)){
Change it to:
if (!empty($_POST)){
That seems to be the most likely part of the problem.
As far as I can tell, the rest of your code seems OK to me, besides the fact that you're using a deprecated mysql_ function.
EDIT
As Joni Salmi pointed out in a comment,
you are using msql_connect which should be mysql_connect
Credit to Joni (Salmi)
Change:
$connection = msql_connect(localhost, root, "" );
missing "y" => ^
to:
$connection = mysql_connect(localhost, root, "" );
Also as per your comment about Undefined index: email error message.
Change this line:
<input type="email" name="name" placeholder="name#something.com"/ required>
to:
<input type="email" name="email" placeholder="name#something.com"/ required>
You had:
<label for="name">Name:</label>
<input type="text" name="name" required />
with the same named input field of name="name" as your email input.
Edit #2
Use backticks instead of quotes for your table name.
You have:
$query = "INSERT INTO 'user'
Use (backticks):
$query = "INSERT INTO `user`
You can even remove the quotes: (but backticks are better)
$query = "INSERT INTO user
RE: Undefined index:
You have incorrectly named the input fied that is to hold the email address in the HTML
<input type="email" name="name" placeholder="name#something.com"/ required>
Change it to
<input type="email" name="email" placeholder="name#something.com"/ required>
Note the name="email"
The names you give the fields in HTML control the fieldnames used in the $_POST array.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a form in the footer and contact page of a clients website, its only simple but for some reason the form text area box does not move on to another line when it reaches the end of the box, it just keeps scrolling. The site is live here
The client wants to be able to create new paragraphs and the content box to resize according to the amount of content input.
I have played around with it for ages but can't seem to find anything wrong. Maybe i
I'm missing something obvious...
My forms code is this, obviously with php code above
<h1 style="color:#00b3ff" id="contact-form">Contact us</h1>
<?php if( !$success ): ?>
<p style="color:#FFFFFF;">Fill out the form below and we will respond asap.</p>
<form class="quick" method="post" action="#contact-form">
<input type="text" name="contact[name]" class="text-field" value="<?php echo $_POST['contact']['name']; ?>" placeholder="Name *" />
<input type="text" name="contact[email]" class="text-field" value="<?php echo $_POST['contact']['email']; ?>" placeholder="Email" />
<input type="text" name="contact[telephone]" class="text-field" value="<?php echo $_POST['contact']['telephone']; ?>" placeholder="Telephone *" />
<input type="text" name="contact[comments]" class="textarea" value="<?php echo $_POST['contact']['comments']; ?>" placeholder="Comments *" />
<input type="submit" value="Submit" name="submit" class="submit" />
<?php else: ?>
<p style="color: white;">Thank you for your enquiry, we'll get back to you shortly.</p>
<?php endif; ?>
</form>
/* LOGIN & REGISTER FORM */
form.quick{
height: auto;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
I cant see anything here that is wrong?
form .text-field {
float: left;
border: 0px solid #a6a6a6;
width: 70%;
height: 45px;
border-radius: 2px;
margin-top: 10px;
padding-left: 10px;
color: #000000;
background: #fcfcfc;
outline: none;
}
form .text-field:focus {
box-shadow: inset 0 0 2px #008dd3;
color: #a6a6a6;
background: white;
}
form .textarea {
float: left;
border: 0px solid #a6a6a6;
width: 70%;
height: 45px;
border-radius: 2px;
margin-top: 10px;
padding-left: 10px;
color: #000000;
background: #fcfcfc;
outline: none;
}
form .textarea:focus {
box-shadow: inset 0 0 2px #00b3ff;
background: white;
}
form .submit {
-webkit-appearance: none;
border-radius: 2px;
border: 0px solid #336895;
width: 40%;
height: 40px;
margin-top: 10px;
background-color: #00b3ff;
cursor: pointer;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight:400;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
form .submit:hover {
opacity: 0.8;
}
Could someone help me please I'm pulling my hair out over this!
Change
<input type="text" name="contact[comments]" class="textarea" value="<?php echo $_POST['contact']['comments']; ?>" placeholder="Comments *" />
to
<textarea name="contact[comments]" class="textarea" placeholder="Comments *"><?php echo $_POST['contact']['comments']; ?></textarea>
I know it has been asked a lot on this website but i just need to know how to do it.
I've got a code in html on CSS3 for an e-mail form. The only thing that is left for me is to make it work. My website is on the same server as my e-mail.
This is the coding.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Contact Form</title>
<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</body>
</html>
CSS
/* === Remove input autofocus webkit === */
*:focus {outline: none;}
/* === Form Typography === */
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
/* === List Styles === */
.contact_form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.contact_form li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
border-bottom:1px solid #777;
}
/* === Form Header === */
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
/* === Form Elements === */
.contact_form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input {
height:20px;
width:220px;
padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
/* form element visual styles */
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
padding-right:30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
/* === Form hints === */
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\25C0";
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
/* === Button Style === */
button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
If some one can help me out it would be a blast.
OK. I created the PHP code that tested and worked.
Firstly replace your HTML cede with this
<form class="contact_form" action="submit.php" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input name="website" type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
Your CSS will be the same and PHP code is this:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$website = $_POST['website'];
$message = $_POST['message'];
$to = 'your#email.com';
$headers = 'From: '.$email."\r\n" .'Reply-To: '.$email."\r\n" .'X-Mailer: PHP/' . phpversion();
$subject = $subject;
$body.='Name: '.$name."\n";
$body.='Email: '.$email."\n";
$body.='Website: '.$website."\n";
$body.='Message: '."\n".$message."\n";
if(mail($to, $subject, $body, $headers)) {
die('Mail sent');
}
else {
die('Error: Mail failed');
}
?>
In $to on PHP write your email.
Note: You need to write PHP code on submit.php