Multiple Payment Form: How do I keep the left margin the same on all the forms?

  • Profile Image
    Asked on August 15, 2017 at 08:06 PM

    do I keep the left margin the same on all the forms?  the credit card and check forms are not aligning to the same spot as the original form.


  • Profile Image
    Answered on August 15, 2017 at 09:19 PM

    Before diving into that solution, there's one main problem in your form that needed to be fixed.

    Take note that the first 3 fields in your main form name, email and phone will not be captured when your payment forms are submitted. Why? It is because these fields are not within or part of the payment forms. Keep in mind that each form works independently. When you submit the check form, only the fields within that form will be captured. The same with the credit card form. So this also means you'll lose the values filled in the aforementioned fields.

    The solution is to put these fields within the payment forms and leave the payment method selection in the main form.


    It should look the same as this:

    And to correct the alignment issue, inject the following CSS codes within the payment forms.

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

    .form-header-group {margin-left: 0;}


    Hope this helps!

  • Profile Image
    Answered on August 16, 2017 at 07:03 AM

    thank you.  I did this and it worked.  However, the email notification is not coming out properly.  the subject line is off.  and it is saying I'm missing a field for the autoresponder email yet I can't figure out what field.  Can you help?  See attached screenshots
  • Profile Image
    Answered on August 16, 2017 at 08:15 AM

    Hello sstte18,

    I am glad to know that your issue is resolved. I have moved your second question to a new thread so that you we can address it separately. You will be answered in the following thread:

    Thank you!