Embed surveys, forms or polls, as a popup on you site

One pivital goal when doing user research is asking the right audience, the right question, at the right time. For those of us who are running online businesses, one way to achieve this pivital goal is to embed our research questions into web pages that are designed to be relevant for certain audiences. When a visitor finds his/her way to those pages, it means they must have been intrested in the subject of that page, and most probably they are the very right audience whom we are looking for. A good example of such use is lead generation, a technique used by sales and marketing experts to collect contact information and or demographics of potential consumers for products or services which a company offers.

Questionnaires made with SurveyLegend can easily be embedded in any website and appear as a popup for visitors. The example above shows an illustration of a “lead generation” popup form.

×

To embed the research form into a webpage, we can use our popup feature. By navigating to the ‘Share’ step, and clicking on ‘Embed as popup’ you can find this feature and it’s settings; which will ultimately give you a code to embed in your website. The good thing with popups is that they will not a be fixed part of the design of your webpage. They can be temporary, and removed when they are not needed anymore. On the other hand, popups can easily catch your audiences’ attention, and with a nice design and appropriate tone of voice, you can hopefully get the answers you need. Additionally, your visitors can directly participate in your research without ever leaving your site or opening a new window. Another benefit of using our popup feature is that you will be totally independent of any plugins. If you are using a CMS such as WordPress or Joomla, you don’t even have to bother looking for plugins and making them work with your CMS. All you have to do is to put the unique popup code which is generatred for your questionnaire into your web site, or spesific pages.

---

Customizing the popup

Our tool allows you to customize basics of how the popup survey appears on your website.

You can modify the fundamentals of the survey popup, using these simple settings.

×

---

Title

Your popup can get a title if you want. This is to give your audience an initial idea about subject of your research or feedback form.

The title you add will be displayed on top of the popup which is specially usefull if visitors click the the minimize button to hide the popup. In this case the only thing they see is a visual bar and the title. Thus, try to chose a nice, informative and inviting title.

---

Position

This setting defines where on your web page, this survey popup is displayed. You can choose to display the popup on top -right or -left; or bottom -right -center or -left of your page.

---

Size

This setting sets the maximum size of your popup survey and affects both width and height of it. Keep in mind that the effect of this setting is better noticable on large desktop screens. Because the popups are responsive and can stretch more the wider the screen. Also if you choose one of the wide sizes our popup surveys will still adjust to the screen width and height automatically when your page is loaded on a small smartphone screen.

---

Popup after scroll

When this settings is enabled, the survey popup will not be shown immidiately to the visitors of your website. They must first start scrolling in the page, then they can see the survey popup. This can help making your survey appear less spammy and less intrusive. Also your page will load faster and smoother. So we strongly recommend you to leave this setting ON.

---

Popup with delay

You can add a delay before which the survey popup is shown to the visitors of your webpage. Type a digit, and the delay will be applied in seconds. For example 0 means that the popup is displayed as soon as the page is loaded (if you have not enabled the other setting for popup after scroll), and 2 means the popup is desplayed after 2 seconds delay.

---

Update the used code, if you change the settings

The popup code is generated live, with the settings that you choose. Our app will not keep track of your changes, and will not save them. If you come back to this feature in future a new popup code will be there. So, keep in mind, if you have used the code once, and if you decide to apply changes, you must copy the new code and replace the old code!

---

Need more customizations? Can you write your own CSS? ;)

To make life easier for advanced users like you, we have made it possible to affect the look and feel of the survey popup. If you look at the popup script, you will notice that it loads a CSS file which is hosted at our website. Also you will notice that the popup itself is in fact an IFrame which is wrapped in a container. There are HTML buttons there which enable users to minimize, open, or close the popup. You will also notce that we are loading some simple JavaScript from another file hosted by us which controls the behaviour of these buttons.

So if you can write your own CSS, you can always choose to ignore our default styling for the popup frame and load your own CSS code instead, to modify width, height, color of the header or buttons.

It’s also possible to remove the buttons if you don’t need them, or add your own HTML elements with other desired behaviour (e.g. making the popup fullscreen or other creative ideas you may have).

---

How to use the popup code

To embed your survey into a webpage as a popup, simply follow the steps described here:

1. Select your survey, and go to the “share” step, and navigate to “Popup in web page” section.
2. Adjust the popup settings if desired, for example change the size or placement of the popup.
3. Then copy the generated code which is unique for that questionnaire.
4. Now go to your website’s admin panel or to the HTML source of your site or blog, and paste the code in it, where desired. We recommend you to place the code right before closing the body tag (</body>).
5. Save your page, and enjoy a live popup right inside your own website!

---

Embedding surveys in CMSes such as WordPress or Joomla

There are many ways to embed the questionnaire popup into your CMS. It depends on where you want to load the popup. Would it be loaded on every page? Or would it only load on a single page? If you don’t feel confident to put the code in your source files, you can put the code in, still quite easily. Joomla: If you’re using Joomla, you can put the code in a so called custom module by going to Extentions > Modules > New > Custom. Then publish the module in a desired position (depending on your theme) and choose to show it on all pages from the settings, or choose it spesific page. Also make sure that your editor (e.g. Tiny MCE) does not strip off scripts. You can read more about this here. WordPress: if you are using WordPress, you can do so by going to Appearance > Widgets > Custom HTML > choose a desired position > and choose to show the widget on all pages och choose a page by its ID. Sometimes embedding surveys into a CMS might require a bit extra work. Therefore we made other guides for embedding surveys into your WordPress or Joomla website. Eventhough it’s slightly different, the logic is the same. So please have a look at the following articles to get some inspirations: Embedding surveys and forms in WordPress Embedding surveys and forms in Joomla  See a live example of an embedded survey