Embedding a Third-Party Form

Add a simple form to your project using the Embed Anything element.

Vev creates static websites, which means data storage/submissions will need to be sent to a third party.

In this lesson, we will look at:

  1. How to embed a form onto your project

  2. What services you can use to create a form

Adding an Embed Anything Element

Navigate to the Add Menu (shortcut M) and select or search for the Embed Anything element then click-n-drag onto your canvas.

To add an Embed Anything Element:

  • Navigate to the Add Menu

  • Click and drag the element onto your canvas

  • Double click on the Embed Anything element to paste in your html embed code

Note: Not all embed codes will display in the Editor. Some may only render in the published version.

Form Service Providers

There are variety of different service providers that allow you to embed forms onto webpages. Below is a list of popular providers. If your chosen provider is not listed below, please visit their website. Most providers will have documentation on how to embed their forms via their support/help pages.

Note: Some services providers use iframes for their embed codes. An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. Because of this you will need to change the design of the form via the provider's embed options.

Adobe Suite

  1. Visit Adobe and log in

  2. Click the Manage tab

  3. Select the Web Forms filter

  4. Single-click the web form to select it

  5. This opens the Action rail on the right, Click the Get Code action

  6. The page refreshes to show the web form with the URL code at the top of the page

  7. Copy the HTML code that appears

  8. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding Adobe Suite Forms can be found on their support page.

Figma

  1. Visit Figma and log in

  2. Open the Figma form that you want to embed

  3. Click the Share button inside a Figma file

  4. Copy the iframe embed code from the <> public embed option. You can only embed public Figma files

  5. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding Figma forms can be found on their support page.

Google Forms

  1. In Google Forms, open a form

  2. At the top right, click Send

  3. At the top of the window, click Embed

  4. To copy the HTML that appears, click Copy

  5. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding Google Forms can be found on their support page.

MailChimp

  1. Visit MailChimp and log in

  2. Click the Audience icon

  3. Click Audience dashboard

  4. If you have more than one audience, click the Current audience drop-down and choose the one you want to work with

  5. Click the Manage Audience drop-down and choose Signup forms

  6. Select Embedded forms

  7. Choose a form type — Classic, Condensed, Horizontal, or Unstyled —and customize the Form Options

  8. Highlight all the code in the Copy/paste onto your site field and copy it to your clipboard

  9. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding MailChimp forms can be found on their support page.

Survey Monkey

  1. Visit Survey Monkey and log in

  2. Go to the Collect Response section of your survey

  3. Choose Embed on Website. If you already have a collector for your survey, select Website Collector

  4. Edit the appearance settings and click Next to control the survey experience or add restrictions to the survey

  5. Click Get Embed Code

  6. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding Survey Monkey forms can be found on their support page.

TypeForm

  1. Visit TypeForm and log in

  2. Open the form you want to embed, and click on the Share panel or Publish if your form has not yet been published

  3. Within here you can all the different embed options and customise how you want your form to look

  4. After clicking on an embed option from the Share panel or Publish menu, you'll be directed to a page where you can switch between different embed modes and toggle between desktop and mobile previews

  5. Clicking Get the code will generate your embed code, based on the settings you’ve chosen

  6. Paste the embed form code into the Embed Anything element within your Vev project

More documentation on embedding TypeForm forms can be found on their support page.