Fixing styles on multi-payment form

baisshalom
Asked 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
Mike
Answered 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.
baisshalom
Answered 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.
baisshalom
Answered 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?
baisshalom
Answered on December 21, 2016 at 02:18 PM

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

Jotform Support

Answered 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.
baisshalom
Answered 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?