Need some help styling this form that consists of tables...???

Posted on 2011-05-08
Last Modified: 2012-05-11
My site is on WordPress and I'm trying to embed a 3rd party form from into a page on the site.  TrackVia gives me the code to simply paste in, however, the tables/forms don't look correct at all.

Here is a sample page of what I get with the code they provide:

Here is what I've been able to get to so far within the WordPress site:

I added custom styles to get the form fields to show up with a background color and border, and I also styled the submit button, but I can't seem to figure out how to make the check box options show up nice and neat like they do on the original form.

Any information on what I can do to fix this would be greatly appreciated.  Thanks!
Question by:Andrew Angell
    LVL 70

    Accepted Solution

    In your theme's style.css you have the following:

    table th, table td {
        border: 1px solid #EEEEEE;
        display: table-cell;
        padding: 12px;
        text-align: left;

    That padding: 12px is causing the cells to really space out.  Remove it.

    Once you do that, the checkboxes and the text will not line up and that's due to:

    input {
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        color: #777777;
        float: left;
        font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
        font-size: 11px;
        height: 20px;
        margin-bottom: 8px;
        padding: 6px 0 0 6px;
        width: 194px;

    The width: 194px affects the checkboxes and wraps the text.  You can remove it, but that will affect all input tags in your site.  You may want to define a class for the checkboxes that sets a more sane width and then apply it to the form's HTML manually.
    LVL 11

    Author Comment

    by:Andrew Angell
    Ok, I'm getting closer.  I created some custom styles that you'll see in there at the bottom for #LearnToFlyForm.  I'm close now but the check boxes still aren't lining up quite right and I can't seem to figure out what I'm missing.
    LVL 11

    Author Comment

    by:Andrew Angell
    I think I got it.  Thanks!
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Yup!  Looking good.  Good job, nice styling.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
    The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now