7

How can I customize the default search block form template, I now use below template to display a search form block, but this code doesn't allow me to edit and customize each part of this form separately and doesn't have any flexibility.

form--search-block-form.html.twig

<form{{ attributes.addClass('search-form', 'search-block-form') }}>
  {{ children }}
</form>

and then print in my theme by below code:

{{ page.search_box }}

Is there any better template name suggestion with more variables and flexibility in customization?

5
+50

If you want to use Twig, you can do it by creating a template file, like this:

/themes/your_theme/templates/form--search-block-form.html.twig

{% set form = element %}

hello {{ form.keys }} world {{ form.actions }}

Result:

enter image description here

In Bartik theme:

enter image description here

| improve this answer | |
  • 2
    Not to hijack your answer, but ... if you do want to use twig, is there no other way then via a custom module? Probably a stupid question, but still: in D7 you'd grab an appropriate template (or create one with the correct name), and put it in the right spot. Are you saying that in D8 there's no such thing? If you think this is too much hijacking, just let my know (I'll then copy/paste this comment in a new answer ...). – Pierre.Vriens Aug 24 '16 at 14:56
  • 1
    @Pierre.Vriens Are you saying that in D8 there's no such thing? yes, unfortunately, for forms there isn't a template that you can just grab out of the box. – No Sssweat Aug 24 '16 at 23:07
5

The search block is provided by the core module Search. If you install this module the block will be available in the block layout, when you place a block.

Probably you have already done this by installing the standard profile.

To customize the search form you can use a form alter hook.

For example put this function in mytheme.theme to change the search button:

function mytheme_form_alter(&$form, $form_state) {
  if ( $form['#form_id'] == 'search_block_form' ) {
    $form['actions']['submit']['#value'] = t('Search my Website');
  }
}
| improve this answer | |
  • 1
    Thank you so much for your help and attention, is there any way or method to customize or create a search form in twig template without need to use preprocess function? – Mojtaba Reyhani Aug 11 '16 at 17:48
  • That depends, what is difficult in twig is to target a specific form, like I did in the hook. If you want to change a form element in general, then use the twig of that element. – 4k4 Aug 11 '16 at 18:13
  • 1
    There is nothing like a simple twig solution for a search form element, as far as I know. – 4k4 Aug 11 '16 at 19:54
1

I have gone a 2 days journey now inspecting container.html.twig and extra suggestions for it and lots of other dead end solutions.

I finaly came back here and got a result i want to keep here for reference:

i developed and tested this code with Drupal 9.0.1

myTheme.theme:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for form templates.
 *
 * @hook: form
 * @suggestion: search_block_form
 * @result: loads template form--search_block_form.html.twig
 */
function myTheme_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  if ($variables['element']['#form_id'] == 'search_block_form') {
    $suggestions[] = 'form__search_block_form';
  }
}

form--search-block-form.html.twig:

{#
/**
 * @file
 * Custom Search form template
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the wrapper element.
 * - children: The child elements of the form.
 * - element: Not documented but exits, need to find out more
 *
 * @see template_preprocess_form()
 * @why the default call of `{{ children }}` calls a "container.twig.html"
 *      instead of the form elements itself "input.twig.html"
 *      its technically not necessary to have container markup arround
 *      label, text input and submit button and its a drawback for
 *      extended CSS layouts that get way more complex on such markup
 */
#}
{# extend element attributes (taken from bartik) #}
{%
  set attributes = attributes.addClass('search-form', 'search-block-form')
%}
{# create attributes for the search input field by system variable #}
{%
  set input_attributes = create_attribute(element.keys['#attributes'])
%}
{# extend attributes for the search input field #}
{%
  set input_attributes = input_attributes.setAttribute('placeholder', element.keys['#title'])
%}
{# create attributes for the search submit button by system variable #}
{%
  set submit_attributes = create_attribute(element.actions['submit']['#attributes'])
%}
<form{{ attributes }}>
  <label for="{{ input_attributes.id }}">{{ element.keys['#title'] }}</label>
  <input{{ input_attributes }} />
  <button{{ submit_attributes }}><span class="visually-hidden">{{  element.actions['submit']['#value'] }}</span></button>
</form>

also possible variants for submit:

<input{{ submit_attributes }} />
<button{{ submit_attributes }}>{{  element.actions['submit']['#value'] }}</button>
| improve this answer | |
  • i also would like to handle that particular form different based on in which region its displayed. that seems impossible. No variable about that information is accessible in that template. – Thomas Fellinger Jun 26 at 23:11
  • haha they removed the possibility with no need: drupal.org/project/drupal/issues/1968360 - "no one needs it" lol... – Thomas Fellinger Jun 26 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.