After you've created a contact form you might want to embed it in your website. By integrating your contact form into your own website, Wordpress, Webflow or Wix, it's possible to achieve just that.


If you've set up a custom logo for your contact form or team, the logo won't show in the embedded form.


In this help article

General

After you've created a contact form, basically all you have to do is copy the code from the contact forms page and paste in the code base of your website on the right location.

  • Go to the Contact forms page
  • Click on the share icon and choose Copy embedded HTML
  • Paste the embedded HTML code in your own website, Wordpress or Webflow. For WIX, you'll only need the link so you'll need to cut this one from the HTML code (cf. below).


Example:

If you choose 'Copy embedded HTML', then your regular form link (e.g. https://www.vectera.com/form/my-team-name/contact-form-1/) gets added into an iframe code block .This will look like this:


<iframe
    style="width: 100%; height: 600px;"
    src=" https://www.vectera.com/form/my-team-name/contact-form-1/"
    frameborder="0"
></iframe>


Note: The part after /form/ (=my-team-name) is the team name, while the last part (=/contact-form-1) is the editable part of the contact form link (which you can edit in the contact forms).


If you want to automatically prefill contact form questions you can add data in the parameter behind the URL as in this example:

https://vectera.com/embed/form/my-team-name/contact-form-1/?questions.id=value

Visit this help article for more information.


Own website

Basically all you have to do is copy the codeblock with the iframe from the steps above and paste in the code base of your website on the right location.

Wordpress

Wordpress.com

It's not possible to embed a contact form in a Wordpress.com website. You can add a hyperlink behind text, to forward your clients to a Contact form page.


Wordpress.org

Once you've created the codeblock with the embedded contact form link (see general), you can now embed it in your Wordpress website.

  1. Open the page where you want to add the codeblock
  2. Click on the Plus and select Custom HTML
  3. Paste the iframe code in the custom HTML block
    *note: Depending on your layout, you might want to put the iframe in a paragraph.
  4. Test and edit the height so the iframe displays perfectly on your website.
  5. Publish your website


Webflow

Copy and paste the embedded HTML iframe in your Webflow website.

  1. Open the page where you want to add the codeblock
  2. Click on the Plus and in Advanced select Embed, drag and drop the Embed box into your page
  3. Paste the iframe code in the custom HTML block
  4. Test and edit the height so the iframe displays perfectly on your website.
  5. Publish your website


WIX

To embed a contact form in your Wix website, you'll only need the link. When you click on Copy embedded HTML, you'll have to manually cut that link from the HTML code.

Note: you'll need the embedded link, so only selecting 'Copy link to form' won't work.

  1. Open the page where you want to add the codeblock
  2. Click on the Plus and Embed Code -Embed HTML
  3. In the HTML settings, select Website address and paste the embedded contact form code in the Website address box. Click on Apply or Update.
  4. Edit the height so the iframe shows perfectly on your website.
  5. Publish your website


Embed a contact form in a contact widget 

If you don't want to show an entire contact form on your page but you want to put it behind a button, then you can use the contact widget. Optionally, you can choose if the contact form should open in a pop-up window on your website or in a different tab.

  1. Go to Contact widgets
  2. Click on Create a widget
  3. Design your button
  4. Select whether the contact form should open in a new tab or on the same page
  5. In 'Link contact type' select Contact form and choose which contact form should show.
  6. Hit Save and embed the contact widget in your website.