Skip to main content

I just started using Unbounce, how do I add a search bar to my Unbounce page? Does it require coding?

I am curious why you would need a search bar? A landing page does not require one.

Hi @eluoma91,


Do you want to add a search bar to your landing page, and pass the search query to your website to show results? , or do you want to add a search bar to search within the landing page?

Hi @Nishant_Dewan


I want to add a search bar that will pass the query to my website. Sorry for my earlier misleading question and thanks your help, already.

Hi @eluoma91,


You should be able to do it by just adding a simple form with one field and setting the submit action to redirect to the desired URL + appending the form data to the URL.


Depending on your destination URL and the formatting it expects you might have to play around with this to match it.

Yes I’m also really keen to be able to use search bars that will pass the query through to my website


It’s frustrating that currently I can’t make a form/search bar open in a new window


I also would like to be able to put an additional form/search bar in a light box - e.g. if I had a ‘search now’ button low down the page, a lightbox could pop up with a search bar in it.

Hi @Joseph1,


You can do all of these things but you have to be comfortable writing a bit of JS and CSS.


If you don’t feel like messing with code and you have the exact design/functionality figured out, you can PM me for a quote.


Best,

Hristian

This was the best solution I could find. Which works as a lightbox or as a separate page. Below is the code I used for the lightbox. Then I used the lightbox html for the search button url on the navigation bar which show as a separate page. Here is how I incorporated it on the page: https://discover.unfi.com/signs/ 

 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box; 
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 24px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
    height: 800px; 
    overflow: auto;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 20px;
  text-decoration: none;
  font-size: 22px;
  color: #64534F;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
       
</style>
<body>
    <div class="scroll">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
    

    
<ul id="myUL">
<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>
<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>

<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>

REPEAT THESE LINES AS NEEDED
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li i].getElementsByTagName("a")h0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li(i].style.display = "";
        } else {
            liÂi].style.display = "none";
        }
    }
}
</script>

</body>
</html>

Reply


Terms & ConditionsCookie settings