Ventana emergente de formulario html puramente personalizado en el sitio de wordpress

3 minutos de lectura

avatar de usuario
Shamsuddin Altamash

Necesito mostrar un formulario en mi página de inicio (sitio de WordPress) en una ventana emergente. Es mi propio formulario y no un contacto 7 u otra cosa.

Quiero un complemento emergente o el código que pueda hacer lo mismo en mi página de inicio. Probé muchos complementos, pero algunos tienen su propio diseño de formulario que no me da la función de agregarle mi formulario.

Necesito una ventana emergente de buen aspecto HTML simple.

  • Hay muchos complementos disponibles para ventanas emergentes, pero para su formulario personalizado tendrá que personalizar el complemento o necesitará usar un script Java personalizado y html para lograr su objetivo de ventana emergente.

    – Manos amigas

    1 de diciembre de 2014 a las 6:40

avatar de usuario
Harshul Pandav

Puede usar el ‘diálogo’ de JQuery para abrir una ventana emergente con su formulario.

Simplemente incruste su formulario en un div con una identificación y conviértalo en un cuadro de diálogo.

HTML

<button type="button" id="but" >Open Popup</button>

<div id="dialogForm">
    <form id="myform" method="post">
        Name:
        <input type="text"/><br/>
        Phone:
        <input type="text"/><br/>
        <button type="submit"> Submit </button>
    </form>
</div>

JavaScript

$('#but').click(function() {
    $("#dialogForm").dialog("open");
});
    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });   

JavaScript para cargar el cuadro de diálogo al cargar la página de inicio
Tenga en cuenta que ‘autoOpen’ se establece en verdadero.

$(window).load(function() {

    $("#dialogForm").dialog({
        modal: true,
        autoOpen: true,
        show: {effect: "blind", duration: 800}
    });
});

Aquí está el violín: http://jsfiddle.net/sve3Lmje/

Fiddle para abrir el diálogo sin hacer clic: http://jsfiddle.net/sve3Lmje/1/

  • ¿Podemos abrirlo sin hacer clic? Quiero que se cargue directamente en la página de inicio.

    – Shamsuddin Altamash

    2 de diciembre de 2014 a las 6:40


  • Sí. Simplemente llame a $(“#dialogForm”).dialog(“open”); en la carga de la página. Por supuesto, el código para configurar el div como diálogo, es decir, desde la línea 4, también debe incluirse en la carga

    – Harshul Pandav

    2 de diciembre de 2014 a las 6:43

  • verifique la edición del segundo violín que abre el cuadro de diálogo en la carga de la página sin hacer clic en ningún botón

    – Harshul Pandav

    2 de diciembre de 2014 a las 7:05

  • Cuando hago una inmersión y escribo un script en la misma página, ese formulario div aparece directamente en la página (no en una ventana emergente) sin ninguna llamada a ninguna función. Quiero saber dónde colocar el código html y dónde colocar el código de secuencia de comandos en mi página de inicio existente para que mi formulario aparezca solo como una ventana emergente y no aparezca en mi página de inicio.

    – Shamsuddin Altamash

    2 de diciembre de 2014 a las 7:55

  • Actualicé mi respuesta con el código para cargar el cuadro de diálogo automáticamente al cargar la página de inicio. Asegúrese de tener las bibliotecas de JQuery.

    – Harshul Pandav

    2 de diciembre de 2014 a las 14:42

¿Ha sido útil esta solución?