contact form

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 — 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 from scratch

In this guide I’m going to show you how to create a HTML contact form that sends you an email by bare minimum code.

Collecting form submissions is an essential part of any business. There are drag-and-drop form builders, but sometimes you might want to use just your HTML form. Let’s get started!

You can scroll down to see HTML code for contact form👇 on front-end, followed by the PHP code for processing form data👇 that delivers your form to email.

Table of contents:

• HTML Form Code
• CSS Style Code
• Form Processing Code
• Option 1: Form processing with PHP
• Option 2: Form processing using Form Backend
• HTML Label Field
• HTML Text Field
• HTML Textarea Field
• HTML Email Field
• HTML Telephone Field
• HTML Date Field
• HTML Password Field

The form we’re building is very simple, if you want to achieve advanced features like file upload or spam protection please take a look at our file upload form ↗️

Already have a HTML form and not much time? We offer spam protection, google sheets integration, and email notifications for free at formcarry ↗️

Create a Simple HTML Contact Form

Copy and paste this code to your HTML page, this is going to be the base of our form.

While this will create a working HTML form that sends you an email, you need to be aware of:

• No spam protection: spam submissions can be 90% of the total submissions if there is no protection in-built which takes time to implement and improve.
• Emails can land into the spam folder: you need to check your SMTP server health regularly, your server might crash and you won’t notice it for a long time, which can cost very bad for your business.
• File upload takes time to implement: In case you need to upload files from your form, be aware that implementation of it takes a lot of time, and creates a lot more complexity and security concerns to deal with.

Option 2: HTML form processing with Formcarry

If you need more functionalities from your form, you need to deal with the complexity that comes with it. If you want to make a working simple HTML contact form without PHP, we have the solution.

Try our product formcarry ↗️ for free which can be a perfect solution for you, it works with your own HTML code, you just need to change your form action attribute.

Create a form in formcarry

Create an account ↗️ then create a form like below

Integrate your HTML form

Copy your form endpoint by clicking copy clipboard button, then change your HTML form code that we used above.

That’s all you need to process your form now

Try your form

Just by changing your action attribute, you can achieve:

• 3 different thank you page ↗️ for your form.
• Email notifications ↗️ for new submissions
• Auto-responses ↗️ for your submitters
• A dashboard that you can sort, filter and export your form data
• Easy file uploads ↗️
• Integrations with Google Sheets and 1000+ other apps ↗️

Take a look at your dashboard and you’ll see your new submission:

Also email notification for the new submission, which you can add as many emails as you like from the self email notification settings.

Creating a working form with formcarry less than 2 minutes, and it’s free up to 100 submissions per month.

HTML Form Field examples

It’s possible for you to ask which HTML element is used to create an HTML form for user input? Let us show you the fields that you can use in your form, just copy and paste the codes below.

HTML Label Field

Label field is the text that’ll focus to the desired form element on click, to target a field you need to give target element id inside the label elements for attribute like this:

HTML Text Field

Text field is the most used form field on the web, this is widely used for short texts.

HTML Textarea Field

Textarea is like text field but it’s for much bigger content, like messages.

rows and cols attributes allow you to specify width and height of textarea yet you can always manipulate that using CSS.

HTML Email Field

Some HTML fields have built in validations, Email input is one of them, it will complain unless you enter a valid email address, and it won’t let you submit.

Try to submit by entering normal text, the field will warn you that it requires a valid email address

Notice how input border color reacts to validity of your input, until you enter a valid email address you’ll see a red color, I’ve implemented this for demo purposes so that’s not the default behavior.

HTML Telephone Field

You specify a number pattern with telephone field, and it will complain unless you enter phone number through the pattern you have specified.

Tel field also shows num pad on mobile devices.

HTML Date Field

Date field is very handy most of the time, because it’s a native type all devices will show some sort of date selector to the user, you can specify minimum and maximum ranges for dates to be chosen.

HTML Password Field

Password field is normal text field but the difference is the value you entered will be masked with asterisks to hide sensitive information.

Form abandonment: How to increase your conversion rates

Form abandonment is a common problem that can have a big impact on a business’s success. When a user leaves an online form without completing it, it can lead to lost sales, missed opportunities, and wasted time and money. In fact, nearly 70% of site visitors will abandon a form

How to add a contact form to your Shopify website: Step-by-step guide

Building a contact form on your Shopify website is a great way to collect customer data and keep in touch with your customers. In this article, we will walk you through the process of adding a contact form to your Shopify website in 7 steps. At the end of the

How to upload files from your HTML form using Base64 encoding

Uploading files using Base64 encoding is a common practice, the usage of the technique has been increased since React and Vue.js like frameworks gained popularity. In this guide I’m going to show you how to upload files using base64 encoding What’s Base64 Encoding? Base64 is a encoding algorithm that

Источник