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

    What is the HTML or CSS inject for text layout around an image?

    Asked by HAPEN on May 03, 2015 at 12:06 PM

    I have added a text box and using HTML editor added an image. Currently, working on the form, I have additional images to add and would like to know how to change the image/text layouts.

    1.  Have text below image.

    2.  Have text right aligned to the image.

    3.  Have text left aligned to the image.

    4.  Have text wrap around the image.

     

    I know there is HTML code to this, but when I add it using the textbox editor, it does not work.  Maybe I am missing something?

    Below is an example.  I would like the paragraph to be below the image with image and text left aligned.

     

     

    I did the same the same with the top image on the form by adding breaks for a WYSIWYG approach, but I know this is not correct.

    Thanks,

     

    Page URL:
    https://secure.jotformpro.com/HAPEN/Membership_Renewal

    layout OR JotForm uploads height textbox
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 03, 2015 at 01:40 PM

    In order for you to accomplish this, you need to add some CSS codes to you Inject Custom CSS field under Preferences toolbar, Form Styles tab, of the Form Builder. 

    This is the code that you need to add: 

    #text_12 p:nth-child(2) {

    position:relative;

    float: left;

    }

    .form-all {

    height:1300px !important;

    }

    Click this to open the form I have edited already after cloning your form. You may also copy the Form URL so you could clone it.

    Here are the guides that might help you in following the instructions above.

    How-to-Inject-Custom-CSS-Codes

    How-to-clone-an-existing-form-from-a-URL

    If you have any question about the instructions above, please feel free to get back to us. Thank you.

  • Profile Image

    Answered by HAPEN on May 03, 2015 at 02:29 PM

    Thanks Mike. I appreciate the response.

    At first it looked like the issue was resolved.  However, I thought it worked, but when viewing on different devices, there were inconsistent views.  Both in design and edit mode the bottom section was either not visible or exceeded the border.   I took out the CSS inject and added breaks.

  • Profile Image

    Answered by Shadae on May 03, 2015 at 05:41 PM

    Hi,

    I do apologize that the code provided did not produce your desired results. I have reviewed your form from mobile view and it appears that you are getting the desired results after adding page breaks:

    Can you confirm that the issue has been resolved?

    Thank you.