Embedding SecureForms into WordPress using an iframe

March 14th, 2016

WordPress is an incredibly popular Web site management and blogging platform.  Customers inquire of LuxSci frequently about the best way to add forms to their WordPress pages and posts.  Not just any forms — complex forms that can be HIPAA-compliant and which can submit data securely through SecureForm.

There are numerous options here.  The two most popular are GravityForms and embedding forms with an iframe.  GravityForms is popular and very cool, but not free.  Also as GravityForms is complex and really wants to manage all of your form data itself (insecurely), integration with SecureForm is limited:

  • Multiple forms on the same page can be tricky
  • Ink Signatures can not be captured
  • File uploads can not be captured

Another alternative, which is free as it is included with your SecureForm service, is to:

  1. Build your form with SecureForm FormBuilder
  2. Embed this form into your WordPress page or post using an iframe

What is an “iframe?”  it is a tool that allows you embed one Web page within another Web page.  When you build a form with FormBuilder — that form is automatically saved and hosted securely for you and you are provided with the Web site address (URL) for that form.  All you need to do is to “insert” that hosted form into your WordPress page/post and you are all set.  All FormBuilder features are then also supported: Ink Signatures, file uploads, geolocation, etc.

Embedding a form into WordPress using an iframe

Here is your step-by-step guide to embedding your FormBuilder form into WordPress.  This requires some knowledge of HTML, as you need to edit the source view of your post or page.

  1. Log into LuxSci and proceed to your SecureForm management area.
  2. Click on the title of the form that you have built in FormBuilder and which to embed in WordPress.
  3. See the “Form Address” provided for you on the Overview tab that you are taken to.  Save that Web site address, we will refer to it as “FORMBUILDER_ADDRESS” in the following steps.  I.e. it could look similar to “https://secureform.luxsci.com/forms/126978/119/shfg6/form.html” (not a real address, by the way).
  4. Go into your WordPress administrative interface
  5. Find and edit the page or post in which you want to embed the form
  6. At the top of the editor toolbar (where you can change “boldness” and such) there are two tabs — “Visual” and “Text”.  Visual is the “What You See is What You Get” interface to editing.  “Text” allows you to edit the source code for your page/post and add or edit things that are not available through the tool bar.  Click on “Text”.
  7. Scroll through the source of your page/post and find the place where you would like your form inserted.
  8. Enter the following code:

<iframe src="FORMBUILDER_ADDRESS" width="100%" height="400"></iframe>

That is it — once you save your page/post, your form should how up inside of it.

You might want to tweak one thing however.  You have to specify how tall your form is (i.e. the height) in pixels.  In the example, above, we state that it should be 400 pixels tall.  If your form is shorter — there will be extra blank space after  the form; if the form is longer, then part of the form will be cutoff and your users will need to scroll the form — and, depending on their browser, the fact that the frame is there and scrollable might not be obvious at all.  The simplest way to handle this is to pick a height that will work in general for your form and/or have your form on a page/post by itself or at the end of other content.

What is the solution for that?  With some JavaScript trickery, one can have the iframe auto-resize, but this is complex to implement cross-domain.  For those with some JavaScript wizardry — refer to this post on StackOverflow.

What about security?

The source of your iframe is Web address that starts with https:// … so the loading of that form will be secure.  If you are using LuxSci SecureForm for HIPAA-complaint data collection, then the processing of all data submitted by end users from their browsers will also be secured.

If your WordPress site itself does not store, transmit, or collect sensitive data (e.g. ePHI or PII), then your site may not technically need to be secured or hosted at a provider that assists with securing your Web site.

However, if your Web site is not being delivered over a secure channel (i.e., if its address does not start with https://), then a “man in the middle” between your  server and the end user can alter your page’s content without anyone being the wiser.  In particular, that person can change the source address of the iframe to load any form he/she wants — thus misdirecting any collected data.  This is entirely possible.  Furthermore, WordPress itself has a history of security issues — especially related to third party plugins. (See WordPress and ePHI — is that a good idea?).

So, what we would recommend here is:

  1. Have your WordPress site protected with a TLS certificate (so your address starts with https://).  This is good to do beyond security, anyway, as it can improve your rankings in Google search.
  2. Only use WordPress plugins that are very popular, well vetted, and being updated by the developers.
  3. Keep WordPress and your plugins up to date.
  4. Consider using a dedicated server for hosting your WordPress site … so you would not suffer collateral damage from the security issues of other customers sharing you server.

Contact LuxSci for assistance with dedicated WordPress hosting or SecureForm.