• Sitefinity Tips

Add External Forms to your Site

Mia E Lee
Mia Ellis-Lee
Design & Frontend Development
Write to Mia
Share

Disclaimer: Adding an external form requires web development experience and a working knowledge of HTML, CSS, and Javascript.

If you need a basic contact form, Sitefinity’s built in form tools make creating forms and managing responses a breeze. However, sometimes you need to include a form that will send data to somewhere other than your Sitefinity site (for instance, a newsletter subscription list managed by an external source like MailChimp or CreateSend). This can pose a problem since simply adding your form elements between <form></form> tags won’t work. Since <form> tags within <form> tags count as invalid HTML, some browsers will strip out the second set of <form> tags leaving your form ineffective.

Fortunately, there is a clever workaround using iFrames. Instead of adding in your <form> tags directly onto the page, you code your form within a separate HTML document and then add that document into your page as an iFrame! Follow the steps below to easily add an external form to your Sitefinity site.

  1. Code your form in your favourite code editor/IDE and save it as an HTML file. You can style this HTML file from your primary stylesheet as long as their domains are the same. Otherwise you can include a stylesheet like you normally would using <link> tags or you can set the styling in the <head> of the document using <style> tags. I personally recommend the latter for the sake of simplicity but all methods are valid.
  2. Navigate to “Documents” from your Sitefinity back-end and upload the HTML file to the appropriate library. Copy the URL to this document.
  3. Navigate to the page or template where you’d like the form to appear. Drag a Content block to the location where you’d like the form to appear and add in your iFrame using the tags below. Paste the URL of your document between the quotation marks of the “src” attribute.

    <iframe src="LINK TO YOUR HTML DOCUMENT"></iframe>
  4. You're finished! Publish or save a draft as desired.
Back to Top Arrow Up