Myjayvyn.com

Cara Membuat Landing Page: Submit Form Model 2

3  |  1807 Views
Advertisement
7 Ibu rumah tangga DAN mantan karyawan
BEKERJA online DARI RUMAH

DAN KINI BERPENGHASILAN 7-20jt per bulan


Yuk cari tahu bisnis mereka
==> Follow My Facebook <==



Lanjutan…

Selamat shubuh :)
Cara membuat landing page: submit form model 2 ini memerlukan bantuan hosting sebagai autorespondernya.
Belum paham apa itu hosting? Klik disini

Autoresponder itu cara kerjanya kalo ada pengunjung yang mengirim email ke alamat email kita, maka sistem di hosting akan otomatis membalas email pengunjung tersebut. Tentu saja sebelumnya kita sudah melakukan pengaturan terlebih dahulu pada autorespondernya.

WARNING!
Artikel ini akan sangat panjang, siapkan mental dan diri kalian menghadapinya :)
Oleh karena itu sebelum kita memulai pekerjaan ini marilah kita berdoa sesuai keyakinannya masing-masing, demi keselamatan dan kelancaran proses belajar ini…
Berdoa… mulai!

Selesai!
Dan juga jangan lupa untuk menghapus coding responce-O-matic dari index.html yang telah anda lakukan ketika membuat submit form model 1,  ini penting untuk menghindari tumpang tindih dan kekacauan di negara index.html hehe..
Pastikan kondisi file index.html nya seperti ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <link rel="stylesheet" type="text/css" href="style.css">
      <TITLE>Belajar Bikin LP</TITLE>
   </HEAD>
   <BODY>
      <div id="main">
           <div id="header"> 
           </div>
                <div id="content"> 
<p>Bila kuingat lelah ayah bunda, Bunda piara piara akan daku sehingga aku besarlah
Waktuku kecil hidupku amatlah senang senang dipangku dipangku dipeluknya serta dicium dicium dimanjakan <a href="http://jayvyn-host.com" target="_blank">namanya kesayangan</a></p>

<p><img src="images/gambar1.jpg"></p>

<p>Kasih ibu, kepada beta tak terhingga sepanjang masa
Hanya memberi, tak harap kembali, Bagai sang surya, menyinari dunia.</p>

<p><img src="images/gambar2.jpg"> <a href="http://www.dbc-network.com/?act=daftar&id=jayvyn270204" target="_blank"><img src="images/gambar3.jpg"></a></p>

<p>Jika ku sudah besar nanti Ku pergi dengan ibu Ibu boleh pilih sendiri Kemana yang dituju
Ibu bisa pilih Jogya, Bandung atau Semarang Aku yang beli karcisnya Karcis Kapal Terbang</p>

                         <div id="form">

                         </div>

                </div>
      </div>
   </BODY>
</HTML>

Bisa?? Baiklah hati-hati ada kesalahan dalam proses menghapusnya ya..
Lakukan… sekarang!

Kemudian urusan pertama kita adalah mengutak atik cpanel hosting, tentunya anda harus memiliki hosting terlebih dahulu untuk melakukannya. Baca saja dulu langkah-langkahnya:

  • Login ke cpanel hosting
    Lupa? Tinggal ketik saja www.namadomainmu.com/cpanel di browser
  • Setelah login, buatlah email account terlebih dahulu untuk menampung email yang akan masuk.
    Contoh: info@namadomainmu.com
  • Buat autoresponder nya
  • Jika anda ingin email lain untuk dapat menampungnya misal yahoo atau gmail, lakukan forward email.

Untuk mengerjakan langkah-langkah diatas, caranya telah tertuang dalam artikel berikut ini http://myjayvyn.com/fasilitas-email-di-hosting/
Tapi mohon maaf artikel tersebut diproteksi dan hanya bisa dibuka oleh pelanggan web hosting www.jayvyn-host.com

Anda bisa menjadi pelanggan kami dengan hanya membeli domain & hosting, untuk harga lebih murah cek promonya disini. #Iklan modeon hehe..

Atau anda bisa googling untuk melakukan langkah-langkah yang saya sebutkan diatas.

Baiklah urusan pertama kelar, lanjut dengan urusan kedua. Pada file index.html kita akan menggabungkan fungsi tabel dan form. Yang perlu diketahui adalah tag-tag HTML yang membentuk fungsi tersebut.
Untuk membuat tabel format standarnya seperti ini:

