Gform component was developed for creating questionnaires about advertisement. But it can be used to any purpose you can think of.

The workflow supposed to be that you create form or forms at your Google Drive, copy the source code of the form, put it into one step of the questionnaire and that's it. GForm component edits the form automatically so it just sends the form data back to Google Drive and next step loads instead of redirect to Google's thank you page.

Key features

Google Drive forms support - process responses right in spreadsheet.

Steps are loaded via AJAX, so users can't get back to previous step.

Next steps can be defined by multi select. If so, component will randomly select one of the steps. This option is great for A/B testing.

Steps can be submitted by defined countdown.

On-site validation of forms.

Menu item can point to any step or to list of steps.

Step by step guide

1) Download and install

There is nothing what has to be described. Everybody knows how to download and install Joomla component..

2) Create an introduction step

You have to input step title and content. Notice that at the image there is set count down time to 20 seconds. That means that introduction step will be replaced after 20 seconds by step defined as Next step.

At the HTML text there is code {time}. This code will be replaced at front end by JavaScript live countdown as you can see at the demo.

Right now you probably don't see anything at Next step option. That is because there aren't any yet. Leave this option empty and get back to it later.

UPDATE: Since version 1.0.1, new option was added. Use {next} tag to display link which will lead user to next step. This option can be used instead the time redirect.

3) Create form at Google Drive

Creating a new form is quite easy. Just log in to Google Drive, create new Spread sheet, add form and then edit the form. Then you'll be at similar page as you can see at the image.

There are options to add new fields of any type. If you want to add some information which users should not see, for example sessionid (described below) or distinguish form for A/B testing, just add new text field and you'll edit text input to hidden (described later as well).

When you finish your Google form, click the Go to live form button. There you'll see the form like normal user. You can sed it to email, share it and so on.

To use it at GForm component, press CTRL+U. That will open the HTML source code of the form. Press CTRL+A and then CTRL+C. That will select all source code and copy it.

4) Edit the form

Now, create new step at the GForm component. Give it a name. Switch off the wysiwyg editor and paste the source code to the HTML textarea.

You should see that code starts with DOCTYPE declaration and ends with </html> tag.

Save the step. First save will edit the HTML page you inserted so it won't redirect to Google thank you page. Now, the code in the textarea should start with <iframe> tag and end with </form> tag. Since this change the component will not change the code anymore so you can edit it if you want.

{sessionid}

For example if your questionaire consists of several steps with many forms, you can add session ID to some text field. This ID is unique for one browser. You can have 100 students in your class and give them this questionnaire to fill. Every student will have different session ID. By this ID you can merge answers from different forms into one row.

You can also change type of the field as shown at the image from text to hidden. That means nobody will see this input but the information in it will send. Delete the label also.

5) Conclusion

If you create all steps, you can edit the Next step option to define the order of steps.

If you have any suggestions or ideas, write a comment below. You can fork the component at GitHub and make your own changes. Or hire me to add features you want ;)

Tip

Rich Snippets for VirtueMart

This awesome Joomla plugin adds structured data (also called Rich Snippets or meta information) about your VirtueMart products. It generates this automatically from the actual products. The best benefit is that Google can display some of these information right in the search results.

EasyCalc

EasyCalc is component for creating realtime calculators of any type. For example if you need to explain your customers how many time / money / gray hairs atc. they save by using your product / service, let them count it for their situation.