How can I place text between to "radio" fields on the same line?

  • Profile Image
    Asked on December 16, 2011 at 01:54 AM

    I'm trying to recreate the "Questionnaire" section of a form (see screenshot)? I'm going bald trying to make this work...

  • Profile Image
    Answered on December 16, 2011 at 03:13 AM


    For the form input you can use the css codes below:

    .form-all input {


    padding:2px 10px 2px 10px;




    I'm still searching for the radio buttons, we'll just let you know once we find some solutions for that.

    I hope that helps.Let us know if you have further questions.

  • Profile Image
    Answered on December 16, 2011 at 07:55 AM

    Thanks for the input form coding... I'm learning how this "inject css" feature works in 24 hours... The layout for radios in same line as the OR text is not going to be easy.



  • Profile Image
    Answered on December 16, 2011 at 08:14 AM

    Hi Dave,

    Thanks for your quick response. Yes, I'm afraid it can't be memic anymore without touching form's source code as stated on this tutorial

    If some of my colleagues has solution on this, we'll let you know. Thank you for using JotForm!

  • Profile Image
    Answered on December 16, 2011 at 10:55 AM

    Understood... I've been using the forms within the Jotform platform...

    So, I assuming that I could create as much of the form as possible within Jotform (including functionalility) and take 'raw' code of html, css and java etc and place on website server using external css... Is this approach possible and how is it done??



  • Profile Image
    Answered on December 16, 2011 at 12:30 PM

    Yes. It is possible.

    The process of downloading the source code is detailed here

    You then have a zip archive on your computers hard drive.

    You need to extract that archive and upload the files and directories to your webserver. Remember to keep the file structure.

    The drawback with this approach is if you make any changes to your form on JotForm you will need to reupload the HTML file back up to your webserver.

    Your submissions and email notifications will work in the same way if the form was hosted on JotForm. 

    Please let us know if you need any further clarification on any of that. We are here to help as much as we can. 

  • Profile Image
    Answered on December 16, 2011 at 01:19 PM

    Thanks... Understood..

    Is it possible to create the form layout referenced above using the JOTFORM "Inject CSS" system?

  • Profile Image
    Answered on December 16, 2011 at 06:38 PM

    Yes! and I can't find any problem on the form input using different browsers but for the radio button styling (using only CSS) that would really look buggy. You have to use your form source code and apply the same method here for the radio button style.

    Let us know if you have further questions. Thank you so much!

  • Profile Image
    Answered on December 16, 2011 at 07:17 PM


    There is no way you can the 'OR' in there using CSS. (not to my knowledge anyway) 

    If you are able to get the completed forms source code up onto your website, we should be able to help you make the edits to the forms source code to get the 'or' in there. It should be fairly straightforward.


  • Profile Image
    Answered on December 16, 2011 at 10:11 PM

    I've created all of the 'form fields" that I need on the form via Jotform, including paypal integration. Once I make any mods to this form "external of Jotform", should I import it as a new form into Jotform, so that I can use more features??? All I need to do now is to format styling... I will not change the Jotform css selectors etc...

    Anyone want to share their top 5 tips for this process with us?

    any thoughts?


  • Profile Image
    Answered on December 17, 2011 at 02:51 AM

    When editing your form outside JotForm, it's alright to alter the layout and CSS, but once you will need to add or edit a field, make sure that you have the same field name values of the one being edited or being added.

    My suggestion for this process is this:

    1. Edit your form here in JotForm
    2. Get the updated source code
    3. Find the new tags in your new source code and then paste it to your HTML page. Modify the layout as you wish
    4. If you have e-mail notifications set to your form, make sure you update it as well as the new fields or edited fields won't appear properly in your e-mail alert notification


    Here are some few important factors to consider when editing your form outside JotForm

    1. Do you have conditions set to your form? If so, then make sure you have the proper ID, Name, and Class attribute values of the form tags (Not sure about class if it's being used by the JS library aside from CSS).

    2. You can alter or remove the CSS reference to your liking. The form can run with just the javascript and the form tags.

    3. Renaming the field label or questions on your form via JotForm editor will rename the field name or the textbox or textarea.  Renaming the values for checkbox and radio buttons will have the similar effect. So make sure to check the name attributes of the form tags when editing your form's questions.