Contact form 7

[Rambo]

I’ve added some CSS to my theme’s main style.css style sheet as recommended by the plugin’s developer but AJAX isn’t working and the form is a mess except for the ‘Send’ button. The form should send a message and run without refreshing like it does.

Please check it out!

.wpcf7-form .contact-form-left {
  width: 345px;
  float: left; }
.wpcf7-form .contact-form-right {
  width: 516px;
  float: right; }
.wpcf7-form p {
  color: #555555; }
.wpcf7-form input.wpcf7-form-control {
  margin: 6px 0 24px 0;
  padding: 6px 12px;
  color: #666666;
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  float: left;
  width: 320px;
  height: 32px; }
.wpcf7-form textarea.wpcf7-textarea {
  height: 200px;
  margin: 6px 0 24px 0;
  padding: 3px 12px;
  color: #666666;
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  border-radius: 6px; }
.wpcf7-form input.wpcf7-submit {
  width: 120px;
  height: auto;
  background: #5064f2;
  border: none;
  color: white;
  border-radius: 6px;
  text-shadow: none;
  box-shadow: none;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 120%;
  padding: 12px 32px 14px 32px;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  position: relative;
  top: 0; }
  .wpcf7-form input.wpcf7-submit:hover {
    top: -2px;
    color: white;
    background: #343434; }

[Rambo]

would also be nice if we can add a cool blue glow around the text fields just like with Twitter Bootstrap, but i’ll take whatever you guys provide and I really appreciate all your help. thanks i mean it!

free cookies for everyone :P

[Paulie_D]

So what’s the actual question?

but AJAX isn’t working and the form is a mess except for the ‘Send’ button.

AJAX or something else?

I can see that you are using <br> for spacing which never a good idea. That’s what margins & padding are for as well as the usual layout methods.

Also, rather than paragraphs tags you should be using <label>s

Perhaps you could make a Codepen of this form rather than force us to use Developer Tools to inspect the site.

[Rambo]

The issue is AJAX isn’t working for some reason, the page will reload when it shouldn’t. The other is the styling, I tried to style the form but looks like the button was all it did style.

[Paulie_D]

For the styling

Perhaps you could make a Codepen of this form rather than force us to use Developer Tools to inspect the site.

but you should fix the HTML & layout issues I mentioned first.

Take out all the br tags and use proper layout methods.

[Rambo]

Good idea! I don’t want to add the Bootstrap CSS just to get the fields to glow blue, if anyone can tell me what I should do to get the fields organized. Again, thanks for all of everyone’s help.

[Rambo]

Please someone can tell me how to clean up the fields and add that cool bootstrap like glow to all the fields.

[Paulie_D]

If you don’t want to add the Bootstrap CSS to get their styles

Just download a custom build of just the parts you do want.

http://getbootstrap.com/customize/

[Author]

Posts