contact form

How TO — Contact Form

Use a element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

Example

Step 2) Add CSS:

Example

/* Style inputs with type=»text», select elements and textareas */
input[type=text], select, textarea width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
>

/* Style the submit button with a specific background color etc */
input[type=submit] background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
>

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover background-color: #45a049;
>

/* Add a background color and some padding around the form */
.container border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

How to create a simple HTML contact form

You can copy and paste this directly into your HTML page, or use it as a basis for your contact us page.

        
 
Contact us
 
 
Your name 
Your email address 
Your message 
 
Send Message 
 
Simple HTML email form provided by MajesticForm 
  
 
   

The CSS styles to use with the HTML form above

#fcf-form < display:block; >.fcf-body < margin: 0; font-family: -apple-system, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; padding: 30px; padding-bottom: 10px; border: 1px solid #ced4da; border-radius: 0.25rem; max-width: 100%; >.fcf-form-group < margin-bottom: 1rem; >.fcf-input-group < position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; >.fcf-form-control < display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; outline: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; >.fcf-form-control:focus < border: 1px solid #313131; >select.fcf-form-control[size], select.fcf-form-control[multiple] < height: auto; >textarea.fcf-form-control < font-family: -apple-system, Arial, sans-serif; height: auto; >label.fcf-label < display: inline-block; margin-bottom: 0.5rem; >.fcf-credit < padding-top: 10px; font-size: 0.9rem; color: #545b62; >.fcf-credit a < color: #545b62; text-decoration: underline; >.fcf-credit a:hover < color: #0056b3; text-decoration: underline; >.fcf-btn < display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; >@media (prefers-reduced-motion: reduce) < .fcf-btn < transition: none; >> .fcf-btn:hover < color: #212529; text-decoration: none; >.fcf-btn:focus, .fcf-btn.focus < outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); >.fcf-btn-primary < color: #fff; background-color: #007bff; border-color: #007bff; >.fcf-btn-primary:hover < color: #fff; background-color: #0069d9; border-color: #0062cc; >.fcf-btn-primary:focus, .fcf-btn-primary.focus < color: #fff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); >.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn < padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; >.fcf-btn-block < display: block; width: 100%; >.fcf-btn-block+.fcf-btn-block < margin-top: 0.5rem; >input[type=»submit»].fcf-btn-block, input[type=»reset»].fcf-btn-block, input[type=»button»].fcf-btn-block

The PHP Code which captures and Emails your website form

The PHP code below is very basic — it will capture the form fields specified in the HTML form above (Name, Email, and Message). The fields are then sent off to your email address in plain text.

Note: You need to edit 2 parts of the script below. You need to set your email address (this will not be available for anyone to see, it is only used by the server to send your email). You can also specify an email subject line (or just leave the one which is there).

File Name: contact-form-process.php (you must use this filename exactly)

"; echo $error . "

"; echo "Please go back and fix these errors.

"; die(); > // validation expected data exists if ( !isset($_POST['Name']) || !isset($_POST['Email']) || !isset($_POST['Message']) ) < problem('We are sorry, but there appears to be a problem with the form you submitted.'); >$name = $_POST['Name']; // required $email = $_POST['Email']; // required $message = $_POST['Message']; // required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]$/'; if (!preg_match($email_exp, $email)) < $error_message .= 'The Email address you entered does not appear to be valid.
'; > $string_exp = "/^[A-Za-z .'-]+$/"; if (!preg_match($string_exp, $name)) < $error_message .= 'The Name you entered does not appear to be valid.
'; > if (strlen($message) < 2) < $error_message .= 'The Message you entered do not appear to be valid.
'; > if (strlen($error_message) > 0) < problem($error_message); >$email_message = "Form details below.\n\n"; function clean_string($string) < $bad = array("content-type", "bcc:", "to:", "cc:", "href"); return str_replace($bad, "", $string); >$email_message .= "Name: " . clean_string($name) . "\n"; $email_message .= "Email: " . clean_string($email) . "\n"; $email_message .= "Message: " . clean_string($message) . "\n"; // create email headers $headers = 'From: ' . $email . "\r\n" . 'Reply-To: ' . $email . "\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> Thank you for contacting us. We will be in touch with you very soon. ?>

