Message Boards Message Boards

Customizing embedded webform

Posted 10 years ago

Here is a form embedded in a webpage:

enter image description here

This is the form:

fr = FormFunction[{ "name" -> "String", "question" ->  "TextArea" },   Grid[{{"your name is"}, {#name}, {"your question is"}, {#question}},  Alignment -> {Center, Baseline}] &, "HTML"]
CloudDeploy[fr, Permissions -> "Public"]

EmbedCode used is:

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

My question is how to get this form embedded in stealth mode. More specific: the background color and the form color (currently) white need to be made the same. The lower part of the embedded form is now gray and needs to be white.

Also the “powered by” wolfram bar (badge) can be simplified. The next link explains and shows even html. The question is does anyone know where to put the html code and how to connect to the embedded form.

3 Replies

For future use I am very interested in this as well. It really is essential that the user be able to format Forms in essentially any way that they wish (and yes, with user sized and formatted acknowledgments to WRI as per the license agreement). This applies to EmbedCode uses for Manipulate and similar things so that one can design web content without huge WRI-branding sprinkled throughout. This really makes sense for WRI to pay attention to if they want Cloud use to propagate. It's important to give users control. As it now stands it's a non-starter for me.

POSTED BY: David Reiss

Did some formatting testing on the webforms.

pr9 = FormFunction[{
   "x" -> "Number", 
   "y" -> "Number", 
   "z" -> <|"Interpreter" -> Restricted["Integer", {1, 10}], 
     "Control" -> Slider |>},
  (* format the answer-form *) 
      {Style["The answer is:", Large], SpanFromLeft},
      {"this is x", Spacer[10], #x , "this is y", Spacer[10], #y, 
       "this is the multiplication", Spacer[10], 
       Style[#x #y, Large, Background -> Orange]
     Background -> LightBlue, Frame -> All ], "HTML"] &,
  (* format the layout of the input-form *)
  FormLayoutFunction -> Function[
       Style["Field1", Large, Orange], 
       Style[#["x", "Control"], FontColor -> White, FontSize -> 20, 
        Background -> Red],
       Style["Field2", Large, Background -> LightBlue], 
       Style[#["y", "Control"], FontColor -> Brown, FontSize -> 20, 
        Background -> Green]},
      {#["z", "Control"], SpanFromLeft, "<- slider control", 
      }, Background -> LightBlue, Frame -> True, 
     FrameStyle -> {Thick, Gray}] 
  AppearanceRules -> 
   <|"SubmitLabel" -> "Let's multiply field1 by field2, GO!"|>

Deploy it..

CloudDeploy[pr9, "mytestform2", Permissions -> "Public"]

the form shows:

enter image description here

The form is embedded in a webpage. I was able to change all kinds of style, use Grid, Background etc. (ItemSize did not work in the grid unless of course you export the answerform to pdf. One other thing I could not change was the width of the form fields. By using grid you can influence them but since ItemSize is not working in HTML this is difficult (tried with spanning).

This is the answerform:

enter image description here

I still want to let the form blend in the colors of the website page. I still can't change the background "white" and "gray" in the form. Any Ideas anyone. @Chad, it is allowed to change the footer. See point 3 ( Btw I am happy to give wolfram "powered by" credits for this great product. The footer is just too big and unpractical. Any ideas how to change the footer?

FormLayoutFunction will do some of the things you want. For example, here I set the input labels to be White.

f = FormFunction[{"name" -> "String", "question" -> "TextArea"}, 
  Grid[{{"your name is"}, {#name}, {"your question is"}, {#question}},
     Alignment -> {Center, Baseline}] &, 
  FormLayoutFunction -> 
    Grid[{{Style[#["name", "Label"], White], Style[#["name", "Control"],  White]}, 
         {Style[#["question", "Label"], White], Style[#["question", "Control"], White]}}, Alignment -> Left]]]

I don't know how to "hide" the boxes or "simplify" the "Powered by Wolfram". The wolfram license agreement on the page you linked states: 1. You will not remove, obscure, or otherwise disable the footer attribution information and links on Wolfram-produced forms.

So maybe you shouldn't do this!

As for where to put the html, I'm not sure what you mean. The simple answer is, in a web page. When you view the web page in a browser, the form will appear basically the same as if you visit it's url directly.

POSTED BY: Chad Knutson
Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
or Discard

Group Abstract Group Abstract