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

    Authorize.net payment processing fields overlap each other

    Asked by loanercarllc on April 13, 2016 at 03:07 PM

    We are using the credit card acceptance form and as you can see in the image the expiration date and number/cvv2 fields are loading on top of eachother with the text (slash and colon) seperating the lines.  We tried manuvering the fields but this resulted in the page loading but as soon as you click any of the fields in question it cuts off half the field.

     

    Is there any way to get this to layout so the fields appear next to eachother or at least to remove the slash and colon so this stacks more nicely?

     

    Thanks in advance for your help.

    Page URL:
    https://form.jotform.com/61014856408151

    Screenshot
    credit card loads Authorize.net
  • Profile Image

    Answered by Ben on April 13, 2016 at 04:32 PM

    To fix this you can add the following CSS to your form:

    table.form-address-table tr:nth-child(3) .form-sub-label-container:first-child, table.form-address-table tr:nth-child(4) .form-sub-label-container:first-child {
        width: 51.5%;
    }
    table.form-address-table tr:nth-child(3) .form-sub-label-container:last-child, table.form-address-table tr:nth-child(4) .form-sub-label-container:last-child {
        width: 40%;
    }
    #input_29_cc_number, #input_29_cc_exp_month {
        margin-right: 2%;
        width: 93%;
    }

    It will set your Authorize.net payment tool into the following order:

    You can add it to your form by following these steps: Inject Custom CSS Codes

    Do let us know however if you happen to have any additional issues and we would be happy to assist with the same.

  • Profile Image

    Answered by loanercarllc on April 14, 2016 at 12:58 PM

    That worked to fix the 1st problem but now I can't edit the products how do I fix this

  • Profile Image
    JotForm Support

    Answered by Charlie on April 14, 2016 at 02:03 PM

    I presume you would like to edit the product list in your payment integration? That should be possible by selecting the payment field and click the wizard icon:

    Then click "Continue" and the "Next" button to see the product lists. Here you can select and edit the product.

     

    Let us know if you are still having problems on this.

  • Profile Image

    Answered by loanercarllc on April 19, 2016 at 01:28 PM

    I don't see the products anymore
  • Profile Image

    Answered by Ben on April 19, 2016 at 01:33 PM

    Since this issue is not the same as your original issue, I have moved this to a new thread here: https://www.jotform.com/answers/822087

    We will help you resolve the same on that new thread and will reply back shortly.

  • Profile Image

    Answered by loanercarllc on April 19, 2016 at 01:39 PM

    Ok, This is part of the old issue, when the mobile widget is used the original overlapping takes place again. How can I fix I for mobile devices

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Charlie on April 19, 2016 at 02:22 PM

    I'm sorry, I'm having a hard time understanding your concerns. When and where does the overlapping happens? Does it happen when you view the form using the direct link on a mobile device? And if the mobile responsive widget is added? The problem shown in your screenshot is more related to the payment wizard not showing the products, it was answered by my colleague on this thread: https://www.jotform.com/answers/822087. It would be best to focus on that thread for this issue.

    Here are the problems you have mentioned:

    1. Credit card fields are not aligning properly => This was resolved by my colleague using a custom CSS code.

    2. You mentioned you are unable to edit the products => I then posted the steps on how to edit the products in your payment integration.

    3. The next reply you sent, you shared a screenshot of the payment integration not showing the product list => My colleague opened a separate thread for it so that we can better discuss it and avoid confusion.

    4. Then the most recent reply you have in this thread is about the overlapping of fields in mobile display?

     

    It would be best to focus on one question per thread for us to help you further and avoid confusion. Now we'll answer your inquiry regarding the overlapping of fields in this thread, please do provide us more information on what you meant, what specific fields are having problems? A screenshot of it would greatly help us.

    I checked this form https://form.jotform.com/61014856408151, this is how it looks like in iPhone:

    We'll wait for your response.