<html lang="es-es" dir="ltr"><head></head><body>### [Cómo crear un formulario de cuestionario](https://wpforms.com/developers/how-to-create-a-quiz-form/)

**Publicado:** 13 de junio de 2023
**Autor:** Umair Majeed

**Extracto:** Este tutorial te mostrará cómo crear un formulario de cuestionario y usar campos de pago para calcular la puntuación total al final del formulario.

**Contenido:**

¿Te gustaría crear un formulario de cuestionario en WPForms? WPForms incluye un Complemento de Cuestionarios que te proporciona todo lo necesario para crear formularios de cuestionario directamente en el constructor de formularios.

En este tutorial, te mostraremos cómo crear un formulario de cuestionario utilizando una configuración basada en fragmentos que calcula y muestra la puntuación de un usuario después del envío.

Recomendamos usar el Complemento de Cuestionarios para la mayoría de los sitios, pero esta guía aún incluye una opción basada en fragmentos para quienes prefieren este enfoque.

---

## Método recomendado para crear formularios de cuestionario

WPForms incluye un **Complemento de Cuestionarios** dedicado, que es la forma más fácil y completa de crear formularios de cuestionario.

El Complemento de Cuestionarios incluye funciones de cuestionario integradas y proporciona la forma más sencilla de crear y administrar formularios de cuestionario en WPForms.

Para obtener detalles completos sobre el método recomendado, consulta nuestra [documentación del Complemento de Cuestionarios](https://wpforms.com/docs/quiz-addon).

Si estás empezando, también puedes explorar nuestras [plantillas de formularios de cuestionario](https://wpforms.com/templates/category/quizzes/) para crear rápidamente un cuestionario y personalizarlo para tu sitio.

## Creación del formulario de cuestionario con un fragmento

Si aún deseas crear un formulario de cuestionario con una configuración personalizada, puedes seguir los pasos de esta guía y usar el fragmento de código a continuación.

Comenzaremos creando un nuevo formulario. En nuestro formulario, agregaremos los campos de formulario **Nombre** y **Correo electrónico** al principio del formulario. Luego, usando **Saltos de página**, dividiremos el cuestionario en **6** categorías. Cada **Salto de página** tendrá el **Título de la página** que muestra en qué categoría se encuentran actualmente los que responden al cuestionario.

![comienza creando tu formulario y agrega tus campos. puedes dividir las categorías del cuestionario agregando saltos de página entre cada categoría](https://wpforms.com/wp-content/uploads/2023/06/wpforms-pub-quiz-form-create.jpg)Para cualquier ayuda en la creación de tu formulario, [consulta esta guía](https://wpforms.com/docs/creating-first-form/ "Creación de tu primer formulario").

## Adición de preguntas y puntuaciones del cuestionario

Para esta documentación, utilizaremos los campos **Múltiples elementos** de la sección **Campos de pago** en el constructor de formularios para hacer nuestra pregunta del cuestionario y cambiar las etiquetas proporcionando **3** respuestas para cada pregunta. Para la respuesta correcta, coloca **1.00** para la respuesta correcta y **0.00** para las respuestas incorrectas.

![usa los Múltiples elementos en campos de pago para hacer tu pregunta y proporciona 1 respuesta correcta con un monto de dólar de 1.00 y coloca un cero para el monto de las respuestas incorrectas](https://wpforms.com/wp-content/uploads/2023/06/wpforms-add-multiple-items-field.jpg)Continúa haciendo esto a través de tus preguntas y categorías. Cada pregunta debe tener **una** respuesta con **1.00** para la respuesta correcta y **0.00** para las respuestas incorrectas. Usaremos el monto para obtener un total acumulado por cada respuesta correcta.

## Adición de un campo Total para rastrear la puntuación

Ahora queremos rastrear el número total de puntos por cada respuesta correcta. Para lograr esto, al final del formulario, agregaremos un campo **Total**. Sin embargo, le daremos a este campo una **Clase CSS** en la pestaña **Avanzado** para que podamos mantener este campo oculto a la vista hasta que se envíe el formulario.

![agrega el nombre de la clase CSS en la pestaña Avanzado para el campo total](https://wpforms.com/wp-content/uploads/2023/06/wpforms-pub-quiz-add-css-class.jpg)Una vez que hayas guardado el formulario, querrás agregar el CSS necesario para ocultar este campo. Copia este CSS en tu sitio. Si necesitas ayuda para encontrar cómo y dónde agregar CSS personalizado, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo agregar estilos CSS personalizados para WPForms").

```

.hide-field {display: none;}
```

## Visualización de la puntuación del cuestionario en el mensaje de confirmación

Para mostrar a los que responden el cuestionario su puntuación después del envío, agrega el fragmento a continuación a tu sitio.

Este fragmento lee los valores enviados, obtiene el nombre del usuario y la puntuación, y muestra un mensaje de confirmación con el resultado final.

Copia y pega este fragmento en tu sitio, si necesitas ayuda sobre cómo y dónde agregar fragmentos, [consulta este útil tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms").

```php

/**
 * Muestra un mensaje de confirmación personalizado para nuestro cuestionario público.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-quiz-form/
 */
   
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
       
    // Solo se ejecuta en mi formulario con ID = 3221
    if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
            return $message;
        } 
   
    // Obtiene el nombre de la persona que completó este formulario
    $contact_name = $fields[ '1' ][ 'value' ];
            
    // Obtiene los puntos del campo total (ID de campo '7') para eliminar decimales y símbolos de moneda
    $points_scored = $fields[ '7' ][ 'value' ];
  
    // Elimina espacios en blanco y símbolo de moneda
    list($points_scored) = explode('.', $points_scored);
    $points_scored = substr($points_scored, 5);

    // Agrega el nombre y los puntos obtenidos al mensaje
    $message = __('Gracias ' . $contact_name .  ' has obtenido ' . $points_scored . ' de un posible total de 35 puntos', 'plugin-domain');
      
    return $message;
        
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );
```

Este fragmento solo se ejecutará en el formulario con ID **3221**. Obtendrá el nombre del usuario de nuestro campo Nombre en el ID de campo **1** para que se muestre en nuestro mensaje de confirmación personalizado. Este fragmento luego obtendrá el monto de nuestro campo de formulario **Total**, que es el ID de campo **7**, eliminará el símbolo de moneda y los espacios en blanco, y luego convertirá lo que queda en un número entero para que no haya un punto decimal ni ceros.

Deberás actualizar cada uno de estos IDs para que coincidan con tus propios IDs de formulario y campo. Para encontrar tus propios números de ID, [revisa esta documentación](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Cómo localizar el ID del formulario y el ID del campo").

Ahora, cuando los usuarios lleguen al final del cuestionario, harán clic en **Enviar** y podrán ver inmediatamente cuántas respuestas han acertado.

¡Y eso es todo! ¿Te gustaría que el formulario se envíe automáticamente según el valor de uno de tus campos? Consulta nuestro tutorial sobre [Cómo enviar automáticamente un formulario con una opción de campo](https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/ "Cómo enviar automáticamente un formulario con una opción de campo").

## Filtro de referencia

[wpforms\_frontend\_confirmation\_message](https://wpforms.com/developers/wpforms_frontend_confirmation_message/ "Uso del filtro wpforms_frontend_confirmation_message")

**Categorías:** Tutoriales

**Etiquetas:** Mensaje de confirmación, CSS, PHP

---</body></html>