Help QuickNav Adv. Options
KJV

KJV

Click to Change

Return to Top

Return to Top

Printer Icon

Print

Cite Print
The Blue Letter Bible
Apps & Tools :: BLB Web Search Tools

BLB Web Search Tools

Choose a new font size and typeface

BLB Web Search

If you would like to use Blue Letter Bible's search capabilities from your own site, here are instructions on how to do it. We will teach you how to create a form, which you then can modify to suit your needs:

Range Options:

e.g. Gen; Psa-Mal; Rom 3-9

Putting our search tool on your site allows your users to search the Bible for passages of Scripture, for individual words or combinations of words, for phrases, and even for Strong's numbers. Searches turn up results using all of our available tools, linking your users' search requests to lexicons, concordances, a variety of reference works, and more.

Simple code means you can customize the look of our search box on your site however your imagination (and technical abilities) will allow.

Introduction

Installing our Bible search on your site will require a basic understanding of HTML (e.g., how to insert our code into your website's code), but we will take it slow. If you have a website and you are planning on inserting these HTML snippets, you should be already somewhat familiar with how HTML works.

Step 1 - The Basics

We will begin with the simplest, most basic version of our Bible search tool, an input box and a submit button, and move on from there:

This simplified version will allow users to search the Bible but will not allow them to define which Bible translation they would prefer to search and does not allow them to limit their search to a particular section of Scripture. Let us break down each piece.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <input type="submit" value="Search" />

</form>

The first thing we will look at is the <form> tag. Your search tool needs to be enclosed within the opening and closing <form> tags. For example:

<form>

  ...

  Search Tool Inputs Go Here

  ...

</form>

Inside the opening <form> tag, we see two attributes. The first one, action, tells the tool where to send the information it gathers from the user. With our tool, your users' search terms are sent to https://www.blueletterbible.org/search/preSearch.cfm for processing. For the second attribute, method, we use the term get. This helps our site process the information your users send us.

So then, we begin with the form container like this:

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

</form>

Next, we will add in the <input> that will let users type in their search terms.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

</form>

Our <input> here has two attributes, one that tells the browser what kind of input and the second attribute that attaches a name to the particular information that the browser will send along to be processed. For the type, we specify text. This means that the user will get a single line to type information into. For name, we use Criteria. This is the name that our program will recognize. If you change this name, the search tool will not work.

If we were to leave our code at this stage and put in on a website, it would look like this:

It is perfectly usable in this form. You can type in a search term, hit your ENTER key, and the search will work, but a lot of us are used to seeing a submit button next to form fields, so some users might not know what to do next. We can add a submit button to the code just below the <input> we just added. Now are code looks like this:

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <input type="submit" />

</form>

Using an <input> and giving it an attribute of type="submit" will put a submit button into the mix. Just make sure your submit <input> is in between <form> and </form>. And then we have, as above:

Now depending on which browser you are viewing this in, the submit button will probably say something like Submit Query. We can change that by adding a value attribute to the submit tag. Whatever value you give it, that is what will be displayed. So you can have a button that says Go! or Launch or Knowledge Awaits! For our purposes though, Search might just be the best option. This is how that will look in your code and then how it will display in your browser.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <input type="submit" value="Search" />

</form>

Step 2 - Determining Translation

If we want, now we can choose to have the search use a particular translation. (For example, if your site is a church website and the pastor only uses the New American Standard Bible, so you will want your congregants tracking with him as he preaches.) We can force the translation by using an <input> tag with three attributes set as so: type="hidden" name="t" value="ABBREVIATION". The hidden type of input means that it will send our program information that the user will never see. For ABBREVIATION there, you would substitute one of the following Bible translation abbreviations:

  • KJV = King James Version
  • NKJV = New King James Version
  • NLT = New Living Translation
  • NIV = New International Version
  • ESV = English Standard Version
  • CSB = Christian Standard Bible
  • NASB20 = New American Standard Bible 2020
  • NASB95 = New American Standard Bible 1995
  • LSB = Legacy Standard Bible
  • AMP = Amplified Bible
  • NET = New English Translation
  • RSV = Revised Standard Version
  • ASV = American Standard Version
  • YLT = Young's Literal Translation
  • DBY = Darby Translation
  • WEB = Webster's Bible
  • HNV = Hebrew Names Version
  • VUL = Latin Vulgate
  • WLC = Westminster Leningrad Codex
  • LXX = Septuagint
  • mGNT = Morphological Greek New Testament
  • TR = Textus Receptus
  • SVD = Smith Van Dyck Arabic Bible
  • NAV = Open New Arabic Version
  • BES = Brenton's English Septuagint
  • RVR09 = Reina Valera 1909
  • RVR60 = Reina-Valera 1960
  • BBE = Bible in Basic English
  • CHT = Chinese Traditional Union
  • EM = Espanol Moderno
  • KOR = Korean Holy Bible
  • LS = Louis Segond
  • LUT = German Luther
  • RST = Russian Synodal Translation
  • SE = Sagradas Escrituras

What this would look like in your code is as follows:

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <input type="hidden" name="t" value="YLT" />

  <input type="submit" value="Search" />

</form>

Now we have set the tool to search Young's Literal Translation, so you can test it out below:

What if you would like to add the ability for your site's users to choose the translation of the Bible they would like to search? Here is an example of what that will look like. You can even select the default translation.

Here is the code from the previous version with the select box inserted.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <select name="t">

    <option value="KJV">KJV</option>

    <option value="NKJV" selected>NKJV</option>

    <option value="NLT">NLT</option>

    <option value="NIV">NIV</option>

    <option value="ESV">ESV</option>

    <option value="CSB">CSB</option>

    <option value="NASB20">NASB20</option>

    <option value="NASB95">NASB95</option>

    <option value="LSB">LSB</option>

    <option value="AMP">AMP</option>

    <option value="NET">NET</option>

    <option value="RSV">RSV</option>

    <option value="ASV">ASV</option>

    <option value="YLT">YLT</option>

    <option value="DBY">DBY</option>

    <option value="WEB">WEB</option>

    <option value="HNV">HNV</option>

    <option value="VUL">VUL</option>

    <option value="WLC">WLC</option>

    <option value="LXX">LXX</option>

    <option value="mGNT">mGNT</option>

    <option value="TR">TR</option>

    <option value="SVD">SVD</option>

    <option value="NAV">NAV</option>

    <option value="BES">BES</option>

    <option value="RVR09">RVR09</option>

    <option value="RVR60">RVR60</option>

    <option value="BBE">BBE</option>

    <option value="CHT">CHT</option>

    <option value="EM">EM</option>

    <option value="KOR">KOR</option>

    <option value="LS">LS</option>

    <option value="LUT">LUT</option>

    <option value="RST">RST</option>

    <option value="SE">SE</option>

  </select>

  <input type="submit" value="Search" />

</form>

Now this is only slightly more complex than what we did before. Here we are making use of the <select> tag. We put an opening one at the beginning of our drop down code and a closing one at the end of our drop down code. All of our selectable options will fall between these two tags. Like this:

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <select name="t">

    <OPTION #1>

    <OPTION #2>

    <ETC.>

  </select>

  <input type="submit" value="Search" />

</form>

And just like we did with our text input, we have to give our <select> tag a name so that our program will know how to process the choices your users' select—in this case, we use name="t".

Next we will look at how to populate the drop down with a list of choices. We will use the <option> tag for this. The basic format here will be to use <option> and give it a value attribute using the translation's abbreviation (for example, value="KJV"). This tag will be immediately followed by whatever text you would like to use to identify the choice in the eyes of your user (the value we previously added was only for the program to see. In our case here, we have stuck to abbreviations for the drop down as well. Then we add a closing </option> and we are finished with that option line and ready to move on to the next.

Here is a select box with four examples, so you can see how it works. Note: You can limit the available translations in your site's drop down.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" ;method="get" target="_new">

  <input type="text" name="Criteria" />

  <select name="t">

    <option value="KJV">King James</option>

    <option value="NKJV">New King James</option>

    <option value="NLT">New Living</option>

    <option value="NIV">New International</option>

  </select>

  <input type="submit" value="Search" />

</form>

This is how that code will render in a browser:

You can set the default translation by adding the selected attribute to the appropriate <option> tag. In the below example, we will use this to set the NLT our default.

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <input type="text" name="Criteria" />

  <select name="t">

    <option value="KJV">KJV</option>

    <option value="NKJV">NKJV</option>

    <option value="NLT" selected="selected">NLT</option>

    <option value="NIV">NIV</option>

  </select>

  <input type="submit" value="Search" />

</form>

Step 3 - Range

Another feature is being able to support a search range. If you would like to find related terms in the New Testament, you can do this with our range options. Clicking Search with the settings used below will perform this task.

Range Options:

e.g. Gen;Psa-Mal;Rom 3-9

In order to add the ranging option, we will need to add another line or two to our search tool's size as well as a fair amount of code. Take a look:

<form action="https://www.blueletterbible.org/search/preSearch.cfm" method="get" target="_new">

  <p>

  <input type="text" name="Criteria" />

  <select name="t">

    <option value="KJV">KJV</option>

    <option value="NKJV" selected>NKJV</option>

    <option value="NLT">NLT</option>

    <option value="NIV">NIV</option>

    <option value="ESV">ESV</option>

    <option value="CSB">CSB</option>

    <option value="NASB20">NASB20</option>

    <option value="NASB95">NASB95</option>

    <option value="LSB">LSB</option>

    <option value="AMP">AMP</option>

    <option value="NET">NET</option>

    <option value="RSV">RSV</option>

    <option value="ASV">ASV</option>

    <option value="YLT">YLT</option>

    <option value="DBY">DBY</option>

    <option value="WEB">WEB</option>

    <option value="HNV">HNV</option>

    <option value="VUL">VUL</option>

    <option value="WLC">WLC</option>

    <option value="LXX">LXX</option>

    <option value="mGNT">mGNT</option>

    <option value="TR">TR</option>

    <option value="SVD">SVD</option>

    <option value="NAV">NAV</option>

    <option value="BES">BES</option>

    <option value="RVR09">RVR09</option>

    <option value="RVR60">RVR60</option>

    <option value="BBE">BBE</option>

    <option value="CHT">CHT</option>

    <option value="EM">EM</option>

    <option value="KOR">KOR</option>

    <option value="LS">LS</option>

    <option value="LUT">LUT</option>

    <option value="RST">RST</option>

    <option value="SE">SE</option>

  </select>

  <input type="submit" value="Search" />

  </p>

  <p>

    <strong>Range Options:</strong><br />

    <input type="text"

      name="cscs" />

    e.g. Gen;Psa-Mal;Rom 3-9

  </p>

</form>

Range options are set in a new <p> tag in bold followed by a line break. Next is the <input> tag. The two attributes and the values for the next step are: type="text" (tells the <input> tag to display as a text box) and name="cscs" (sends the information to Blue Letter Bible program in a way that the program can use).

The text on the next line has some examples for your users to help them understand how to use the Range option search feature.

This code will display like this:

Range Options:

e.g. Gen;Psa-Mal;Rom 3-9

This is what you would need to do, if you want to drop the Range Option identifier and the example text and fit everything on one line:

<form action="https://www.blueletterbible.org/search/preSearch.cfm"

  onSubmit="if(this.cscs.value=='Optional Verse Range')

  this.cscs.value='';"

  method="get" target="_new">

  <p>

  <input type="text" name="Criteria" />

  <select name="t">

    <option value="KJV">KJV</option>

    <option value="NKJV" selected>NKJV</option>

    <option value="NLT">NLT</option>

    <option value="NIV">NIV</option>

    <option value="ESV">ESV</option>

    <option value="CSB">CSB</option>

    <option value="NASB20">NASB20</option>

    <option value="NASB95">NASB95</option>

    <option value="LSB">LSB</option>

    <option value="AMP">AMP</option>

    <option value="NET">NET</option>

    <option value="RSV">RSV</option>

    <option value="ASV">ASV</option>

    <option value="YLT">YLT</option>

    <option value="DBY">DBY</option>

    <option value="WEB">WEB</option>

    <option value="HNV">HNV</option>

    <option value="VUL">VUL</option>

    <option value="WLC">WLC</option>

    <option value="LXX">LXX</option>

    <option value="mGNT">mGNT</option>

    <option value="TR">TR</option>

    <option value="SVD">SVD</option>

    <option value="NAV">NAV</option>

    <option value="BES">BES</option>

    <option value="RVR09">RVR09</option>

    <option value="RVR60">RVR60</option>

    <option value="BBE">BBE</option>

    <option value="CHT">CHT</option>

    <option value="EM">EM</option>

    <option value="KOR">KOR</option>

    <option value="LS">LS</option>

    <option value="LUT">LUT</option>

    <option value="RST">RST</option>

    <option value="SE">SE</option>

  </select>

  <input type="text" name="cscs"

    title="Use semicolons to separate groups -

      Gen;Jdg;Psa-Mal;Rom 3-12;Mat 1:15;Mat 5:12-22"

    value=""

    placeholder="Optional Verse Range" />

  <input type="submit" value="Search" />

  </p>

</form>

As you can see, we have moved the range <input> up before the Search button. This will place it between the Bible version drop down and the Search button when we view the page in a browser.

There are three attributes we will discuss. The first attribute we will look at is title. This is similar to the example text we used previously, though more detailed. With the title text in place, users will see this text when they mouse over the range input box.

The other two attributes, value & placeholder work together. These make it so the Range Option input says "Optional Verse Range" though it is only there as a hint of what the user should type in.

This code then will create a search feature that looks something like this:

We hope that this will be a tool that is helpful to your users as they study God's Word.

← Back to Apps & Tools
CONTENT DISCLAIMER:

The Blue Letter Bible ministry and the BLB Institute hold to the historical, conservative Christian faith, which includes a firm belief in the inerrancy of Scripture. Since the text and audio content provided by BLB represent a range of evangelical traditions, all of the ideas and principles conveyed in the resource materials are not necessarily affirmed, in total, by this ministry.