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.
Related
I've been working on a system that allows a user to insert data, which will pass into a MySql database using SQL querieshowever, I've noticed that every time the page is refreshed, empty data is inserted into the database. Connection, queries, PHP, HTML and every other code works. The redirection works as intended but I realise my system just needs a slight correction. Am I doing something wrong?
<?php
$con = mysqli_connect("localhost","root","","system");
$error = 0;
$errormessage = "";
if( isset($_POST['submit'])){
$name = $_POST['name'];
$email = $_GET['email'];
$password = $_POST['password'];
$password = hash('sha256' , $password);
}else{
$errormessage = $errormessage . "Please Fill all Fields";
$error++;
}
if($errors == 0){
$sql = "INSERT INTO User
(name, email, password)
VALUES
('$name','$email','$password')";
mysqli_query($con, $sql) or die (mysqli_error($con));
$errormessage = "Data Successfully Entered";
}
?>
<!DOCTYPE html>
<html>
<body>
<header>
<div style="background-color:black"><div style="text-align:center;"> <h1><style="color:Black;">Register</h1></div></div> </header>
<style>
input[type=text], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 5px solid magenta;
border: 5px solid magenta;
border-radius: 4px;
box-sizing: border-box;
align:center;
}
input[type=button] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 40px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
align:center;
}
input[type=password], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 5px solid magenta;
border: 5px solid magenta;
border-radius: 4px;
box-sizing: border-box;
align:center;
}
input[type=email], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 5px solid magenta;
border: 5px solid magenta;
border-radius: 4px;
box-sizing: border-box;
align:center;
}
input[type=submit] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
align:center;
}
input[type=submit]:hover {
background-color: green;
}
div {
margin-left:auto;
margin-right:auto;
width: 90%;
border: 5px solid lime;
border-radius: 5px;
background-color: #ECF0F1;
padding: 20px;
}
</style>
</nav>
<div>
<form method="Post">
<label for="name">
<div style="text-align:center;"><input type= "button" id="RegisterPage" value = "Go to Register Page" onclick="document.location.href='example.php'">
<input type= "button" id="LoginPage" value = "Go to Login Page" onclick="document.location.href='http://localhost/example2.php'"><p>Your Name</label><br>
<input type="text" id="name" name="name" placeholder="Enter Name" required><br>
<label for="email">E-Mail:</label><br>
<input type="email" id="email" name="email" placeholder="Your e-mail" required><br>
<label for="password">Password:</label><br>
<input type="password" name="password" placeholder="At least 6 characters" required><br>
<input type="submit" name = "submit" value="Create your Account ">
</form></div>
<footer><div style="background-color:aqua; border: 5px solid black;">
</form></div>
</footer>
</nav>
</body>
</html>
You can do a ON DUPLICATE KEY UPDATE with your insert statement to update the database records instead of entering more. Also, make sure to setup your primary keys in your DB.
$sql = "INSERT INTO User
(name, email, password)
VALUES
('$name','$email','$password')
ON DUPLICATE KEY UPDATE
name = `$name`, email = `$email`, `$password`";
I need to capture the IP Address of visitors who opt to fill up the WebToLead Form created in SuiteCRM. I am able to capture the data of visitor in fields such as First Name, Last Name, Email ID, but not IP address of the visitor.
Here is the complete code of this webtoLead form: which I have created:
<html lang='en_us'><head><base target=”_parent” /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d87643f4b7d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2rd432146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="poello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
I have scanned through 100s of webpages w.r.t., IP Address Capturing, but no page provided sufficient information about how to do it in SuiteCRM or SugarCRM.
No forum member of SuiteCRM or SugarCRM also could provide 'precise' and 'correct' instruction.
Kindly help w.r.t.
I need to capture the IP address of user who fills up the WebToPerson form and to pass this value to a custom field 'created_ip_address_c' which I have created in table 'prospects'.
You help is solicited.
With thanks,
RK
Environment is:
PHP 5.4.3
MySQL
Apache
Within SugarCRM, Add a field to hold the IP Address to your Leads module
Add this field to your Web to Lead form, but alter the HTML so that it is a hidden input
Within the site that holds your webform, capture the user's IP address and add it to then hidden input
Post form data to Sugar as normal
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.
I am having issue with this form. It emails me all the data it collects, but I do not get any images. To the genius amongst us, I didn't write any php to attempt to get the because I do not know which coding to use. Any assistance is deeply appreciated. Thank you
<?php
$accounttype = $_POST['accounttype'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$middlename = $_POST['middlename'];
$email = $_POST['email'];
$location = $_POST['location'];
$year = $_POST['year'];
$gender = $_POST['gender'];
$formcontent = "Status: $accounttype \r\n First: $firstname \r\n Last:$lastname \r\n Middle:$middlename \r\n Where:$location \r\n Grad:$year \r\n Gender:$gender";
$recipient = "john.doe#gmail.com";
$subject = "Registration Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" . " -" . "<a href='../../index.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;
}
fieldset, img {
border: 0;
}
ol, ul, li {
list-style: none;
}
:focus {
outline: none;
}
body, input, textarea, select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 343px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form {
height:auto;
margin: 0 30px;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.25em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr {
color: #a9a9a9;
opacity: 0.3;
}
input[type=text],input[type=email],input[type=number] {
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password] {
margin-bottom: 25px;
}
#icon {
display: inline-block;
width: 30px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype {
margin-left: 8px;
margin-top: 20px;
}
.button {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
float: right;
text-decoration: none;
width: auto; height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<html>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<?php echo $output; ?>
<div class="testbox">
<h1>Registration</h1>
<form action="assets/php/mail.php" method="post">
<hr>
<div class="accounttype">
<input type="radio" value="student" id="student" name="accounttype" checked/>
<label for="student" class="radio" chec>Student</label>
<input type="radio" value="faculty" id="faculty" name="accounttype" />
<label for="faculty" class="radio">Faculty</label>
</div>
<hr>
<label id="icon" for="name"><i class="icon-user "></i></label>
<input type="text" name="firstname" id="firstname" placeholder="First Name" required/>
<label id="icon" for="name"><i class="icon-user"></i></label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" required/>
<label id="icon" for="name"><i class="icon-shield"></i></label>
<input type="text" name="middlename" id="middlename" placeholder="Middle Name"/>
<hr>
<label id="icon" for="name"><i class="icon-envelope "></i></label>
<input type="email" name="email" id="email" placeholder="Email Address" required/>
<label id="icon" for="name"><i class="icon-map-marker "></i></label>
<input type="text" name="location" id="location" placeholder="City, State" required/>
<label id="icon" for="name"><i class="icon-shield"></i></label>
<input type="number" name="year" id="year" placeholder="Graduation Year" required/>
<hr>
<div class="gender">
<input type="radio" value="male" id="male" name="gender" checked/>
<label for="male" class="radio" chec>Male</label>
<input type="radio" value="female" id="female" name="gender" />
<label for="female" class="radio">Female</label>
<hr>
<p>Upload full body image</p>
<input type="file" accept="image/*;capture=camera">
</div>
<p>By clicking Register, you agree on our terms and condition.</p>
<input type="submit" class="button" value="Send" />
</form>
</div>
</body>
</html>
It is because you do not upload the images therefore sending the location of file does not help.
I am not going to provide the implementation as it depends on the abstract solution you choose:
a) upload the image to your server and send the image to you
b) upload the image to a file sharing website and send the image to you
First, You need to upload image to your server, then create a link http://abcd.com/directory/uploaded-image.jpg and send it in email. For this you could use very simple php function
move_uploaded_files
see example here
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