Embedding Secure Forms into WordPress using an iframe

WordPress is incredibly popular website management and blogging platform. Customers frequently inquire about the best way to add forms to their WordPress pages and posts. Not just any forms- they want to integrate complex forms that can be HIPAA-compliant and which can submit data securely through Secure Form.

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 wants to manage all of your form data itself (insecurely), integration with Secure Form 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 Secure Form service, is to:

1. Build your form with Secure Form Form Builder
2. Embed this form into your WordPress page or post using an iframe

What is an “iframe?” It is a tool that allows you to 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 website address (URL) for that form. You need to “insert” that hosted form into your WordPress page/post, and you are all set. All FormBuilder features are 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 Secure Form management area.
2. Click on the title of the form you have built in FormBuilder and want to embed in WordPress.
3. See the “Form Address” provided for you on the Overview tab that you are taken to. Save that website 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 an actual address).
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 your page/post source 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>

Once you save your page/post, your form should show up inside it.

You might want to tweak one thing. You must specify your form’s height (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 cut off, 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 evident at all. The simplest way to handle this is to pick a height that will generally work for your form or have it 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 magic — refer to this post on StackOverflow.

What about security?

The source of your iframe is a web address that starts with HTTPS://, so the loading of that form will be secure. If using LuxSci Secure Form for HIPAA-complaint data collection, then the data processing 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), your site may not technically need to be secured or hosted at a provider that assists with securing your website.

However, if your website 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 the page’s content. In particular, that person can change the source address of the iframe to load any form they want — thus misdirecting any collected data. This is entirely possible. Furthermore, WordPress has a history of security issues — primarily 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 (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 top-rated WordPress plugins, well-vetted and actively updated by the developers.
3. Keep WordPress and your plugins up to date.
4. Consider using a dedicated server to host your WordPress site so you would not suffer collateral damage from the security issues of other customers sharing your server.

Contact LuxSci for assistance with dedicated WordPress hosting or Secure Form.