Show/Hide widget/form.

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I know I can hide/show blocks of test from a link or button using Javascript, but is it possible to do the same with something like a wufoo form widget? I really would like a form to only appear on the target page when requested, rather than it being there all the time or having jump to another location/page within the site.

Any help/pointers appreciated.

Rob.B
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes

Posted 9 years ago

  • 1
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
i will do this right now to see if it works. and if it does i will post it here for you!!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
sometimes, the editor used to insert html codes such as a wufoo widget might accept the code, but you'll have to know how to insert them properly or the form might not show up.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
i have got the code for you Rob.B i will post it up for you in a little while.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
<!--

<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>

<script language="javascript"> function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } }</script> </div></div>

<SCRIPT type=text/javascript>

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</SCRIPT>

<SCRIPT language=javascript> function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } }</SCRIPT>

<DIV></DIV>
<DIV></DIV>
<DIV style="DISPLAY: block; CLEAR: both" id=I307 class=HTML_Default>
<DIV id=I307_html>
<TABLE border=0 cellSpacing=5 cellPadding=5 width="100%">
<TBODY>
<TR>
<TD vAlign=top width="2%" align=left><A id=imageDivLink1 href="javascript:toggle5('contentDivImg1', 'imageDivLink1');"><img style="border:0px;" src="IMG SRC HERE"></TD>
<TD vAlign=top width="100%" align=left>
<DIV id=titleTextImg><FONT color=#003df5><FONT size=3><STRONG>wufoo form</STRONG></DIV>
<DIV style="DISPLAY: none" id=contentDivImg1>

TYPE, WUFOO FORMS AND ANYTHING YOU WANT TO SHOW UP!!

</div>
-->

here is the code for you!!
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
where you have got "IMG SRC HERE" put your image URL here and "TYPE, WUFOO FORMS AND ANYTHING YOU WANT TO SHOW UP!!" you can put anything in there between <!-- <DIV style="DISPLAY: none" id=contentDivImg1> and </div> -->
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Thanks Smithy!
Rob.B, I hope this answers your question.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Smithy.

Fantastic, thanks very much
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
you are very welcome rob.b jus come back if you have may more questions.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Tried it but it messes up the format of a page (even a test page with nothing else in it) The yola link at the bottom moves to the left and white blocks appear, but not the form.

Even putting the code in with out the form code messes the page (have tried putting it through notepad) no different. Half the time the blasted HTML editor refuses to save it.

I hate that editor widget!
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Got it to work with an image but not a form widget; I really hate that HTML widget!

Thanks for trying.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
have you taken <!-- and --> ??
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
and also can you share your URL so i can have a look plz?? ty
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Rob

I'm sorry to hear that you are quite frustrated with the HTML widget. The problems that you're having though do not appear to be with the HTML widget itself as it seems to be working as it should since you were able to get the code working with your image.

This then suggests to me that the problem lies in trying to get your Wufoo form integrated with the code. Sometimes when you take two codes and mesh them together, it doesn't always work. I'm glad that you took precaution to try this on a test page.

If integrating a Wufoo form into the code is something that you'd like to try and do, it would be very helpful if you could post your Wufoo form code and I or someone else could try to see if they can get your codes to work together so that it doesn't break your page.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
I admit the HTML widget is not this issue, but it is awful, unfreindly and it does not help!
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
have you taken <!-- and --> ??

Yep

If you go to my site www.rtb2walks.co.uk then select test from the menu you will see what is happening.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Rob

Can you please post your Wufoo form code here? Then we can work at trying to get them to work.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
As requested.

<!--

<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3... src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>

<script type="text/javascript">
var z7x4z5 = new WufooForm();
z7x4z5.initialize({
'userName':'rtb2walks',
'formHash':'z7x4z5',
'autoResize':true,
'height':'604'});
z7x4z5.display();
</script>

-->
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
thats the java script wufoo form. that won't work. i use the iframe 1 and that works fine with the code!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Rob

I was unable to get Smithy's code to work. Perhaps he would be a better person to try and help you.

However, I was able to use a different code to achieve the same effect I believe. You will need to copy the iframe code though from your Wufoo form instead of using the script code.

If you're interested in using this please do the following:

Step 1:
Drag over an HTML widget and paste in the following code:
<script type="text/javascript">
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){ document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}
</script>

Step 2:
Drag over another HTML widget and paste in the following code:
<style type="text/css">
.expands{
width:100%;
cursor:hand;
cursor:pointer;
}
</style>

Step 3:
<div class="expands" onclick="showHideMe('div1')">Wufoo Form</div>
<div id="div1" style="display:none;border:1px solid #55AA55;width:100%">
YOUR IFRAME CODE GOES IN HERE</div>

You can change the following:
"Wufoo Form" - this is the title your visitor will see in the box containing the hidden form

border: 1px (thickness of border around your form)
#55AA55 - color of border

I hope that helps.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Thanks that did it. Smithy's code worked at first with an image, but never again! I don't think it likes the Style Sheet somehow. It looks as if it should do the job though.

Thanks for all your help and support.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
i got it to work on my test page. how wierd. ah i am going to do it again and see if it works!! i will post the link on here!!
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Smithy

It's great that you were able to get it working, however, there does seem to be a small problem detected. It seems to break your Yola link. Please take a look at the screenshot below.

Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
that's pretty cool... I might place my newsletter form using that code.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
or contact us on the homepage, and the contact form won't show unless they want it to show :) sounds good!
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Smithy.

Glad it works, I think my problems are down to a conflict with the style template I have chosen. Although I am now able to hide the forms it is not quite as I had envisaged.

Never mind, you can't always have what you wish for.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
it looks ok on my littleus!! check it out.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Smithy, it breaks the link in Firefox... technically its against TOS to use the code, i would go with what Littleus shares above to achieve this effect.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
im sorting it out now!!
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
does it break the link now duke in firefox?? it's http://time-to-chat.yolasite.com/test...
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
This is an easy feature you can just tick if you were using JotForm.
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Smithy.

Thanks for the feedback, had a look at your page, and copied the source, worked first time.

Wierd!

http://rtb2walks.yolasite.com/test2.php

Thanks again.

Rob (admin@rtb2walks.co.uk)
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
had a look on that site, my other 1 that i gace you the first time did work but borke the TOS of yola cos it broke the link on the yola footer thing and then i use the 1 that liitleus gave and that is the 1 that i use for the website.!!

happy site building
Photo of Rob.B

Rob.B

  • 281 Posts
  • 4 Reply Likes
Finaly got a solution for my index page, the other solution is great for my site map page.

Rob.