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

    How to position a field to the right of the video?

    Asked by Swoodruff2002 on July 10, 2015 at 06:49 PM

    I have embedded a video on my form aligned left.  I'd like to place the next question label on the same line aligned right so it looks like this form.  http://screencast.com/t/4tnQvgz5Z

     

    Can I get the CSS or commands to do this?

    http://www.jotform.com//?formID=51907272946968

    Thanks,

     

    Steve

     

    side by side side JotForm video label next
  • Profile Image

    Answered by Ben on July 11, 2015 at 03:27 AM

    To do that Steve, you should add the following CSS to your form:

    .form-line.form-line-column.form-col-2 {
        margin-top: 40px;
        max-width: 52%;
    }
    #id_58 {
        clear: both;
        float: none;
    }

    This is how it should look like afterwards:

    Now if you want that part with the video to be slightly more elevated - closer to the text above, then simply add this CSS code as well (next to the one above):

    #id_97 {
        margin-bottom: -60px;
    }

    To add the CSS you should follow the steps in this guide: Inject Custom CSS Codes but please note that you should add the CSS code after all the other code so add it at the bottom of the fields.

    Do let us know how it goes and if there is anything else that we can assist you with and we would be happy to do so.

  • Profile Image

    Answered by Swoodruff2002 on July 11, 2015 at 07:14 PM

    Hey Ben - Thanks for this.  I added the code in the From Styles preference, and it's moving just the label up to the line above.  the radio buttons remain on the next level down.  Did  you change the font size or label width in your example?

     

    Her's how mine is displaying now: http://form.jotformpro.com/form/51907272946968?

    Steve

  • Profile Image

    Answered by Swoodruff2002 on July 11, 2015 at 07:54 PM

    OK - I got the Radio buttons to come up.  I had a {} in the wrong place. But now I can't get this to work?

    Now if you want that part with the video to be slightly more elevated - closer to the text above, then simply add this CSS code as well (next to the one above):

     

    #id_97 {
        margin-bottom: -60px;
    }

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 11, 2015 at 11:37 PM

    I believe what my colleague, Ben, is suggesting is this: 

    When you insert the CSS codes provided by Ben, please insert it as shown on the image below.

    /* - this signifies that codes that come after it is just comments. That is why nothing happens when you insert it on your codes.

    Your form should look like this after: 

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by Swoodruff2002 on July 12, 2015 at 02:33 AM

    I've got most of it, but cam I align the top of the text with the top of the video frame?

     

    http://screencast.com/t/tnjPJ6Gb5ThK

     

    Steve

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 12, 2015 at 03:52 AM

    Your form may look a liitle bit odd on your Form Builder but once you load it or preview it it should look perfectly. 

    Kindly add this CSS codes on your form to accomplish your request from your last reply: 

    #cid_1, #label_1{

    position: relative !important;

    top: 28px !important;

    }

    It should look like this: 

    Note: If you added Ben's code to reduce the space between the video and the text above it, you may need to adjust the value of the top: 28px !important; that I have provided. 

    I hope this helps. Thank you. 

  • Profile Image

    Answered by Swoodruff2002 on July 12, 2015 at 03:33 PM

    I'm not able to make it work... Here's what I have.  I'm running out of time.  Can you fix it for me? I'm getting frustrated.

     

    Steve

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 12, 2015 at 03:57 PM

    I'm sorry if I have to cut your reply short. Please use a third-party tool like PASTEBIN, if you will be posting long codes like the CSS codes from your form. 

    I have checked the codes you have posted. I have noticed that you inserted the code I have provided above at the end of your Form's CSS codes. 

    I would suggest you try to insert it before the /* | *//*__INSPECT_SEPERATOR__*/

    as shown on the image below: 

    You can check the result by clicking the link of the form I used for testing: http://form.jotformpro.com/form/51922004837957. Please feel free to clone it to check the codes. 

    Or you can copy the codes here: http://pastebin.com/raw.php?i=BdjiVFP6

    I hope this helps. Thank you. 

  • Profile Image

    Answered by Swoodruff2002 on July 12, 2015 at 04:01 PM

    Thanks! I just cloned it.

    Steve

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 12, 2015 at 04:05 PM

    Great! Should you need any further assistance, please feel free to get back to us and we will be glad to help you anytime. Thank you.