The problem
Want my users to land on a specific archive page after using the search form on my home page. Example; when the user uses the search form on mysite.com they are redirected to all results in the archive of a specific custom post type; mysite.com/customposttype/?s=search-therm
Using Elementor Pro to style the search form and would therefore like to keep this functionality.
Solution:
Simply make an HTML form in Elementor on the archive page where you want to search.
Code:
<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"custom-search-form"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/courses"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"get"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search.."</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"s"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fas fa-search"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
**Note:** name property of input should be ‘s’ because the search query is looking for key ‘s’ to get and run it.
Replace the action property with your custom post type. It will only work if the action link will be an archive page. After submit the search the filter result will also show on the same archive page like mine courses archive page.
At Kyra Web Studio, we’re passionate about helping businesses build a strong brand identity that drives growth and success. Our team of experts specializes in website design, ecommerce solutions, real estate design, web overhaul, responsive design, custom development, UI/UX design, paid advertising, branding, SEO, social media, content marketing, email marketing, hosting, maintenance, security, CMS implementation, backup & recovery, domain management, performance optimization, and website accessibility. Let us help you create a brand that stands out in the crowd and resonates with your target audience. Contact us today to learn more about our services and how we can help you achieve your business goals.
