Contact Form using JavaScript

# Creating a contact form

We have our Contact Service email service and Contact Form email template from the previous steps. Let’s create a simple HTML form and send its content by email.

DOCTYPE html> html> head> title>Contact Formtitle> script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"> script> script type="text/javascript"> (function()  // https://dashboard.emailjs.com/admin/account emailjs.init('YOUR_PUBLIC_KEY'); >)(); script> script type="text/javascript"> window.onload = function()  document.getElementById('contact-form').addEventListener('submit', function(event)  event.preventDefault(); // generate a five digit number for the contact_number variable this.contact_number.value = Math.random() * 100000 | 0; // these IDs from the previous steps emailjs.sendForm('contact_service', 'contact_form', this) .then(function()  console.log('SUCCESS!'); >, function(error)  console.log('FAILED. ', error); >); >); > script> head> body> form id="contact-form"> input type="hidden" name="contact_number"> label>Namelabel> input type="text" name="user_name"> label>Emaillabel> input type="email" name="user_email"> label>Messagelabel> textarea name="message">textarea> input type="submit" value="Send"> form> body> html> 

You can obtain your public key from the Account

(opens new window) page in the EmailJS dashboard. After filling the fields and sending the request we should find the new email in our personal inbox. If you can’t find it take a look at the spam folder.

# So what did we do?

First, we load our EmailJS SDK

script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"> script> 

Second, we initialize the SDK with our public key

emailjs.init('YOUR_PUBLIC_KEY'); 

Third, we submit our contact form and send it through EmailJS, using our Contact Service and Contact Form:

emailjs.sendForm('contact_service', 'contact_form', this) 

# That’s it!

You now have a contact form that sends all submissions to your inbox via your own Gmail account.

Источник

Create Simple Contact Form Using JavaScript

Learn creating contact form using simple JavaScript codes. Here is a tutorial guide to tell you about complete JavaScript codes to create Contact Form.

In this tutorial, we have created a form div with id “form_sample” in our html page.

In our js code we have created form elements using .createElement function and appended the elements to html div using the .appendChild function of JavaScript.

var x = document.getElementById("form_sample"); var createform = document.createElement('form'); // Create New Element Form x.appendChild(createform);

Further, we have included some CSS codes to give proper alignment to form.

Below is our complete code with download and live demo option

HTML File – demo.html

Simple HTML codes to add form Div.

        
Contact Form using JavaScript
  
   

JavaScript File -form.js

• Create object for the form.
• Set action attribute (post method).
• Create field label.
• Append form fields and set it’s label.

 // 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); 

Css File – form.css

Css coding to give proper alignment to form elements and the complete form itself.

 /* Below line is write to use Google font online */ @import "http://fonts.googleapis.com/css?family=Ubuntu"; div#main < width:830px; height:650px; margin:0 auto; font-family:'Ubuntu',sans-serif >div#form_sample < text-align:center; border:1px solid #ccc; width:300px; padding:0 50px 15px; margin-top:20px; box-shadow:0 0 15px; border-radius:6px; float:left >#main h1 < margin-top:40px >hr < margin-top:-5px >label < float:left; font-size:16px >input[type="text"] < width:100%; margin-top:10px; height:35px; margin-bottom:25px; padding:10px; border:3px solid #2BC1F2 >textarea < width:100%; border:3px solid #2BC1F2; padding:10px; margin-bottom:25px; margin-top:10px; height:100px; resize:none >input[type="submit"] < width:100%; padding:10px 45px; background-color:#2BC1F2; border:none; color:#fff; font-size:18px; font-weight:700; cursor:pointer; font-family:'Ubuntu',sans-serif >/* ------------------------------------- CSS for Sidebar (optional) ---------------------------------------- */ div#fugo

Conclusion:

Given above is the JavaScript code to create simple contact form. If you want to style your form use above CSS ,

And if you have any query regarding the post, you can contact us or put commenst below any time.

Related Posts:

42 Replies to “Create Simple Contact Form Using JavaScript”

Hi. I tried the code and the contact box doesn’t appear. I try checking it in the browser and a blank page appears.

Enquiry form having problem.Client didnot get any enquiry at his personnel email.Can you please give me solution for that.

Hey Jeremy ! For email functionality you can refer our following link. Hope it will help you. https://www.formget.com/send-an-email-on-form-submission-using-php/ keep reading our other blogs.

hi this is bhavaniprasad i here to ask you that this code is not working and its showing blank page on my localhost could u suggest me plz

You just need to download file and then extract it to some location in your pc. Then open the folder and click on demo.html file to view the form. Hope that might have help you. Regards,
FormGet Team
Join Us On
Facebook : https://www.facebook.com/FormGet
Twitter : https://twitter.com/FormGetcom
Google Plus : https://plus.google.com/+Formget

Hi, Thanks forgreat info!
Please can you tellme where in the Java script doI put my emailaddress so that I get the mail once submitted from the client? Does this work when the site is not launched yet? Thanks,
Liam.

Hello Liam, For sending mail you need to followup this post : https://www.formget.com/send-an-email-on-form-submission-using-php/ And for that you need to have a live server that do supports mail sending feature. Regards,
FormGet Team.

Quick question: Once you created this awesome form, how do you direct the viewers information you captured to go to your personal email safely? The form is created and i tested it using my own name and e-mail, but then I asked myself, “where did this information just go to?” What JavaScript or HTML code fixes this so all the senders information goes to my email account where I can see it?

Hi Admin, i need your help.
my actual requirement is ” i want to send form data to email address without using php” like how i am sedning you with the help of this form. please do the needful thanks
Arshad

How do I create a dynamically expandable form having rows and columns with titles, then insert data into the form from a calculation using a while loop?

Hi Iftikhar Ahmed
Thanks for the simple form idea. I am trying to create a form like the one you are suggesting but with six fields per row . Then I want to do do calculations that will be dynamically inserted into each field up to 100 rows or more. Please help and let me know if you want to see the calculations I am doing. Alfred

Hi
I have upload CSS and JS to my page but after i click submit button it redirect me to 404 page not found
where do i put email address where i want to receive fetched data ?

FIRST OF ALL THANK YOU VERY MUCH BUT NEED HELP!, CAUSE THE DATA INPUT IN THIS FORM BY MY CUSTOMERS HOW WILL IT BE SEND TO MY EMAIL

i have build a page in my website of comments and reply ….like a textbox for name and another textarea for query and after submitting i m displaying that name and query on the same page and after that i want to add reply button to that query and on click reply button i want to show a pop up to fill name and reply and display that reply just below the reply button?
please help me.

Dear ,
Can you advice me from where i set the sender email address and the recipient email address thanks,

I copied all the codes and pasted in my text editor but its showing me blank page. why so?
Code is below……. Contact Form using JavaScript div#main width:830px;
height:650px;
margin:0 auto;
font-family:’Ubuntu’,sans-serif
>
div#form_sample text-align:center;
border:1px solid #ccc;
width:300px;
padding:0 50px 15px;
margin-top:20px;
box-shadow:0 0 15px;
border-radius:6px;
float:left
>
#main h1 margin-top:40px
>
hr margin-top:-5px
>
label float:left;
font-size:16px
>
input[type=”text”] width:100%;
margin-top:10px;
height:35px;
margin-bottom:25px;
padding:10px;
border:3px solid #2BC1F2
>
textarea width:100%;
border:3px solid #2BC1F2;
padding:10px;
margin-bottom:25px;
margin-top:10px;
height:100px;
resize:none
>
input[type=”submit”] width:100%;
padding:10px 45px;
background-color:#2BC1F2;
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
font-family:’Ubuntu’,sans-serif
>
/* ————————————-
CSS for Sidebar (optional)
—————————————- */
div#fugo float:right
> 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); Contact Form using JavaScript

sorry admin for the above post but
I got the problem,
I actually didn’t remove the js linked file that’s why it was not showing the form…. But its really good and i was looking for it

At Submission Button, how do i put the email which information is to be posted to under the .js file.

Источник