Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript. Hello, in today's video i will show you how to create a working contact form using HTML, CSS, JavaScript and AppScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
/* Style for the form */
form {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* Style for form elements */
form * {
width: 100%;
margin-top: 2px;
}
</style>
</head>
<body>
<form>
<h2>Contact Us</h2>
<span class="message"></span> <!-- Placeholder for displaying status messages -->
<input type="text" name="name" placeholder='Name..'> <!-- Text input for name -->
<input type="email" name="email" placeholder='Email..'> <!-- Email input for email address -->
<textarea name="message" cols="30" rows="10" placeholder='Message..'></textarea> <!-- Textarea for message -->
<input type="submit" class="submit"> <!-- Submit button -->
</form>
<script>
let url = "Api End point url"; // API endpoint URL for form submission
let form = document.querySelector("form"); // Reference to the form element
let submit = document.querySelector(".submit"); // Reference to the submit button element
let message = document.querySelector(".message"); // Reference to the message element for displaying status messages
// Event listener for the form submission
form.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent the default form submission behavior
submit.value = "submitting.."; // Change the submit button text to indicate submission in progress
// Perform a POST request to the API endpoint with form data
fetch(url, {
method: "POST",
body: new FormData(form) // Use FormData to serialize form data
})
.then(res => res.text()) // Convert the response to text format
.then(data => {
message.innerHTML = data; // Display the response message
submit.value = "submit"; // Change the submit button text back to its original text
})
.catch(err => {
message.innerHTML = err; // Display any error that occurs during form submission
submit.value = "submit"; // Change the submit button text back to its original text
})
})
</script>
</body>
</html>
Certainly! Here's a step-by-step explanation of the code:
The code is an HTML document that contains a contact form.
The CSS section contains styles for the form and its elements.
The form is styled to have a width of 50% and is centered both vertically and horizontally.
The form elements have a width of 100% and a margin-top of 2px.
Inside the body tag, there is a form element.
The form contains an h2 heading with the text "Contact Us."
There is a span element with the class "message" that serves as a placeholder for displaying status messages.
There are three input elements:
The first input element is of type "text" and has the name attribute set to "name" and a placeholder text of "Name.."
The second input element is of type "email" and has the name attribute set to "email" and a placeholder text of "Email.."
The third input element is of type "textarea" and has the name attribute set to "message" and a placeholder text of "Message.."
Finally, there is an input element of type "submit" with the class "submit" for submitting the form.
In the script section, the following actions are performed:
The variable "url" is assigned the value of the API endpoint URL for form submission.
The form element is selected using the document.querySelector() method and assigned to the variable "form".
The submit button element is selected using the document.querySelector() method and assigned to the variable "submit".
The message element is selected using the document.querySelector() method and assigned to the variable "message".
An event listener is added to the form element for the "submit" event.
When the form is submitted, the event listener callback function is executed.
The e.preventDefault() method is called to prevent the default form submission behavior, which would cause a page reload.
The value of the submit button is changed to "submitting.." to indicate that the form submission is in progress.
The fetch() function is used to make a POST request to the specified API endpoint URL.
The method is set to "POST".
The body of the request is set to a new FormData object created from the form element, which serializes the form data.
res.text() method.innerHTML property of the message element.catch() method.innerHTML property of the message element.Overall, this code sets up a contact form and handles its submission by sending the form data to an API endpoint using a POST request. The response from the API is then displayed on the page, and any errors that occur during the submission process are also handled and displayed to the user.
// Open the spreadsheet by providing the URL of the spreadsheet
let sheet = SpreadsheetApp.openByUrl("YOUR_SPREADSHEET_URL")
// Function to handle the HTTP POST request
function doPost(e) {
// Send an email using the MailApp service
// The recipient email address is specified as a string
// The subject of the email includes the name from the contact form
// The body of the email includes the message and email from the contact form
MailApp.sendEmail("receipent email address", `${e.parameters.name} from new contact form!`, `${e.parameters.message}\n${e.parameters.email}`)
// Create a text output to be returned as the response to the HTTP POST request
// The text output indicates that the message has been sent
return ContentService.createTextOutput("Message has been Sent!")
}
In summary, this code defines a function doPost() that is triggered by an HTTP POST request. When the function is executed, it sends an email using the MailApp service provided by Google Apps Script. The recipient email address, subject, and body of the email are extracted from the e.parameters object, which contains the data from the contact form. Finally, a text output is created and returned as the response to the HTTP POST request, indicating that the message has been sent. Please note that you need to replace "YOUR_SPREADSHEET_URL" with the actual URL of your spreadsheet and provide a valid recipient email address in the MailApp.sendEmail() function.