I have created this Bootstrap Form for my website so that clients can contact me. i am using PHP to send the form to my email address. The form gets sent to my email address but when i receive it, the information put into the text fields of the form doesn't show up.
Any help/advice would be greatly appreciated.
<?PHP
/* Subject & Email Variables */
$emailSubject = 'Photography Quote';
$webMaster = 'ryanandelissa#seawardphotography.com';
/* Gathering Data Variables*/
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$hdyhau = $_POST['hdyhau'];
$message = $_POST['message'];
$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name: $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = mail($webMaster, $emailSubject, $body, $headers);
/* Results Rendered As HTML */
$theResults = <<<EOD
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Lora' serif;
font-size: 25px;
padding-bottom: 30px;
}
input[type=button]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=button]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 41px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form action="Instagram.html">
<input type="button" value="HOME">
</form>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
EOD;
echo($theResults);
?>
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
/*image*/
.contact img{
width: 70%;
}
/* form */
.form label{
padding-top: 30px;
padding-left: 400px;
display: block;
float: right;
padding-right: 189px;
font-family: "Lora" serif;
font-size: 12px;
}
input, textarea{
font: 1em "Lora" sans-serif;
width:300px;
}
textarea{
vertical-align: top;
height: 5em;
resize: vertical;
}
input[type=submit]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=submit]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 44px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
img{
padding-bottom: 30px;
}
.contact-form{
padding: 20px;
}
label{
font-family: "Lora" serif;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div class="img-list">
<img src="Images/ContactImage.jpg" class="img-responsive" width="750px" height="auto" />
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form method="post" action="Contact%20Form.php" >
<div class="contact-form">
<div class="row">
<div class="col-md-6 ">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email">
</div>
<div class="clearfix visible-md-block"></div>
<div class="form-group">
<label for="hdyhau">How Did You Hear About Us?</label>
<input type="text" class="form-control" name="hdyhau">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" rows="4" name="message"></textarea>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="SEND!" class="btn btn-primary">
</div>
</div>
</div>
</form>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
Even though this was a typo, missing a dot/concatenate in the following and "breaking the chain, as it were":
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = mail($webMaster, $emailSubject, $body, $headers);
^ Missing a dot/concatenate and is "broken"
that should have read as:
$headers .= mail($webMaster, $emailSubject, $body, $headers);
You really should be checking for empty fields, as you risk in receiving empty emails.
For example and being a serverside method which is best to also use should a user disable JS, the following does that and checks if the submit button is also clicked:
if(isset($_POST['submit'])){
if(!empty($_POST['firstname'])
&& !empty($_POST['lastname'])
&& !empty($_POST['email'])
&& !empty($_POST['hdyhau'])
&& !empty($_POST['message']) )
{
// Send the mail here
}
}
You could also use the (HTML5) required attribute for your inputs.
I.e.:
<input type="text" class="form-control" name="firstname" required>
Also look into the following for a JS method:
Mark error in form using Bootstrap
how to disable a send button if fields empty bootstrap
Validate input text in bootstrap modal
Related
I have a problem that, like I wrote at title, though its because wordpress.
Im working with a basic wordpress theme but I made my own header, my own footer and my own pages.
Heres my header:
<body>
<div class="wrapper">
<header>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/scriptmain.js" type="text/javascript"></script>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ArvanJobs
</div>
<?php
wp_nav_menu( array(
'theme location' => 'top',
'container' => 'div',
'container_class' => 'menu',
));
?>
</nav>
</header>
And here's the footer:
<?php
/**
*
* #link arvanjobs.com
*
* #package Klmfsk
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<footer class="container-fluid bg-grey py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 ">
<div class="logo-part">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" class="w-50 logo-footer" >
<p>7637 Laurel Dr. King Of Prussia, PA 19406</p>
<p>Use this tool as test data for an automated system or find your next pen</p>
</div>
</div>
<div class="col-md-6 px-4">
<h6> About Company</h6>
<p>But horizontal lines can only be a full pixel high.</p>
More Info <br>
Contact Us
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 px-4">
<h6> Help us</h6>
<div class="row ">
<div class="col-md-6">
<ul>
<li> Home </li>
<li> About </li>
<li> Service </li>
<li> Team </li>
<li> Help </li>
<li> Contact </li>
</ul>
</div>
<div class="col-md-6 px-4">
<ul>
<li> Cab Faciliy </li>
<li> Fax </li>
<li> Terms </li>
<li> Policy </li>
<li> Refunds </li>
<li> Paypal </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 ">
<h6> Newsletter</h6>
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
<p>That's technology limitation of LCD monitors</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Then, my method is:
1- To make a new wp page. Named for example: Index.
2-Make a page-index.php and I code there calling the header and the footer.
U can se at arvanjobs.com. I made a page-index.php, and I code this: (and works fine.)
<?php get_header(); ?>
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
</div>
<div class="item3 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way
of working, of traveling, of training, of advancing in
your career. Whether you are a company looking for
workers or you are looking for a new job
opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies
that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above
all for our experience working in hotels in
numerous countries.
Because we know how difficult it is to take that step
of daring to work in a foreign country. Because we
know how hard it is to find the right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have
worked in hotels, not offices
The same happens with our clients who have to
satisfy a series of criteria and guarantees for the
worker to work with us.</p>
</div>
<div class="item10 cnt">10</div>
<div class="item11 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg" />
</div>
<div class="item13 cnt">
<!--<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg" />-->
</div>
</div>
<?php get_footer(); ?>
As u can see at arvanjobs.com, the header is at top, the footer at bottom...well, nice. Then I do THE SAME EXACTLY THING, I make a wp page called "Candidates", then I make a .php called "page-candidates.php" with this:
<?php get_header(); ?>
<body>
<div class="bg">
<section class="form">
<div class="formwrap">
<form method="POST" id="Form" action="https://www.arvanjobs.com/wp-content/themes/astra/registered.php" enctype="multipart/form-data">
<h4>My short CV</h4>
<label for="lastname">Last name:</label>
<input class="controls" type="text" name="lname" id="lname" placeholder="Ex: Sorribes" required="">
<label for="name">Name:</label>
<input class="controls" type="text" name="name" id="name" placeholder="Ex: Pablo" required="">
<label for="bcountry">Country of birth:</label>
<select id="bcountry" name="bcountry" class="date" placeholder="Ex: Spain" required="">
</select>
<div>
<label for="email">Email:</label>
<input class="controls" type="email" name="email" id="email" placeholder="Ex: pablo#sorribes.com" required="">
</div>
<div>
<label for="phone">Phone number</label><br>
<input type="tel" id="phone" name="phone" maxlength="12" required="">
</div>
<!-- country codes (ISO 3166) and Dial codes. -->
<select name="countryCode" id="prefix">
<option data-countrycode="ES" value="34" selected="">ES (+34)</option>
<option data-countrycode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
</optgroup>
</select>
<div>
<label for="date">Birthday</label>
<input class="date" type="date" name="date" id="date" required="">
</div>
<label for="jcountries">Where do you wanna work?:</label>
<div class="jcountries" id="countrys">
<div class="left">
<div>
<input type="checkbox" id="ireland" name="jcountries[]" value="ireland">
<label for="ireland">Ireland</label>
</div>
<div>
<input type="checkbox" id="iceland" name="jcountries[]" value="iceland">
<label for="iceland">Iceland</label>
</div>
</div>
</div>
<label for="jobs">What kind of job do you want?:</label>
<div class="jcountries" id="job">
<div class="left">
<div>
<input type="checkbox" id="reception" name="jobs[]" value="reception">
<label for="reception">Reception</label>
</div>
<div>
<input type="checkbox" id="housekeeping" name="jobs[]" value="housekeeping">
<label for="housekeeping">Housekeeping</label>
</div>
</div>
<div class="right right1">
<div>
<input type="checkbox" id="chefs" name="jobs[]" value="chefs">
<label for="chefs">Chefs</label>
</div>
<div>
<input type="checkbox" id="waiters" name="jobs[]" value="waiters">
<label for="waiters">Waiters</label>
</div>
</div>
</div>
<label for="cv">Send your CV</label>
<div class="scv">
<input type="file" id="cv" name="cv" accept=".pdf, .doc, .docx, .docm, .odt, .odf, .odt, .ods, .odp" required="">
</div>
<input class="botons" type="submit" value="Send" onclick="location.href='http://www.google.com'">
</form>
<!--<div class="alert alert-info" style="display: none;"></div>-->
<script src="https://www.arvanjobs.com/wp-content/themes/astra/assets/js/script.js"></script>
<!--<script>
/**Make the plugin location-aware*/
function getIp(callback) {
fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
.then((resp) => resp.json())
.catch(() => {
return {
country: 'us',
};
})
.then((resp) => callback(resp.country));
}
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
/**this is the plugin code that converts the selected country code and user input into the international format.*/
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>-->
</div>
</section>
</div>
</body>
<?php get_footer(); ?>
U can see at arvanjobs.com/candidates what happen. The footer goes crazy. I cant understand why this happen. Its not because the display grid coz I tried to make a grid 1x1 to put in the form there, but the footer stay like it is absolute positioned :/
And this is my css
* {
font-family: "forum";
font-weight:bold;
}
/*GRID CSS*/
/*GRID header*/
.header-container {
display:grid;
background-color:red;
grid-template-columns: 50% 50%;
font-family: "forum";
font-weight: bold;
}
.header-container div{
text-align:center;
font-family: "forum";
font-weight: bold;
z-index:100000000000000;
}
/*GRID index*/
.main-container {
top:0;
display:grid;
background-image:url('http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment:fixed;
grid-template-columns: 50% 50%;
box-sizing:border-box;
z-index:-1;
}
.main-container > * {
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.main-container div {
color:black;
border: px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
z-index:10000;
}
.main-container h4 {
color:#edbd87;
}
.main-container p {
color:#1f1f1f;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
.item2{
right:0;
left:0;
top:300px;
bottom:0;
position:absolute;
grid-column: 1 / 3;
display:inline-block;
z-index:1000000;
}
.item3{
background:#e0e0e0;
grid-column: 1 / 3;
height:40vh;
border-bottom:1px solid #967b5d;
z-index:100000;
}
.item4 {
background-color:#e0e0e0;
padding:30px;
z-index:9;
width:100%;
height:900px;
}
.item4 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item5{
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item5 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item5 p{
margin-top:10px;
font-size: 120%;
}
.item5 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item6{
height:900px;
background-color:#e0e0e0;
align-content:end;
align-items:end;
justify-self:end;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item6 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item6 p{
margin-top:10px;
font-size: 120%;
}
.item6 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item7 {
height:900px;
padding:30px;
z-index:10;
width:100%;
z-index:10000000;
}
.item7 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item8 {
top:110px;
right:309px;
z-index:1888;
width:100%;
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
}
.item8 img{
margin-left:140px;
display:block;
width:71%;
height:63%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item9{
height:900px;
background-color:#e0e0e0;
align-items:start;
align-content:start;
justify-self:start;
justify-content:start;
justify-items:start;
object-position: left top;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item9 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item9 p{
margin-top:10px;
font-size: 120%;
}
.item9 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item10{
z-index:100000000;
background-color: orange;
grid-column: 1 / 3;
}
.item11 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:11;
width:100%;
height:800px;
}
.item11 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item12 {
top:110px;
left:309px;
position:fixed;
padding:30px;
z-index:9;
width:100%;
height:800px;
z-index:100;
}
.item12 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
}
.item13 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:16;
width:100%;
height:800px;
}
.item13 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
/*CSS*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: "forum";
font-weight: bold;
}
header {
position:absolute;
width: 100%;
height:80px;
z-index:100000000000000;
}
}
.content {
width: 100%;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position:fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-family:"Forum";
font-weight: bold;
font-size: 25px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: transparent;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
login
.loginform {
position:relative;
}
/*footer*/
.w-50 {
width: 100%!important;
}
.bg-grey {
background: #edbd87;
}
.logo-footer {
margin-bottom: 40px;
}
footer {
z-index:1000000000;
position:relative;
color: #1f1f1f;
}
footer p, a {
font-weight:bold;
font-size: 12px;
font-family: 'Forum', sans-serif;
}
footer h6 {
font-family: 'Forum', serif;
margin-bottom: 40px;
position: relative;
font-weight:bold;
}
footer h6:after {
position: absolute;
content: "";
background: #1f1f1f;
width: 12%;
height: 1px;
left: 0;
bottom: -20px;
}
.btn-footer {
font-weight:bold;
color: #1f1f1f;
text-decoration: none;
border: 1px solid;
border-radius: 43px;
font-size: 13px;
padding: 7px 30px;
line-height: 47px;
}
.btn-footer:hover {
font-weight:bold;
text-decoration: none;
}
.form-footer input[type="text"] {
font-weight:bold;
border: none;
border-radius: 16px 0 0 16px;
outline: none;
padding-left: 10px;
}
::placeholder {
font-weight:bold;
font-size: 10px;
padding-left: 10px;
font-style: italic;
}
.form-footer input[type="button"] {
border: none;
background:#1f1f1f;
margin-left: -5px;
color: #fff;
outline: none;
border-radius: 0 16px 16px 0;
padding: 2px 12px;
}
.social .fa {
font-weight:bold;
color: #1f1f1f;
font-size: 22px;
padding: 10px 15px;
background: #967b5d;
}
footer ul li {
font-weight:bold;
list-style: none;
display: block;
}
footer ul {
padding-left: 0;
}
footer ul li a{
text-decoration: none;
color: #1f1f1f;
text-decoration:none;
}
a:hover {
text-decoration: none;
color: #967b5d !important;
}
.logo-part {
font-weight:bold;
border-right: 1px solid #1f1f1f;
height: 100%;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#media all and (max-width: 1400px) {
.main-container div {
grid-column: 1 / span 3;
}
}
/*form*/
/*fondo*/
.bg {
height:600px;
position:absolute;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-position:center;
background-attachment:fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
display:grid;
grid-template-columns: 100%;
box-sizing:border-box;
z-index:-1;
height:100vh;
}
.bg2 {
position:relative;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-attachment: fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
}
.formwrap {
height:600px;
border:1px solid #967b5d;
padding:30px;
border-radius: 4px;
background: #fff;
}
Ive tried too to make a template for solve this. I made this blank template:
<?php /* Template Name: Blank*/ ?>
<?php
get_header();
?>
<?php
get_template_part( 'template-parts/content/content-page' );
?>
</div>
<?php
get_footer();
?>
Well, if i choose this template when I make a new wp page, it will only show the header and the footer, no content. (for every pages) I have to choose "Default template" for things working. What happen here? Why at page-index.php the footer is working fine, but when i do the same with other page the footer stay at top? Any suggestion? Thanks!
i will need some help with some coding if possible. I would like to have when clicked Learn More to show description above the button and when clicked back to hide it. Any help would be higly appreciated! Code listed below. Thank you for your time!
One more thing, as you can see the top border is not shown, how can i make it to show? Thank you very much for the time spent!
<style>
/* RELATE PRODUCTS BEGIN */
.cardd {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: auto;
text-align: center;
font-family: arial;
}
.cardd p {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 5px;
margin-left: 0px;
text-align: left;
padding-top: 6px;
}
.price {
color: grey;
font-size: 22px;
}
.cardd button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.cardd button:hover {
opacity: 0.7;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin-top: 0px;
margin-bottom: 10px;
}
</style>
<div class="container">
<!-- <div class="row no-margin">
<div class="col-lg-12 text-center">
<h1 class="section-heading">Harnesses</h1>
</div>
</div> -->
<div class="row">
<div class="col-lg-12 scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<br><br><br>
<h1 class="section-heading page-heading">Engines</h1>
<p></p>
</div>
</div>
<div class="height-60"> </div>
<div class="row">
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1 ">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading">Vittorazi<br> Moster185 Plus MY20</h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
<p></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="g" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="" style="width:100%">
<h2 class="page-heading"><br> </h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div> <br>
<div class="col-lg-3 col-md-6 mb-5 col-sm-12">
<div class="scrollReveal sr-bottom sr-ease-in-out-quad sr-delay-1">
<div class="cardd">
<img src="" alt="Atom 80 Vitorazzi" style="width:100%">
<h2 class="page-heading"><br></h1>
<span class="price">£1729.99</span>
<p></p>
<p><button>Learn more</button></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What you're looking for is a collapsible! All you need is a little JavaScript, and you can expand/collapse text using a button.
Expand Above
If you want to make the hidden text appear above the button, try this:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.previousElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Expand Below
If you want to make it appear below the button, however, just flip the order in which the <div> and <button> element appear, and switch out previousElementSibling with nextElementSibling:
var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
collapse[i].addEventListener("click", function() {
this.classList.toggle("active");
var expand = this.nextElementSibling;
if (expand.style.display === "block") {
expand.style.display = "none";
} else {
expand.style.display = "block";
}
});
}
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<button type="button" class="collapsible">Learn more</button>
<div class="expand">
<p>
Hidden text.
</p>
</div>
To make the text hide and appear above the Button you must make use of toggle() event as
$("document").ready(function(){
$(".collapsible").toggle(
function(){
$(".expand").css({"display" : "block"});},
function(){
$(".expand").css({"display" : "none"});});
});
.collapsible {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #c41735;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.expand {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<div class="expand">
<p>
Hidden text.
</p>
</div>
<button type="button" class="collapsible">Learn more</button>
Note: Add the Jquery CDN to use the jquery code.
(<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>)
My html page is working almost as should but i have been scrolling through stackoverflow and can't seems to find any answer specific to mine.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
overflow: auto;
}
header {
margin: 0;
width: 100%;
top: 0; left: 0;
padding: 0;
height: 30%;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
position: fixed;
top: 30%;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow-y: scroll;
height: 100%;
margin: 20% 0% 0% 0%;
padding-top: 6%;
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
<?php include 'head.php';?>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
Home
</div>
<div class="nav_link">
Resume
</div>
<div class="nav_link">
Side Projects
</div>
<div class="nav_link">
About Me
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelBody">
<p>03/2014 -- Current</p>
<div class="showOnHover">
<p>
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelBody">
<p>08/2015 -- 06/2016</p>
<div class="showOnHover">
<p>
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelBody">
<p>06/2015 -- 11/2016</p>
<div class="showOnHover">
<p class>
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelBody">
<p>01/2012 -- 02/2015</p>
<div class="showOnHover">
<p>
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelBody">
<p>01/2012 -- 03/2013</p>
<div class="showOnHover">
<p>
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
so with the fiddle its slightly modified to work on that application. the only differences are that i use some php to form a template for the header and nav bar on my computer.
okay so if you view the fiddle the scroll bar is not only the area i want to scroll but the entire page. i would like to keep the header fixed and have the "body" or for my page the container scroll but not have a full length scroll bar on side of page.
Add position:fixed; to body and overflow-y:scroll to .content
Also don't "close" /br
It's just br or, br/ for extra compatibility.
<br/>
You also can't nest p tags (have a p tag inside another p tag) or have a list inside a p tag - a list gets its own styling - so get rid of the p around your list+list heading. And you have an extra /div at the end of each myPanel - there should only be three.
Also, 0 values shouldn't have units (eg %) after them. Run your CSS through csslint.net
You've also got some unecessary CSS attributes in there - e.g., your header and nav don't need top/right positioning or position:fixed.
https://jsfiddle.net/Kass_P/kg6uppnm/25/
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
position:fixed;
}
Simply remove height from body class.
Set height:40% or so for content class.
Also, make all <div class="myPanel"> inside the <div class="content"> div
Hope it helps
See the full working code:
<html>
<head>
<style>
body {
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
overflow: auto;
}
header {
margin: 0;
width: 100%;
top: 0; left: 0;
padding: 0;
height: 30%;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
position: fixed;
top: 30%;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow-y: scroll;
height: 40%;
margin: 20% 0% 0% 0%;
padding-top: 6%;
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
</style></head>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
Home
</div>
<div class="nav_link">
Resume
</div>
<div class="nav_link">
Side Projects
</div>
<div class="nav_link">
About Me
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelBody">
<p>03/2014 -- Current</p>
<div class="showOnHover">
<p>
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelBody">
<p>08/2015 -- 06/2016</p>
<div class="showOnHover">
<p>
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelBody">
<p>06/2015 -- 11/2016</p>
<div class="showOnHover">
<p class>
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelBody">
<p>01/2012 -- 02/2015</p>
<div class="showOnHover">
<p>
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</p>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelBody">
<p>01/2012 -- 03/2013</p>
<div class="showOnHover">
<p>
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Firstly you need to do what you said they all should be ! ...
Then you must fix the height of div content to the screen. In other way if you want your body has not scroll bar, You must set your elements so fixed to the screen and your body has not vertical overflow. Some thing like this:
header{height: 60px;}
nav{height: 40px;}
.content{height: calc(100vh - 100px);}
Then you can set a vertical scroll bar for div content.
#content{overflow-y: auto;}
See this simplified of your page:
header {
margin: 0;
width: 100%;
top: 0;
left: 0;
padding: 0;
height: 60px;
position: fixed;
line-height: 350%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
.content {
width: 100%;
overflow-y: scroll;
height: 100%;
margin-top: 60px;
height: calc(100vh - 70px);
}
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 45%;
margin: 1%;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelBody {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
<!--?php include 'head.php';?-->
<header>
<h1>Resume</h1>
</header>
<div class="content">
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div><div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelBody">
<p>06/2016 -- 02/2017</p>
<div class="showOnHover">
<p>
</p><p>Clermont FL</p>
<ul>
<ui>Serving</ui><br>
<ui>Bartending</ui><br>
<ui>Service bar</ui><br>
<ui>Card Holder voids/comps</ui><br>
<ui>Open/close</ui><br>
<ui>Food running</ui><br>
<ui>Expediting</ui><br>
</ul>
<p></p>
</div>
</div>
</div>
</div>
I've created this form for my website and linked the php but when i send the form i get the email but none of the info that was input into the form shows in the email, just the fields. im new to this so i apologise for the code not being the best.
Any help would be great.
<?PHP
/* Subject & Email Variables */
$emailSubject = 'Photography Quote';
$webMaster = 'ryanandelissa#seawardphotography.com';
/* Gathering Data Variables*/
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$hdyhau = $_POST['hdyhau'];
$message = $_POST['message'];
$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name: $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$headers = mail($webMaster, $emailSubject, $body, $headers);
/* Results Rendered As HTML */
$theResults = <<<EOD
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Lora' serif;
font-size: 25px;
padding-bottom: 30px;
}
input[type=button]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=button]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 41px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form action="Instagram.html">
<input type="button" value="HOME">
</form>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
EOD;
echo($theResults);
?>
/*logo*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 40px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
display: block;
}
/*image*/
.contact img{
width: 70%;
}
/* form */
.form label{
padding-top: 30px;
padding-left: 400px;
display: block;
float: right;
padding-right: 189px;
font-family: "Lora" serif;
font-size: 12px;
}
input, textarea{
font: 1em "Lora" sans-serif;
width:300px;
}
textarea{
vertical-align: top;
height: 5em;
resize: vertical;
}
input[type=submit]{
border: 2px solid #9c9c9c;
background-color: white;
color: #9c9c9c;
display: block;
padding: 10px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
input[type=submit]:hover{
background-color: #9c9c9c;
color: white;
border: 2px #9c9c9c;
padding: 10px;
height: 44px;
}
/*footer*/
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
img{
padding-bottom: 30px;
}
.contact-form{
padding: 20px;
}
label{
font-family: "Lora" serif;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>PORTFOLIO
<ul>
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li>ABOUT
<ul>
<li>US</li>
</ul>
</li>
<li>BLOG
<ul>
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-12 col-md-12">
<div class="img-list">
<img src="Images/ContactImage.jpg" class="img-responsive" width="750px" height="auto" />
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<form method="post" action="Contact%20Form.php" enctype="text/plain">
<div class="contact-form">
<div class="row">
<div class="col-md-6 ">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname">
</div>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="clearfix visible-md-block"></div>
<div class="form-group">
<label for="hdyhau">How Did You Hear About Us?</label>
<input type="text" class="form-control" id="hdyhau">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" rows="4" id="message"></textarea>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="SEND!" class="btn btn-primary">
</div>
</div>
</div>
</form>
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
Putting this in an answer so it can appear to have a resolution. ;)
Your code works for me (capitalized <?PHP and all (didn't seem to make a difference on my system)). You have some strangeness in your code (why assign your mail call to $headers?), but it seems fine, generally speaking (I even got the email). I think you have a server configuration issue.
Yes, the issue you mentioned in the comment is pretty simple, actually. In your form, your name attributes on your input elements are "firstname", "hdyhau", etc, but in your PHP you do this:
$firstnameField = !empty($_POST['firstname']) ? $_POST['firstname'] : 'n/a';
$lastnameField = $_POST['lastname'];
$emailField = $_POST['email'];
$hdyhauField = $_POST['hdyhau'];
$messageField = $_POST['messagename'];
but then reference them by their name value, not the variable you just copied them to:
$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name: $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;
Just change what you assign them to $firstname instead of $firstnameField OR change the variable in your $body assignment to $firstnameField, etc.
You can verify that something was actually included in the form by doing something like this before your email:
$firstname = !empty($_POST['firstname']) ? $_POST['firstname'] : 'n/a';
...
$message = !empty($_POST['message']) ? $_POST['message'] : 'n/a';
Just make sure that the value you are accessing in $_POST matches the value you used in the name="" attribute of your form.
I was trying to make a pop-up with a signup form.
I have this script that works fine, if it's tested with a single page. But If I use it with
my wordpress theme, i placed it in the header.php, the submit button doesn't appear and email textbox is shorter.
Image 1: It's OK. http://sdrv.ms/Ysgfmw
Image 2: Script in the wordpress template. http://sdrv.ms/10a3PpU
Does anyone know why this is happening? Thanks for the help.
Note: I omitted the complete urls.
<html>
<head>
<!--*************** INICIO JAVASCRIPT/CSS EVILPOPUP ************-->
<script type="text/javascript" src="......../evilpopup.js"></script>
<link href="........./classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
display: none;
z-index: 10000;
}
#mc_embed_signup form
{
position: fixed;
top: 10%;
left: 50%;
width: 50%;
margin-left: -25%;
font: normal 100% Helvetica,Arial,sans-serif;
font-size: 14px;
border-radius: 4px;
border: none;
padding: 10px 20px;
background-color: #fff;
color: #000;
text-align: left;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
#mc_embed_signup a.mc_embed_close
{
background: transparent url(http://downloads.mailchimp.com/img/closebox.png) no-repeat;
display: block;
height: 30px;
width: 30px;
text-indent: -999em;
position: absolute;
top: 0px;
right: 0px;
display: none;
}
</style>
<!--*************** FIN JAVASCRIPT/CSS EVILPOPUP ************-->
</head>
<body>
<h1>Hola</h1>
<!-- Begin EVILPOPUP MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action=".................us5.list-manage2.com/subscribe/post?u=3e03d112fc6fe9e6e2d643fa4&id=28e366ba2d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2>Gratis $3.000 en tu primera compra</h2>
<div class="indicates-required"><span class="asterisk">*</span> indica requerido</div>
<div class="mc-field-group">
<label for="mce-EMAIL">
Email <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Nombre </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
Cerrar
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none"></div>
<div class="response" id="mce-success-response" style="display: none"></div>
</div>
<div class="clear">
<input type="submit" value="Suscribeme" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End EVILPOPUP mc_embed_signup-->
</body>
</html>
Change the max-height
#mc_embed_signup form{
position:fixed;
top:10%;
left:50%;
width:50%;
margin-left:-25%;
font:normal 100% Helvetica,Arial,sans-serif;
font-size:14px;
border-radius:4px;
border:none; padding:10px 20px;
background-color:#fff;
color:#000;
text-align:left;
max-height:500px;
overflow-y:auto;
overflow-x:hidden;
}