How can I add a 'submit' button to my search box?


#1

When embedding my search box, the input field appears by itself and there is no clickable button to submit the search. How can I add a button that can be clicked, instead of only allowing the user to press return/enter?

This can be achieved by using the <button> HTML tag and including it within your form container after the search input field.
For example:

 <form>                                            
    <input type="text" id="st-search-input" class="st-search-input search-field" />
    <button type="submit">Submit</button>
 </form>

Any text included between the <button></button> container tags will be used as the label for your button.
Additionally, you can use CSS to style your form input and submit button. A tutorial primer on customizing the look of your search box can be found here.


Use submit button without surrounding form