Adding Google Search with a custom field and button

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.

24 Likes

Awesome man, this sounds like a nice solution. Definitely going to try this for future clients in need of search in their sites.

According to Goggle, paying the $100 allows you to remove the branding from the search bar, use your own search bar, and remove ads from search results. I don’t think that’s too much to pay for that.

And it looks like the search results on your site have ads. Are you able to turn those off with the free plan? That was the biggest issue for me. I didn’t want ads in my blog search results.

And not to miss that even if Switype didn’t drop their $19/mth plan, it would still cost more than Google $100/year plan.

1 Like

Dude, you’re a life-saver! Was finishing up a website and was about to guide my client into getting the $19 plan from Swiftype only to find out they pulled the rug under our feet. Thanks a bunch for this workaround!

Only thing i’m having trouble is having Google index the site. The results right now are coming empty, im not sure how to have the whole thing indexed, can you shed a light on this?

Thanks again, you rock!

Guil

3 Likes

Indexing can take quite some time with custom search or even just getting your site’s contents on plain Google searches. You can use the Fetch as Google option, then submit that to Google’s index. Even then, you could be waiting a week or more before results start to appear in searches.

Fetch as Google: About Search Console - Search Console Help

4 Likes

Interesting thanks for sharing. I was just looking at swiftype and saw their pricing… :rage:

Anyone tried cse’s autocomplete?

IMO the search-results-site of cse is really ugly, I would like to avoid it, at least in this form… Can I actually integrate and style it as if it were part of my site?

Hi @rw115, and how Wordpress plugin can help us?

1 Like

Thank you all for this information!

I’ve got it working on my regular pages but not on my collections content. Any ideas on how to get this CMS content to appear in the results?

trystudioapp.com
trystudioapp.com/searchresults

https://preview.webflow.com/preview/trystudioapp?preview=81f9969baf239fea7511c8faf3332cec

Thanks!

1 Like

4 posts were split to a new topic: Hiding Google branding from CSE search box

Has anyone else had trouble getting this to work? I follow the steps but every time I see two forms, the one I customized and the one Google serves. If anyone needs it I’ll send a read-only link and screenshots. Just curious if I’m the only one having this issue.
Thanks!
Jason

Hi and sorry for bother you, I am trying to add google CSE in my site and I followed ( I think) your step but there is something that I am definitely doing wrong because it is not working the way it should. when you says “There are two code snippets you’ll need” I do not find the second one, I only see this one "
gcse:searchbox-only</gcse:searchbox-only> and do not see the second. it is the reason why it is not working. where do I get the second sript?

Is anything else I am doing wrong? I am not a developer myself I am recreating my already exiting websitewww.roomtu.com using webflow to have a total control of it.

My webflow work so far is here: Design Responsive Websites - Webflow

I hope to hear from you soon

I send my best regards
Nicola

@tubes Thank you so much for this, it was super helpful. I have one small issue, maybe you’ll have a solution.
After publishing the website I see 2 search fields :

Any idea on how to solve this?

Thx

This topic was automatically closed 59 days after the last reply. New replies are no longer allowed.