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.
Related
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.
This is my html form inside a card html. This form appears after an onlick function which works fine. But the submit button of the below form doesn't show hover effect.
<!-- Update details form here -->
<div class="UpdateForm-section">
<form action="/add_address" method="post">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button"/>
</form>
</div>
And my css file is:
#update_submit {
width: auto;
background-color: #4CAF50;
color: white;
padding: 6px 10px;
margin: 4px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#update_submit : hover {
background-color: #ab1313;
}
I don't why my hover effect isn't visible. Am I doing anything wrong? Can anyone help me out?
You are adding space in #update_submit : hover remove spaces and write like this
#update_submit:hover
The colon symbol must be right next to both
#update_submit:hover {
background-color: #ab1313;
}
I want to style my sign up form in a way that the background colour does not cover the legend tag only the inside of the sign-up form.
For example, this is what I am trying to achieve:
And this is my result:
My current code:
#signupform {
font-size: 2rem;
margin: 30px;
line-height: 50px;
background-color: #f6f6f6;
}
#signupform legend {
font-size: 3rem;
}
<section class="subscribe">
<h2>SUBSCRIBE</h2>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form id="signupform">
<fieldset>
<legend>SIGN UP NOW!</legend>
<label for="name">Your name:</label>
<input type="text" name="name" id="name">
<label for="mail">Email address:</label>
<input type="text" name="mail" id="mail">
<button type="button" class="signupbutton">Sign up</button>
</fieldset>
</form>
</section>
You have to set the background-color in fieldset
#signupform {
font-size: 2rem;
margin: 30px;
line-height: 50px;
}
fieldset {
background-color: #f6f6f6;
}
#signupform legend {
font-size: 3rem;
}
<section class="subscribe">
<h2>SUBSCRIBE</h2>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form id="signupform">
<fieldset>
<legend>SIGN UP NOW!</legend>
<label for="name">Your name:</label>
<input type="text" name="name" id="name">
<label for="mail">Email address:</label>
<input type="text" name="mail" id="mail">
<button type="button" class="signupbutton">Sign up</button>
</fieldset>
</form>
</section>
Take a look at my code
I think is this you are looking for.
#signupform {
font-size: 2rem;
margin: 30px;
line-height: 50px;
background-color: #d4d4d4;
padding: 1rem;
}
fieldset{
background-color: #f6f6f6;
}
#signupform legend {
font-size: 3rem;
}
<section class="subscribe">
<h2>SUBSCRIBE</h2>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form id="signupform">
<fieldset>
<legend>SIGN UP NOW!</legend>
<label for="name">Your name:</label>
<input type="text" name="name" id="name">
<br />
<label for="mail">Email address:</label>
<input type="text" name="mail" id="mail">
<button type="button" class="signupbutton">Sign up</button>
</fieldset>
</form>
</section>
I apologize in advance if this question has already been beaten to death but I'm having a hard time figuring how to get my form to send submissions to my email address. I've tried looking all over online and everything I see is about formatting the form with html and css but nothing that explains the scripts involved or how it needs to be set up to actually send to an email address.
<style>
input[type=text], input[type=number], select[name=province]{ font-family: arial; width:100%;
border: 1px solid #E5E5E5; padding: 10px 20px;}
input[name=ffirstname] {width:49%; margin-right:1%; }
input[name=lastname] {width:49%; margin-left:1%; }
input[name=address] {width:65.6667%; margin-right:1%; }
input[name=unit] {width:32.3337%; margin-left:1%; }
input[name=city] {width:49%; margin-right:1%; }
select[name=province] {width:24%; margin-left:1%;}
input[name=postal] {width:24%; margin-left:1%; }
input[name=email] {width:49%; margin-right:1%; }
input[name=phone] {width:49%; margin-left:1%;}
input[class=submit] {
background-color: #f05a28;
color: white;
padding: 8px 20px;
margin-left: 85%;
border-radius: 4px;
border: none; !important;
outline: none; !important ;
cursor: pointer;
box-shadow: none; !important;
}
</style>
<form action method="post" enctype="multipart/form-data" name="frmhot" verified="0" id="huge_it_contact_form_3" class="hugeit_form">
<br><input type="text" name="ffirstname" placeholder="First Name"/><input type="text" name="lastname" placeholder="Last Name"/>
<br><br><input type="text" name="address" placeholder="Address"/><input type="text" name="unit" placeholder="Unit"/></br>
<br><input type="text" name="city" placeholder="City"/><select name="province" form="form1">
<option value="ab">AB</option>
<option value="BC">BC</option>
<option value="BC">MB</option>
<option value="NB">NB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="QC">QC</option>
<option value="SK">SK</option>
</select><input type="text" name="postal" placeholder="Postal Code"/></br>
<br><input type="text" name="country" placeholder="Country"/></br>
<Br><input type="text" name="email" placeholder="Email"/><input type="number" name="phone" placeholder="Phone#"/></br>
<br> <br><input class="submit" type="submit" value="Next" id="hugeit_preview_button__submit_21"/>
//using a sample html form as this below, i created a php script //that will perform this task`
<!DOCTYPE HTML>
<html>
<head>
<title>Thank you</title>
</head>
<body>
<form name="contactform" method="post" action="form-to-email.php">
<p>
<label>Enter name : </label><br>
<input type="text" name="name" required/>
</p>
<p>
<label>Email address : </label><br>
<input type="email" name="email" required/>
</p>
<p>
<label>Message: </label><br>
<textarea name="message" rows="3" cols="10" required></textarea>
</p>
<p>
<input type="submit" name="submit" value="send"/>
</p>
</form>
</body>
</html>
// then below is the php script called form-to-email.php
<html>
<head>
<title>form-to-email.php</title>
</head>
<body>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "steloffs2006#gmail.com"; // your email address
$subject = "My contact form"; // the subject you want to see
$body = " You have received a new message from the user $name \n" ." Email address: $email \n" . " Here is the message: $message";
mail($to,$sub`enter code here`ject,$body);
echo "<h1>Thank you for your time </h1>";
?>
</body>
</html>
I am new on here and would really appreciate some help, I am trying to format an input form with css however the the form has a text area that I need to format to the same as the rest of the form.
Here is what I have so far:
<div id="login">
<h2>Data Archive</h2>
<hr/>
<form action="" method="post">
<label>HDD Name :</label>
<input type="text" name="hdd_name" id="hdd_name" required="required" placeholder="Please enter HDD name"/><br /><br />
<label>Date Archived :</label>
<input type="text" name="date_archived" id="date_archived" required="required" placeholder="Date data was archived"/><br/><br />
<label>Project Name :</label>
<input type="text" name="project_name" id="project_name" required="required" placeholder="Project name"/><br/><br />
<label>Client :</label>
<input type="text" name="client" id="client" required="required" placeholder="Client name"/><br/><br />
<label>Archived by :</label>
<input type="text" name="archived_by" id="archived_by" required="required" placeholder="Name of person archiving data"/><br/><br />
<label>Editor :</label>
<input type="text" name="editor" id="editor" required="required" placeholder="Editor name"/><br/><br />
<label>Other information :</label>
<div class="textarea"><textarea name="other_information" id="other_information" wrap="virtual"/>Any other information</textarea><br/><br /> </div>
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>
and the CSS:
textarea{
width: 290px;
height: 75px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
}
#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}
Really hoping you can shed some light on this for me.
You need to give each item that you want to be the same a CSS class.
<input class="mytextboxes" type="text" ... />
<textarea class="mytextboxes" name="other_information" ... />Any other information</textarea>
Then you can use the CSS class like this:
.mytextboxes{
/* styling here */
}
Here's a tutorial from W3 schools to get you started.
http://www.w3schools.com/cssref/sel_class.asp
You can do the styling of inputs of type by using a CSS like this.
input[type="text"] {
/* Your styles*/
}