<table>
           <tr>
                 <td>
                 TULISAN
                 </td>
           </tr>
</table>

Keterangan:
Tag <table> </table> memberitahu browser bahwa akan dibuat sebuah tabel disini.
Tag <tr> </tr> membuat sebuah baris dalam tabel.
Tag <td> </td> membuat sebuah kolom dalam tabel.

Latihan!
Jika anda ingin membuat tabel terdiri dari 2 buah baris, dimana baris pertama berisi 1 kolom dan baris kedua berisi 3 kolom. Codingnya akan seperti ini:

<table border="1">
      <tr>
         <td colspan="3">
         TULISAN DI BARIS DAN KOLOM PERTAMA
         </td>
      </tr>

      <tr>
         <td>
         TULISAN DI BARIS KEDUA, KOLOM PERTAMA
         </td>
         <td>
         TULISAN DI BARIS KEDUA, KOLOM KEDUA
         </td>
         <td>
         TULISAN DI BARIS KEDUA, KOLOM KETIGA
         </td>
      </tr>
</table>

Cobalah pasang di index.html anda, pasang diantara tag <div id=”form”> dan </div>. Lalu lihat tampilannya.

Perhatikan, ada tambahan atribut dalam tag <table> dan <td>

  • border=1 menambahkan border pada tabel dengan ukuran 1px
  • colspan=3 mengatur kolom di baris pertama agar menyesuaikan lebar dengan 3 buah kolom di baris kedua. Jika anda kurang paham maksudnya, coba hapus atribut colspan=3 dari tag <td>. Lalu lihat kembali tampilan webnya.

Oke pak? bu? mba? mas? sis? bro? Okeeee???
Halllooowww masih stay tuned kah??? hehe
Meriaaaanng???
Rambut mulai tampak kribooo???
Hehe…

Selanjutnya saya akan bahas cara membuat form yang biasanya diawali tag <form> diakhiri tag </form>. Disini saya hanya akan membahas form yang membutuhkan input berupa teks atau disebut text fields. Tag yang digunakan adalah <input type=”text”>.

Latihan!
Pada tabel ganti “TULISAN DI BARIS DAN KOLOM PERTAMA” dengan code berikut:

<form>
Nama: <input type=”text” name=”nama_1″><br>
Email: <input type=”text” name=”email_2″>
</form>

Keterangan:

Nama: dan Email: disebut label atau caption dari form
nama_1 dan email_2 disebut kolom input bertipe teks dari form

<table border="1">
     <tr>
            <td colspan="3">
                  <form>
                  Nama: <input type="text" name="nama_1"><br>
                  Email: <input type="text" name="email_2">
                  </form>
            </td>
     </tr>

     <tr>
            <td>
            TULISAN DI BARIS KEDUA, KOLOM PERTAMA
            </td>
            <td>
            TULISAN DI BARIS KEDUA, KOLOM KEDUA
            </td>
            <td>
            TULISAN DI BARIS KEDUA, KOLOM KETIGA
            </td>
     </tr>
</table>

Save file index.html tersebut, kemudian lihat kembali tampilan visual dari form yang telah anda buat tadi.
Mudah bukan? Hehehe

Nah itu sedikit share ilmu tentang coding table dan form sederhana, jadi dengan memiliki sedikit ilmu diatas diharapkan anda dapat membaca dan memahami maksud dari coding tabel dan form yang akan saya buat berikut ini:

wpb13

Rencananya kita akan membuat form seperti diatas, dimana prosesnya ketika pengunjung mengisi form dan klik tombol submit akan beralih ke sebuah halaman web lain dengan format PHP ( …nah lho apalagi tuh :D ) yang menyatakan bahwa informasi telah berhasil terkirim.
Tampilan halaman visual halaman PHP nya akan seperti ini:

wpb14

