Script para insertar formulario de Contacto

El script que desarrollamos está recomendado solamente para hacer integraciones rápidas del formulario que no requieran cambios mayores al diseño y funcionalidad.

Para agregarlo es necesario crear un elemento que se reemplazará con el formulario una vez que se ejecute el script, ejemplo:

<div id="lead-widget"></div>

...

<script src="https://agency.bookandlearn.com/.../script.js?target=lead-widget" async></script>

En Book&Learn podemos generar distintos formularios para tu sitio web. Por ahora no contamos con una interfaz gráfica para crearlo, por lo que para generar un formulario es necesario que te pongas en contacto con nosotros y nos enviés la configuración de como quieres tu formulario y nosotros te regresaremos la URL que debes agregar al script

Atributos

Los campos anteriores cuentan con distintas opciones para personalizar, hay algunos campos que no cuentan con todos los atributos

Atributo Descripción
label Texto a mostrar en lugar del default
placeholder Texto que se muestra dentro del campo
defaultValue Permite agregar un valor por default
show Oculta o muestra el campo, útil cuando existe un valor por default

Configuración

Además de los campos para generar el formulario, existen otros campos fijos, que no puede editar el usuario:

Campo Descripción
reporter Usuario que aparecerá como el que generó el lead
recipients Correos a los que se les notificará al registrar un lead
language Idioma en el que se mostrarán los campos
message Mensaje a mostrar cuando el formulario se envíe

Dependencias

El formulario utiliza clases de Bootstrap 3.3, en caso de que su sitio no ocupe bootstrap será necesario incluirlo.

Ej.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Para poder utilizar el captcha es necesario agregar el siguiente script

    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
    </script>

Personalizar diseño

El widget se inserta en el elemento con el ID determinado y es posible modificar usando CSS. Esta es la estrucutra básica del formulario, el cual utiliza algunas calses de Bootstrap

    <form id="widget-form" novalidate="novalidate">
        <div class="form-group">
            <label class="control-label">Nombre</label> 
            <input placeholder="" type="text" class="form-control"> 
        </div>

        ...
    </form>

Ejemplo

Search List

Ejemplo con la configuración básica del formulario

results matching ""

    No results matching ""