convForm
1.0.0
Comencé esto como un proyecto paralelo y cobró vida, y muchas personas le vieron usos diferentes, de maneras completamente diferentes a lo que se suponía que debía hacer originalmente. Es posible que en algún momento en el futuro incierto vuelva a hacer esto desde cero para alcanzar esas posibilidades, pero actualmente no tengo suficiente tiempo para trabajar en esto, lo siento. Si desea ayudar con algo, no dude en abrir solicitudes de extracción.
Un complemento que transforma un formulario en un chat interactivo.
Características:
Para crear el chat, simplemente ajuste el formulario dentro de un elemento y llame a .convform() en su selector jquery.
Ejemplo:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;Para que el complemento sepa qué pregunta hacer, cada entrada y selección debe tener un atributo de pregunta de conversión de datos. Ejemplo:
< 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 >Si lo deseas, puedes escribir más de una pregunta para cada etiqueta, usando pipe | para separarlos. El complemento elegirá aleatoriamente uno para usar cada vez que se genere el chat. Ejemplo:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >Puede usar patrones de expresiones regulares en las entradas, simplemente use el atributo de patrón de datos en la etiqueta. Cuando el usuario escribe una respuesta, si no se ajusta al patrón, no puede enviarla y el color de entrada se vuelve rojo. Ejemplo:
< 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 " >Puede bifurcar la conversación y hacer preguntas específicas según la respuesta del usuario. Esto solo funciona cuando se bifurca desde selecciones.
Para hacer esto, debe colocar una etiqueta div después de la pregunta desde la que desea bifurcar la conversación, con una etiqueta data-conv-fork con el nombre de la selección.
Dentro de ese div, debe crear etiquetas div con el atributo data-conv-case que haga referencia a la respuesta que bifurcará la conversación a sus elementos secundarios.
< 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 >Para usar las respuestas del usuario a las preguntas, puede usar {inputname} dentro de una etiqueta data-conv-question, en la que inputname hace referencia a la pregunta de la que necesita la respuesta. Si lo desea, puede obtener palabras específicas de la respuesta usando: selector (indexado en 0). Por ejemplo, cuando necesite el nombre del usuario, puede usar {nombre}:0 y el complemento obtendrá la primera palabra de la respuesta a la pregunta "nombre". Ejemplo:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >Puedes poner mensajes en el flujo de chat. Son preguntas que no esperan respuesta alguna por parte del usuario, por lo que el plugin pasará a la siguiente pregunta al instante. Para hacer esto, coloque un atributo data-no-answer="true" en una etiqueta de entrada. Ejemplo:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >Puede usar funciones personalizadas que se llamarán cuando un usuario haga clic en una respuesta de una selección o al final de la pregunta (si la pregunta espera una respuesta, se llamará a la devolución de llamada después de la entrada del usuario. Si no es así, se llamará a la devolución de llamada). será llamado después de imprimir el mensaje). Para hacer esto, simplemente coloque el nombre de la función a llamar en el atributo "data-callback" de la etiqueta de opción, o en la etiqueta de entrada:
< 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 > Las funciones de devolución de llamada se llaman con los parámetros stateWrapper y una función de devolución de llamada ready . El contenedor de estado es el objeto convForm y listo es una función que DEBE llamar para pasar a la siguiente pregunta.
Puede agregar un objeto de opciones como parámetro a la función convForm, que contenga:
placeHolder : el marcador de posición que desea que aparezca en la entrada del usuariotypeInputUi : 'entrada' o 'área de texto', para elegir el tipo de elemento html que se utilizará como entrada del usuariotimeOutFirstQuestion : tiempo en ms como duración de la animación de carga antes de la primera preguntabuttonClassStyle : clase para el botón de enviar respuesta del usuarioeventList : un objeto con funciones que se llamarán en momentos específicos, las únicas admitidas en este momento son onSubmitForm (la función se llama con convState como parámetro) y onInputSubmit (función llamada con convState como primer parámetro y una función de devolución de llamada lista para imprimir la siguiente pregunta como segundo parámetro)formIdName : ID HTML del formulario.inputIdName : ID html para la entrada del usuarioloadSpinnerVisible : clase para loadSpinnerselectInputStyle : show (predeterminado), disable u hide : le indica al complemento cómo manejar el campo de entrada cuando una pregunta es una select .selectInputDisabledText : el texto que se mostrará en la entrada de preguntas seleccionadas en caso de que selectInputStyle esté configurado para disable . $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; Tenga en cuenta que las funciones de devolución de llamada se llaman dentro de la función onInputSubmit . Si está cambiando esta función de evento, no debería necesitar usar funciones de devolución de llamada en las etiquetas HTML, pero si por alguna razón las necesita, asegúrese de llamarlas aquí usando window[convState.current.input.callback](convState, readyCallback);
