Internal site search is a key component of websites, allowing users to quickly and efficiently find what they’re looking for. It is also critical functionality for e-commerce sites with a large inventory of products. Wouldn’t it be neat if we could skip over the intermediate step of driving users to your site from an email, and allow users to conduct a site search right within the email itself? Although inbox support varies, it is possible to do while still providing a fallback.
Proper code setup is critical for this to work, and special thanks to Jay over at Email on Acid for pulling together a lot of the inbox-specific styles and conditional statements required for this. Here’s how it’s done:
Step 1. Add your search form to the email
This is a simple, single field search with a submit button. The form action is set to our website, and the name=”s” is standard for a WordPress site. This may be different for your website, so you may have to take a look at how your site search is set up. It’s wrapped in a div with a class of “hide” to use in css that will target specific inboxes.
<div class="hide">
<form action="https://www.emfluence.com/" method="get"><input class="search-bar" name="s" type="text"/><br/>
<br/>
<input class="search-submit" type="submit" value="Search"/></form>
</div>
<a href="https://www.emfluence.com/?s="><img border="0" class="show-me" height="76" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/search/anim-search.gif" style="max-height: 0px; font-size: 0; display: none;" width="442"/>
</a>
We can add CSS to style our form:
<!--styles-->
<style type="text/css">
.search-bar {
padding: 18px 25px;
font-size: 21px;
background-color: #143942;
box-sizing: border-box;
line-height: 1.2em;
font-family: "Montserrat",sans-serif;
border-radius: 35px;
width: 80%;
border: 2px solid #143942;
color: #f4c300;
font-weight: bold;
}
@media(max-width: 481px) {
.search-bar {
width: 100%;
}
}
.search-submit {
padding: 18px 20px 18px 20px;
font-weight: bold;
font-size: 15px;
border: 0px none;
border-radius: 5px;
background: #ffedad;
color: #143942;
font-family: "Montserrat", sans-serif;
cursor: pointer;
-webkit-appearance: none;
}
.search-submit:hover {
background: #FFFFFF;
color: #143942;
transition: .4s;
}
</style>
Step 2. Add Outlook conditional statements
No versions of Outlook will support this functionality, so we wrap the form in Outlook-specific code that says “if this isn’t Outlook, do this”:
<!--[if !mso 9]><!-->
<div class="hide">
<form action="https://www.emfluence.com/" method="get"><input class="search-bar" name="s" type="text"/><br/>
<br/>
<input class="search-submit" type="submit" value="Search"/></form>
</div>
<!--<![endif]-->
Step 3. Add a fallback for Outlook to replace the search form
As a fallback option, we’re going to use a gif of a search bar that links straight to our website’s search page. While it doesn’t allow users to use the search within the inbox, it brings them to that functionality in one click.
We also will wrap this in Outlook conditional statements to only show it in all versions of Outlook, since we don’t want to see it when the actual search works.
<!--[if mso | ie]>
<a href="https://www.emfluence.com/?s="><img src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/search/anim-search.gif" width="442" height="76" border="0"></a>
<![endif]-->
An additional fallback gif is required for Outlook for Mac, which does not support conditional comments. The gif in this code is hidden by default, but we’ll use css to display it in Outlook for Mac:
<!--[if !mso 9]><!-->
<div class="hide">
<form action="https://www.emfluence.com/" method="get"><input class="search-bar" name="s" type="text"/><br/>
<br/>
<input class="search-submit" type="submit" value="Search"/></form>
</div>
<a href="https://www.emfluence.com/?s="><img border="0" class="show-me" height="76" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/search/anim-search.gif" style="max-height: 0px; font-size: 0; display: none;" width="442"/></a>
<!--<![endif]-->
Our fallback gif:
Step 4. Add inbox-specific css to manage where the search is displayed
Inserting a form into email causes a number of issues. In some inboxes it will display but not allow you to enter text, and in others, it’ll allow you to enter text, but the submit button just doesn’t work. These styles remove the form, and in some cases, adds the fallback gif instead:
<!--Hide in Outlook for Mac, but don't hide on iOS Mail -->
<style type="text/css">
@media screen and (min-width:769px) {
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .show-me {
max-height: none !important; font-size: 12px !important; display: block !important; }
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .hide {
display: none!important;}
}
</style>
<!-- Hide in Yahoo iOS -->
<style type="text/css">
@media screen yahoo and (max-width:480px){
.hide {display:none!important;}
}
</style>
<!-- Hide in Outlook.com -->
<style type="text/css">[class="x_hide"] {
display: none!important;
overflow: hidden!important;
max-height: none!important;
}
</style>
<!-- Hide in Outlook App -->
<style type="text/css">body[data-outlook-cycle] .hide {
display: none!important;
}
</style>
<!-- Hide in Yahoo Mail on Android -->
<style type="text/css">.& .hide {display:none!important;}</style>
5. Test, test, test
A lot can go wrong here, so it’s important to try this out in as many inboxes as possible. Preflight renderings will help, but you should also send an actual proof to as many different inboxes as you can to test.
Things like this are a learning process for the entire email community, so if you give this a try, let us know how it goes!
