Embedding forms
Use an embed code to include a form in a web page.
An embed code is a snippet of HTML that you use to include a form in a web page without needing to have created this form on the same website. Every time the web page is reloaded, the snippet of code grabs the form again from its original source. This gives you the distinct advantage of not having to do anything else if you make changes to your form: once you publish those changes in Formcentric, the changes are also updated automatically in your embedded forms.
You can generate several embed codes in different designs for your form.
To do this, go to the Share area and then click Embed code. Select the design you want to use for your form, copy the embed code and then simply include this code in your web page.
If you want to share the form via a link, please read the article Sharing forms via links.
Add your domain
- List in the Admin centre under Organisation the corresponding domain or subdomain of the web page in which you want to embed the form.
- Go to the Share area of the form you want to embed and select the design you want to use.
- Click Copy embed code to copy the code.
You can then copy the embedding code in the HTML markup of the web page on which the form will be displayed.
Add the embedding code to the website's HTML
Add script tag
Add the script tag to the <head> or at the end of the <body> of your web page:
<script src="https://form.formcentric.com/form/formcentric.js" defer></script>
Add form container
Add the form container at the point where you want to display your form:
<div data-fc-id="YOUR-FORM-ID"></div>
After adding the embedding code, the form is loaded and displayed automatically.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="https://form.formcentric.com/form/formcentric.js" defer></script>
</head>
<body>
<h1>Welcome to my website</h1>
<!-- form is shown here -->
<div data-fc-id="YOUR FORM ID"></div>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
