Tema um formulário de contato


11

Eu gostaria de criar um formulário de contato no Drupal 8. Gostaria de colocar divs em torno dos elementos do formulário (usando o bootstrap).

Eu também quero colocar algumas classes em certos elementos (botão enviar, o próprio formulário).


2
Sugiro descrever seu problema com mais detalhes e dizer o que você já tentou. Isso mostrará alguma iniciativa e ajudará outras pessoas a dar uma resposta melhor.
Aram Boyajyan

Respostas:


16

Abra o seu arquivo YOURTHEMENAME.theme e adicione o seguinte 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';

}

E aqui está o seu resultado: insira a descrição da imagem aqui

Não se esqueça de limpar seus caches;)


1
Se meu tema se chama 'abc' e meu formulário se chama 'entre em contato', como devo nomear a função?
precisa

3
{THEMENAME} _form_contact_message_ {formname} _form_alter
Johan Haest

Isso é tão incrível!!!
Ipwa 12/04

20

Você pode simplesmente tema de todas as formas como quiser. Eu não gosto do método do @rpayanm, porque é difícil de manter e de fácil leitura, com formas grandes esse não é o caso, apenas invólucro único e estrutura simples.

Todo formulário que tenta usar o tema é igual ao nome da máquina. Você pode encontrar esse nome de modelo em $form['#theme']apenas alter, é sempre (ou na maioria das vezes) o mesmo que nome da máquina de identificação de formulário. O que você precisa fazer é registrar um modelo para ele. Você precisa implementar hook_theme(). Você pode gravá-lo em CUSTOMMODULE.module ou em THEMENAME.theme. A chave do tema deve ser a mesma que em $form['#theme'], para que seja usada automaticamente, caso contrário, você precisará adicionar uma nova via alteração de formulário.

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

Drupal passa a variável $ form com form.

Então você deve criar custom-form-template-name.html.twig(com o nome do seu modelo de hook_theme ()).

O modelo mínimo é

{{ form }}

Você também pode imprimir todos os campos do formulário em que deseja

{{ form.field_name }}

Aqui você pode fazer o que quiser com a marcação.

Você também pode passar dados adicionais para o modelo implementando template_preprocess_TEMPALTENAME

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

E então use no template

{{ 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 }}

Eu acho que esse método é mais flexível, limpo e poderoso.

Ps desculpe pelo meu inglês, espero que alguém edite e corrija meus erros :)

Exemplo de forma complexa usando este método.

insira a descrição da imagem aqui


2
Note que, para mim, eu mudei {{ form.submit }}para{{ form.actions.submit }}
mikeDOTexe 24/10

@ Niklan: Eu segui o mesmo código acima para o meu formulário de pacote de entidades personalizadas. Se eu usar {{ form }}, ele está imprimindo todo o formulário, mas se eu usar um campo específico como {{ form.my_field }}, nada será exibido. Alguma idéia de como podemos exibir cada campo do formulário de pacote personalizado de entidades?
kalidasan

@kalidasan tente imprimir todos os campos sem imprimir {{ form }}. Sugiro que, após a impressão, {{ form }}todos os elementos do formulário sejam marcados como '#rendered' => TRUEe não serão renderizados em breve. Se você não quiser usar esse método de formulário de temas, imprima todos os campos individualmente. Não existe drupal_render_children()no Drupal 8, a menos que você o escreva sozinho. De qualquer forma, por padrão, isso causará duplicatas; portanto, tente imprimir cada campo manualmente.
Niklan 19/07

@ Niklan: Eu não usei {{ form }} & {{ form.my_field }}juntos. Tentei pela primeira vez apenas {{ form }}, aqui eu posso ver o formulário inteiro. Em seguida, removidos {{ form }}do modelo e, em seguida, tentados para cada campo de formulário separadamente como este {{ form.my_field }}, etc , mas não conseguimos colocar isso em prática. Nada exibido.
kalidasan

1
@kalidasan você pode desmarcar títulos template_preprocess_FORM_ID_THEME(&$variables). Nesse pré-processo, você pode adicionar novas variáveis, alterar os existentes, incluindo os elementos do formulário. Eu nunca vi isso {{ form.field_name.widget }}e formas temáticas com frequência. Parece que esse campo é personalizado criado ou adicionado por um módulo de terceiros? Eu acho que isso é permitido, mas não para outros. Eu recomendo que você comece com o gancho de pré-processo e veja o $variables['form']que ele contém por dentro.
Niklan 20/07
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.