JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Altering the Authorize.net payment formAsked by tyreid on April 21, 2012 at 09:17 PM
I tried copying the source code for the Authorize.net 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 Auth.net
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.
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.
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
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!
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:
Billing Information: [first name] [last name]
Can you show me which elements in the authorize.net payment form code I need to paste into the Autoresponder?
I think I missed the important part. I see how you've added the authorize.net 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 authorize.net HTML element and replace it with the original authorize.net payment tool. Then download your form's source code, here's how: http://www.jotform.com/help/104-How-to-download-a-source-code-of-your-form. 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!
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?
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="http://www.yourwebsite.com/form.html" 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!
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 authorize.net 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? http://testdrivetech.com/order-an-inspection/
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.