{"id":93011,"date":"2015-02-27T01:21:00","date_gmt":"2015-02-26T16:21:00","guid":{"rendered":"https:\/\/contactform7.com\/?p=93011"},"modified":"2026-10-14T01:25:32","modified_gmt":"2026-10-13T16:25:32","slug":"using-values-from-a-form-tag","status":"publish","type":"post","link":"https:\/\/contactform7.com\/es\/2015\/02\/27\/using-values-from-a-form-tag\/","title":{"rendered":"Uso de los valores de una etiqueta de formulario"},"content":{"rendered":"\n\n\n\n

En la receta anterior<\/a> vimos c\u00f3mo a\u00f1adir etiquetas de formulario personalizadas de forma sencilla. En esta receta aprender\u00e1s a recuperar los valores de una etiqueta de formulario y utilizarlos en el HTML que genera un formulario.<\/p>\n\n\n\n\n\n\n\n

Vamos a crear una etiqueta de formulario personalizada que represente un campo de entrada asociado a una lista de datos. Datalist<\/a> es un elemento nuevo introducido en HTML5 que proporciona una lista de opciones predefinidas para un campo de entrada asociado a dicha lista.<\/p>\n\n\n\n

El siguiente ejemplo muestra el marcado HTML de un campo de texto y una lista de datos.<\/p>\n\n\n

\n<input name="currency" type="text" list="currency-options" \/>\n<datalist id="currency-options">\n  <option>D\u00f3lares estadounidenses ($)<\/option>\n  <option>Euros (\u20ac)<\/option>\n<\/datalist>\n<\/pre><\/div>\n\n\n
En este ejemplo, el atributo list<\/code> del elemento input<\/code> y el atributo id<\/code> del elemento datalist<\/code> comparten el mismo valor (\u00abcurrency-options\u00bb), por lo que ambos elementos quedan asociados.<\/p>\n\n\n\n
Este campo de entrada espera el nombre de una moneda. Aunque puedes escribir cualquier nombre de moneda, ofrece \u00abD\u00f3lares estadounidenses ($)\u00bb y \u00abEuros (\u20ac)\u00bb como opciones predefinidas, ya que son las respuestas m\u00e1s probables.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Dise\u00f1ar una etiqueta de formulario<\/h4>\n\n\n\n
Vamos a dise\u00f1ar la etiqueta de formulario para un campo de entrada con una lista de datos. Primero, debes decidir el tipo de etiqueta. La llamaremos \u00abdatalist\u00bb.<\/p>\n\n\n\n
En el marcado HTML del ejemplo anterior puedes identificar tres variables: el valor del atributo name<\/code> (\u00abcurrency\u00bb, en el ejemplo), los valores de los atributos list<\/code> e id<\/code> (\u00abcurrency-options\u00bb) y el contenido de los elementos option<\/code> (\u00abD\u00f3lares estadounidenses ($)\u00bb y \u00abEuros (\u20ac)\u00bb).<\/p>\n\n\n\n
Los atributos list<\/code> e id<\/code> deben tener el mismo valor, pero ese valor puede ser cualquiera, siempre que sea v\u00e1lido para un atributo id<\/code>. Si se puede definir autom\u00e1ticamente, por ejemplo, a\u00f1adiendo el sufijo -options<\/em> al valor del atributo name<\/code>, podemos reducir el n\u00famero de variables. As\u00ed, solo tendr\u00e1s que definir en la etiqueta de formulario el valor del atributo name<\/code> y el contenido de los elementos option<\/code>.<\/p>\n\n\n\n
Para el valor del atributo name<\/code>, vamos a utilizar la parte name<\/em> (la segunda palabra) de la etiqueta de formulario, ya que es lo habitual en otros tipos de etiquetas de formulario de Contact Form 7.<\/p>\n\n\n\n
En cuanto al contenido de los elementos option<\/code>, como probablemente ser\u00e1 de formato libre, lo m\u00e1s adecuado es utilizar la parte values<\/em> (las cadenas entre comillas, al final) de la etiqueta de formulario.<\/p>\n\n\n\n
Consulta tambi\u00e9n: C\u00f3mo funcionan las etiquetas<\/a><\/p>\n\n\n\n
En resumen, estas decisiones de dise\u00f1o nos permiten representar el marcado HTML del ejemplo anterior con la siguiente etiqueta de formulario sencilla:<\/p>\n\n\n\n
<\/pre>\n\n\n\n
Ahora vamos a escribir el c\u00f3digo para implementar esta etiqueta de formulario.<\/p>\n\n\n\n
Implementar la etiqueta de formulario<\/h4>\n\n\n\n
Primero, registra el tipo de etiqueta de formulario \u00abdatalist\u00bb mediante la funci\u00f3n wpcf7_add_form_tag()<\/code>. A diferencia de la etiqueta de formulario [clock]<\/code>, que vimos en la receta anterior<\/a>, esta etiqueta tiene una parte name<\/em>, por lo que debes establecer el tercer argumento de wpcf7_add_form_tag()<\/code> como array( 'name-attr' => true )<\/code>.<\/p>\n\n\n
\nadd_action( 'wpcf7_init', 'custom_add_form_tag_datalist' );\n \nfunction custom_add_form_tag_datalist() {\n  wpcf7_add_form_tag(\n    'datalist',\n    'custom_datalist_form_tag_handler',\n    array( 'name-attr' => true )\n  );\n}\n<\/pre><\/div>\n\n\n
A continuaci\u00f3n, define la funci\u00f3n de retorno de llamada que genera el HTML.<\/p>\n\n\n
\nfunction custom_datalist_form_tag_handler( $tag ) {\n  $atts = array(\n    'type' => 'text',\n    'name' => $tag->name,\n    'list' => $tag->name . '-options',\n  );\n \n  $input = sprintf(\n    '<input %s \/>',\n    wpcf7_format_atts( $atts )\n  );\n \n  $datalist = '';\n \n  foreach ( $tag->values as $val ) {\n    $datalist .= sprintf( '<option>%s<\/option>', esc_html( $val ) );\n  }\n \n  $datalist = sprintf(\n    '<datalist id="%1$s">%2$s<\/datalist>',\n    $tag->name . '-options',\n    $datalist\n  );\n \n  return $input . $datalist;\n}\n<\/pre><\/div>\n\n\n
El par\u00e1metro $tag<\/code> que se pasa a la funci\u00f3n de retorno de llamada es un objeto WPCF7_FormTag<\/code>. La clase WPCF7_FormTag<\/code> proporciona varias propiedades y m\u00e9todos para acceder a la informaci\u00f3n de la etiqueta de formulario.<\/p>\n\n\n\n
En esta funci\u00f3n, primero creas el elemento input<\/code>. Para ello, defines los atributos necesarios (type<\/code>, name<\/code> y list<\/code>) como elementos de una matriz ($atts<\/code>) y, despu\u00e9s, utilizas la funci\u00f3n wpcf7_format_atts()<\/code> para generar una cadena de atributos con el formato adecuado. Se recomienda utilizar wpcf7_format_atts()<\/code> porque escapa correctamente los valores y permite generar una salida segura.<\/p>\n\n\n\n
A continuaci\u00f3n, construyes el elemento datalist<\/code>, que contiene elementos option<\/code> secundarios con los valores de la etiqueta de formulario. Por \u00faltimo, concatenas los elementos input<\/code> y datalist<\/code> y devuelves el resultado de la funci\u00f3n.<\/p>\n\n\n\n
Y eso es todo. Esta etiqueta de formulario sigue siendo muy sencilla y ni siquiera valida los datos introducidos por el usuario. En pr\u00f3ximas recetas veremos c\u00f3mo implementar la validaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
En la receta anterior vimos c\u00f3mo a\u00f1adir etiquetas de formulario personalizadas de forma sencilla. En esta receta aprender\u00e1s a recuperar los valores de una etiqueta de formulario y utilizarlos en el HTML que genera un formulario.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_locale":"es_ES","_original_post":"13351","footnotes":"","jetpack_post_was_ever_published":false},"categories":[19],"tags":[],"class_list":["post-93011","post","type-post","status-publish","format-standard","hentry","category-cookbook","es-ES"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/93011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/comments?post=93011"}],"version-history":[{"count":0,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/93011\/revisions"}],"wp:attachment":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/media?parent=93011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/categories?post=93011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/tags?post=93011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}