Custom form issue

(Pomster09) #1

Hi guys

 

I've an issue with web custom forms that is now getting a little taxing.

 

I'm trying to embed two custom forms on the same page, one of them is a YES form, the other is for NO.

 

Both the forms work terrific on their own, but when nested they don't work as well.

 

The NO form which is nested on the page first is having no issues what so ever. But the YES form is not firing off.

 

Now both the form are almost identical code; they both have a hidden field which is populated with the asset ID number of another page. The only difference between the two forms is the YES form has two extra fields, Name and Email.

 

Each form has a thank you page which contain identical code as per below:

 

 

 

<script type="text/javascript">

parent.jQuery.fancybox.close();

parent.location.href = ‘./?a=%response_43959_q1%’; // obviously the response code is the only difference between the two form thank you pages


</script>

 

 

I've even added conditions to the root cache manager so they don't get cached. But whatever I try, the YES form does not fire.

 

Is there limitations to how many forms can be embedded on one page? 

 

Is there a way that I can just hard code these forms directly on the page? If so, how do I find the address of the thank you pages so I can create the correct form action.

 

It's a little frustrating to think this should be the easiest thing ever to be able to do, embed two simple forms on one page.

 

Help is needed and a big thanks up front.

 

Cheers

 

Wardy

 

(Ashish Karelia) #2

Hi Wardy,

What do you mean by Form not firing? Do you mean the on Submit isn't working or something else?
 

From what I understand you must be showing/hiding Yes/No form depending upon some condition? or is it like tabs?

 

Ash

(Nic Hubbard) #3

Have you made sure the page you are embedding them in has setting to not be cached too?

(Pomster09) #4

Yes, I've also set the no cache condition on the page with the embedded forms.

 

And yes, by firing I mean submitting.

 

Here's the trick. On a link (of which I have many different links throughout the site that I want to apply this to) I want to ask the user to to take part in a survey. So user clicks link, link contains parameter of an asset ID (where the user will go after the thank you page), the link click open a lightbox containing an iframe to which the page with the forms is loaded. User selects either YES or NO; the NO button is the actual submit button of the NO form, whereas the YES button is just a standard button with a show/hide condition to show the YES form.

 

Show hide code:

 

 

<script type = "text/javascript">
function showMessage(which) {
if (which == 1) {
document.getElementById("showYes").style.display = "inline";
document.getElementById("yesButton").style.display = "none";
document.getElementById("noButton").style.display = "none";
document.getElementById("chooseButtons").style.display = "none";
}
}
</script>
 

YES button:

 

 

<div id="yesButton"><input type="button" value="Yes, I'd like to participate" class="button green close" onclick = "showMessage(1)"/></div>
 

This is the page I'm testing the forms:

 

http://www.worksafe.vic.gov.au/forms-and-publications/forms-and-publications/how-to-make-a-worksafe-claim-a-guide-for-injured-workers

 

 

Cheers guys

(Nic Hubbard) #5

Was that link suppose to have the forms embedded? If so, they are not showing.

(Pomster09) #6

Oh, the action all happens after clicking the hyperlink (pdf download link) in the centre of the screen. This pops up the page with the forms.

(Pomster09) #7

I've had someone at work test the form this morning and they have the same result as me. The NO button works, but the YES button doesn't.

 

I'm thinking a possibility of one or many of three different problems.

 

1) the YES form is below the NO form

2) Squiz caching issues

3) It has something to do with the show/hide condition stated above.

 

Would it be easier (if there's a way) of hand coding both the forms into a single page?

 

Cheers 

(Nic Hubbard) #8

I've had someone at work test the form this morning and they have the same result as me. The NO button works, but the YES button doesn't.

 

I'm thinking a possibility of one or many of three different problems.

 

1) the YES form is below the NO form

2) Squiz caching issues

3) It has something to do with the show/hide condition stated above.

 

