Search Bar in Email Design

KG

1

Kevin George replied 2017-05-02 13:15:40

Hi Perry,

We have made an email for Shutterstock with the same functionality. Unfortunately, in the outlook (desktop client) does not support advance HTML tag.

Only if you are hiding that tag and some add logical fallback then it would be easy for you.

Below is the link of the example we have made:
http://edmimages.net/edm//2017/may/shutterstock_email/shutterstock_email.php

Please test this and let us know your thoughts.

Thanks
Kevin
Email Monks

Reply to Kevin George

DB

0

Daniel Black replied 2017-05-08 20:31:13

Glad to see you guys are continuing to push the envelope. Very cool!

SC

0

Sue Cho replied 2017-05-04 17:49:48

Thanks for posting this, Kevin!

PC

0

Perry Clark replied 2017-05-24 10:00:30

Hey Kevin,
Sorry for the delay in my response. Thanks for the share, very helpful!

PC

0

Perry Clark replied 2017-06-01 10:18:23

So, I have built a search bar which is working pretty well but I have hit a few walls. I'm hoping somebody can help?

Outlook OSX & online:
The MSO conditionals are not working on OSX Outlook versions and online Outlook.com. When I tested the code from @Kevin_George's build in Outlook.com, the rollback seemed to be working fine. What am I doing wrong?

Non Outlook code here

Apple Mail desktop:
When the form has the space bar pressed, it page jumps down the email and deselects the form. Is this a functionality problem? Is there a way of turning this off?

Android Gmail & mail:
When the bar is selected, no keyboard pops up. Some devices it does not even select the search bar, just does nothing.

Any help with any of these bugs would be much appreciated. I have spent a lot of time trying to get this working but I cant get past these final bugs.

Many thanks!

Reply to Perry Clark

TD

0

Thomas Defossez replied 2017-06-02 09:21:10

Hi Perry! Could you give us an example of code of what you're trying to do (even if I guess so)? ;)

Reply to Thomas Defossez

SC

0

Sue Cho replied 2017-05-04 17:50:29

I have the same question! I feel like I saw hotel companies put search AND filter functionality into emails years ago. Am I delusional or does this exist?

Reply to Sue Cho

PC

-1

Perry Clark replied 2017-06-09 08:57:58

Here is my code. Why will these conditionals not work on Outlook.com?


<!--[if !mso]><!-- -->

                                                    <th valign="top" style="padding: 0; text-align: left;" class="hide-me vertical-grid" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="horizontal-grid" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="20" align="left">&nbsp;</th>
                                                                    <th valign="middle" style="mso-line-height-rule: exactly; padding: 0; text-align: right; font-family: 'Nunito', Helvetica, Arial, sans-serif; font-weight: normal; color: #000000;" class="text-container" width="100" align="right">
                                                                      <form action="http://www.kiddicare.com/products_search.php?" method="get"><input class="searchbar" placeholder="Type here and press enter..." type="text" name="search_string" android:inputType="text" style="width: 100%; background: #ffffff; border: 1px solid #999999; border-radius: 10px; background-image: url('https://media.sailthru.com/4rd/1k1/5/p/5926ae1501a94.png'); background-repeat: no-repeat; background-position: right 10px center; background-size: 21px 25px; color: #999999; font-size: 14px; height: 20px; max-height: 25px; min-height: 25px; padding: 8px 15px 8px 15px;"></form>
                                                                    </th>
                                                                    <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="8" align="left">&nbsp;</th>
                                                                    <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="search-gutter vertical-gutter" width="20" align="left">&nbsp;</th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="lift-me vertical-grid" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0; text-align: left;" class="mobileHide image-container" align="left"><img src="https://media.sailthru.com/4rd/1k1/5/p/5926c03c9b857.jpg" width="560" height="387" alt="Alt text here" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
                                                                  </tr>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0; mso-hide: all; display: none; max-height: 0px; overflow: hidden; text-align: left;" class="desktopHide mobileImage image-container" align="left">
                                                                      <a target="_blank" href="≈" style="text-decoration: none;"><img src="https://media.sailthru.com/4rd/1k1/5/p/5926bf3789eb0.jpg" width="100%" height="" alt="Alt text here" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block; border: none;"></a>
                                                                    </th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>

                                                  <!-- <![endif]-->

                                                  <!--[if gte mso 9]>

                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="show-me vertical-grid" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="image-container" align="left">
                                                              <a target="_blank" href="http://www.kiddicare.com/products_search.php?search_string=" style="text-decoration: none;"><img src="https://media.sailthru.com/4rd/1k1/5/u/592d5a4937c23.jpg" width="560" height="433" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block; border: none;"></a>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                  <![endif]-->

Reply to Perry Clark

Search Bar in Email Design

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password