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.
Credit Card Info and Billing Address in 2 separate columnsAsked by jonsan32 on October 31, 2013 at 03:40 PM
I've seen and used several topics within this forum concerning css for the payment console, but I'm looking to do one thing not yet mentioned. I'd like for the Credit card info to be on the left and the Billing info to be on the right. I've included a mockup of what I want.
My form is here: http://form.jotformpro.com/form/33035436704954
And I'm using Authorize.net
Thanks in advance!
Thank you for contacting us.
Unfortunately, I am not quite sure if this is even possible with CSS injection since we use tables for Credit Card & Billing Address section.
As a workaround, we can modify the form source code in order to achieve two columns payment section layout. The form source can no be changed on the editor, so we will need to download it, change, and then embed updated code to the site. We can use table within table solution in this case:
If the form source option is acceptable for you, we can provide the instructions.
This sounds great. What would I need to do?
I think I get it. I should host it elsewhere, right? I have a public dropbox folder... Will that suffice? Only question then would be which code should I place into my blogger account to reflect these changes?
OK, sorry. jumped the gun. That was way harder than I thought. Awaiting for your instruction. Thanks...
I think Dropbox will allow you to public a form. You can use form source code
If you want to embed the form in your blogger account, we reccomend the code inttended for Blogger
However, as Mike explained to you it's better for you to modify the form source code in order to move into another position the row/columns for the address section of Authorize.net
Yes, this is right, you will need to host the modified code somewhere, and the Dropbox should be fine for this.
So this is what you can try:
2. Put your form source code between body tags.
form source here
3. Add the following code to have a wrapper table. It should be added before existing <table>:
<table style="width: 700px;" border="0">
Add the following code before the table row of Billing Address.
Add the following code after original closing </table> tag.
4. Save file and host it with Dropbox.
5. Created an iFrame with your dropbox hosted link, and embed it to the blogger.
For example, my Dropbox file path is: https://dl.dropboxusercontent.com/u/43600726/form/form.html
So, I can create an iFrame:
<iframe src="https://dl.dropboxusercontent.com/u/43600726/form/form.html" frameborder="0" style="width:100%; height:1350px; border:none;" scrolling="no"></iframe>
And add it to the Blogger:
If you have any further questions, please let us know. Thank you.
Looks great. One question, though: Will any changes I make through the jotform editor automatically update my posted form, or will I have to update the actual code each time?
Hello, whenever you perform updates on the design of your form, you may need to re-embed the updated code to your site. For updates on the email notification (email alerts) you will not need to re upload the code.
If you do need further assistance do let us know. Thank you.