Would it be easier (if there's a way) of hand coding both the forms into a single page?

 

Cheers 

 

Clicking both Yes and No seem to work for me. Clicking yes it showed me the form then I filled it out, hit submit, the modal was gone and I was able to download the file.

 

Clicking no just let me download the file.

 

Is that how it is suppose to work?

(Pomster09) #9

Yes Nic, as simple as that. If I close my browser and open it again. I can hit both buttons too, but if I keep the browser open and try another link, then only the No button is working.

 

My tester at work can't get the Yes button to work at all. That's why I'm thinking it's a cache issue, but it doesn't explain why the No button always work for them also.

 

I may just redesign it vertically, so the two input fields are already showing above the Yes button, and the No button below that. It should be fine cause it's only two simple fields.

 

Cheers

(Nic Hubbard) #10

Yes Nic, as simple as that. If I close my browser and open it again. I can hit both buttons too, but if I keep the browser open and try another link, then only the No button is working.

 

My tester at work can't get the Yes button to work at all. That's why I'm thinking it's a cache issue, but it doesn't explain why the No button always work for them also.

 

Why do you need two forms? Couldn't you just show an iframe in the modal and not have to worry about this issue?

(Pomster09) #11

Good question,

 

Well the first form is a must cause they want to collect user details, so they could contact them later with the real survey.

 

The second form (No) was the easiest way I could think of passing parameters (the pdf asset ID) from the originating page through to opening it. Hence the form grabs the parameter in the URL, and passes it to the than you page, which has the javascript redirect code on it.

 

Could you think of a simpler way?

(Nic Hubbard) #12

Good question,

 

Well the first form is a must cause they want to collect user details, so they could contact them later with the real survey.

 

The second form (No) was the easiest way I could think of passing parameters (the pdf asset ID) from the originating page through to opening it. Hence the form grabs the parameter in the URL, and passes it to the than you page, which has the javascript redirect code on it.

 

Could you think of a simpler way?

 

Couldn't you just make the PDF URL or ID a javascript var then redirect later to that?

 

Maybe I am missing something...

(Pomster09) #13

I'm not sure.

 

Here's the scenario.

 

My client wants to understand if a user is actually doing something with a piece of guidance (the PDF) after they've downloaded it. So they want to send out a survey at a later date.

 

The form is to collect the user's name and email, and also a hidden field collects the PDF asset ID (as mentioned there are 20 different PDF links that this will go on) so we know the guidance that was clicked. This knowledge allows the cleint to customise the survey depending on which PDF they downloaded. The client also want to know how many people clicked NO, and the asset ID of the PDF No click.

 

It was also a request of the client that the form be presented between the click and receiving the PDF, and seeing as it's Government requirements that PDF's open in the main browser window, then there is no way of presenting a form in the same window.

 

Thoughts?

(Nic Hubbard) #14

Thoughts?

 

I think that what I would do is to build the Custom Form and abstract it away from the page. Meaning, don't nest it or anything. What I would do is to use the jQuery ajax method to post the data you need to the form, at the forms URL. That way you don't have to worry about forms caching or any strangeness. You can just worry about how to present the form and buttons to the user, then post the data with a javascript function when needed.

(Pomster09) #15

I thought about that, but I still have two forms. If I only had one form this would work perfectly. Maybe I can convince the client to forget about the No's, and just use a JavaScript construct to create the NO link to just take people to the PDF.

 

Thanks Nic

(Benjamin Pearson) #16

Perhaps, maybe something simpler by having one form, but the yes/no is a hidden field then you hard code both buttons to change the status of the hidden field and completing the form (ie. form.submit() or jquery.ajax). Then by using some magic Matrix foo, create the report of YES and NO based on that field (like DBDataSource/AssetListing or an AssetListing and JS/CSS to hide/show invalid/valid answers). And the thank you page, would simply be a JS redirect to the valid asset. Would that work?

(Pomster09) #17

Thanks guys

 

I ended up taking some of Nic's advice, while ridding the No form completely. Instead of having a No form, I just used some JavaScript to grab the parameter from the URL. Placed an empty hyperlink on the page and styled it like the original No button. Then added a listener to the JavaScript to listen for the No link click, that then opened the PDF and closed the modal window. This code was placed on Yes form, and the Yes form is called into the modal iFrame. Therefore as Nic suggested there is no need to worry about caching as it references the form directly instead of embedding it.

 

Works an absolute treat now.

 

  http://www.worksafe.vic.gov.au/forms-and-publications/forms-and-publications/how-to-make-a-worksafe-claim-a-guide-for-injured-workers

 

Thanks guys

(Nic Hubbard) #18

Thanks guys

 

I ended up taking some of Nic's advice, while ridding the No form completely. Instead of having a No form, I just used some JavaScript to grab the parameter from the URL. Placed an empty hyperlink on the page and styled it like the original No button. Then added a listener to the JavaScript to listen for the No link click, that then opened the PDF and closed the modal window. This code was placed on Yes form, and the Yes form is called into the modal iFrame. Therefore as Nic suggested there is no need to worry about caching as it references the form directly instead of embedding it.

 

Works an absolute treat now.

 

 http://www.worksafe.vic.gov.au/forms-and-publications/forms-and-publications/how-to-make-a-worksafe-claim-a-guide-for-injured-workers

 

Thanks guys

 

Awesome, glad you got it working. Just make sure to do some validation on the form fields. Right now you can click Yes and it gives you the download even if you don't fill in the fields. :)