You created your form or survey, and now you want to share it with your audience via embedding it into your website. We offer you three different ways how you can do that.
Once your form is ready, click on “publish”. You will see the modal with all the sharing and embedding options. You have the choice of embedding your Crowdsignal form via Embed Card, Embed iFrame, or Embed Popup. This post will explain step by step how you can do this and gives you some introduction for each of these options.
If you have a WordPress site, it’s as easy as copying/pasting a link. If you want to embed your forms into any other website you can do this by adding a little javascript code snippet. Less than 5 lines of code and you are ready to collect responses.
And by the way, once your form is embedded you can edit and adjust your form via the Crowdsignal editor, without touching your website.
Here is a quick introduction to each of these three embed modes, and further below you can find step-by-step guides on how to use them:
Embed iFrame
When you embed your form via the Embed iFrame, your Crowdsignal form will be treated as a responsive element of your page. The form will be displayed wherever you place it on your page. Depending on the space of this place on your page, the iFrame will adjust its width and will be fully responsive.
On a view with limited width, like a mobile screen, your embedded form will likely become “longer”, and users might need to scroll down to see the full content of your form.
We recommend embedding this way only forms with a single page or multi-page forms where each page has a similar height, as with any page transition the height of your site might change, and therefore the view for the user might move up and down.
Embed iFrame for WordPress
If you have a WordPress site, it is very simple! Just click on the “Copy WordPress Link”, then go to your WordPress editor, wherever you would like to embed your Crowdsignal form and paste the link into a “paragraph block” in your editor. Your iFrame will be automatically created and rendered. Click on “Preview” to see what your page with the form looks like.
Embed iFrame with Javascript Code Snippet
If you want to embed the iFrame into any other website, click on the “Copy JS Code Snippet” button, and we will copy a few lines of Javascript into your clipboard. Then get into the HTML code of your site, and simply paste the code snippet into your code, wherever you would like to place the iFrame.
When you preview your page, the form should appear on your page, ready for collecting responses.
Start testing your page for different device sizes like table and mobile, and verify if the form is displayed as expected. If needed, finetune the content in your Crowdsignal editor.
That’s it.
Embed Card
Embed your form into your page and have full control over how much space it takes. You can define a maximum card size (width and height), which will be the canvas for your form created in the editor.
Once embedded into your site, we will make sure that all the content on that card will be displayed exactly how you designed it. On smaller screens, your embed card will be scaled down, similar like a responsive image. This reduces the size of the content, but it makes sure all content is visible.
We want to enable you to offer forms to users anywhere, without messing up your site design, but at the same time without any of the form content getting out of view.
If the screen size becomes smaller, like on a mobile view, the embed card will scale down similar to an image or video. We make sure all your content is visible as you have planned it.
Customize the size of your card
You have full control over the maximum size and format of your card. Go to the Projects settings in the right sidebar, and define the format of your card by height and width.
The nice part: At all times your card will be displayed in the embed state as designed by you on the editor. If your card needs to be scaled down, like on a mobile view, the content of your card will be scaled down proportionally, similar to an image that gets downsized.
Embed Card for WordPress
If you have a WordPress site, just click on the “Copy WordPress Link”, then go to your WordPress editor, and paste the link, wherever you would like to embed your card into your WordPress page.
Embed Card with Javascript Code Snippet
If you want to embed the card into any other website, click on the “Copy JS Code Snippet” button, and we will copy a few lines of Javascript into your clipboard. Then get into the HTML code of your site, and simply paste the code snippet into your code, wherever you would like to place the card.
When you preview your website the Embed Card with your form should appear and is ready to collect responses.
As already mentioned above, once the form is implemented you can update your form anytime via the Crowdsignal editor, without needing to change your website’s code.
Embed Popup
Embedding your form this way shows your survey inside of a little popup window on page load. It can be just a one-question micro survey or a ten-step checkout flow, it’s up to you.
It’s great for showing users a micro survey or some order form, right there at the moment of truth, above your site’s content.
Embed Popup for WordPress
If you have a WordPress site, it is very simple! Just click on the “Copy WordPress Link”, then go to your WordPress editor, and paste the link. You will see a little placeholder block. This placeholder can be placed anywhere on your WordPress page, and it won’t be displayed on your site. If you want to see what your popup looks like, click on “Preview”, and you should see it on page load as expected.
Do you want to show the same form popup on several pages? Post the link into a widget or in the footer of a Full Site Editor WordPress theme.
Embed Popup with Javascript Code Snippet
Embed your form into any other site:
Click on the “Copy JS Code Snippet” button, and we will copy a few lines of Javascript into your clipboard. Then get into the HTML code of your site and paste the “code snippet” of your page. We recommend putting the code at the bottom of your page. When you load your page the popup should appear and is ready to collect responses.
Once the form is implemented you can update it anytime via the Crowdsignal editor, without touching the website where it’s shown. Edit it, close it, and publish it again.
This was a quick guide for our three new distribution options for our new Crowdsignal editor: The Popup, the Embed Card, and the Embed iFrame.
If you have any questions or run into any issues, please let us know via support@crowdsignal.com. Thanks so much in advance!
We can’t wait to see what you build with our new sharing options.
Crowdsignal 