How to create a simple contact form with HTML, CSS Code free

Learn how to create a simple contact form with HTML, CSS Code free

Contact Form

Contact forms are an essential part of any website, providing a way for visitors to get in touch with you easily. In this article, we'll walk you through the process of creating a basic contact form using HTML and CSS. With just a few lines of code, you can have a functional and visually appealing contact form on your website.

HTML Structure First, let's set up the HTML structure for our contact form. You can use a plain text editor or a code editor like Visual Studio Code or Sublime Text for this task.

Step 1) Add HTML Use a

element to process the input. matching label) for each field:

Step 2) Add CSS:

Styling with CSS Now, let's style our contact form using CSS. Create a file named styles.css and link it to your HTML file as shown in the <head> section

/* 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: #0e1a16;
  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;
}

For blogger website you can use this simple contact form code html&nbspby adding your blogspot id number on 'YOUR ID NUMBER' field;

<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<script>
var blogId = 'YOUR ID NUMBER';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

<br />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">

OUTPUT:

How to Create simple Contact Form HTML CSS

AR3school

How to create a simple contact form with HTML, CSS Code free

Learn how to create a simple contact form with HTML, CSS Code free

Contact Form

Comments :

Post a Comment

AR3school