«
»

Tutorial cara membuat website statis (part 15) | Membuat contact form pada layout website


Setelah sebelumnya saya sudah menjelaskan cara untuk membuat layout website dan juga cara membuat form, kini saatnya kita menggabungkan kedua element tersebut.

Pada website statis yang kita buat, di halamanan contact.html hanya berisi informasi tentang alamat, e-mail, dan juga no telepon. Oleh karena itu saya akan menambahkan satu (1) fitur submit komentar. Dimana dengan adanya fitur ini akan semakin memudahkan interaksi antara user dengan pemilik website.

Pada fitur submit komentar akan dibutuhkan beberapa element input yaitu :

  1. Input text field : input text field yang kita buat ada dua (2) dan dipergunakan untuk nama dan juga e-mail user.
  2. Textarea : textarea ini berfungsi untuk user agar bisa memasukkan komentar yang diinginkan.
  3. Submit button : berfungsi untuk memproses inputan data pada form yang kita buat.

Sekarang buka file contact.html lalu tambahkan tabel baru yang nantinya ditempatkan di bagian isi website. Lihat pada script form yang saya buat dibawah ini.

<form method='post' action='contact.html'>
<table border='0px' align='center' width='450px'>
<tr><td>Nama</td><td><input type='text' name='nama' size='35'/></td></tr>
<tr><td>e-mail</td><td><input type='text' name='email' size='35'/></td></tr>
<tr><td valign='top'>Komentar</td><td><textarea name='komentar' rows='10' cols='35'></textarea></td></tr>
<tr align='center'><td colspan='2'><input type='submit' name='save' value='Submit'/> &nbsp <input type='reset' value='Clear'/></td></tr>
</table>
</form>

Hasilnya yang akan softholic mania dapatkan jika mengikuti script yang saya buat sebagai berikut.
Form contact

Nama
e-mail
Komentar

gambar 1.1
Form contact.html | www.softholic.net

Tutorial pada bagian ini saya rasa cukup sampai disini, pada tutorial berikutnya saya akan coba menjelaskan dan mengenalkan javascript yang nantinya juga akan kita implementasikan langsung pada website yang sudah kita buat.

Related Posts

Tags: , , , ,

This entry was posted on Friday, November 25th, 2011 at 7:39 pm and is filed under Tutorial website. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Tutorial cara membuat website statis (part 15) | Membuat contact form pada layout website”

  1. marchell Says:
    November 29th, 2011 at 1:10 pm

    terima kasih atas ilmunya. tpi ada yang saya ingin tnyakan kemanakah masuknya posting komentar tersebut setelah di submit? jika memamg masuk ke email bgmn cara mengarahkan agar postingn tersebut masuk ke email kita sendiri.

    terima kasih
    Regards,
    Marchell

  2. admin Says:
    November 29th, 2011 at 10:05 pm

    Postingan komentar tidak masuk kedalam e-mail saya karena pada tutorial ini saya hanya menjelaskan cara membuat tampilan form.

    Untuk bisa mengirimkan e-mail melalui form yang dibuat, marcel harus mempelajari bahasa pemrograman server side scripting (php, asp, atau jsp).

    sebagai contoh :
    untuk mail function pada php mas marcel bisa melihat caranya pada http://www.w3schools.com/php/php_mail.asp

  3. xbacktrack Says:
    December 11th, 2011 at 2:03 pm

    mantap gan, izin coba.
    thank

  4. admin Says:
    December 11th, 2011 at 2:30 pm

    ok….sip

  5. Adit Says:
    January 7th, 2012 at 9:52 am

    Makasih bgt mas bro postingan nya !
    Sangat membantu sya ngbuat tugas praktek Html di kuliah.
    hampir dpet A klo submit nya bsa jalan alias ngrim ke email bneran. hhe :D

    skali lg mkasih mas bro. :D

  6. admin Says:
    February 7th, 2012 at 7:45 pm

    ok..sama2 senang bisa membantu

  7. Andy Says:
    February 11th, 2012 at 1:43 pm

    Mas tolong bantu…. bagaimana caranya jika kita ingin apa yang kita input seperti nama, email, dan komentar itu nantinya akan tampil di halaman contact.html…???

    tugasku persis seperti itu mas (apa yang kita input akan tampil di halaman contact.html) tolong dibantu mas karena ini tugas besarku….. terima kasih sebelumnya..

  8. admin Says:
    February 13th, 2012 at 10:11 am

    maksudnya tampil gmana ? masih blum paham saya maksudnya

  9. ada deh Says:
    February 21st, 2012 at 6:54 pm

    Iya nih bingung,
    Saya kan cuma buat web pake html, jadi bukan php.
    Nah kalao sdh punya form diatas kan tinggal di buat haaman kontak.html (misalnya begitu).
    Nah trus saat pengunjung sdh mengisi pesan dll, trus klik send atau submit itu gimana cara nyambungin nya ya?
    Dan pengennya sih, saat pengnjung klik send/submit, semua pesan tersebut masuk ke email saya.
    Mohon petunjuknya……

  10. admin Says:
    March 28th, 2012 at 4:21 pm

    untuk php, lain kali akan jelaskan tutorialnya disini..terima kasih

Leave a Reply


+ 5 = eleven