Selling Gift Certificates

  • Profile Image
    massagespecialists
    Asked on December 02, 2012 at 05:58 PM

    I have a form that I've created to sell Gift Certificates on my website but I'm having trouble figuring out how to do something.

    I want my Gift Certificates options (i.e. Remedial Massage, Deep Tissue Massage, Swedish Massage) to appear in a dropdown menu and to each have a price associated with them. For example, Remedial Massage is $80.

    Once an option is selected, the user completes the rest of the form and purchases the Gift Certificate via Paypal.

    I've attached a screenshot of what I've already done. I just need the 'Select Gift Certificate' form to be a dropdown menu.

    Thanks!

  • Profile Image
    jonathan
    Answered on December 02, 2012 at 06:53 PM

    Hi,

    May I inquire if you can use the form's source code and embed it on a website.

    As is now, the best direct way to alter the behaviour of the payment field options into a payment dropdown option is to alter the code via injected Javascript code.

    Although there are workaround also that can achieved the concept you had for the form without using the source code, -- but may have to accept some give-and-take additional steps involve on the form.

    I will try to create the form idea you have without using its source code. And will update when I have it done.

    But I will also wait for your response on the source code useability.

    Thanks.

  • Profile Image
    massagespecialists
    Answered on December 02, 2012 at 07:12 PM

    Yes, I plan to embed the source code into a page of my website. Thanks for your help, i appreciate it!

  • Profile Image
    jonathan
    Answered on December 02, 2012 at 07:20 PM

    Thank you for the most prompt update.

    I will disregard then the non-source code workaround and focus on the source code method.

    I will update you again once I have a demo for it.

    Thanks.

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 01:03 AM

    Thank you! I look forward to receiving it :)

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 07:21 AM

    Hi,

    Here is my update and demo. I'll be glad have your comment/feedback about it.

    1. This the original form.

    2. This is the demo form using source code embed

    If you view the demo form source code, you will see this javascript codes added. The javascript rely heavily on the original form's field codes (almost all are static -- very basic)

    As the form itself is very basic, styling and beautifying  the form within the form builder is easy -- and just get the final source code after. I was more on the core functionality.

    Thanks.

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 04:39 PM

    The demo form is perfect! Thank you so much. How do I get this form?

  • Profile Image
    Welvin
    Answered on December 03, 2012 at 05:01 PM

    @massagespecialists,

    This Updated guide will help you: http://www.jotform.com/help/28-How-to-Clone-a-Form-from-a-Web-Page.

    Thanks

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 05:38 PM

    Great, thanks! :)

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 05:46 PM

    Ok, I've embedded it to a page of my website but when I select the gift certificate from the drop down, it says I've selected all options - see www.massagespecialists.com.au/gift-certificates

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 06:08 PM

    @massagespecialists

    Hi, please follow this steps to re-recreate the application on your end.

    1. Clone the original form (use this guide) . This is the URL http://jotformpro.com/form/23367367166966

    2. When you have cloned the original form, check the E-mail notification and Thank you page. Make sure they are to your own settings. (It currenlty does not have email notification, you may need to add new). 

    Check the paypal field. Run the payment configuration wizard again just to see that your paypal account is the one setup (and not mine). Try not to change the setup items/products for now. Just make use of what is currently setup.

    Check also the injected CSS codes in the form. To understand why the Page break field look like a submit button.

    3. Preview the original form using the form builder. To make sure it is working as is.

    4. If everything are OK on the original form, get its source code for embed.

    5. Add/Insert the form's source code to your Gift Certificate page in your website. If you do not have the page yet, you can create an html page and just add/insert the source code (like what I did in demo form, it is just an empty page with only the form's source code)

    6. Get a copy of this javascript codes. Save it to any text editor (notepad will do)

    7. This part can be a bit tricky if you don't understand much about javascript coding... so, I'll try to explain as detail as I can.

    If you look at the javascript codes, there is code that look like this: 

    if(dropDownList.selectedIndex == 1) { document.getElementById("div-item1").style.display = ""; document.getElementById("input_28_1011").checked=true;

     

    "div-item1" , "div-item2" , "div-item3" ... -- but you will not see this in the original form's source code.

    It is a code I added/inserted into the source code in the web page. If you view the source code of the demo form , you will see this codes...

    this is a <div > tag that will make the selected item/product in the paypal field display or hide according to the selected item in the dropdown.

    To simply, you will manually add/insert this codes in the form's source code. Remember to closed the </div> tag... see the image above where the divisions <div> </div> tag are positioned. (they are between each item/product)

    8. Insert the javascript code in between the <head> </head> tag of the page/html.

    9. In the source code, search for the code of the dropdown field -- it is the "<select class="form=dropdown" (click the image below to zoom in)

    10. You will have to manually add the "onchange" function of the javascipt code. This function

    onchange="changeCheckboxState(this)" . Again, you can view the demo form source code to see how I did it.

    11. Save the html page.

    Test your page.

     

    Please inform me if you have further inquiry or need more assistance about it.

    Thanks.

     

     

     


     

     

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 07:41 PM

    I can't seem to get it to work, sorry. Can you have a look please? www.massagespecialists.com.au/gift-certificates

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 07:43 PM

    This is a Wordpress website by the way, not sure if that changes anything. Tried to follow your instructions to the best of my ability. Thanks for your help

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 07:52 PM

    I understand. It maybe a bit complex if you do it within a WP page. The initial info I got was, -- we are doing it on a stand-alone page. =)

    Anyway, it should be doable also. Please allow me at a day to setup a demo using your WP page settings.

    Thanks.

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 08:11 PM

    No need to do that, I just got it to work! :)

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 08:24 PM

    Hi,

    I am not too sure if you corrected this on the website you provided earlier.

    When I check your page www.massagespecialists.com.au/gift-certificates , I can see the page is jumbled..

     

    This is because WP does not allow injection of any scripts within its page. Any kind of scripts (javascript, jscript,jquery, css..and so on..) will only be parsed by WP when injected in the html for security measure.

    The solution I am thinking of is to inject the form using the iframe code (source code). This way it will be separate instance and within its frame. WP will not parse this then.

    To do the iframe method:

    1. Create your html page using only the form's source code. This is a stand-alone page.

    2. Inject the stand-alone page (Gift Certificate html page) within an iframe in the WP page.

    If you can do this, try test it.

    I will also do it on my WP page so I can give you a demo.

    Thanks.

     

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 08:45 PM

    Yes, I see what you mean, it is jumbled.

    I have added the iFrame code to my page and it looks perfect. But how do I put this line of code <div id="div-item3"></div> in it so all options are hidden on the next page expect the selected one ?

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 10:22 PM

    Hi,

    Please test this page

    1. In your last test, you indeed embed the form's code using iframe code, but not the source code. You will not be able to customize the source code using the iframe code only.

    2. What I meant using the iframe in WP is -- use the form's source code, create the stand-alone page using the source code (like this page)

    3. When you have done the stand-alone page. Open your WP in your WP editor (see image below)

     

    4. Click on the HTML tab, and paste the iframe code that contains the URL of the stand-alone page.

    5. Save the page. Preview and check.

     

    Using the iframe + source code in my sample, this is how it look in my WP test page.

     

    Thanks.

  • Profile Image
    massagespecialists
    Answered on December 03, 2012 at 10:43 PM

    It worked! :) Thank you so much for your help!!! 

  • Profile Image
    jonathan
    Answered on December 03, 2012 at 11:24 PM

    Yes. I could see you are on the right track on this.=)

    You may also like to specify the iframe height to 1123px ot miminize the white space below the frame.

    OR

    try adding this script in the form's source code

    <script language="javascript" type="text/javascript">

      function resizeIframe(obj) {

        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

      }

    </script>

    then on the iframe code add the script like this

    <iframe name="Stack" src="//www.massagespecialists.com.au/wp-content/themes/amplitude/Source-Code-Gift-Certificate-For-Iframe.html" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />

     

    I have not tested this yet, so, might not work as intended.

    Feel free to contact us again anytime. =)

    Cheers.