I'm designing a simple web-app so that the company I work for can receive referrals from different businesses. I made most of the front page but I need some help with sending the info from the form to a specific email address when the submit button is pressed. I looked at some tutorials online but for some reason I'm not understanding it still. Any help would be appreciated.
This is what I have so far...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #e20404;
color: #FFFFFF;
font-family: Arial, sans-serif;
}
h1 {
font-size: 36px;
font-weight: bold;
margin: 0;
}
.hero {
background-image: url("phone-repair.jpg");
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero h2 {
font-size: 48px;
margin: 0;
text-shadow: 2px 2px #000000;
}
.hero p {
font-size: 24px;
margin: 20px 0 0 0;
text-shadow: 2px 2px #000000;
}
</style>
</head>
<body>
<br>
<br>
<header>
<h1></h1>
</header>
<br>
<br>
<section class="hero">
<h1><img src="https://scontent-dfw5-2.xx.fbcdn.net/v/t39.30808-6/310105465_435474288684271_2112950804519462739_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=vn1mBIuA8v8AX-c7mRv&tn=4IOIOF7YavKFUIEN&_nc_ht=scontent-dfw5-2.xx&oh=00_AfBHKCcI06i24ne9jd-Fztb2JIbgCBqb54G5S5HIRAA6bw&oe=63F30F2D" alt="image" height=500px width=400px><br>
<h2>Phone Doctors Referral Center</h2>
<form>
<br>
<label for="efname">Employee First Name:</label><br>
<input type="text" id="efname" name="efname" style="margin-top: 5px;"><br>
<br>
<label for="elname">Employee Last Name:</label><br>
<input type="text" id="elname" name="elname" style="margin-top: 5px;"><br>
<br>
<label for="elocation">Store Location:</label><br>
<input type="text" id="elocation" name="elocation" style="margin-top: 5px;"><br>
<br>
<br>
<br>
<label for="cfname">Customer's Full Name:</label><br>
<input type="text" id="cfname" name="cfname"><br>
<br>
<label for="cphone">Customer's # or email:</label><br>
<input type="text" id="cphone" name="cphone"><br>
<br>
<p>Is the phone an iOS or Android device?</p>
<form>
<select name="dropdown">
<option value="Android" selected>Android</option>
<option value="iOS" selected>iOS</option>
</select>
<br>
<br>
<label for="mphone">Model of Phone:</label><br>
<input type="text" id="mphone" name="mphone"><br>
<br>
<label for="wissue">What is the issue?</label><br>
<input type="text" id="wissue" name="wissue"><br>
<br>
<label for="anotes">Anything else we should know?</label><br>
<input type="text" id="anotes" name="anotes"><br>
<br>
<br>
<input type="submit" value="Submit">
</form>
</form>
<br>
</form>
</section>
<section>
<!-- Add more content here -->
</section>
<footer>
<!-- Add footer content here -->
</footer>
</body>
</html>
I recommand to use the action="mailto: field of your form. That way you should be able to send the form's data to a specific email. You could also use enctype=text/plain in order to have an easier form to read.
Here's an example to help you understand: <form action="mailto:someone#.com" enctype="text/plain">
This site covers the subject in more details, if you want more information: https://html.form.guide/email-form/email-form-mailto/
I hope this will help you.
Related
I have a webpage with a grid at the top, at the bottom I would like to include for elements but outside of the grid. When ever I try this nothing works and the form in part of the grid set up. What ever changes i make the size of the grid cell above it will change to match.
Here is my HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TT284 EMA Question 1 Walking Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="walkEvents.css" />
</head>
<header>
<figure id="logo">
<img src="image goes here">
</figure>
</header>
<body>
<nav id="mainMenu">
<ul>
<li>
Walking Events
</li>
<li>
Other Events
</li>
<li>
Menu Option 3
</li>
<li>
Menu Option 4
</li>
<li>
Menu Option 5
</li>
<li>
Sign Out
</li>
</ul>
</nav>
<section class="gridInfo">
<header id="pageTitle">
<h1>Walking Events</h1>
</header>
<div>
<h2>Planned Walks</h2>
<p>List of planned walks will be here, starting with soonest first</p>
</div>
<div>
<h2>Walk History</h2>
<p>List of previous walks, starting with the walk finished sooner</p>
</div>
<div>
<h2>Proposed Walks</h2>
<p>List of proposed walks, sorted by date proposed with the oldest first</p>
</div>
<div>
<h2>Rejected Walks</h2>
<p>List of previously rejected sorted by order of rejection</p>
</div>
<div class="results">
<h2>Search Results</h2>
<p>Show results of search query</p>
</div>
</body>
<footer>
<section class="forms">
<div class="walkForm">
<h2>Proposals</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /></p>
</div>
<div class="searchForm">
<h2>Search</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="search" value="Search" /> <input type="reset" name="clear" value="Clear" /></p>
</div>
</section>
</footer>
</html>
CSS code below;
nav li {
display: inline-block;
list-style-type: none;
border: 1px solid #fff;
padding: 0.5rem;
font-size: 25px
}
nav {
grid-row: 1;
grid-column: 1 / -1;
text-align: center;
}
body section {
display: grid;
grid-gap: 1rem;
grid-template-rows: 50px 250px 250px 250px;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
border: none;
padding: 1rem;
}
section header {
grid-column: 1 / -1;
}
h1 {
column-span: all;
text-align: center;
font-size: 35px;
}
body div {
border: 1px solid #aaa;
padding: 1rem;
}
footer div {
border: none;
}
#text, select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 50%;
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]{
width: 50%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.results{
column-span: all;
text-align: center;
}
I have HTML code that is not linking with the CSS file.
I have posted the code below.
When ever I try to make changes to the CSS file and save, nothing happens to the browser preview.
I used CSS code that I have used before, and know it is correct.
But that CSS file doesn't show up on the browser preview.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moses Saygbe LAb 3 </title><!--Title of page-->
<link rel="stylesheet" type="tex/css" href="style.css">
</head>
<body>
<main>
<form id="apptf" class="header">
<h2>Family Medicine Practice</h2>
<header class="header">
Patient Information
</header>
<fieldset class="header">
<legend>Personal Information</legend>
<div>
<label for="first">First Name</label><br>
<input type="text" name="first" id="first" class="header">
</div>
<div>
<label for="last">Last Name</label><br>
<input type="text" name="last" id="last" class="header">
</div>
<div>
<label for="dphone">Daytime Phone</label><br>
<input type="text" name="dphone" id="dphone" class="header">
</div>
<div>
<label for="ephone">Evening Phone</label><br>
<input type="text" name="ephone" id="ephone" class="header">
</div>
<div id="visit-first">
<label for="visit">Is this your first time visiting our office?</label><br>
<input name="visit" type="radio" id="visit" value="Yes"> Yes
<input name="visit" type="radio" id="novist" value="No"> No
</div>
</fieldset>
<header class="header">
Appointment Information
</header>
<fieldset class="header">
<legend>Appointment Time</legend>
<div>
<label for="appointment">Date</label>
<input type="date" name="appointment" id="appointment" class="header">
</div>
<div>
<label for="time">Time</label>
<select name="time" id="time" class="header">
<option value="8am">8AM</option>
<option value="10am">10AM</option>
<option value="12pm">12PM</option>
<option value="4pm">4PM</option>
</select>
</div>
<div class="moreinfo">
<label for="moreinfo">Please describe the reason for the visit</label><br>
<textarea class="moreinfoh" name="moreinfo" id="moreinfo" cols="10" rows="10">.
</textarea>
</div>
</fieldset>
<button type="submit" value="submit" class="header">Submit</button>
</form>
<footer>
Moses Saygbe 2020
</footer>
<script>
window.onload=function(){ //diable right click
document.addEventListener("contextmenu", function(e){
e.preventDefault();
},false);}
</script>
</main>
And here is the CSS code. I tried relinking it, opening in a new browser. Still nothing fixes it.
#charset "utf-8";
html, body{
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(7, 7, 7);
background: url(../Week3lab/graphic/aldebaran-s-zzi-6FCQtF8-unsplash.jpg) no-repeat
center center fixed;
background-size: cover;
z-index: -1;
}
Does making your CSS this work?
#charset "utf-8";
html, body{
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588894167282-408680bb62f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=756&q=80");
z-index: -1;
I just started learning html and CSS and I'm in a difficult situation. I'm trying to build a website, and I'm not sure how can I get an email sent to my email address from this form. Do I need to use JavaScript in order to get the email sent? How can I do it? Can somebody help me finish this page? The code is below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>Contact Form</h3>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
There is no feature in HTML to send the form submission directly to an email address.
The example below is from w3schools.com try html form mail
where you can also see the result of the mentioned mailto: option:
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
Name:
<br>
<input type="text" name="name">
<br> E-mail:
<br>
<input type="text" name="mail">
<br> Comment:
<br>
<input type="text" name="comment" size="50">
<br>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Your code seems to come from an example like this try hmtl form submits example,
which sends query parameters as fname=John&lname=Doe to a php script,
which is then supposed to send the email.
Read here how to send emails using php, but if you just starting html and css, this is a completely different story, I hope this helps anyway. A lot of stuff to read and study.
SO my <section> appears in te top of the <nav>, let say it will text wrap the <nav> section. How will I put the <section> below the <nav>
It gives me problem every time i put some text in and the text will appear behind the nav
body {
background-color: white;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
header,
footer {
padding: 1em;
color: white;
background-color: grey;
clear: left;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
section {}
aside {
float: left;
}
aside.right {
float: right;
}
<header>
<img src="mf.png" alt="Mandaue Foam" align="left" style="width:180px;height:108.56px;">
<div style="text-align: right;">Search: <input type="text" name="Search" placeholder="Search Here"></br>
</br>
</br>
</br>
</div>
<div style="text-align: right;">AF No. : <input type="text" name="AF No." placeholder="AF No."></br>
</div>
<div style="text-align: right;">Asset No. : <input type="text" name="AF No." placeholder="Asset No."></div>
<div style="text-align: center; text"><strong> ACCOUNTABILITY FORM <strong></div>
</br>
</header>
<nav>
<div style='position:fixed;top:230px;left:100px;'><input type="radio" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)"> For Official Use </br></br>
<input type="radio" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom to be returned on <input type ="date"></br></br>
<input type="radio" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom not to be returned
<div style='position:fixed;top:230px;right:150px;'><input type="radio" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)"> For sample</br></br><div>
<input type="radio" name="progress" id="progress5" value="1" tabIndex="1" onClick="ckChange(this)"> On Loan </br></br>
<input type="radio" name="progress" id="progress6" value="1" tabIndex="1" onClick="ckChange(this)"> Other <input type="text" name="progress" id="progress6" placeholder="State the Purpose">
</nav>
<section>
</section>
Your html code is invalid. please check again, and that's what causes your above .
please look at jsfiddle for the full code.
https://jsfiddle.net/vLbmc6z9/
<header>
<div>
<img src="mf.png" alt="Mandaue Foam" align="left">
</div>
</header>
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>