Choosing one option makes more options available

  • Profile Image
    tommyp
    Asked on January 31, 2013 at 04:42 PM

    Hey guys,

    I have built a form that is basically for potential music clients to request a quote for services that I provide. These services sometimes deal with one song or multiple songs. 

    I want the clients to be able to specify how many songs they want quotes for, but I also want a new set of options to open up for each song that they add.

    For example, if they choose 3 songs, I want to know how many guitar tracks are in each song, how many vocal tracks are in each song, ect..

    Anyway, here is the form I built www.mixstudios.com/mixquote.html take a look at it and let me know if there is anyway to achieve what I'm trying to do. 

    Thanks!

     

    Edit: Also, one more thing. Is it possible to make the form background transparent?

  • Profile Image
    tommyp
    Answered on February 01, 2013 at 12:20 AM

    Anything?

  • Profile Image
    EltonCris
    Answered on February 01, 2013 at 12:21 AM

    Hi,

    That's possible with Conditional Logic on Forms. Check this example (cloned form of yours)http://form.jotformpro.com/form/30310684619957?, feel free to clone this form back to figure out the fields added and the conditions setup.

    --

    Here's a guide on making the form background transparent. How to Make the Background of a Form Transparent

    Sorry for the delay. Thanks!

  • Profile Image
    tommyp
    Answered on February 01, 2013 at 12:24 AM

    Ahhh awesome! 

    Thanks a lot.

  • Profile Image
    tommyp
    Answered on February 01, 2013 at 02:02 AM

    Another question,

    Would it be possible to assign a price (number) to each field selected? And at the end it tallys up what would be a total price at the very bottom of the form?

    My ultimate goal, would be for it to tally up a total price based on which options are selected and then the submit button would redirect to paypal with the amount ready for check out.

    Anyway you think this could happen?

  • Profile Image
    Welvin
    Answered on February 01, 2013 at 06:48 AM

    Unfortunately, that is not possible. You will have to add the items specify the prices using our Paypal Payment Tool.

     

    Thanks

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 08:59 AM

    I believe I need something more complex than what the simple paypal tool has to offer. Is there any other solution that I don't know about?

    I would like multiple options for each item and those options to add to the pricing.

  • Profile Image
    abajan
    Answered on February 03, 2013 at 09:56 AM

    @tommyp

    This can be done but it would require embedding the form into a web page and adding a custom script to the said page. If such a solution would be suitable, please state let us know what numbers are to be assigned to each field.

    Thanks.

  • Profile Image
    abajan
    Answered on February 03, 2013 at 09:58 AM

    I meant that it would entail embedding the form's full source into the web page instead of just the short form script that's currently there.

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 10:52 AM

    Do you see the form I have in place now? I would need the same features in the paypal shopping cart form. Where they can select mulitple songs (more songs columns appear) and various options for those songs. And each option represents an added/differnt price. 

    Do you think this is anyway a possiblity?

  • Profile Image
    abajan
    Answered on February 03, 2013 at 11:13 AM

    Yes, it is possible but I would need some numbers to work with: Price per song, prices of the various options and so on. Please finish building the PayPal form and I'll see what script I can come up with to dynamically change the total according to what the user selects.

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 11:16 AM

    Oh, you would code it? I wasn't expecting that. I would greatly appreciate that. 

    In reality the form I have there now would be perfect if each option that was chosen would tally up a price.

    Could you build what I have there now into a paypal form?

  • Profile Image
    abajan
    Answered on February 03, 2013 at 11:44 AM

    As an example, if a user were to order one song with the following options:

    Mix Type: Elite Mix

    Tracks in the session: Under 24

    Pitch Correction: No

    Clean version edit: Yes

    How much would that cost? What is the price per song and what is the price for each option? I need some numbers to work with. It doesn't matter if it's just an estimate for each option. That could always be stated next to whatever total is shown at the bottom of the form.

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 11:46 AM

    The pricing would go

     

    175

    175

    0

    35

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 11:48 AM

     

    Mix Pricing

     

    Instrumental Mix: $0

    Mixtape Mix: $75

    Full Mix: $125

    Elite Mix $175

     

    Track Count:

     

    Under 10 - $75

    Under 20 - $125

    Under 48 - $175

    Under 96 - $225

    Above 96 - $275

     

    Pitch Correction: $65

     

    Clean Edit: $35

  • Profile Image
    abajan
    Answered on February 03, 2013 at 12:00 PM

    Okay, thanks for the info. It may take a while to come up with a solution for this but it's doable.

    I'll let you know when I have something.

  • Profile Image
    tommyp
    Answered on February 03, 2013 at 12:01 PM

    Man, you guys weren't kidding when you said you had good support here!

    Thanks a lot!

  • Profile Image
    abajan
    Answered on February 04, 2013 at 01:07 PM

    @tommyp

    Here's a clone of your form, with calculating functionality. I can edit the script to copy the total to PayPal but the issue is what users will see once they're redirected to PayPal's payment page:


    There are four variables per song (mix type, number of tracks, pitch correction, clean version edit). So, the question is what does one put as the item price? It's my understanding that although when the donation option is chosen, the "Donation" text (shown below) can be edited, it would still be shown as a donation at PayPal. Only those with PayPal Pro accounts can change that setting at PayPal:


    With this in mind, please let me know how to proceed.

    Thanks.

  • Profile Image
    tommyp
    Answered on February 04, 2013 at 01:15 PM

    Wow, thank you so much. That is exactly what I needed.

    Hmmm. So if I want the user to be able to buy from the form directly, It would always say "Donation" Unless I get a paypal pro account?

    Oh also, I just noticed that the "Number Of Songs" isn't adding more options anymore. For some reason it just stopped working.

  • Profile Image
    tommyp
    Answered on February 04, 2013 at 01:30 PM

    If this is the case, I won't deal with the customer buying directly from the form just yet. I'll let the quote form come to me in an email and deal with it that way. At least the customer can get an idea of where their price range is.

    This will be fine. As long as I can get to the code and see what you did, I can make any modifcations necessary.

  • Profile Image
    abajan
    Answered on February 04, 2013 at 03:13 PM

    Yes, there appears to be a recent system wide bug with number fields. Initially, I thought it was just my clone. I'll submit a ticket shortly.

    As to the code, please do the following:

    1. Clone this form (How to Clone a Form from a Web Page)

    2. In your web page, replace the old form's one line code with the new form's full source (How to get your Form Source Code)

    3. Copy this code and place it anywhere after the form's code, just before the page's closing body tag

    That should do it. Let us know if you encounter any problems and we'll see how best we can rectify them.

    Thanks.

  • Profile Image
    tommyp
    Answered on February 04, 2013 at 03:14 PM

    Thank you sir,

    Your work is much appreciated!

  • Profile Image
    abajan
    Answered on February 04, 2013 at 03:24 PM

    No problem. I've submitted a ticket tagged as "Urgent" regarding Number fields no longer triggering conditions. Hopefully, it will be fixed shortly so that your form can be fully functional.

    Our apologies for the inconvenience.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 09:05 AM

    @tommyp

    Please test your form now and let me know if everything is tallying correctly. A member our maintenance team (Neil Vicente) has just fixed the issue regarding spinner fields not triggering conditions.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 09:12 AM

    You may need to refresh the page to see the difference. (In Chrome, press [Shift] and click the browser's refresh button.)

    How to clear your browser's cache

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 12:22 PM

    The example form here http://www.jotformpro.com/form/30335886062960 doesn't seem to be adding the prices anymore.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 12:34 PM

    Hi tommyp,

    In order for that functionality to occur, the form's full source needs to be placed in your web page and the custom script added to the same page at the bottom, just like you'll see in the source of my demo.

    Do let us know if you would like further clarification or assistance.

    Thanks.

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 12:35 PM

    Got ya.

    Ok, just making sure that it'll work once I do all that.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 12:38 PM

    It ought to but if for any reason it doesn't, we're always here to help.

    I'm looking forward to hearing how it works out.

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 12:43 PM

    This is what happens after copying the forms source code into the html window in wordpress.

    http://mixstudios.com/testform123.html

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 12:46 PM

    That is without the custom script.

  • Profile Image
    Answered on February 05, 2013 at 01:33 PM

    Yes, I see it. That looks awful! Not only is the styling of the form messed up but the form collapses aren't working and cannot be hidden by the spinner controller. It's probably a conflict between the page's pre-existing jQuery scripts and the native ones of the form that's causing these issues.

    Let me run some tests to see what solutions I can come up with. I've already downloaded your page to my computer. So, if you can revert the page to it's former appearance while I work on this, you may go ahead and do so.

    My colleagues may also have solutions of their own.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 06:52 PM

    @tommyp

    I've found a solution for this. Here's what to do:

    1. Delete my form you previously cloned and clone it again from http://www.jotformpro.com/form/30335886062960. (I've reduced its width a bit and arranged the Mix Type fields in all 20 sections to match each other: Some were spread over 4 columns while others were spread over 2)

    2. In the same directory (folder) where your live page (http://www.mixstudios.com/mixquote.html) resides, create a new page. It should just be a basic, blank page without any scripts or style sheets.

    3. Copy the form's full source from the Embed Form Wizard (just like you would have done before) and paste it into the new page

    4. Copy this code (the custom script wrapped in script tags) and paste it below the form's code. When done, the code in that new page should look like this, except that it would contain your form's code instead of mine. Notice how there's no other content than what I've described.

    5. Save the page as mixform.html

    6. Replace the form code in your live page with this iframe

    That should do the trick. If it doesn't, please let us know.

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 07:24 PM

    After following your steps, this is what I got http://mixstudios.com/testform123.html

    I made the mixform.html page and copied the code into it. Then I copied the iframe code you gave me into the testing123.html page. 

  • Profile Image
    abajan
    Answered on February 05, 2013 at 08:03 PM

    The mixform.html page should not contain any content besides the form's code and my custom script. It's the other elements (additional scripts and style sheets) that are causing the problem. Is your web page editor automatically inserting those other elements? (See screenshot of that page's source below)

    (Click to zoom if necessary)

    Also, the height attribute of the iFrame code I earlier provided is too short. That's my fault. Here's the corrected code.

    If it's not possible to get remove the extra scripts and style sheets from mixform.html, we'll have abandon the iFrame idea, revert to inserting the full form code into the main page and peruse that page for conflicts.

    One way or the other, we'll figure it out.

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 08:19 PM

    Yes, because of the theme. I can't edit that.

  • Profile Image
    abajan
    Answered on February 05, 2013 at 08:21 PM

    Yes, that's what I feared. Anyway, we'll try our best to resolve this.

    I'll keep you updated.

  • Profile Image
    tommyp
    Answered on February 05, 2013 at 08:38 PM

    Ok, thank you for keeping at it. I apprciate it.

  • Profile Image
    abajan
    Answered on February 06, 2013 at 06:01 PM

    Hi again,

    Have a look at this demo of how your live page could look and let me know if it's okay. If the source is viewed, you'll see the form's full code embedded there along with my script at the bottom of the page. Several rules in one of the page's stylesheets (this one) had to be overriden by the injected CSS you'll see in the source.

    Please let me know what you think and we'll go from there.

    Thanks.

  • Profile Image
    tommyp
    Answered on February 06, 2013 at 11:23 PM

    It looks the same. I don't see any differences. This should be it right?

    Do I just copy the code over?

  • Profile Image
    abajan
    Answered on February 07, 2013 at 07:24 PM

    It may not be that simple because it may depend on if you have access to the head of your page. In the demo's source you'll see that the Mootools script is enclosed in special tags. These are known as IE conditional comments and in this instance they prevent Internet Explorer 8 and below from using that script. (This morning I discovered that neither the form collapses nor the spinner that controls how many of them are shown, worked in IE 8 and I was able to determine that the Mootools script was the cause.)

    We'll get back to that issue shortly but here's the procedure for displaying the form on your page:

    1. Either remove or comment out your old form's short code that's currently in your home page. (Search for 21123861922145 [your old form's ID] in the demo's source and you'll see that the line is wrapped in HTML comment tags.)

    2. Just like before, delete your form and clone the latest version of mine from http://www.jotformpro.com/form/30335886062960

    3. Copy the form's full source from the Embed Form Wizard and paste it into your page, just under the commented out code of the old form

    4. Copy my script from http://pastie.org/pastes/6045762/text and paste it just before the page's closing body tag

    5. As earlier mentioned, wrap the Mootools script (found in the head of the page) in conditional comments. (It should look like this when you're done.)

    6. Save the page

    That should do it. In step 1, if you would rather use the last form that was cloned instead of once again cloning the latest version of my form, please do the following:

    1. Change the form's width to 620 pixels. (Click the Form Style tab and then the Form Width button, enter 620 [not 687] into the box and click OK)


    2. Align the submit button to the left by clicking it, clicking the Button Align button and clicking Left:

    (In the same toolbar, click Submit Text and change the submit button's text if you wish. Since the the estimated total would already be known to the user, I'm not sure if "Submit for Quote" is appropriate.)


    3. If the form contains any injected CSS, replace it with the following:

    .form-description {
    line-height: 100%;
    }

    table {
    border-top-color: #CCC;
    }

    td, th {
    padding: 3px;
    border-top: 1px solid #CCC;
    vertical-align: middle;
    }

    #cid_20 td {
    padding: 0 3px 0 0;
    }

    th {
    font-weight: bold;
    color: #000;
    background: #F5F5F5;
    }

    input {
    margin-bottom: 0;
    }

    textarea {
    width: inherit;
    height: inherit;
    }

    .form-radio {
    vertical-align: middle !important;
    }

    Now, back to the issue of wrapping the Mootools script. If it's not possible to that (judging by what you stated earlier about being unable to edit the theme of the mixform.html page, I suspect it isn't), your may have to overwrite the page's theme with a child theme. For details, please view the video on this page in fullscreen mode. I realize this all sounds rather tedious but it's the best route I can suggest.

    The only other alternative I can think of at the moment would be to place a notice somewhere on the page telling users of IE8 and below to use a different browser, which is somewhat tacky.

    Please keep us apprised of your progress.