Jadi nanti akan ada file baru dengan nama kirim.php yang berisi coding untuk memproses input data dari form agar terkirim ke alamat email kita. Ikuti langkah-langkah berikut:

  • Hapuslah semua coding latihan yang telah anda buat pada file index.html sehingga kondisi wilayah <div id=”form”> kembali kosong seperti semula
    <div id="form">
    
    </div>
  • Lalu tambahkan script seperti ini diantara tag pembuka <div id=”form”> dan tag penutup </div>:
    <table width="250" height="250" style="border:3px dashed #58AC77; background-color:#FFFFE0" >
    	<tr>
    		<td>
    		<form name="form1" method="post" action="kirim.php">
    			<table width="100%" border="0" >
    				<tr>
    					<td width="85%" height="40"><input name="Nama__1" type="text" id="nama_pengunjung" size="30" kl_virtual_keyboard_secure_input="on" value="Nama" onfocus="this.value= (this.value=='Nama') ? '' : this.value" onblur="this.value= (this.value=='') ? 'Nama' : this.value">
    					</td>
    				</tr>
    				<tr>
    					<td height="40"><input name="Email__2" type="text" id="email_pengunjung" size="30" kl_virtual_keyboard_secure_input="on" value="Email" onfocus="this.value= (this.value=='Email') ? '' : this.value" onblur="this.value= (this.value=='') ? 'Email' : this.value">
    					</td>
    				</tr>
    				<tr>
    					<td height="40"><input name="Telepon__3" type="text" id="Telepon_pengunjung" size="30" kl_virtual_keyboard_secure_input="on" value="Telepon" onfocus="this.value= (this.value=='Telepon') ? '' : this.value" onblur="this.value= (this.value=='') ? 'Telepon' : this.value">
    					</td>
    				</tr>
    				<tr>
    					<td height="30"><font size="1">Kami menjaga kerahasiaan data anda</font>
    					</td>
    				</tr>										
    				<tr>
    					<td height="40"><input type="submit" name="Submit" value="Submit"></td>
    				</tr>
    			</table>
    		</form>
    		</td>
    	</tr>
    </table>
  • SAVE jangan lupa file index.html nya
  • Kemudian melalui notepad, buatlah file baru
  • Isi dari file baru tersebut sebagai berikut:
    <?php
    $email = "agi@jayvyn-host.com";
    
    print "<p>Informasi dibawah ini telah berhasil terkirim:<p>
    
    <table width=\"450\" border=\"0\">
    	<tr>
    		<td style=\"BORDER: #efecd6 1px solid;\">
    			<table border=\"0\" width=\"100%\" cellpadding=\"5\" cellspacing=\"0\">
    				<tr>
    					<td width=\"35%\">Nama</td>
    					<td>".$_REQUEST[Nama__1]."</td>
    				</tr>
    				<tr>
    					<td width=\"35%\">Email</td>
    					<td>".$_REQUEST[Email__2]."</td>
    				</tr>
    				<tr>
    					<td width=\"35%\">Telepon</td>
    					<td>".$_REQUEST[Telepon__3]."</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    
    ";
    $message = "Informasi dibawah ini dikirim dari website Anda:\n";
    $message .= "Nama: ".$_REQUEST[Nama__1]."\n\n";
    $message .= "Email: ".$_REQUEST[Email__2]."\n\n";
    $message .= "Telepon: ".$_REQUEST[Telepon__3]."\n\n";
    mail( $email, "Submit Form Dari Website", $message, "From: $email
    X-Priority: 1 (Highest)" );
    ?>
  • Perhatikan! Dipaling atas ada tulisan:
    $email = “agi@jayvyn-host.com”;
    Gantilah dengan alamat email yang tadi sudah anda buat dengan autorespondernya di cpanel hosting.
  • Lalu simpan file baru tersebut dengan nama kirim.php dan pastikan Save as Type adalah All Files, simpan file tersebut di folder kerja anda yang ada file index.html nya
  • Selesaaaaai!!!!!

Oalahh… banyak banget tag tag maupun atribut baru pada coding diatas ya? haha… biarlah ga usah dipikirin yaa.. abisan repot kalo harus bahas satu persatu, nanti malah pusing hihi… googling aja kalo mau ya :)
Untuk mengetes submit form berfungsi atau tidak, harus dipindahkan dulu semua file kerja anda ke hosting melalui file manager di cpanel hosting hehehe… Karena file PHP tidak bisa dibuka oleh browser secara offline, kecuali anda install aplikasi WAMP atau XAMP di komputer anda. Nah bingung kan???? hehehe maaf yaa…
Untuk mengetahui cara uploadnya ke hosting, akan saya bahas setelah sampai pada materi selanjutnya tentang FOOTER .

Bersambung again…

Author: Agie

Semoga bermanfaat :)

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

3 Comments

  1. syarif niskala

    Assalamu’alaikum wr wb.

    Mas, lanjutannya, ke mana ya?

    Terima kasih ya.

So, what do you think ?