I made a contact form using HTML and JavaScript. The text editor I am using right now only supports HTML and JavaScript CSS and markdown files. I made contact form using HTML and JavaScript but I don’t know how to make the users content go into my mailbox. Like I don’t know how the email could come to my mailbox so I could see their issue. Here’s my code for the contact form. HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
<link href="css/form.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="form_sample"></div> <!-- Include JS file here -->
<script src="form.js"></script>
</div>
</body>
</html>
Here’s the JavaScript.
// Fetching HTML Elements in Variables by ID.
var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element Form
createform.setAttribute("action", ""); // Setting Action Attribute on Form
createform.setAttribute("method", "post"); // Setting Method Attribute on Form
x.appendChild(createform);
var heading = document.createElement('h2'); // Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);
var line = document.createElement('hr'); // Giving Horizontal Row After Heading
createform.appendChild(line);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var namelabel = document.createElement('label'); // Create Label for Name Field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);
var inputelement = document.createElement('input'); // Create Input Field for Name
inputelement.setAttribute("type", "text"); inputelement.setAttribute("name", "dname");
createform.appendChild(inputelement);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var emaillabel = document.createElement('label'); // Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);
var emailelement = document.createElement('input'); // Create Input Field for E-mail
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);
var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);
var messagelabel = document.createElement('label'); // Append Textarea
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);
var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);
var messagebreak = document.createElement('br'); createform.appendChild(messagebreak);
var submitelement = document.createElement('input'); // Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement); ```
Any help is appreciated.
CodePudding user response：
To continue on Barmar's comments:
Yes you will need a to use a server-side language like PHP to send mails. There is an excellent library, that I personally use all the time that makes this pretty simple: PHPMailer.
Or if you prefer to not use a library, there are plenty of tutorials that give a step-by-step guide on how this can be done:
Once you've gone through some of these tutorials (and you don't have a server/hosting service) you can use a localserver to do some testing. There are specific steps you will need to take to accomplish this with localhost, but it is do-able. Some examples of how this can be done:
CodePudding user response：
There is a much easier way to do it than to use PHP. While PHP is the most reliable, there are javascript and Jquery apps that make it very easy to do. Basicly, just go to this website. Once there, follow the instructions to implement it into your HTML website.