Search function does not work on mobile devices

Question

briefly about me: I took a working student job in my university with no WordPress experience (but my professor knows that). I basically maintain my professor's website. My predecessor wrote the current theme with little to no comments. Problem: the search function doesn't work on mobile devices. And I have no idea why, nor for how long the problem has existed. All I can say is that when I search for blockchain on a desktop device, for example ([website]/index.php?s=blockchain&m=), a string is sent to the variable S and it is displayed. On mobile devices, the string is sent to the variable M and M is unfortunately not displayed: [website]/index.php?s=&m=blockchain Feel free to test this out: https://norbert-pohlmann.com/

Since, as I said, I took over someone else's work and have no idea about WordPress, I don't know exactly how to fix the problem. My predecessor can not help me at this point, unfortunately. I also looked into the standard theme Twenty Twenty and to be honest I have no skills to even understand how the search works there. I'm so sorry.

I can show you times the search from the file header.php:

<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">

                <form class="row justify-content-end" method="get" id="searchform"
                      action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class=" row justify-content-end pc suche">
                        <div class="col-lg-11 col-xl-11">
                            <table>
                                <tr>
                                    <td>
                                        <input class="form-control" placeholder="Suche" type="text"
                                               value="<?php echo esc_html($s, 1); ?>" name="s" id="s"/>
                                    </td>
                                    <td>
                                        <input class="btn btn-outline-search" type="submit" id="search_submit"
                                               value="Suchen"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="justify-content-end mobile">
                        <div class="col-auto">
                
                         <table>
                                <tr>
                                    <td>
                                        <input class="form-control" placeholder="Suche" type="text"
                                               value="<?php echo esc_html($m, 1); ?>" name="m" id="m"/>
                                    </td>
                                    <td>
                                        <input class="btn btn-outline-search" type="submit" id="search_submit"
                                               value="Suche"/>
                                    </td>
                                </tr>
                            </table>
                            
                        </div>
                    </div>
              
                </form>
            </div>

Answer 1

In WordPress the name for a search field must be s. WordPress automatically performs a search on any request where s is present.

For some reason your theme has a separate search field named m that is displayed on mobile. This won't do anything unless custom code is added to handle this. But that's not necessary.

Additionally, both fields are inside a single <form> element, which means that whenever the form is submitted, both the s and m fields are submitted. This means that on mobile a search is going to be performed based on the desktop search field.

What you need to two separate <form> elements, one for desktop and one for mobile, and each should have its own s element:

<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
    <div class="row justify-content-end">
        <form class="row justify-content-end pc suche">
            <div class="col-lg-11 col-xl-11">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suchen"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <form class="justify-content-end mobile" method="get" action="<?php echo esc_url( home_url() ); ?>">
            <div class="col-auto">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suche"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>

Also note the other changes I made:

• I removed the id from the forms and inputs, since they would otherwise be duplicates, which is not allowed in HTML. You can add whatever IDs you like if you need them, as long as they're unique.
• I replaced $_SERVER['PHP_SELF']; with home_url(), which is the proper way to get the homepage URL in WordPress.
• The code had esc_html() with a second parameter set to 1. This doesn't do anything, so I removed it.
• I replaced esc_html() with esc_attr(), as it's more correct for escaping attributes.