- jonsan32Asked 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!
- JotForm SupportMike_TAnswered on October 31, 2013 at 05:34 PM
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.
- jonsan32Answered on October 31, 2013 at 05:36 PM
This sounds great. What would I need to do?
- jonsan32Answered on October 31, 2013 at 05:45 PM
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?
- jonsan32Answered on October 31, 2013 at 05:53 PM
OK, sorry. jumped the gun. That was way harder than I thought. Awaiting for your instruction. Thanks...
- jeanettebmzAnswered on October 31, 2013 at 06:03 PM
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
- JotForm SupportMike_TAnswered on October 31, 2013 at 07:09 PM
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.
- jonsan32Answered on October 31, 2013 at 07:26 PM
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?
- CesarAnswered on October 31, 2013 at 07:37 PM
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.