Embedding a form in a client site: best practices?

Discussions
#1

Hello,

My apologies if this is a question better suited for a tech answer site like SO, but I thought I would ask hear due to the wealth of real world experience here.

My product needs to embed a form on the user’s web site. It seems to me that there are several ways to approach this:

  1. Form builder creates HTML form, user pastes HTML into page. Could add a JS snippet for client side validation.
    Pros: Easy to implement, should “blend in” to the client site better.
    Cons: requires client to properly embed form, real validation will have to happen on my server, with an error page redirecting the form user back to the original form page, which isn’t user friendly.

  2. Form builder creates iframe to embed
    Pros: Easy (again) to implement, validation can be handled without the form user leaving page.
    Cons: Mobile unfriendly, will likely clash with user’s site.

  3. JavaScript snippet that shows a tab button, launches overlay with form. (See Drip widget at https://getambassador.com/) for one example.
    Pros: Should be very simple for user to embed, validation can take place in overlay, can customize for mobile users.
    Cons: Will require JavaScript to work at all, complex to implement, supporting JS libraries will add to page load time.

I think I can mitigate some of the installation hassle by offering to do it myself…may not be scalable in the long run, but could work to get things going. Given that my users are very non-technical, I am leaning towards option #3, but would love to hear your guys’ thoughts.

#2

You could steal some inspiration from products like AWeber (email list provider). It seems that they are respected in that industry (all major bloggers recommend them) and they use method 1.

So my guess is that in the con that you mention is not as bad as you might thing. Very non technical users don’t know what Javascript is and they might not have the latest browser or a compatible one. So if your third solution doesn’t work, your customer might not be able to use your solution at all. AWeber solves the problem of validation by validating in their servers and giving themselves an error page. The user just needs to push the back button.

In addition to that, very technical users (like me) will be pissed off because we cannot tweak the html to make it completely blend into our websites.

I’m not saying that AWeber solution is perfect, but given that people who use them seem happy with that, you might want to reconsider method 1.

#3

I run a SaaS app with a similar problem - I need to display a form (triggered by a button, just like the Drip widget) on the customer’s site. My audience is also nontechnical. For a non-technical market I think convenience trumps power or flexibility.

Like Drip, I use option #3 - a JavaScript snippet which loads a JS file to create and present the form.

I’ve generally found that any template editing by nontechnical users leads to more problems and support requests. I briefly experimented with option #1 but found most customers were not interested:

  • my customers generally haven’t built the site themselves and don’t know HTML, so don’t know where to add the snippet
  • there’s no guarantee my generated HTML will match the stylesheet for customer’s site anyway
  • any errors (or updates at my end) require editing, publishing and testing.

Option #3 still would require the customer to edit the template, but it’s a lot simpler. It allows me to push out updates as required without involving customers. I have a facility for custom CSS to be included by the customer to style the form to match their site (though most don’t).

@phdsolopreneur makes a good point about technical users wanting flexibility to edit the HTML. For that I’ve found the best way is to expose a JavaScript API - the technical customer can then build any HTML they please and call the API with the data.

Hope that helps - of course the right answer will depend on your audience and product. Feel free to send me private message if you want to get into any specific technical details.

#4

I’d go with option 3, with regards to page load and libraries, if your using something popular like jquery from a popular CDN like google it shouldn’t make too much difference as it should be cached by the users browser. Also make some plugins - wordpress(at minimum), joomla, drupal etc, make it as easy as possible for people to add the form to their site.

1 Like
#5

I recommend taking a look at Wufoo and how they allow you to embed a form. As a Wufoo customer (ie the person who needs to embed the form) I’ve been pleased with their approach.

#6

My current side project faces some of the same challenges.

For now, while I’m still prototyping and validating, I’m going for the super simple iframe solution. But I think you can go a long way just using iframes if the design is responsive, and you allow the user to specify some styles.

Example:

<iframe src="http://example.com/iframe.php?bgColor=#fff&fgColor=#000"></iframe>

Of course, this isn’t ideal. One issue for me is that the height of the content in the iframe is dynamic and I don’t want scrollbars. This can be solved using (non-standard) javascript to adjust the height of the iframe to be the same height as the content in the iframe.

So a psuedo javascript/iframe solution would be to allow the client to embed:

<script src="http://example.com/js/iframe_builder.js.min"></script>

The script then simply does document write of the iframe html, and adjusts the height as in the SO link above.

The added benefit of doing it this way is that you can make it “backwards compatible”; you could change the javascript to write out the form instead of the iframe.

#7

If you are going the custom JS route the following links helped me a lot for building my first real widget:

http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/ & it’s repo: https://github.com/shootitlive/widgetloader

I used it as a framework to build the widget at the bottom of angrycrafters.com

Good luck!

** as a noob on this forum I can only post 2 links, please let me know if you are interested in a couple other links that helped me.

#8

I havent actually read the book, but Third-Party Javascript seems like it would be a great resource. It’s written by some of the guys behind Disqus.