convForm
1.0.0
Saya memulai ini sebagai proyek sampingan dan proyek ini menjadi nyata, dengan banyak orang melihat kegunaan yang berbeda dari proyek ini, dengan cara yang sangat berbeda dari apa yang seharusnya dilakukan pada awalnya. Suatu saat nanti, di masa depan yang tidak pasti, saya mungkin akan mengulangi hal ini dari awal untuk mencapai kemungkinan tersebut, namun saat ini saya tidak punya cukup waktu untuk mengerjakannya, maaf. Jika Anda ingin membantu dalam hal apa pun, silakan buka permintaan tarik.
Sebuah plugin yang mengubah formulir menjadi obrolan interaktif.
Fitur:
Untuk membuat obrolan, cukup bungkus formulir di dalam elemen, dan panggil .convform() pada pemilih jquerynya.
Contoh:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;Agar plugin mengetahui pertanyaan mana yang harus ditanyakan, setiap input dan pemilihan harus memiliki atribut data-conv-question. Contoh:
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >Jika mau, Anda dapat menulis lebih dari satu pertanyaan untuk setiap tag, menggunakan pipa | untuk memisahkan mereka. Plugin akan secara acak memilih salah satu untuk digunakan setiap kali obrolan dibuat. Contoh:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >Anda dapat menggunakan pola regex pada input, cukup gunakan atribut data-pattern pada tag. Ketika pengguna mengetikkan jawaban, jika tidak sesuai pola, maka ia tidak dapat mengirimkannya dan warna input menjadi merah. Contoh:
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >Anda dapat melakukan percakapan dan mengajukan pertanyaan spesifik berdasarkan jawaban pengguna. Ini hanya berfungsi ketika melakukan forking dari pilihan.
Untuk melakukan ini, Anda perlu meletakkan tag div setelah pertanyaan yang ingin Anda gunakan untuk percakapan, dengan tag data-conv-fork dengan nama pilihan di atasnya.
Di dalam div itu, Anda perlu membuat tag div dengan atribut data-conv-case yang merujuk pada jawaban yang akan mengarahkan percakapan ke elemen turunannya.
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >Untuk menggunakan jawaban pengguna atas pertanyaan, Anda dapat menggunakan {inputname} di dalam tag data-conv-question, yang mana inputname merujuk pada pertanyaan yang Anda perlukan jawabannya. Jika mau, Anda bisa mendapatkan kata-kata tertentu dari jawaban menggunakan : pemilih (diindeks 0). Misalnya, ketika Anda memerlukan nama depan pengguna, Anda dapat menggunakan {name}:0, dan plugin akan mendapatkan kata pertama dari jawaban pertanyaan "nama". Contoh:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >Anda dapat memasukkan pesan ke dalam alur obrolan. Itu adalah pertanyaan yang tidak mengharapkan jawaban apa pun dari pengguna, sehingga plugin akan langsung melanjutkan ke pertanyaan berikutnya. Untuk melakukannya, letakkan atribut data-no-answer="true" pada tag masukan. Contoh:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >Anda dapat menggunakan fungsi khusus untuk dipanggil ketika pengguna mengklik jawaban dari pilihan, atau di akhir pertanyaan (Jika pertanyaan mengharapkan jawaban, panggilan balik akan dipanggil setelah pengguna memasukkan. Jika tidak, panggilan balik akan dipanggil setelah mencetak pesan.). Untuk melakukannya, masukkan saja nama fungsi yang akan dipanggil pada atribut "data-callback" pada tag opsi, atau pada tag input:
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script > Fungsi panggilan balik dipanggil dengan parameter stateWrapper dan fungsi panggilan balik ready . Pembungkus status adalah objek convForm, dan ready adalah fungsi yang HARUS Anda panggil untuk melanjutkan ke pertanyaan berikutnya.
Anda dapat menambahkan objek opsi sebagai parameter ke fungsi convForm, yang berisi:
placeHolder : placeholder yang ingin Anda tampilkan pada input penggunatypeInputUi : 'input' atau 'textarea', untuk memilih tipe elemen html yang akan digunakan sebagai input penggunatimeOutFirstQuestion : waktu dalam ms sebagai durasi animasi pemuatan sebelum pertanyaan pertamabuttonClassStyle : kelas untuk tombol kirim jawaban penggunaeventList : objek dengan fungsi yang akan dipanggil pada waktu tertentu, satu-satunya yang didukung saat ini adalah onSubmitForm (fungsi dipanggil dengan convState sebagai parameter) dan onInputSubmit (fungsi dipanggil dengan convState sebagai parameter pertama, dan fungsi panggilan balik yang siap untuk mencetak pertanyaan berikutnya sebagai parameter kedua)formIdName : id html untuk formulirinputIdName : id html untuk input penggunaloadSpinnerVisible : kelas untuk loadSpinnerselectInputStyle : show (default), disable , atau hide -- memberi tahu plugin cara menangani kolom masukan ketika pertanyaannya adalah select .selectInputDisabledText : Teks yang akan ditampilkan pada input pada pertanyaan pilihan jika selectInputStyle disetel ke disable . $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; Berhati-hatilah karena fungsi panggilan balik dipanggil di dalam fungsi onInputSubmit . Jika Anda mengubah fungsi acara ini, Anda tidak perlu menggunakan fungsi panggilan balik di tag HTML, tetapi jika karena alasan tertentu Anda memerlukannya, pastikan untuk memanggilnya ke sini menggunakan window[convState.current.input.callback](convState, readyCallback);
