Myjayvyn.com

Cara Membuat Landing Page: Submit Form Model 1

3  |  991 Views

Horee..
Akhirnya ada waktu lagi buat nerusin artikel cara membuat landing page hehe..
Yuk yak yuuukk… kita akan bahas menambahkan fasilitas form submit pada landing page

Sudah tahu kaaan kenapa harus ada fasilitas submit form?
Kalo ga tau… bisa kembali lagi ke bab awal disini http://myjayvyn.com/cara-membuat-landing-page/
Saya akan coba share membuat form submit dengan 3 cara berbeda:

  1. Cara gratisan
  2. Melalui hosting sendiri
  3. Dan cara rahasia #hehehe…

Mari kita bahas cara pertama sambil makan kue mari…

  • Kunjungi link https://www.response-o-matic.com
  • Klik Get Started
  • wpb09
  • Tentunya pilih yang gratis doong 😀 … Klik SIGN UP
  • wpb10
  • Sebagai anggota baru, anda akan diminta untuk mengisi data-data yang diperlukan saat pendaftaran
  • wpb11
  • Klik tombol SIGN UP
  • Setelah ini anda akan menerima email validasi dari responce-O-matic, cek email anda segera lalu klik linknya untuk menyelesaikan proses pendaftaran
  • wpb12
  • Anda akan dibawa ke halaman utama
  • Secara default sudah ada 2 buah kolom Name dan Email
  • wpb03
  • Jika ingin menambahkan kolom baru, klik Add Question
  • Klik tab Short Answer
  • Isi bagian Question, misalkan Telepon:
  • wpb05
  • Klik SAVE
  • Kllik Continue
  • Lakukan setting seperti contoh gambar dibawah ini, set juga Redirect to website dengan alamat web yang dimiliki.
  • wpb07
  • Klik Continue
  • Dengan begitu baiknya mereka memberikan HTML coding script, cuma tinggal COPAS hehe
  • wpb08

Berikutnya kita beralih pada tugas lain, yaitu memasang script yang kita dapat tadi kedalam file index.html dan mengatur tampilannya di style.css.

  • Buka file index.html
  • Kita buatkan daerah baru didalam wilayah Content dengan menambahkan tag berikut
                    <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">
                              COPAS DISINI SCRIPT YANG KITA DAPAT TADI
                              </div>
                    </div>
          </div>
       </BODY>
    </HTML>
  • Beres deh urusan dengan index.html, jangan lupa SAVE.
  • Cek dulu tampilan landing pagenya, udah muncul form belum?? Jangan-jangan malah jadi ancur.. hehe

Selanjutnya kita urus format tampilannya biar posisi formnya berada ditengah.

  • Buka file style.css
  • Tambahkan script dibawah ini
    #form table{
        margin-left:auto; 
        margin-right:auto;
    
    }
  • Lalu SAVE
  • That’s it!!

Selesai sudah nambahin form gratisan pada halaman landing page anda. Ups.. mohon dimaklumi kalo muncul advertisement dari pemiliknya. Mbok ya tau dirilah namanya juga gratis hehe…
Tugas selanjutnya ngetes deh… pastikan proses submit form berjalan dengan baik. Kalo gagal, silakan anda telusuri kesalahan anda dimana hehe..

Setelah ini saya akan membahas cara kedua membuat submit form, ditunggu yaa..

Bersambuuuuunnnngggg!!!!!!

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

3 Comments

  1. nila

    Trims infonya, tapi kenapa begitu di test, tombol submit nggak berfungsi ya?

So, what do you think ?