Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 255
  • Last Modified:

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

My site is on WordPress and I'm trying to embed a 3rd party form from TrackVia.com 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:  http://www.airassociatesinc.com/temp/test.html

Here is what I've been able to get to so far within the WordPress site:  http://www.airassociatesinc.com/free-learn-to-fly-kit/

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!
Andrew Angell
Andrew Angell
  • 2
  • 2
1 Solution
Jason C. LevineNo oneCommented:
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.
Andrew AngellCo-Owner / DeveloperAuthor Commented:
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.
Andrew AngellCo-Owner / DeveloperAuthor Commented:
I think I got it.  Thanks!
Jason C. LevineNo oneCommented:
Yup!  Looking good.  Good job, nice styling.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now