Adding Cloud App Studio Forms into Google Sites

Some good news. We have just cracked the code on how to embed Cloud App Studio-based Forms.

A bit technical, but I think you could manage it :-)

Some pre-req's:

How to create the widget

1. App settings: make sure that users ("Anyone") have at least "Contributor" access

2. Copy this sample code into a "Page", which you can call "widget.xml" (don't really think it matters what you call it):

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs title="Cloud App Studio - Embedded Form Sample" />

<Content type="html"><![CDATA[

{{injected form-code here}}

]]></Content>

</Module>

3. Replace "{{injected form-code here}}" with the Form you want to embed into your Google Sites page

4. Add the domain (//cloudappstudio.appspot.com) to the "Inject Forms" code, which could look something like this:

<script type='text/javascript' src='//cloudappstudio.appspot.com/app/@context("app","name")/inject-form/fu680xcs?style=basic'></script>

4. Uncheck the Page-More-setting "Show with Application Layout"

5. Save the page (alt-s) and Open it (alt-o).

6. Copy the url to the page, which just displays some weird characters: ]]> (which is correct..)

Now you are ready to add your widget into your Google Sites page:

1 In edit-mode: "Insert" -> " ...More Gadgets" (bottom of first column)

2. Click "Add gadget by URL" and paste your url (to your page)

3. Preview the added gadget, modify display settings (optional) and click "ok", when done.

4. Save your Page and you're done. 

Take a look at this Tutorial and see if it helps:

Rename your submit buttons

Currently you never add a submit button to a Form in Cloud App Studio - it is always there and is always just a plain submit without any value (=label on the button).

This means it will take the locale settings from your browser and set value to "submit" or what is set the corresponding value for your language.

Until properties for a submit button is added to the Form builder, you can use a page with your Form being embedded and add the following code:

First you need to make sure jquery and jqueryUIis part of your form.
Secondly add the Form (embedded).
And last add the last script tag and modify the value of the "label"


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css" type="text/css" />

<script type='text/javascript' src='/app/@context("app","name")/inject-form/fu680xcs?style=basic'></script> 

  
<script>
  //Check if form is loaded every second, when loaded rename submit button to skicka
  function renameSubmitButton(){
  if($(".amantech-se-inject-form > input[type=submit]").size() == 0){
  setTimeout(renameSubmitButton, 1000);  
  }
    else{

          $(".amantech-se-inject-form > input[type=submit]").val("This is the new label on your submit button");
    }
  }
  renameSubmitButton();
</script>

How to format multi-value fields horizontally (not working in MIE 8)

Currently this solution isn't supported in MIE 8 - will be updated asap (2013-02-01)

To format radio buttons horizontally simply:

• create a page
• Add the following code:

<style>

#amantech-se-inject-form-fu680xcs > div > input[type="radio"], .amantech-se-inject-form > div > input[type="checkbox"] {

float: left;

  clear: none !important;

}

</style>

• Add your Form ("Components" - [alt-c], "Inject Forms" ->)

All your radio buttons will now be horisontally formatted saving valuable space for your users and making your form more user friendly.