Fixing styles on multi-payment form
-
baisshalomAsked on December 21, 2016 at 01:01 PMI'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
-
MikeAnswered on December 21, 2016 at 01:41 PMJotform SupportYou 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.
-
baisshalomAnswered 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.
-
baisshalomAnswered 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?
-
baisshalomAnswered on December 21, 2016 at 02:18 PM
Sorry, I just figured out how to hide them both by default.
-
Kevin_GAnswered on December 21, 2016 at 02:32 PMJotform SupportYes, 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.
-
baisshalomAnswered on December 21, 2016 at 02:35 PM
