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
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 am using a plugin in wordpress to display a newsletter form and I try to style it using css. Above the newsletter signup I got a search form and I try to get the same style.
That's the html output and my css:
#sidebar {
font-size: 1em;
font-family: sans-serif, Arial;
color: #2A2A2A;
}
.screen-reader-text {
display: none;
}
#s {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#searchsubmit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#searchsubmit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
#s:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-cleverreach_email {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#haet-cleverreach-cleverreach_email:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-submit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#haet-cleverreach-submit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
<h3>Suche</h3>
<form role="search" method="get" id="searchform" class="searchform" action="http://backpackfamily.de/">
<div>
<label class="screen-reader-text" for="s">Suche nach:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suchen" />
</div>
</form>
<h3>Newsletter</h3>
<div class="haet-cleverreach">
<form method="post" class="haet-cleverreach-form">
<input type="hidden" name="haet-cleverreach-is-widget" value="1">
<input type="hidden" name="haet-cleverreach-form-id" value="122548">
<input type="hidden" name="haet-cleverreach-list-id" value="891928">
<div class="haet-cleverreach-field-wrap label-inside type-description ">
<p>Melde dich zu unserem Newsletter an!</p>
</div>
<div class="haet-cleverreach-field-wrap label-inside type-email ">
<input type="email" id="haet-cleverreach-cleverreach_email" name="haet-cleverreach-cleverreach_email" value="" placeholder="E-Mail">
</div>
<div class="haet-cleverreach-field-wrap label-inside type-submit ">
<button type="submit" class="button" id="haet-cleverreach-submit">
→</button>
</div>
</form>
</div>
I don't know what to do, tried various things but nothing worked for me!
Thank you!!
add those styles to yours and it will work fine :
.haet-cleverreach-field-wrap.label-inside.type-email {
width: 67%;
float: left;
}
#haet-cleverreach-cleverreach_email{
width:100% !important;
}
You could add the following CSS:
#haet-cleverreach-cleverreach_email {
float: left;
}
Created a mail form for a contact section. There's a mark tag after the form that displays after validating that all required fields aren't satisfied and lists which ones need to be satisfied.
Upon submitting though, if values are entered, they are echoed as they're suppose to, HOWEVER the mark tag does not display...
I need help with having the mark tag display when there are errors...
HTML:
<form method="post" action="">
<input type="text" name="name" placeholder="Name" value="<?php echo $_POST['name']; ?>">
<input type="tel" name="phone" placeholder="Phone Number" value="<?php echo $_POST['phone']; ?>">
<input type="email" name="email" placeholder="Email" value="<?php echo $_POST['email']; ?>">
<input type="text" name="invoice" placeholder="Invoice Number (optional)" value="<?php echo $_POST['invoice']; ?>">
<textarea name="comments" maxlength="500" rows="10" cols="10" placeholder="Please enter your comments here..." value="<?php echo $_POST['comments'];?>"></textarea>
<button type="submit">Submit</button>
</form>
<mark><?php echo $MSG[0]; ?></mark>
PHP:
<?php
if(!empty($_POST)) {
$POST=filter_post($_POST);
$MSG=check_empty($POST);
if(!array_filter($MSG)) {
send_mail($POST);
if(send_mail($POST)) {
$MSG[]="Email Success";
}
else {
$MSG[]="Email Failed";
}
}
}
function filter_post($POST) {
$keys=array('name', 'phone', 'email', 'invoice', 'comments');
$POST=array_intersect_key($POST, array_flip($keys));
$POST=array_map('strip_tags', $POST);
return($POST);
}
function check_empty($POST) {
foreach($POST as $key=> $value) {
if(empty($value)) {
$MSG[]="You need to fill out the $key section";
}
}
return($MSG);
}
function send_mail($POST) {
extract($POST);
$to='7servicerepairs#gmail.com';
$sbj='New Question For Se7en Service!';
$msg="Name: $name \n Phone: $phone \n Email: $email \n Invoice #: $invoice \n Comments: $comments";
$headers="From: $email";
return(mail($to, $sbj, $msg, $headers));
}
?>
CSS:
form{
cursor: default !important;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
-webkit-flex-direction: column;
flex-direction: column;
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
padding: 1.3em;
}
form>input{
width: 22.1em;
height: 2.5em;
margin: 0.2em 0;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
text-align: center;
border: 1px solid #d5dadc;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #7C7C7C;
outline: none;
}
form>button{
width: 22.35em;
height: 2.5em;
margin: 0.2em 0;
padding: 0;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
cursor: pointer;
outline: none;
border: none;
color: #fff;
background: #2ECC71;
-webkit-border-radius: 2px;
border-radius: 2px;
}
form>textarea{
margin: 0.2em 0;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
border: 1px solid #d5dadc;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #7C7C7C;
outline: none;
max-width: 22em;
}
mark{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
height: 1.5em;
margin: 1.5em;
font-size: 1em;
color: #fff;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
background: none;
}
White letters over no background? It is surely there, you just can't distinguish it.
mark {
...
color: #ff0000;
...
}
http://jsfiddle.net/2hsh4zmb/
I'm trying to get the admin login to center in the middle so that it looks better, here's the code.
<?php
session_start();
$username="user";
$password="123";
if(isset($_POST['username']) && $_POST['password'] == $password)
{
header("Location: mainpage.php");
}
else
{
?>
<html>
<head>
</head>
<body>
<div style='text-align:center'>
<h3>Welcome To Kontak</h3>
</div>
<hr /><br />
<form id='login' action="" method='post' accept-charset='UTF-8'>
<fieldset style="width:550px">
<legend>Admin Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='submit' value='Submit' />
</fieldset>
</form>
</body>
</html>
<?php
}
?>
The admin login and the box is not centered and I'm sure the solution is pretty easy, but I'm not the best at php.
use style="margin: 0px auto; width: 550px;" for form like as below
or
you can use <fieldset style="margin: 0px auto;width:550px"> this also
<html>
<head>
</head>
<body>
<div style='text-align:center'>
<h3>Welcome To Kontak</h3>
</div>
<hr /><br />
<form id='login' action="" method='post' accept-charset='UTF-8' style="margin: 0px auto; width: 550px;">
<fieldset style="width:550px">
<legend>Admin Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='submit' value='Submit' />
</fieldset>
</form>
</body>
</html>
This is not a php issue, You can do this with HTML and CSS.
I have created login form...
HTML
<form id="login" class="login">
<h2>Please log in</h2>
<label for="user" class="icon-user">User:</label>
<input class="user" id="user" />
<label for="password" class="icon-lock">Password:</label>
<input type="password" class="password" id="password" />
<input type="submit" value="Go" />
<ul class="extra">
<li>Forgot Password</li>
</ul>
</form>
<div class="blur"></div>
CSS
* {
user-select: none;
#include box-sizing(border-box);
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
font-family:"Roboto", Arial, sans-serif;
font-weight: 400;
color: white;
}
.blur {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url('http://www.wallgc.com/images/2013/05/abstract-wallpaper-abstract-wallpapers.jpg') no-repeat;
background-position: center bottom;
z-index: -1;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
color: rgba(#fff, .85);
display: inline-block;
font-size: 16px;
padding: 8px 12px;
text-decoration: none;
border-radius: 10px;
#include background-clip(padding-box);
#include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
inset 1px 1px 0px rgba(255, 255, 255, 0.3)
);
border: 1px solid #000;
background-color: rgba(#000, .1);
#include background-image(linear-gradient(top, rgba(#000, .1), rgba(#000, .3)));
h2 {
margin: .5em;
text-align: center;
//#include background-image(linear-gradient(#fff, #eee));
//#include background-clip(text);
//-webkit-text-fill-color: transparent;
text-shadow: 0 1px 2px rgba(#000,.5);
font-weight: 900;
}
input,
label,
.extra {
outline: none;
position: absolute;
}
}
.user,
.password {
font-size: 150%;
color: #fff;
#include box-sizing(border-box);
height: 45px;
padding: .3em 20px .3em 40px;
width: 270px;
background: rgba(#000, .3);
border: 0;
border-radius: 25px;
box-shadow: 0 -1px 1px rgba(#fff, .8) inset;
}
.password {
padding: .3em 70px .3em 40px;
}
[for="user"],
.user {
top: 70px;
}
[for="password"],
.password,
input[type="submit"] {
top: 150px;
}
[for="password"],
[for="user"] {
text-indent: -9999px;
&:before {
text-indent: 0;
position: absolute;
top: 12px;
left: 15px;
font-size: 120%;
z-index: 1;
}
}
input[type="submit"] {
right: 17px;
height: 43px;
width: 60px;
background-color: #6bac14;
#include background-image(linear-gradient(to bottom, #8ff704, #1c8700));
border: 0;
border-radius: 0 25px 25px 0;
box-shadow: 0 5px 2px #a6ee40 inset, 1px 1px 0 rgba(#000, .5);
color: #fff;
text-transform: uppercase;
font-size: 110%;
text-shadow: 1px 1px 0 rgba(#000, .5);
text-align: center;
}
label[for="remember"] {
top: 210px;
left: 40%;
cursor: pointer;
white-space: nowrap;
}
#remember { visibility: hidden;}
.remember {
&:before,
&:after {
visibility: visible;
content: '';
position: absolute;
left:-35px;
top: 4px;
}
&:before {
right: -2px;
width: 30px;
height: 15px;
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(#000, .8);
#include background-image(linear-gradient(top, rgba(#000, .1) 0%, rgba(#000,.2) 100%));
}
&:after {
top: 2px;
width: 16px;
height: 16px;
background-color: #fff;
#include background-image(linear-gradient(top, #E5E5E5 0%, #878787 100%));
border: 1px solid rgba(#000,.5);
border-radius: 50%;
box-shadow: inset 0px 1px 1px white, 0 1px 1px rgba(0,0,0,.8);
right:11px;
}
}
#remember:checked + .remember {
&:before {
#include background-image(linear-gradient(top, #C25830 0%, #F69C3C 100%));
}
&:after {
left: -21px;
font-family: FontAwesome;
content: '\f00c';
color: rgba(#000, .4);
}
}
.extra {
margin: 0;
padding: 0;
list-style: none;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(#000,.3);
left: 0;
border-radius: 0 0 10px 10px;
#include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
inset 1px 0 0px rgba(255, 255, 255, 0.3)
);
border-top: 1px solid #000;
word-spacing: -1;
a {
display: inline-block;
text-decoration: none;
height: 100%;
&.facebook,
&.googlePlus {
top: 0;
background-position: left top;
background-repeat: no-repeat;
width: 49px;
text-indent: 9999px;
position: absolute;
top: 0;
right: 0;
&:before {
position: absolute;
top: 7px;
left: 12px;
text-indent: 0;
color: rgba(#fff, .8);
font-size: 180%;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
}
&.forgetPassword {
width: 200px;
color: #fff;
line-height: 45px;
text-align: center;
text-shadow: 0 1px 1px rgba(black, 0.5);
&:before {
font-family: FontAwesome;
content: '\f0e2';
padding-right: 5px;
}
}
}
}
<form id='login' action="" method='post' accept-charset='UTF-8'>
to
<form id='login' action="" method='post' accept-charset='UTF-8' style='text-align: center'>
What I did here is add CSS Text-Align
PHP is the back-end stuff, it has nothing to do with what the browser interprets
I have been trying to get this working for a while, I've tried numberous things to try and fix the problem but I've probably just made things worse. The problem I am having is that when I submit my contact form it doesn't send the message, it just redirects me to "index.html#"
I have posted the code for my site below. Please let me know whats up if you guys can see anything I'm missing.
HEAD HTML
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// SUCCESS AJAX CALL, replace "success: false," by: success : function() { callSuccessFunction() },
$("#form1").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "ajaxSubmit.php",
ajaxSubmitMessage: "Thank you, We will contact you soon !",
success : false,
failure : function() {}
})
});
</script>
BODY HTML (index.html)
<div id="contact">
<h3>need more info?</h3>
<form action="#" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
</p>
<p>
<input type="text" id="name" placeholder="Enter your full name" />
<label for="email">Email:</label>
</p>
<p>
<input type="email" id="email" placeholder="Enter your email address" />
<label for="message">Message:</label>
</p>
<p>
<textarea id="message" placeholder="Looking for a quote?"></textarea>
<input type="submit" value="Send message" />
</p>
</fieldset>
</form>
<?php
$ToEmail = 'jordantrout0#gmail.com';
$EmailSubject = 'Site contact form';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["name"]."";
$MESSAGE_BODY .= "Email: ".$_POST["email"]."";
$MESSAGE_BODY .= "Message: ".nl2br($_POST["message"])."";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
</div>
CSS (contact.css)
body, div, h3, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
html {
height: 100%;
}
#contact {
float:right;
width: 250px; margin: 60px auto; padding: 60px 30px;
background: #9fad23; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
h3 {
font-size: 25px; color: #445668; text-transform: uppercase;
text-align: center; margin: 0 0 25px 0;
}
label {
float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
font-size: 12px; color: #445668;
text-transform: uppercase;
}
input {
width: 200px;
height: 35px;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 12px;
color: #f2f2f2;
text-transform: uppercase;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
input::-webkit-input-placeholder {
color: #a1b2c3;
}
input:-moz-placeholder {
color: #a1b2c3;
}
textarea {
width: 200px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif; font-size: 12px; color: #f2f2f2; text-transform: uppercase;
}
textarea::-webkit-input-placeholder {
color: #a1b2c3;
}
textarea:-moz-placeholder {
color: #a1b2c3;
}
input:focus, textarea:focus {
background: #728eaa;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}
input[type=submit] {
width: 150px; height: 40px; float:right; padding: 10px 15px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
cursor: pointer;
}
AjaxSubmit.php
<?php
$name = $_POST['name']; // contain name of person
$email = $_POST['email']; // Email address of sender
$web = $_POST['web']; // Your website URL
$body = $_POST['text']; // Your message
$receiver = "jordantrout0#gmail.com" ; // hardcorde your email address here - This is the email address that all your feedbacks will be sent to
if (!empty($name) & !empty($email) && !empty($body)) {
$body = "Name:{$name}\n\nWebsite :{$web}\n\nComments:{$body}";
$send = mail($receiver, 'Contact Form Submission', $body, "From: {$email}");
if ($send) {
echo 'true'; //if everything is ok,always return true , else ajax submission won't work
}
}
?>
Of course it is going to submit to index.html#, you told it to:
<form action="#" method="post">
Try this instead:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">