Custom Search Widget - no JavaScript required – Journal Search Tool (JST)

The article explains how to embed a SciFree search form on a website using plain HTML without JavaScript. The form submits a GET request to a SciFree URL with a "term" input for queries. Customisation options include changing placeholder text, button labels, styling, and opening results in a new tab. Key notes: replace "university" in the action URL with your slug, use method="GET", and ensure the input name is "term".

Overview

Embed a SciFree search form on your own website using plain HTML - no JavaScript required.

The search widget you will be creating is a standard HTML form that submits a GET request to your SciFree search URL. When a researcher types a query and submits the form, the browser navigates directly to the SciFree search results page. No third-party scripts need to be loaded on your site.

How it works

SciFree search accepts queries via URL:

https://search.scifree.se/{university}?term={search_query}

Example: https://search.scifree.se/demo?term=journal

An HTML form with method="GET" and an input named term produces exactly this URL on submit.

Minimal example

<form method="GET" action="https://search.scifree.se/your-university">
  <input type="text" name="term" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

Full page example

A complete standalone HTML page you can save and open in a browser to test immediately:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SciFree Search</title>
    <style>
      body {
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        padding: 4rem 1rem;
      }

      form {
        display: flex;
        gap: 0.5rem;
      }

      input[type="text"] {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 300px;
      }

      button {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <form
      method="GET"
      action="https://search.scifree.se/your-university"
      target="_blank"
    >
      <input
        type="text"
        name="term"
        placeholder="Search journals subjects ..."
      />
      <button type="submit">Search SciFree</button>
    </form>
  </body>
</html>

Image of an example of how the search box can look in your website

Customisation

Placeholder text - change the placeholder attribute on the input to match your site’s tone.
Button label - change the button text to anything you like (e.g. “Find journals”, “Discover journals”).
Styling - the form elements are plain HTML with no injected styles. Apply your own CSS classes or inline styles freely.
Open in new tab - add target="_blank" to the <form> element to open results in a new tab instead of navigating away from your page.

Notes and Troubleshooting

Replace “university” in the action URL with your actual university slug. This slug is provided by SciFree when your account is set up.
The form must use method="GET". Using method="POST" will not work.
The text input must have name="term" exactly. Any other name will be ignored by the search engine.

If you have any issues please contact us directly on support@scifree.se.

Related to