Save the files above. Once you edit the form to fit with your design, you are ready to try it out.

Источник

How to Create a Contact Form in HTML and CSS

A contact form requires/ needs to collect atleast three things a name, an email address, and a message. Instead of an email address you can collect a phone number or both.

Let us start building the contact form.

Creating a Contact Us Form in HTML

We are going to start with a basic HTML page.

    charset="utf-8">  name="viewport" content="width=device-width"> Contact Us Form   Contact Us   

Name Text Box

You can start by creating a form item for the name. You are going to use HTML tag which creates a text box that occupies a single line.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  

The name attribute should be unique for each input on the form.

The placeholder is used to display text suggestion of what you want the readers to fill in the textbox.

Email Text Box

Next, you can make the email text box. Use the input html element, but this time change the type to email.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  

Message Text Box

Next, create a text box for the message. You will use textarea that is meant for multiline text form boxes.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  name="message" rows="5" cols="30" placeholder="Message">  

Submit Button

Once the reader completes filling the form, they need a way to send the data. The submit button allows them to send the data.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  name="message" rows="5" cols="30" placeholder="Message">  type="submit">Send Message  

When you press the button, nothing happens. You first need to wrap the form elements in a container.

Form Container

When you are creating a form in HTML, you need to put it inside HTML tags. So, wrap all your form elements with the form tags.

  Contact Us  name="readername" type="text" placeholder="Jane Smith" />  name="readeremail" type="email" placeholder="janesmith@mail.com" />  required>   type="submit">Send Message   

A form needs two attributes: a method and action.

When sending forms content, there are two methods you can use. The get method and the post method. The post method is more secure compared to the get method.

You also need to setup where the form will submit the data. The action attribute tells your contact form where to send the data.

  method="post" action="/contact-form-data/">  name="readername" type="text" placeholder="Jane Smith" />  name="readeremail" type="email" placeholder="janesmith@mail.com" />  name="message" rows="5" cols="30" placeholder="Message">  type="submit">Send Message   

If you press the button, the form will submit the form data even if all the textboxes are empty.

To make filling the textboxes mandatory before a form can submit data, use the required attribute on the input and textarea elements.

  Contact Us  method="post" action="/contact-form-data/">  name="readername" type="text" placeholder="Jane Smith" required/>  name="readeremail" type="email" placeholder="janesmith@mail.com" required/>  name="message" rows="5" cols="30" placeholder="Message" required>  type="submit">Send Message   

Bonus: Styling a Contact Form Using CSS

You can make your form look great by using CSS. Look at some of the form templates for some ideas.

You are designing your form with style similar to this design.

Start by adjusting the size of text on the form.

input, textarea, button  font-size: 1.4rem; > 

input, textarea, button  font-size: 1.4rem; padding: 10px; > 

Then remove the border on all the form items. Then add a background color to the input and textarea.

input, textarea, button  font-size: 1.4rem; padding: 10px; border: none; > input, textarea  background-color: #ccc; > 

Then, making sure that each item on the form occupies its own line.

input, textarea, button  width: 100%; > 

Add spacing between the form items.

input, textarea, button  margin-bottom: 15px; > 

Now add spacing around the form. Correct the form spacing to be equal on all sides.

form  margin-left: -20px; padding: 40px; > 

The form looks great on small screens like smartphones. To make the form look good on desktop use media queries. Add a div to cover the whole form.

@media(min-width: 48em)  div  max-width: 850px; > > 

@media(min-width: 48em)  div  max-width: 850px; margin-left: auto; margin-right: auto; > > 

Result

You will note that the button appears to be shorter than the input elements. Add box-sizing property to sort out the problem.

input, textarea, button  width: 100%; font-size: 1.4rem; margin-bottom: 15px; padding: 10px; border: none; box-sizing: border-box; > 

Also center the heading on the contact us page.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник