Cara menggunakan contact form with javascript

Halo, jumpa lagi dengan saya 🙂 , tidak akan bosan-bosan nya saya akan berbagi tutorial buat kalian, kali ini saya akan berbagi tutorial mengenai Cara Membuat Form Dengan Javascript, kalo kalian sering membuat form dengan HTML dan CSS sudah biasa, tidak ada salah nya untuk mencoba membuat form dengan Javascript, berikut langkah-langkahnya.

Silahkan kalian buka teks editornya, kemudian ketikan kode HTML berikut.

1

2

3

4

<div id="main">

<h2>Form Dengan Javascript</h2>

<div id="form_sample">

</div>

Kalo sudah, sekarang kita buat bentuk form dengan Javascript berikut ini.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

//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 email field

emaillabel.innerHTML = "Your Email : ";

createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // Create input field for email

emailelement.setAttribute("type", "text");

emailelement.setAttribute("name", "demail");

createform.appendChild(emailelement);

var emailbreak = document.createElement('br');

createform.appendChild(emailbreak);

// Append Textarea

var messagelabel = document.createElement('label');

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

// Append Submit Button

var submitelement = document.createElement('input');

submitelement.setAttribute("type", "submit");

submitelement.setAttribute("name", "dsubmit");

submitelement.setAttribute("value", "Submit");

createform.appendChild(submitelement);

Setelah itu, kita sedikit percantik tampilan nya dengan kode CSS3 berikut ini.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

/* below line is write to use google font online */

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

div#main{

width: 830px;

height: 650px;

margin: 0px auto;

font-family: 'Ubuntu', sans-serif;

}

div#form_sample{

text-align:center;

border: 1px solid #ccc;

width: 300px;

padding: 0px 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: white;

font-size: 18px;

font-weight: bold;

cursor: pointer;

font-family: 'Ubuntu', sans-serif;

}

Nah, kalo sudah semua, simpan terlebih dahulu, kemudian jalankan di browser masing-masing, dan lihat hasilnya. Selesai

Baik, selesai sudah tutorial mengenai Cara Membuat Form Dengan Javascript, semoga bermanfaat. Selamat mencoba