Articles in this section

Different ways to collect responses from webpages

Avatar
Timo
  • Updated

 

Besides using the basic survey link, it's possible to embed the survey form as part of a webpage by using an iframe or make it pop up to new window.

 

Basic iframe

  1. Go to Distribute view and select 'Embed on your website'.
  2. Copy the HTML code and add it to the code of the web page.

This kind of basic iframe will create anonymous answers to your survey just like public link.

 

Advanced iframe

If you like to pick up some background information from webpage to every answer or you need to define correct survey language so that respondent don't need to select it then you must edit iframe link.

  1. Go to Distribute view and select 'Embed on your website'.
  2. Copy the HTML code

Your code look like this

<iframe src="https://q.surveypal.com/form?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website" style="width:100%;height:600px;border:none"></iframe>

 

Replace '/form' with '/app/form/ext'

Now your iframe code should look like this

<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website" style="width:100%;height:600px;border:none"></iframe>

 

Background information

You can add background information to every answer with meta parameter.

Add &meta=[{'key':'example','value':'samplevalue'}] to your iframe link after 'channel=website'

<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&meta=[{'key':'example','value':'samplevalue'}]" style="width:100%;height:600px;border:none"></iframe>

Key is background information name. You can choose key name but use only characters and numbers.
Value is background information value.

You can add as many key-value pairs as you like. Here we have two of those:

<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&meta=[{'key':'example','value':'samplevalue'},{'key':'second','value':'something'}]" style="width:100%;height:600px;border:none"></iframe>

 

Language selection

If your survey have more than one language and you want that respondent don't need to select language then you have to use  language parameter.

Add &language=English%20(US) after 'channel=website':

<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&language=English%20(US)&meta=[{'key':'example','value':'samplevalue'}]" style="width:100%;height:600px;border:none"></iframe>

Language value is language name. You can find language name from survey Build view. There is language menu next to Settings and there you have a list of your survey languages.

language_versions.PNG

 

Iframe layout

Many times iframe size is limited so it's good to use the whole space. You'll find instructions how to do it from article Optimize survey layout for embedding.

 

Resizable iframe

By default iframe does not understand parent page height and that is the reason why you must add height value to iframe style attribute. But if you use third party Javascript library then you can create a iframe which height fits to parent page content area height. You'll find instructions how to do it from article Creating a resizable survey iframe.

 

Survey popup

If you need to add survey to a popup then you can use iframe codes for that too. First you need to use your website environment way to setup a popup window to webpage. When you have it ready then add the iframe code to it and you'll get the same result as with normal iframe embedding.

You can find an example from our demo site https://rocketwarehouse.space/help-center/ when you click 'Home' from navigation. It should take you to Home page and then you'll see survey popup.

 

Survey button

Maybe you don't want to show survey all the time but you still need to allow user to give feedback. Then you can use Survey button which is small button in edge of your website. When user clicks the button then it open the survey.

See example.

Survey button documentation.

 

Message from embedded survey to webpage

Sometimes it's good if embedded survey can tell to parent webpage when survey is completed. You can do this with below code snippets. First code goes to survey and second code goes to your webpage where you embedded the survey.

Survey code

Open survey
Go to Build view
Open Settings
Select tab "Snippets"
Add code to field "Body bottom"

This code sends message JSON data {"event":"formSubmit"} to parent page when survey is completed.

<script type="text/javascript">
if (SurveypalAPI.getPageType() == 'thank-you') {
  try {
    var postObject = JSON.stringify({
      event: 'formSubmit'
    });
    window.parent.postMessage(postObject, '*');
  } catch(e) {
    window.console && window.console.log(e);
  }
}
</script>

Webpage code

Add below code to your webpage. This waits message from survey and write "survey completed" to browser console when message arrives.

<script type="text/javascript">
window.addEventListener('message', function (e) {
  // Get data from survey
  if (e.origin === "https://q.surveypal.com") {
    var data = JSON.parse(e.data);
    if (data.event === 'formSubmit') {
      // Add your code here
      console.log('survey completed');
    }
  }
});
</script>

 

Tips & Tricks

  • If you do not know how to add the code to the code of the web page, contact the person in charge of website administration.
  • You can also use a normal public link on web pages.
  • Or you can use enriched link which will add background information to answer and selects correct survey language. See instructions from article Creating external survey links.

Related articles