Tema un formulario de contacto

Me gustaría crear un tema para un formulario de contacto en Drupal 8. Me gustaría poner divs alrededor de los elementos del formulario (usando bootstrap).

También quiero poner algunas clases en ciertos elementos (botón de enviar, el formulario en sí).

theming 8 emails

— Johan Haest
fuente

Sugiero que describas tu problema con más detalles y digas qué has intentado ya. Eso mostrará cierta iniciativa y ayudará a otros a darle una mejor respuesta.

— Aram Boyajyan

Respuestas:

Abra su archivo YOURTHEMENAME.theme y agregue el siguiente código:

function YOURTHEMENAME_form_contact_message_feedback_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

  // Name
  $form['name']['#prefix'] = '<div class="row"><div class="col-md-6"><div class="form-group">';
  $form['name']['#suffix'] = '</div>';
  $form['name']['#attributes']['placeholder'][] = $form['name']['#title'].'*';
  $form['name']['#attributes']['class'][] = 'form-control';
  unset($form['name']['#title']);

  // Mail
  $form['mail']['#prefix'] = '<div class="form-group">';
  $form['mail']['#suffix'] = '</div>';
  $form['mail']['#attributes']['placeholder'][] = $form['mail']['#title'].'*';
  $form['mail']['#attributes']['class'][] = 'form-control';
  unset($form['mail']['#title']);


  // Subject
  $form['subject']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['subject']['widget'][0]['value']['#attributes']['placeholder'][] = $form['subject']['widget'][0]['#title'].'*';
  $form['subject']['widget'][0]['#title'] = '';
  unset($form['subject']['widget'][0]['value']['#title']);
  $form['subject']['widget'][0]['#prefix'] = '<div class="form-group">';
  $form['subject']['widget'][0]['#suffix'] = '</div></div>';

  // Message
  $form['message']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['message']['widget'][0]['value']['#attributes']['placeholder'][] = $form['message']['widget'][0]['#title'].'*';
  $form['message']['widget'][0]['#title'] = '';
  unset($form['message']['widget'][0]['value']['#title']);
  $form['message']['widget'][0]['#prefix'] = '<div class="col-md-6"><div class="form-group">';
  $form['message']['widget'][0]['#suffix'] = '</div></div></div>';

  // Submit
  $form['actions']['#prefix'] = '<div class="clearfix">';
  $form['actions']['#suffix'] = '</div>';
  $form['actions']['submit']['#attributes']['class'][] = 'btn';
  $form['actions']['submit']['#attributes']['class'][] = 'btn-success';
  $form['actions']['submit']['#attributes']['class'][] = 'pull-right';

}

Y aquí está tu resultado: ingrese la descripción de la imagen aquí

No olvides limpiar tus cachés;)

— rpayanm
fuente

Si mi tema se llama 'abc' y mi formulario se llama 'contáctenos', ¿cómo denomino la función?

— Daniel Dewhurst

{themename} _form_contact_message_ {formname} _form_alter

— Johan Haest

¡Esto es increíble!

— ipwa

Simplemente puede tema cada forma como desee. No me gusta el método de @rpayanm, porque es difícil de mantener y fácil de leer, con formas grandes, este no es el caso, solo un contenedor y una estructura simple.

Cada formulario que intenta usar el tema es igual al nombre de su máquina. Puede encontrar este nombre de plantilla $form['#theme']simplemente alterando, siempre es (o en la mayoría de las veces) igual que el nombre de la máquina de identificación de formulario. Lo que debe hacer es registrar la plantilla para ello. Necesitas implementar hook_theme(). Puede escribirlo en CUSTOMMODULE.module o en THEMENAME.theme. La clave del tema debe ser la misma que en $form['#theme'], por lo que se usa automáticamente, de lo contrario, debe agregar una nueva a través del formulario alter.

/**
 * Implements hook_theme().
 */
function MODULENAME_theme($existing, $type, $theme, $path) {
  return [
    'FORM_ID_THEME' => [
      'template' => 'custom-form-template-name',
      'render element' => 'form',
    ]
  ];
}

Drupal pasa $ formulario variable con formulario.

Luego debe crear custom-form-template-name.html.twig(con su nombre de plantilla de hook_theme ()).

La plantilla mínima es

{{ form }}

También puede imprimir cada campo desde el formulario donde desee

{{ form.field_name }}

Aquí puedes hacer lo que quieras con marcado.

También puede pasar datos adicionales a la plantilla implementando template_preprocess_TEMPALTENAME

function template_preprocess_FORM_ID_THEME(&$variables) {
  $variables['example'] = 'This is added via preprocess';
}

Y luego usar en plantilla

{{ example }}
<div class="first-field">
  {{ form.first_field }}
</div>

<div class="second-field">
  {{ form.second_field }}
</div>

<div class="buttons">
  {{ form.submit }}
  {{ form.preview }}
</div>
{#
Don't forget to add printing form special info at the end.
Without this data form will not working propertly.
#}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}

Creo que este método es más flexible, limpio y potente.

Lo siento por mi inglés, espero que alguien edite y corrija mis errores :)

Ejemplo de forma compleja usando este método.

— Niklan
fuente

Tenga en cuenta que para mí, tuve que cambiar {{ form.submit }}a{{ form.actions.submit }}

— mikeDOTexe el

@Niklan: he seguido el mismo código anterior para mi formulario de paquete de entidad personalizado. Si lo uso {{ form }}, está imprimiendo todo el formulario, pero si uso un campo específico como {{ form.my_field }}, no se muestra nada. ¿Alguna idea de cómo podemos mostrar cada campo del formulario de paquete de entidad personalizado?

— kalidasan

@kalidasan intenta imprimir todos los campos sin imprimir {{ form }}. Sugiero que después de imprimir {{ form }}todos los elementos del formulario se marcarán como '#rendered' => TRUEy no se procesarán pronto. Si desea utilizar este método de forma temática, debe imprimir cada campo individualmente. No existe drupal_render_children()en Drupal 8, a menos que lo escriba usted mismo. De todos modos, esto provocará duplicados de forma predeterminada, así que intente imprimir cada campo manualmente.

— Niklan

@Niklan: no los he usado {{ form }} & {{ form.my_field }}juntos. Primero lo intenté solo con {{ form }}, aquí puedo ver el formulario completo. Luego se eliminó {{ form }}de la plantilla y luego se intentó para cada campo de formulario por separado de esta manera {{ form.my_field }}, etc , pero no se saca nada. No se muestra nada.

— kalidasan

@kalidasan puedes desarmar títulos template_preprocess_FORM_ID_THEME(&$variables). En este preproceso puede agregar nuevas variables, cambiar las existentes, incluidos los elementos de formulario. Nunca he visto esto {{ form.field_name.widget }}y yo temo formas a menudo. ¿Parece que este campo es personalizado creado o agregado por un módulo de terceros? Creo que esto está permitido, pero no es una regla para otros. Le recomiendo que comience con un gancho de preproceso y solo mire $variables['form']lo que contiene dentro.

— Niklan