Is it possible to set fields side by side?

  • Profile Image
    madisonstevens
    Asked on June 26, 2011 at 05:30 PM

    Rather then 1 long form page, i'd like to set some of the fields side by side, essentially creating a form with 2 columns

  • Profile Image
    abajan
    Answered on June 26, 2011 at 06:48 PM

    Hi madisonstevens

    If you wish two vertically adjacent fields to appear side-by-side, shrink both of them, starting with the bottom one. Here's how:

    1. Load the form into the form builder

    2. Right-click anywhere in the lower field and in the shortcut menu click Shrink:


    By default, shrunk fields will have their labels top aligned but that can be changed by clicking one of the fields then clicking the Label Align button and selecting something other than "Top":


    Do the same to the other shrunk field. However, it should be borne in mind that top alignment of the respective labels allows the fields to use the least amount of horizontal space, and selecting a different label alignment may necessitate changing the form's width to accommodate keeping the fields in a horizontally adjacent fashion:




    That's it. Please let us know if the provided solution correctly addressed your query and if there is anything else related to our product with which you require assistance.

    Thanks.


    ~ Wayne

  • Profile Image
    agabbydavis
    Answered on July 06, 2011 at 09:48 PM

    Wayne,

    Thank you so much for this info.. it works. But, I then found the label names a distance from their corresponding boxes.. so I went into "Form Styles" "Label width" and changed it to 93 and now the entire form brings all labels closer.. including the ones that I don't want jumbled.

    How do I increase some and decrease others (the distance between the label their corresponding boxes).  thank you.

     

    www.nobrokenhome.com

  • Profile Image
    liyam
    Answered on July 07, 2011 at 05:44 AM

    Hello,

    How about returning it back from the way it used to be and then give us the link to your form and tell us which part of your form you only want to be adjusted.  We'll find the ID and give you the CSS code for you to add in your CSS Injection.

    We'll wait for your response.

    -Liyam

  • Profile Image
    abajan
    Answered on July 07, 2011 at 06:07 AM

    @liyam I think agabbydavis is referring to the Membership Registration form (see below)


    Hi agabbydavis

    Thanks for asking. Since the current version of the form builder does not contain any tool to adjust the widths of the fields' labels individually, it is necessary to use injected CSS to achieve the result you wish (unless you are embedding the full source of the form, where you can directly edit the CSS).

    When I checked your account, I noticed that the most recently edited forms were "Membership Registration", "Submit Product" and "Speaker Request Form". Figuring that it must be one of those with which you're having difficulty, I checked them and realized that it must be the Membership Registration form (Against All Odds - "Business Success Story for Single Parents") because the Submit Product form was blank and the last one seemed to have all its fields pretty well aligned.

    So, assuming you are referring to the First Name and Last Name fields in that form, here's what to do:

    1. Copy the following CSS rules to your clipboard

    #label_1,#label_19 {
    width:93px !important;
    }
    #id_19 {
    padding-left:0;
    }

    2. In a separate browser tab or window, load the Membership Registration form into the form builder

    3. Click the First Name field, click the Label Align button and select Left

    4. Click the Setup & Embed tab and then click Preferences

    5. Click Form Styles and paste what you copied into the Inject Custom CSS field (click "Click to edit" and hit [Ctrl+V] on your keyboard to paste)

    6. Click Close Settings and save the form

    Please let us know if this solution meets your requirements and if there's anything else related to our product with which you need assistance.

    Thanks.


    ~ Wayne