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

    Fixing styles on multi-payment form

    Asked by baisshalom on December 21, 2016 at 01:01 PM

    I've followed these directions and wound up with this: https://form.jotform.com/63354232937155

     

    Technically it works but how do I "clean" it up in terms of look and style?

     

    Also, how do I get the exact iframe sizing of both forms, currently I just chose an arbitrary large number for the width and height which is also making the main form look "off"

     

    Thanks



    This is a re-post of a comment on How to Create a Basic Multiple Payment form

  • Profile Image
    JotForm Support

    Answered by Mike on December 21, 2016 at 01:41 PM

    You can try the following:

    1) Increase a width of the main form to fit your embedded form.

    Example:

    The iFrames will not adjust their sizes automatically, so you will need to set the width and height parameters for them too.

    2) Add the next CSS to your embedded forms in order to remove margins, paddings and backgrounds from them.

    @media screen and (min-width: 1024px) {

        .jotform-form {

            padding-top: 0;

        }

    }

    @media screen and (max-width: 1024px) and (min-width: 768px) {

        .jotform-form {

            padding-top: 0;

        }

    }

    @media screen and (max-width: 768px) and (min-width: 480px) {

        .jotform-form {

            padding-top: 0;

        }

    }

    .supernova,

    .form-all {

        background: transparent !important;

    }

    .supernova .form-all {

        box-shadow: none;

    }

    .form-all {

        margin: 0;

    }

    .form-line {

        padding: 0;

    }

    Thank you.

  • Profile Image

    Answered by baisshalom on December 21, 2016 at 01:52 PM

    Thanks.

    Is it possible to place the user information on the main form and only have the payment type on the embedded forms?

    My thinking is why should and entire form be swapped when the only part that needs to change is the payment choice? Also, if the user switches in middle he would have to re-enter everything again. 

  • Profile Image

    Answered by baisshalom on December 21, 2016 at 02:17 PM

    Also, how can make both embedded form hidden by default and only show the one they choose?

  • Profile Image

    Answered by baisshalom on December 21, 2016 at 02:18 PM

    Sorry, I just figured out how to hide them both by default. 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 21, 2016 at 02:32 PM

    Yes, you could ask for the basic data in the main form, for example, place the fields in the screenshot below in the main form and at the end just the field to ask the type of donation: 

     

    Also, if the user switches in middle he would have to re-enter everything again. 

    As the form is currently set up, asking for the user's info in both forms, they will need to re-enter if they change their mind and switch from one time to recurring donation, but if you place the fields asking for user's  info in the main form then the info will remain there and only te payment section will be changed. 

    Now, since you're using PayPal I think there is a way to have both payment types in the same integration, you only need to set up your payment integration to sell subscriptions instead, then set up the one time donation as shown in the screenshot below: 

    The recurring donation should be set up as normal and here is a screenshot about it should look like: 

    And here is the link to one of your forms that I cloned and made this change: https://www.jotformpro.com/form/63555707133961 

    Feel free to lone it, here's the guide: How-to-Clone-an-Existing-Form-from-a-URL

    Hope this suggestion helps. 

  • Profile Image

    Answered by baisshalom on December 21, 2016 at 02:35 PM

    Thanks, the link to the clone is no good and also, I'd like to test the submission and auto emails so I filled out the form and pressed submit but did not complete the paypal part. Then I went to the inbox like normal to "complete" the submission but the inbox is empty?