Form is formatting oddly

  • Resolved mattfcom

    (@mattfcom)


    8 years, 11 months ago

    Hello,

    I just installed the plugin and the Google Form is showing up in an odd fashion when added via shortcode.

    My form can be viewed here

    As you can see the field forms are on the left when they should be on the right. I have already attempted to switch the “column order” via the default options but that has not changed the layout.

    I do have the extra break (br) option enabled because the form fields were sprawled aimlessly across the screen before I did that – now they are in a nice neat column but not aligned properly with the ss-secondary-text (question text).

    I am just wondering if there is another default option to enable or disable or even a css hack that could help rectify this issue.

    Thanks for your time,

    https://www.ads-software.com/plugins/wpgform/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Mike Walsh

    (@mpwalsh8)

    The labels are not actually on the left of the fields, your first label “School/Business Name: *” is at the top of the form then there is a break after that, then the field followed by the label for the subsequent field.

    Turn of the BR option and column ordering and let the fields be scattered across the form. It will be easier to fix with CSS when it is in that state. More than likely it can be fixed with a display:block or display:inline-block applied the proper element(s).

    Thread Starter mattfcom

    (@mattfcom)

    I have disabled the extra br

    Is there a particular class or id of an element to format via css?

    I tried the universal selector (*) the form fields class (.ss-q-short) and the containing div (div.wpgform-first.wpgform-last.wpgform-column) separately and nothing changed with a display: block; or display:inline-block; using the css editor inside the plugin.

    Plugin Author Mike Walsh

    (@mpwalsh8)

    Try adding the following Custom CSS to your form definition:

    div.ss-form-entry {
    display: inline-block;
}

input.ss-q-short, textarea.ss-q-long {
    width: 350px;
}

    You can change the 350px to however wide you want the input fields. If you want input fields and text areas different sizes, separate it into multiple CSS rules.

    Thread Starter mattfcom

    (@mattfcom)

    Worked perfectly when added to my custom .css – thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Form is formatting oddly’ is closed to new replies.