What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Add Membership and Donation to the Same Payment Option

    Asked by HWESPTA on August 29, 2013 at 04:19 PM

    I would like to add an open donation button to a membership produt.

     

    So, It would be:

     

    Membership: $15

    Donation:

     

    The user could add any donation amount they wanted to.

     

    Has anyone done this?

    Page URL:
    http://hwpta.org/membership.htm

    donation
  • Profile Image

    Answered by Cesar on August 29, 2013 at 06:23 PM

    Hello, form what I understand, you wish to create a form where you have a membership purchase and an additional donation box, where the user can add a custom amount.

    Find below an example form that I just created, where you have the membership as a required purchase and a donation option where you can add an aditional custom amount. 

    You can have the membership set as not required as well. I've also added some additional CSS code to remove the $1.00 amount the was to the left of the word Donation.

    This is my example form:

    http://form.jotform.co/form/32407129950857

     

    This is how I set up the donation box, and how I got to hide the amount next to donations
    (To have a cleaner form):

     

    First, this is how I added the Donation Box, on the payment wizard I used multiple products and selected the option to show the Total Amount:1

    We then add a new option on the Donation Box

    2

    The option we are adding a text box to the donation option. So the user can add any custom amount to donate.

    3

    This is the code we are looking to remove so the Donation option doesn't say $1.00 USD

    4

    The CSS Code we are going to inject is the following:

    #input_3_1004_price { display:none; }

    5

    http://form.jotform.co/form/32407129950857 Please test the form. Tell us if this works out for you.

    If you do need further assistance, do let us know. 

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 07:39 PM

    Thanks. this is amazing.

     

    I followed all of it, except I can't figure out where/how to remove the code: span id=.....

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 07:45 PM

    How do I remove the text: "span id=....."

  • Profile Image

    Answered by Cesar on August 29, 2013 at 08:01 PM

    You must go to Preferences, Form Styles and add it to the Inject Custom CSS.

    An easy way to get the code is by using the Inspect Element option when right clicking the area, using Google Chrome. This may be a bit tricky if it's the first time you are doing this. Please reply with your FormID (the address to your form) if you need help with this.

    1

    To enable the or disable the check option you can go to the following options:

    Click on the wizard on the to right corner.

    1

     

    2

    Leave the options as we have them set and click on next

    3

    Click on Membership
    Then click to check or uncheck the Required field.
    Then click on Save Product your changes and click on Next until the Wizard completes. 

    4

    If you need further assistance do let us know. Thanks.

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 08:19 PM

    I added the custom text, but cannot find a way to remove the "Donation" box

     

    See here: <script type="text/javascript" src="//form.jotformpro.com/jsform/32405952799971"></script>

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 08:24 PM
  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 08:28 PM

    This is what it looks like, how does this change the embed code? 

     

    http://form.jotformpro.com/form/32405952799971?

  • Profile Image

    Answered by Cesar on August 29, 2013 at 08:37 PM

    Thank you for posting the FormID, I can see that on your form value you would need to hide is: 

    input_12_1002_price

    Do make sure that the value you have injected to hide on your CSS code looks like this:

    #input_12_1002_price { display:none; }

    Do let us know if this works for you. If not I can also try to do this for you if you allow me to.

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 08:38 PM

    I figured it out. My id had a different number from yours it is all good now.

     

    Thanks.

  • Profile Image

    Answered by Cesar on August 29, 2013 at 08:46 PM

    Great! Those are good news.

    If you do need further assistance do let us know. Thank you for using JotForm.

  • Profile Image

    Answered by HWESPTA on August 29, 2013 at 08:50 PM

    It was very helpful. This is what the new forms look like:

     

    http://hwpta.org/membership.htm 

  • Profile Image

    Answered by Cesar on August 29, 2013 at 09:00 PM

    I see you got it to work properly. It's a great looking form!

    Again, if you do have any other issues, do let us know. And we'll do our best to help you out.

  • Profile Image
    JotForm Support

    Answered by guilledutra on September 26, 2013 at 08:51 AM

    Hi,

    for some reason your last post comes empty, could you re-post it using this link http://www.jotform.com/answers/262065

    Thanks

  • Profile Image
    JotForm Support

    Answered by guilledutra on September 26, 2013 at 08:52 AM

    Hi,

    for some reason your last post comes empty, could you re-post it using this link http://www.jotform.com/answers/262065

    Thanks