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

    Credit Card Info and Billing Address in 2 separate columns

    Asked 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!

    Page URL:
    http://form.jotformpro.com/form/33035436704954

    Screenshot
    credit card separate columns billing address
  • Profile Image
    JotForm Support

    Answered by Mike_T 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.

  • Profile Image

    Answered by jonsan32 on October 31, 2013 at 05:36 PM

    This sounds great. What would I need to do?

  • Profile Image

    Answered by jonsan32 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?

  • Profile Image

    Answered by jonsan32 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...

  • Profile Image

    Answered by jeanettebmz 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

  • Profile Image
    JotForm Support

    Answered by Mike_T 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:

    1. Create an HTML template.

    2. Put your form source code between body tags.

    <body>
    form source here
    </body>

    3. Add the following code to have a wrapper table. It should be added before existing <table>:

    <table style="width: 700px;" border="0">
    <tbody>
    <td>

    Add the following code before the table row of Billing Address.

    </table>
    </td>
    <td>
    <table>

    Add the following code after original closing </table> tag.

    </td>
    </tbody>
    </table>

    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.

  • Profile Image

    Answered by jonsan32 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?

  • Profile Image

    Answered by Cesar 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.