Cara Buat Undangan Online Gratis (Bisa Generate Nama Tamu)

Kemarin ada teman DM bertanya, bang gimana cara buat undangan online gratis? Bisa masukkin nama tamu undangan tanpa harus, duplicate page / bikin halaman baru. Kebetulan saya pakai WordPress dan menggunakan page builder elementor.

Jika kalian juga sedang mencari jawaban yang sama, saya harap artikel ini akan membantu.

Pertama, saya ucapkan selamat kepada siapapun yang membaca artikel ini. Mungkin saja diatara kalian ada yang sedang atau akan menyebar undangan nikahan. Saya doakan semoga lancar sampai hari H.

Oke, langsung saja ya.

Saya harap kalian sedikit paham apa itu Query String menggunakan URL. Karena kita akan menggunakan cara ini, untuk menampilkan nama tamu undangan. Kira-kira seperti ini penjelasannya.

Jadi, kita bisa menyimpan value paramater di URL ke halaman / landing page kita. Sehingga, memungkinkan kita membuat personalisasi halaman (dynamic page). Tanpa harus membuat halaman baru, dalam hal ini kasusnya adalah undangan online.

Kalau tamu undangannya satu dua orang mungkin masih aman ya, tapi kalau lebih dari 100? Ada ratusan halaman yang bakalan kita buat.

Disclaimer: Disini saya tidak akan mengajarkan desain membuat halaman undangan online (mungkin dilain kesempatan).

Goal tutorial kali ini yaitu, gimana cara memasukkan nama tamu undangan di halaman undangan online yang sudah kita buat.

Ohya, cara ini bisa dipakai tidak hanya untuk page builder Elementor saja lho. Pakai page builder apa saja bisa kok. Yang penting kalian pakai WordPress..

1. Install Plugin URL Params

Plugin URL Params WordPress memungkinkan Anda mengakses parameter URL di String Kueri URL.

Plugin ini bahkan memungkinkan Anda untuk menentukan nilai default dalam kode pendek jika parameternya tidak disetel, jadi jika Anda ingin mengatakan “Halo, Nama Depan” dan Nama Depan tidak disetel, itu bisa mengatakan sesuatu seperti “Halo, Teman!”.

2. Buat Undangan Online

Saya asumsikan disini, kalian sudah membuat desain undangan online kalian masing-masing. Dan berikut akan kami contohkan jika kalian menggunakan page builder Elementor.

3. Pasang Shortcodes URL Params di Undangan Online Kalian

Saya yakin, jika kalian pertama kali memasang plugin URL Params. Pasti kebingungan, gimana sih cara nempatin shortcodesnya, atau tempat settingannya dimana. Udah nyari di Tools (peralatan) atau Setting (pengaturan) tapi gak Ada.

Tenang… Jangan Panik!

Setelah kalian install plugin tersebut, dan di aktifkan, maka otomatis shortcodesnya sudah aktif. Jadi, tinggal pasang dimanapun kalian mau.

Sekarang… Buka editor Elementor kalian.

Kemudian simpan shortcodes URL params dengan format berikut ini. Nah, buat kalian yang belum paham, silahkan disimak penjelasan code-nya barikut ini ya.

Tag shortcodes [urlparam /] adalah tag pembuka untuk mengaktifkan string parameter, sehingga nanti bisa kita gunakan. Kemudian, tambahkan value and keynya, dimana key-nya adalah param= dan valuenya yaitu didalam string “_” misalnya "to".

Ini terserah kalian saja, bisa to, boleh kepada, atau apa saja. Kemudian, key yang kedua adalah default= dan valuenya ada di dalam string “_” juga. Fungsi, key default ini adalah untuk memasukkan value jika valuenya kosong.

Nah, berikut shortcodes lengkapnya.

[urlparam param="to" default="Temanku" /]

Simpan shortodes tersebut dimana, kalian mau tampilkan.

4. Gimana Cara Nampilin Namanya Sekarang? (GET)

Well, jangan panik!

Memang di editor Elementor kalian, tampilannya seperti itu.

Coba sekarang, simpan dulu. Setelah itu View Page.

Setelah View Page, maka tampilannya akan seperti itu ya. Masih ingat, penjelesan sebelumnya? key default akan menampilkan value jika query parameternya kosong. Disini contohnya saya isi Temanku. Karena, paramater nya belum saya panggil.

Nah, gimana cara manggilnya? Sekarang lihat kolom URL di browser kalian.

Silahkan lihat url halaman kalian masing-masing, disini contohnya https://www.rchtechno.com/undangan/. Sekarang tambahkan di URL setelah halaman undangan kalian misalnya ?to=Rahmad kemudian tekan Enter.

URL lengkapnya seperti ini https://www.rchtechno.com/undangan/?to=Rahmad

Jadi, tadi kita sudah mendeklarasi param="to" maka sekarang kita isi value “to” dengan nama tamu undangan, disini contohnya Rahmad.

Setelah kalian tekan Enter, maka tampilan halamannya akan seperti ini.

Boom! Sekarang, kalian gak perlu bikin halaman, per halaman hanya untuk mengisi nama tamu undangan.

Cukup berikan URL nya saja https://www.rchtechno.com/undangan/?to=Rahmad nah, sekarang undangan kalian bisa secara private dikirimkan.

Tapi… kalau namanya lebih dari satu kata apa bisa? Tentu saja bisa! tinggal tambahkan %20 itu artinya spasi. Contohnya https://www.rchtechno.com/undangan/?to=Rahmad%20RCH%20Techno nanti tampilnya akan seperti ini Rahmad RCH Techno.

Kesimpulan

Jadi, kesimpulannya adalah sekarang kita bisa membuat dynamic page, memanfaatkan plugin URL Params untuk menampilkan / GET data dari URL. Sehingga, kita bisa membuat nama tamu undangan secara dynamic, tanpa perlu membuat halaman baru.

Gimana kalau saya pakai page builder selain Elementor? Tentu saja bisa, yang penting kalian membuat webnya menggunakan WordPress.

Well.. Jika tamu undangan kalian banyak, saya sarankan menggunakan hosting yang kuat menampung visitor banyak sekaligus. Kebayang kan, saat kalian sebar undangan, kemudian ada ratusan orang buka sekaligus, bisa down servernya.

Saran saya, bisa pakai hosting Niagahoster yang paket pelajar atau cloud hosting. Harganya juga terjangkau, layanan CS-nya juga fast respon, bahkan diskon hingga 75%. Kalau mau dapat Tambahan diskon masukkan Kode: rchtechno saat checkout, nanti otomatis dapat tambahan diskon hingga 5%.

Atau bisa gunakan jasa layanan buat website di RCH Techno.

Oke teman-teman, demikian yang dapat saya sampaikan. Semoga tutorial ini membantu, dan sekali lagi selamat dan semoga dilancarkan sampai hari H. Siapapun kalian yang menemukan artikel ini, jangan lupa share ke teman-teman kalian, siapa tahu membantu.

Best regards,

RCH Techno.