Antonella Framework Crear un formulario y obtener sus datos

Vamos a crear un formulario simple y obtener sus datos para poder guardarlo de forma rápida y sencilla con Antonella Framework .

Empezamos explicando con todo detalle

Para ello bajaremos del repositorio el framewok. Vamos a usar una carpeta vacía. Yo suelo poner todos los proyectos en una carpeta, desde ahí ejecuto la consola y empiezo a trabajar.

<span class="hljs-attribute">$ git</span> clone https://bitbucket.org/cehojac/antonella-framework-for-wp.git ejemplo-formulario

$ cd ejemplo-formulario

$ php antonella namespace EJFORM

Cambiamos el namepace para personalizar el plugin y no tener conflictos.

Recuerda que hay documentación adicional en https://antonellaframework.com

Abriremos el archivo antonella-framework.php y cambiamos La linea 4 para personalizar tu plugin. le puedes poner “Plugin Name: ejemplo de formulario” pero puedes ponerle el que desees. Vamos a crear un shortcode para poder insertar el formulario en cualquier parte de la web. Para ello vamos a crear un controlador

php antonella make FormularioController

Se creará un archivo FormularioController.php el cual estará la Class FormularioController ahi crearemos nuestra función para crear el formulario

<div>
<div>public function form()</div>
<div>{</div>
<div>$html = <<<'EOT'</div>
<div><form></div>
<div><div class="form-group"></div>
<div><label for="exampleInputEmail1">Email address</label></div>
<div><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"></div>
<div><small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small></div>
<div></div></div>
<div><div class="form-group"></div>
<div><label for="exampleInputText">Password</label></div>
<div><input type="text" class="form-control" id="exampleInputText" placeholder="Example text"></div>
<div></div></div>
<div></div>
<div><button type="submit" name="enviar_form" class="btn btn-primary">Submit</button></div>
<div></form></div>
<div>EOT;</div>
<div>return $html;</div>
<div>}</div>
</div>

Recuerda que no debe haber espacio inicial entre los EOT. si buscas más información puedes verlo aquí https://stackoverflow.com/questions/1848945/best-practices-working-with-long-multiline-strings-in-php

Ahora crearemos otra función dentro de nuestra clase para obtener los datos del formulario

<div>
<div>
<div>public function SaveData()</div>
<div>{</div>
<div>$exampleInputEmail1 = sanitize_text_field($_POST['exampleInputEmail1']);</div>
<div>$exampleInputText = sanitize_text_field($_POST['exampleInputText']);</div>
<div>die(print_r($_POST));</div>
<div>}</div>
</div>
</div>

Con esta función vamos a obtener los datos y lo guardamos en un array. Desde ahí puedes hacer lo que desees con ello, guardarlo en una base de datos o enviarlo por email… lo que desees. Por ahora vamos a matar la función y que devuelva todo lo que viene en el post.

Por ultimo paso vamos a registrar nuestras funciones en WordPress.

la primera función ( form() ) será un shortcode.

Vamos a nuestro archivo Config.php y vamos a la linea 57 donde se registran los shortcodes y agregamos nuestra función en el array.

<div>
<div>/**</div>
<div>* add custom shortcodes</div>
<div>* @input array</div>
<div>* @example [['example','EJFORMExampleController::example_shortcode']]</div>
<div>*/</div>
<div>public $shortcodes=[</div>
<div>['example','EJFORMExampleController::example_shortcode'],</div>
<div>['mi_formulario','EJFORMFormularioController::form']</div>
<div>];</div>
</div>

Explicamos brevemente.

‘mi_formulario’ será el nombre del shortcode para poder agregarlo en cualquier pagina o entrada.

EJEFORM es nuestro namespace (¿recuerdas ese el que pusimos al principio?)

EJEFORMFormularioController::example_shortcode la Clase y la función. (la ruta completa)

cada vez que pongas [mi_formulario] en el contenido de una pagina, post o widget aparecerá el formulario.

Ahora registraremos la función para que cada vez que se envíe nuestro formulario se ejecute nuestra función

En el mismo archivo Config.php vamos a la línea 26 y ponemos

<div>
<div>
<div>/**</div>
<div>* POST data process</div>
<div>* get the post data and execute the function</div>
<div>* @example ['post_data'=>'EJFORM::function']</div>
<div>*/</div>
<div>public $post=['exampleInputEmail1'=>__NAMESPACE__.'FormularioController::SaveData'];</div>
</div>
</div>

Explicamos:

en el html del formulario hemos agregado al botón de enviar un name llamado enviar_form ese será nuestro identificador para activar nuestra función.

Parte final

Y ya está. eso es todo. ahora vamos a nuestra consola y ejecutamos

php antonella makeup

aparecerá en la carpeta un archivo zip llamado ejemplo-formulario.zip el cual puedes subir a tu WordPress.

Para comprobar puedes crear un post o una página y poner el shortcode [mi_formulario] y probarlo, si funciona os saldra esto en vuestro navegador cuando envíes el formulario:

Array ( [exampleInputEmail1] => carlos@carlos.com [exampleInputText] => as [enviar_form] => ) 1

Eso es porque hemos matado la función SaveData mostrando los post. Hay muchos artículos relacionados con este framework aquí

He subido un ejemplo en un repositorio:

https://github.com/cehojac/antonella-framework-ejemplo-formulario

Espero que esto te haya servido de ayuda y no olvides compartir