Embedding forms into websites

Forms are the first step towards more interactive websites. Without them, no comments, no sign-ups, no ratings and no feedback. If your website doesn’t allow for easy integration of forms, you can embed forms from external services. We’ve looked into Google Docs, Jotform and Wufoo. In addition, we’re integrating our Mailchimp lists and Surveymonkey surveys with the ISEAL Alliance website.

How to embed a form

Once you have set up your form, look for the ’embed’ button. After one or two customisations, you’ll be able to copy some more or less cryptic html code, eg. for Google Docs:

<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxx" width="310"
height="0" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

You can paste this code into the page of your website you want it to appear at (in source code view). Note: Not all CMS accept the <iframe> tag. Unfortunately that included Citysoft and WordPress, the two systems I’m currently interested in.

Some form providers offer an alternative, longer embed code that includes details of all form fields, eg. for Jotform (shortened):

<form  action="http://www.jotform.com/submit.php"  method="post" name="q_form_xxxx">
<input type="hidden" name="formID" value="xxxx" />
<input type="hidden" id="spc" name="spc" value="spc" />
<input type="text" size="20" name="q8_Numberofcopiesneeded" class="text" value="" id="q8"  maxlength="100" maxsize="100" />
<input type="submit" class="btn" value="Submit" />

This should work with all content management systems that allow you to include your own html code. What happens is that instead of invoking a programme on your own server, the form action invokes an external service and submits the data there. Depending on which service you work with, you then get notified of the new entry or it is added to the relevant database there.

What worked for us

We now have a working integration with Jotform to order copies of the ISEAL Strategic Plan, and with Mailchimp for subscriptions to our mailing lists. Google Docs and Wufoo only offered <iframe> embeds (not supported by our content management system). The next step will be a meaningful integration of Surveymonkey surveys.

If embeds don’t seem to work for you, there’s always the option of offering a link to the form itself.

One Response to Embedding forms into websites

  1. Kaitlyn says:

    Another service to consider is AskItOnline. It uses a drag ‘n drop interface most similar to Wufoo (but is more “What You See Is What You Get”) and also allows you to embed the survey/form on your website. It allows you to pick themes, insert images and even lets you alter the display much more with the use of custom CSS.

%d bloggers like this: