Embeded iframe does not align with text on main form

Here is my main form Literature Order form https://form.jotform.com/92301208201136

I am embedding Credit Card for Literature Order form https://form.jotform.com/92315327661153

The embedded iframe is quite a bit narrower than the main form.

thanks

brad

I would not recommend you to use this workaround and use the Iframe Embed widget in this way.

I would suggest you to recreate the fields from the second form in your original form. So, they will allign perfectly.

Please recreate the fields in your main form and let us know, how it works.

We will wait for your response.

For multiple payment forms this is the recommended solution to use an embed.  Please advise how to fix the spacing/alignment.

Please try adding the next CSS to the main form:

[data-type="control_widget"] {
padding-left: 30px;
}

And the next CSS to the embedded form:

.form-line {
padding-left: 0;
}
form {
padding-left: 0 !important;
}

Mike,

That works and made everything line up just right.  I can tell from your screenshot you tested it before you posted your reply.

Great work, Thank you!  

Brad

Mike,

The embedded payment forms do not format correctly in a mobile view.  How do we fix this?  Feel free to start a new thread if you want.

Brad

Found the answer.

Got it to work by putting iframe {width: 100% !important;} into the css of the iframe widget.

thanks

Brad