FAQ content

Widgets: Search Form

In this article

The search form widget allows for users to search your public FAQs either for a single group, or all public groups at once, in another webpage.

Just like searching from your LibAnswers pages, the widget includes the auto-suggest feature. As a user types into the search box, relevant FAQ suggestions will appear automatically. This can help users get the answers they need more quickly.

Example of a search form widget displaying suggested FAQs

Create a search form widget

  1. Go to Admin > Widgets. (If you are an Admin user, go to Admin > Widgets & API.)
  2. Click on the  Create Widget button.

Getting to the Widgets and API page

Basic Widget Options

  1. Enter a descriptive name for your widget in the Widget Title field.
    • This does not display to the public -- it's just to help you identify it in the future.
  2. For the Display Type, choose whether you want to embed the entire search box into a page or have it pop up by clicking a button.
    • If you select the Pop-up via button option, users will click a button to launch the search box in a modal window.
    • You will be given the option to style this as either a button or side-tab, and customize the text of the button or tab.
  3. In the Header field, you can optionally enter text to display as a heading in the widget. This will appear above the search box.
  4. For the Content setting, select the Search Form option.
  5. For the Open Links setting, select whether you want search results to open in the current or a new window.

Search Form Options

  1. From the Group dropdown, select either an individual group to search, or choose the "All Public" option to search all public groups at once.
  2. Use the Form Label field to customize the text of the search form's label (this is a hidden field only viewable by screen readers).
  3. Use the Placeholder Text field to customize the placeholder text of the search field (this is what displays when no text has been entered in the form).
  4. Use the Button Text field to customize the text of the form's submit button.
  5. Use the Search Tip field to customize optional help text that displays below the search field. You can use this to provide brief instructions to users.

Style and Appearance

  1. Leave the Use our CSS file checkbox selected to use the default LibAnswers styles for your widget.
    • If you deselect this option, you will need to provide your own custom CSS code to style the widget.
  2. Optionally, you can use the Custom CSS text box to add your own custom styles to your widget.
    • This can help you tweak the default styles, such as borders, font sizes, colors, etc.
    • If you disabled the Use our CSS file checkbox, you can add your own styles here.
    • Do not enclose your CSS rules between <style></style> tags. Just enter the rules themselves.

Save and Preview

  1. Once you've made all of your customizations, click the Save button to create your widget. 
  2. To preview how your widget will look to the public, click on the Refresh Preview button.
    • The preview widget is completely functional, so feel free to take it for a spin!
  3. If you're happy with the changes, click on the View Embed Code button to view the widget's HTML code.
    • This is the code you'll need to add the widget to your own site.
    • If you want to use this widget in your LibGuides, there's no need to copy the embed code! Simply edit your guide in LibGuides and add a new LibAnswers content item.
    • If you selected the Embedded in the page display type, the Alternate Method will provide you with a direct URL for your search box. This will allow you to link to a standalone page containing your search box, or display it inside of a simple <iframe> element.
  4. When all finished creating your widget, click the Back to Widget List button to return to the Widgets & APIs page.

Search Form widget options 

Managing your LibAnswers widgets

Each widget you create is saved, allowing you to make changes to it over time without having to completely replace it with a new one. For example, you could easily switch an FAQ List from a Recent FAQ Entries list to an FAQs by Topic list. All you need to do is edit the widget, change the list type options, and save. It'll automatically update the widget everywhere it's embedded.

  1. Go to Admin > Widgets. (If you are an Admin user, go to Admin > Widgets & API.)
    1. Click on any column heading to sort the list by that column in ascending order. Click it again to switch to descending order.
    2. Use the pagination buttons to navigate between multiple pages of widgets.
    3. To view any widget's embed code, click on its code () icon in the Actions column.
    4. To create a copy of any widget, click on its copy () icon in the Actions column.
      • This will create an exact replica of the widget, owned by you.
      • Changes you make to the copy will not affect the original.
    5. To edit a widget's settings, click on its edit () icon in the Actions column.
      • Please note: once you save changes to a widget, they will be reflected everywhere the widget is being used.
      • If you do not want to change the original, consider creating a copy instead.
    6. To delete a widget, click on its trash can () icon in the Actions column.
      • USE CAUTION: this will permanently delete the widget and cannot be undone.
      • If the widget is currently being used on a webpage, it will no longer display.
      • Admins can delete any widget; however, Regular users can only delete the widgets they created.

Options for managing widgets