Alternate ways to embed form?

User 2325151 Photo


Registered User
32 posts

Hello all! I've got a major issue that I'm really hoping there's a solution for.

First, this is how our page is supposed to look (it's just an image comp):
http://www.dwellingproductions.com/clients/editmysong/



Below the visible portion of the form, note the text (links) "Upload music" and "We find the music". These are supposed to be links which expand additional form content (to keep the page design streamlined). Some people will need the first option, while others will use the second.

I have the expanding function working perfectly, which you will see on the next page. My issue is that embedding the form as an iframe pushes the lower page content far too low.


Here's the page in its current form (still working on styling it, so much of the form is still not 100% style-wise):
http://www.hendricksonstudios.com/edit_my_songs/index.php



As you can see, the form works, as does the expanding portions. However, the lower page content is WAAAAAY below the form. :-)

Is there any way at all to embed this differently so that the expanding sections lower the bottom page content only when open, but otherwise the lower content is, by default, nicely situated directly beneath the form?

I've tried adding the HTML to this page, as well as "including" the PHP form page instead of using an iframe. Both of these options seem to disable the form.

I'm really hoping there's a solution or I'm hosed, since my entire design is riding on this functionality. :-)

Thanks, in advance, for any assistance.

- Jeremy
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Jeremy,

I'm not sure if this is the case or not but it looks pretty suspect to me. The following line of code within the Form section has the height set at 1501 which is extremely long. I would say try to change that value and see if that changes it or not. If so just adjust it to what you need. If not let us know. Also if it does work, let us know if you put that number in there yourself or if the program did. Seems like the program shouldn't make that number so high..but ... :)

<iframe allowtransparency="true" scrolling="no" width="365" height="1501" style="border:none" frameborder="0" src="editmysongsform/editmysongsform.html">&lt;a href="editmysongsform.php" /a&gt;</iframe>
User 2325151 Photo


Registered User
32 posts

Hi JoAnn! Thanks for your reply!

Yeah, that's definitely the problem. The program did output that number for the height. (See attached photo.) However, I'm sure it is doing that to accommodate the full length of the form (which includes the two "hidden" divs which are revealed when the corresponding link is clicked). Also, I've noticed that the program gives extra padding at the bottom to cover all possible error messages which may appear below fields marked as "required" so that none of the form is ever hidden at the bottom of the iframe.

You can see what I'm talking about here:
http://www.hendricksonstudios.com/edit_my_songs/index2.php

If I close the gap by lessening the height (in this example to "400"), the bottom of the form disappears because it is displayed within the iframe. Instead, if I could embed the actual form on the actual page (as opposed to within an iframe) The bottom content on the page would be pushed down as the form expands downward.

I have found this medthod of embedding (iframe) extremely limiting in terms of design because you would have to always make sure nothing appears below the form. Otherwise, you need to always launch the form in a separate window. However, I like keeping forms on the page, but using creative design to keep it from seeming overbearing.

Even in more standard designs, I still wind up with extra space at the bottom of the form which is really not desirable. You can see another example of this here:
http://ihelpinc.net/Employment/ApplicationJobsForm.php

(I didn't design the website, but I built the form for them using Web Form Builder.) Designing this very long form was a dream with WFB and I wouldn't have wanted to do it any other way. However, it would be so much better if there was a way to embed the actual form on the page so that the extra space could be completely eliminated. (Anyway, my question is not about that form, because I've washed my hands of it now.) :-)

Sorry for being so verbose. :-) Hopefully there's a way to accomplish this. The current design I'm working on is really dependent on this working.

Thanks again!

- Jeremy
Attachments:
User 187934 Photo


Senior Advisor
19,941 posts

How about putting your script inside a scrolling div.:)
Place in head of page

<style>
#scroll-box {background:#e6e6e6;
width:620px;
height: 800px;
padding:15px;
overflow-y: scroll;
}
</style>


Place in Body of page.

<section id="scroll-box">
Form script goes here.
</section>

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2325151 Photo


Registered User
32 posts

Hi Eric! Thanks for your input.

I was really trying to avoid having to do that. :) But, I do appreciate the idea.

I guess another option would be the multi-page form (or multi-tab) that is supposed to be in the next version. Then, the links could initiate the next form "page" within the iframe. Just a thought. I would still need to get rid of all the extra space that always shows up at the bottom of the form. :)

Has anyone successfully used the form on a page in any other way besides in an iframe? Or is that the only way the form can be used? Certainly you must be able to place the form directly on the page itself, right? (I hope so.) :)

- Jeremy
User 187934 Photo


Senior Advisor
19,941 posts

I have worked on a JQuery work around and got it working pretty good but still has a few bugs to work out. It uses this setup.
http://www.jankoatwarpspeed.com/example … o_wizard/#
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2325151 Photo


Registered User
32 posts

Hey Eric! Thanks again!

That's a really great link! That may be the way I need to go at this point if I want to use the WFB form I already have created. Otherwise, I'll just have to build the form the old-fashioned way. (yuck!) :)

Well, I'll mess around with this some more and see what I come up with. I appreciate your input!

And, if anyone does figure out a way to get around the need to use iframes to embed WFB output (or if a new version allows it), please let me know. That would be AMAZING! :)

Still very happy with the software overall, though. They've got a great thing going with this one.

- Jeremy

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.