Embedding forms into your web page
You can embed SurveyCTO forms into other web pages using the HTML <iframe> tag. To embed your form, simply copy the following HTML into your web page, replacing the sections [in bold brackets]. You can change the height and width values to suit your needs.
|<iframe src="https://[your server name].surveycto.com/collect/[your form id]?appearance=min" height="600" width="800"></iframe>|
To help ensure everything works properly, please note the following tips:
Make sure your form is set to allow anonymous access.
If you plan on sharing your embedded form to people without user accounts on your SurveyCTO server, you'll want to enable public access to your form. See the topic on using web forms for info on how to allow anonymous access. If this is not turned on, the login page will appear in your iframe instead of your form, and users will not be able to fill out your form without first logging in to your server.
appearance=minURL parameter (query string).
This will simplify the appearance of the form and optimize it for being embedded within another web page. All you need to do is add
?appearance=mindirectly to the end of your form's URL. This will also suppress the 'disabled cookies' warning that can get appear in certain browsers due to limitations with how iframes handle cookies.
Test without being logged in.
Forms can appear slightly differently to logged-in users vs. anonymous users. If you plan on anonymous users filling out your form, you should test how it will appear for them. You can do this in one of three ways:
- Switch browsers. If you are logged in to your SurveyCTO server in Chrome, try using Firefox, Safari, or Edge to view/test your embedded form.
- Use 'incognito mode' or 'private browsing mode'. Most modern browsers have some variant of this feature which will allow you to visit web pages without saving or storing any information, including login status.
- Log out first. Of course, the simplest approach may be to simply log out of your SurveyCTO server before you start testing.