Is it possible to have multiple google form in single webpage? - javascript

Currently, I am using google form in my landing page but I want to use multiple google forms in the same landing page. Is it possible to do and if yes, please tell me how can it be done?

The proper way to do it is to have one form and one submit per page. Two submits per page is just bad UI. The only exception I've seen is having a login form (only username and password) at the top, with a different form at the bottom.
Look up https://en.wikipedia.org/wiki/Progressive_disclosure, which states that making the user decide which form to fill, is bad.
Having two forms in one page, is not that different from having a single form with multiple submit buttons. Its possible, but not a very good idea.

Related

PHP: Can I submit a form within a form using AJAX?

I am modifying an existing plugin, and it has a form. The perfect place for me to add my code is at the end of the form but before the submit button. I want to add a form that will allow users to enter their credit card info, but nesting my form within the plugin's form is causing problems.
I was wondering if it would be possible for my form nesting to somehow work with AJAX. So basically, I just need 4 input areas (CC#, Exp date, CCV, amount) to be submitted that to Braintree's servers. I need to maintain PCI compliance with anything I do, so is this possible? Is it recommended? If not, what is?
EDIT - I found a question on here that made me wonder if it would be possible to separate the 2 forms but use CSS to make it look like my screenshot. Below is a quote from one of the question's answers.
Why not place the input inside the form, but use CSS to position it elsewhere on the page?
Update - I'm still confused...
It is against the standards to do nested forms like you are thinking. (See this question for more about that: Can you nest html forms?)
That doesn't mean that you can't have the form send data to multiple locations on submit. Register a submit handler for the form with two ajax methods. The first takes the four pieces of data and sends them to your server. The second grabs the rest of the data and sends it to the location specified by the form.

form values don't pass after I put script links on page

I have a multi-step form for capturing leads and generating potential client estimates. I modified a framework that I found elsewhere on the web. The form looks and works beautifully now, but I need to pass the values from the form through PHP to email. I'm not a stranger to this process, but I believe that something in the Javascript required to make the form beautiful and interactive is voiding the values that should be passing from the form to the email.
What I have done to test (trust me, I hate to bother people, but this is driving me nuts):
I eliminated the fieldsets and any other extra form-formatting, all links to CSS and Javascript. I tested the form and it worked as expected. I took the name in the name="name" field and emailed it to me no problems.
I systematically reconstructed the form until it was complete with fieldsets and CSS. I tested at every step and the form continued to pass the name into the email.
Finally, I added the javascript used for transitions and calculations to the bottom of the page and it no longer performs as expected. It triggers the PHP, but it doesn't redirect as I want it to. and it sends the labels in the email, but doesn't pass the values from the form. If I move the Javascript links to the head, the transitions don't occur making it impossible to navigate to the submit button. Any clues?
Here is the link to the form: http://bigislandwebsitedesign.com/test_form.html
You can follow the links to the various scripts from the source.

Combining 2 form actions into one form

I currently have two forms doing two separate actions.
One form subscribes a user to a mailchimp list. The other allows a user to submit their cv.
However I have two submit buttons, one for each action. I want to condense this down to just one submit.
Here is my jsfiddle: http://jsfiddle.net/GSVY8/
.
The end result should be that on submission the CV should be sent to me, and then the form for mailchimp should be submitted.
Any ideas would be much appreciated.
Cheers, Matt
You are using two different actions, so you need to different forms! Without the tag, the input button is useless anyway!
Validate the form in both client-side and server-side
So just wrap each submit button in a different form with a different action/validation and you're done!

Switch to POST from GET, need to submit a form to two different locations

[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();

Overlay an HTML page with an HTML form

this is a question about the best way (or least effort of the best ways) to overlay an html page with a form. Best in this context meaning best user experience whilst meeting the functional requirements.
Let's say I have a page with a short form on it; the user has to enter some financial details. To assist the user to enter an accurate value for one of the fields there's another, much longer form. The longer form needs to be displayed only if the user requests the help.
For users without javascript, clicking a link will submit the short form (persisting already filled fields in a session) and the server will respond with the long form. They'll submit the long form and the server will combine the submitted data with the persisted data and serve the short form again - with the fields populated.
For users with javascript I want to overlay the short form page (in a lightbox stylee) with the long form, allow them to populate the long form and then go back to the short form with less round-trips to the server.
Do I:
Overlay the short form page with an iframe whose target is the long form?
Request the long form over ajax and stuff it into a div?
Generate the long form entirely on the client-side?
Some other wizadry I haven't thought of?
A short explanation of the best mechanism will do me very nicely indeed. Thank you very much!
I'd be thinking about option #2.
When the user asks for help, load the help-form dynamically into a div that you can pretty up with a lightbox of sliding drawer effect or whatever.
If possible, I'd do all the processing of the long form on the client side, and use the results to dynamically update the short form.
I use Colorbox for this kind of stuff it's really good.
You can specify the content inline or via another URL (which is what I do). It's probably better to use this second method as it keeps your webpage a lot cleaner and only requests the form content if required. It also means you can post back to that form itself (via AJAX if required) keeping the whole experience cleaner
Check it out here - click "Tag this smiley". The form is taken from a remote URL and posted back to it inside the form using jQuery. It's obviously a simple version of what you want but works, and looks, really nice.
For your scenario where you want a decent fallback for users without javascript I would have the form on the webpage but hidden via javascript, then use Colorbox to load use that content for the popup when required.

Categories