Altering the payment form

  • Profile Image
    Asked on April 21, 2012 at 09:17 PM

    I tried copying the source code for the payment form, pasting it in an Free HTML text box and altering things as I pleased - the main thing being changing the wording from "Credit Card" and "Credit Card Numbers" to "Debit/Credit Card" and "Card Numbers". I also moved the cardholders name below the card info for a more intuitive process.

    A) There's not another way to do this is there?

    B) The payment autoresponder was all screwed up by this process- any ideas as to how to straighten it out to look like a normal receipt?

    C) it seems to work fine communicating with

    D) These would be great features to see in the future: more customizabilitiy! It's worth noting that due to the Durbin Ammendment, merchants can save a ton of money by asking customers to use Debit Cards. Changing the language to reflect this option helps everyone.

  • Profile Image
    Answered on April 22, 2012 at 11:27 AM

    To my knowledge in order to modify the payment form you will need to download the full source code and format the fields according to your needs before embeding it to your website. I'm not sure whether copy the code to a free text html field would work nevertheless can you post the page url where we can find the form with the formatted payment so that we can take a closer look.


  • Profile Image
    Answered on April 23, 2012 at 03:51 PM

    Form url added above - this is an attempt at adding the payment form to a Free Text HTML box. The problems are:

    a. Visual alignment/padding

    b. Autoresponder doesn't communicate with Free HTML.

    I'm using Wordpress and embedding the source code in an HTML is a mess - any solutions to either using the Free Text box or embedding the source code in Wordpress?

    The primary changes to the payment form are small:

    -Changing "Credit Card" to "Debit/Credit Card"

    -Changing subheader "Credit Card Number" to "Card Number"

    -Moving Name Field below Exp Date


  • Profile Image
    Answered on April 25, 2012 at 06:40 PM


    We're truly sorry for getting back to you so late.

    a. You can customize or adjust the visual styles using Inject Custom CSS Codes feature or you can simply add HTML codes to your free text element. May we know what changes you'd like to apply so we can help you further with this?

    b. Free Text HTML will not be included in your autoresponder but you can always copy and paste the free text html content to your autoresponder. It's easy, notification and autoresponder are highly customizable.

    With regards to your wordpress question, have you tried embedding your form using iFrame code? If not, please give it a try and let us know if this doesn't work for you so that we can further assist you.

    Thanks and have a great day!

  • Profile Image
    Answered on April 28, 2012 at 06:11 PM

    Thanks for the response. I'm not sure how to modify the free text html with inject CSS - I understand the concept for other elements. The priority for me is actually figuring out how to get the autoresponder to cleanly output a receipt from the free HTML box's copy of the payment form. The visual stuff I think I can figure out.

    Ideally the receipt would look like:

    Payment: [amount]

    Billing Information: [first name] [last name]


    Can you show me which elements in the payment form code I need to paste into the Autoresponder?

  • Profile Image
    Answered on April 28, 2012 at 10:55 PM


    I think I missed the important part. I see how you've added the codes. I'm sorry to say about this but what you are trying to achieved will not work. However, there's another way to do this, it's downloading your form's source code and modify the text there.

    First, you have to delete the HTML element and replace it with the original payment tool. Then download your form's source code, here's how: You should be able to edit the "Credit Card" text's. Of course, your form autoresponder wont be affected, you can still customize it the way you want.

    Hope this works for you. Let me know if you need any further assistance. Thanks!

  • Profile Image
    Answered on April 29, 2012 at 01:08 AM

    Thanks for the response- the trick is figuring out how to use this method in a Wordpress page. I understand the concept of modifying the original form's source code, but when you paste it into a WP html page, it doesn't come out pretty. Hence the Wordpress part of the question. Any ideas there?

  • Profile Image
    Answered on April 29, 2012 at 02:09 AM


    Thanks for your explanation. I see, so you are embedding it on wordpress. I'm sure what's happening is the default wordpress style is overwriting the Jotform styles which causes the form not to display well. What I can suggest for you right now is to embed your form using iframe but you still need to use your downloaded forms source code. After editing your form source code, upload it to your website then embed it using this iframe code:


    <iframe allowtransparency="true" src="" frameborder="0" style="width:100%; height:700px; border:none;" scrolling="auto"></iframe>

    Simply replace the highlighted link to your form link and adjust this iframe height (700px) to fit it exactly with your form.

    Furthermore, the advantage of using iFrame is that it wont create any code conflicts to your wordpress site since form is called in iFrame.

    Hope you get what I mean here. Be sure to update us if you need any further assistance. Thanks!


  • Profile Image
    Answered on February 11, 2016 at 04:35 PM

    I am glad this question is still open... I am having a similar issue that I can't seem to figure out.  I am using the pre-built payment tool and the text area  & labels for the credit card, security code and expiration date are confusing customers as they are laid out.  Is there a way to edit where the labels are placed? I have played with the spacing and sizes and even the columns but nothing changes the payment tool area in the designer.  This is a deal breaker for me moving to the next level of monthly fee for jotform.  Anything I can do?
  • Profile Image
    Answered on February 11, 2016 at 10:17 PM

    Since this is an older thread, I have created the following thread that will be answered shortly

    This is to give you a better support and get confused with this thread.