Can I put HTML Forms in Emails?

I was asked this question today from our newsletter team. I remember being asked this same question 7 years ago by my first boss (Yikes! I’ve been in this industry for 7 years?!!). Back then, I wanted to impress him so I went ahead, built the form in an email, tested it and realized later on it had security concerns and it wasn’t going to work. So the answer to the question was a definite ‘NO’.

Today I thought it’s probably a good time to revisit this after 7 years. Maybe things have changed? Did a quick search on google and the first two pages I clicked on were:

These are both outdated articles so I thought maybe there are more updated information out there. Third time lucky, I landed on a sitepoint article written in March this year, Using Forms in Email: Method or Madness? – Sitepoint

Luckily Massmino has done the hard work for us. He has built a simple form  in an email and tested the results in each email client. The result? Forms are not displayed on Outlook for Windows and iOS

It’s rather interesting that in the 7 years, nothing has changed. It can be done (nothing is impossible) depending on which email clients you want to target but there are security concerns. It’s not ideal to use forms in emails. So 7 years later, the answer is still ‘NO’.

I love IE Conditional Comments… said no one ever!

Although it’s considered bad practice, sometimes we are left with no choice but to use IE conditional comments.

When you run into problems like style sheet limits in IE9 and below; supporting a maximum of 4095 rules per stylesheet, 31 @imports or having @import nesting up to 4 levels, you really don’t have a choice but to use IE conditional comments to split up your CSS file. Here is when IE conditional comments can be handy. (I would try to avoid it as much as possible though!)

Maintaining IE specific stylesheets can be a pain, especially for the scenario I’ve mentioned above like splitting up your CSS purely for IE. This can easily be solved by using grunt to compile your CSS into separate files. 

For those of you, like me, who do have to deal with these workarounds, here are some useful links:

One thing to note though that the condition comment for non IE browsers is a slightly different syntax!

HackTank – Introducing Oracle

HipagesGroup held their very first hackathon a few days ago and it was extremely exciting. This hackathon is slightly different to any other hackathon – it has a twist. We have combined concepts from SharkTank into our hackathaon where the company invited some of the board members to be the advisers and judges for the event. We presented our ‘business’ idea of what we would like to build in front of the board members on the first day where they gave us advice based on their expertise. We had 48 hours to complete the project and present it back to the board members. The race is on!

I teamed up with 3 others to get out Oracles, a NLP (natural language processing) classifier and an image recognition classifier built in AngularJS and Ionic framework, an open source front-end SDK for developing hybrid mobile apps with HTML5. It was my first time using the ionic framework but it was absolutely easy to use – I would truly recommend anyone who hasn’t checked out Ionic to have a try. We loaded our data into, to build our classifier, based on deep learning algorithms. As for our image recognition classifier, we used the CloudSight API.

Although we didn’t win as a team, I was extremely humbled to be announced the winner of the Inaugural Above and Beyond Award by our VP of Engineering and VP of Product.


CRO and A/B Testing

HipagesGroup has recently introduced OKRs through all the departments. OKR (Objectives and Key Results) is exactly what it stands for: Objectives – goals that tell you where to go and Key Results – indicate how you will get to your goal for each objective. Our company OKR has been closely linked to Growth.

I was very privileged to be assigned into the Growth focus team where we created a CRO (Conversion Rate Optimization) pod consisting of our VP of Product, a product manager, myself and another developer. Our aim is to push out two CRO A/B tests a day and in the last few weeks, I am beginning to really appreciate and understand what Growth Hacking is all about.

  1. Analyse data to get insights on where the opportunities for conversions are on the site
  2. Look at user behaviour
  3. Come up with a hypothesis of how we can increase conversions
  4. Create an A/B test based on our hypothesis
  5. Analyse data of A/B test and the process starts again…

Once you get familiar with the process and deploy a few tests, it can get quite addictive. After the last few weeks, I find myself chasing those test results, wanting to know whether the tests we rolled out have moved the needle. The results for one of our CRO tests, aimed for the increase in mobile traffic, show that we have raised the conversion rate from 3% to 6% – that is a whopping 3% increase in conversions! CRO has now become one of my passions! Feel free to drop me a line if you have any questions or would like to discuss anything CRO.

Some other useful Reads and Resources:

I heart Handlebars

I was assigned an extremely exciting project at work the other day. We would like to make our articles section of responsive – 100% mobile first responsive! We were excited to be using the new infrastructure built with node.js. I worked alongside our engineering excellence developer, Siyang Bi to create the ‘holy grail’ approach, as Airbnb calls it, it runs on both sides of the wire, serving up real HTML on first pageload, but then kicking off a client-side JavaScript app as users interacts with the app. This means we use the same template for both server side and client side. We did this with handlebar templates.

Write your own Register Helpers

A handy tip I got taught was to look at the built-in helpers for handlebars in the git and write your own based of theirs as a starting point.

Great Reads

Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…


One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!


AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!