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

    Radio and checkbox alignment problems when I embed the source code

    Asked by YoDerm on September 06, 2012 at 10:07 PM

    I have created a form which works in iFrame, but I need the source code to be embeded on my site. I am using a wordpress site and have even tried changing my theme to a blank css free theme. On all checkboxes and radio buttons, the value gets pushed down one line. I also have a similar issue when I use dropdown menus.

    alignment problem example

    Page URL:
    https://www.yoderm.com/patient-registration/sample-page/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by liyam on September 06, 2012 at 10:37 PM

    Hello YoDerm.  Upon checking your source code, it seems that there appeared a <br> tag after the radio input tag.  You may want to try edit your code again and remove the <br> tags

  • Profile Image

    Answered by YoDerm on September 07, 2012 at 01:56 AM

    Liyam, thanks for the response.

    The <br> tags arent in the html that I am inputing. wordpress is adding them when I publish. I can't figured out how to change the reformatted html. I did try deleting the <br>'s using the inspector tool, but it did'nt change the misalignment.

  • Profile Image

    Answered by fxr on September 07, 2012 at 03:30 AM

    Please review this article and see if it helps?

    http://www.simonbattersby.com/blog/2009/08/stop-wordpress-adding-br-tags/

    --

    If you are going to edit any wordpress source files, please make a backup first or at the very least remember what you have changed. 

    Thanks.

  • Profile Image

    Answered by YoDerm on September 08, 2012 at 02:50 PM

    That worked. Thank you very much!!!

  • Profile Image
    JotForm Support

    Answered by Deygus on September 08, 2012 at 03:11 PM

    On behalf of my colleagues we are happy to hear that your problem has been resolved! If you need help with anything else or have more questions feel free to give us a shout.

  • Profile Image

    Answered by YoDerm on September 08, 2012 at 03:29 PM

    So your solution worked perfectly on that 1 theme. But with every other theme, I am still having the same problem. Wordpress is not creating the <br>, but it is still misaligned.

  • Profile Image
    JotForm Support

    Answered by Deygus on September 08, 2012 at 03:49 PM

     There is an option in your forms to make sure the Radio Buttons are aligned which is usually worth looking into first. If that's not working depending on what you are doing you may need to add in something like <p align="center"> into the html coding since usually <br> isn't enough and can offset it wrong usually. If you need more help let us know.

     

  • Profile Image

    Answered by YoDerm on September 08, 2012 at 04:57 PM

    I tried changing the alignment in jotform and I tried adding the <p align="center"> into my HTML, but unfortunately, I still got the same result.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 08, 2012 at 06:30 PM

    @YoDerm

    Upon further inspection of your WP page sample, I found that the the misalignments of the radio buttons on the form is most probably cause by a CSS rule in your WP.

    A "display: block" rule seems to be taking effect on the form also since it is using the source code and thus in effect, also apply the page CSS rules. 

    Please see screen below to check where I meant it was.

    If I disable the block rule, it properly align the radio button labels.

    But I can only do it in the simulated environment of the browser tool. Perhaps you can check on this yourself since you have way to access the WP codes.

    Please try if you can apply this solution and do update us on the results.

    Thanks

  • Profile Image

    Answered by YoDerm on September 08, 2012 at 08:14 PM

    Jonathon, you and the rest of the Jotform team have provided amazing support. All of your advice was useful, and my forms are now functioning properly. Thanks!