A couple days ago, Swiftype dropped their $19/mo plan and now only offer $249 business and Enterprise plans. This is disappointing for many people who use Swiftype in Webflow and can’t pay that high monthly rate.
I looked into some other cloud search services and found Google Custom Search to be the best option. You can put it on your site for free if you don’t mind the Google branding and ads, but plans where you can hide that start at $100 a year.
I wanted to use my own search bar with no branding or ads in the search results so I opted for the $100 plan. It’s more than enough for our blog.
It took me a while to figure out how to get it working properly because Google’s instructions for making your own field and search button are, well, nonexistent, as far as I could tell. So I used their instructions, some tips from other places online, and a little elbow grease and got it working.
This is all I wanted. Is that so much to ask?
Here’s how to do it.
1. Go to https://cse.google.com/
2. Sign up for one of their plans.
3. Create a new search engine in the control panel.
4. Go through the different settings and set things up how you want them.
-Under setup enter your info and add another person as an admin if you want.
-Under look and feel set your layout to two-page and save.
-Under the customize tab, adjust your search results page colors and fonts. You won’t need to make adjustments to the search box and search button because you will be using your own. Make sure to turn off Google branding here too.
5. Once you’ve made all your adjustments under the customize tab hit “Save and get code”.
-Now, this is important: There are two code snippets you’ll need - one to be embedded along with the search bar and the other for the search results page. Make sure to get both. If you don’t see both (they’re in two separate tabs), go back and make sure you are on the two page layout.
6. OK, let’s move over to Webflow. Make sure you have a page to hold the search bar and a page to show the results. Where you embed these on your pages is up to you.
7. On the page where you want a search bar, put the following form markup in an embed. Make sure to change the action, the id, and the classes to your own. Your action should point to the webflow URL where your search results will be.
<div class="w-form form-wrapper">
<form name="cse" id="searchbox" action="http://yoursite.com/searchresultspage" method="get">
<input type="hidden" name="cx" value="your-cseid" /><!-- Replace YOUR_CSEID with your CSE ID (!) -->
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="en" />
<input name="q" type="text" class="your-custom-field-class" />
<input class="your-custom-button-class" value="Go" type="submit" name="sa" />
</form>
</div>
-Below that in the same embed, paste the first code you copied for the search bar.
-Close the embed
8. Go to your results page and paste the results code (the second script you copied) into an embed anywhere you want on the page.
9. Publish your site and try out your search. If you followed the directions it should be working fine for you. Of course if your site is new and hasn’t been indexed, you may only get a “no results” message.
One thing to note, since you’ll be using a form that’s in an embed, Webflow won’t track those classes that you add to the embed and will want to clean them up when you go to clean up your styles. Make sure to to do that or make sure you are using those classes somewhere else on your site or they will be deleted and your form styling will be gone. You could also just try making a form through the Webflow interface and dragging in the hidden fields in embeds but this seemed easier to me.
Good luck and let me know if I missed anything.
