Weird fields using Authorize.net

Ok so when I generate and embed a paid member form short code I get very thin fields that are impossible to read once I put data in. I’m using the Buddy Boss template and have contact form plugins from third parties that work fine. What’s going on?

Here is screenshot:

Hello there, thanks for your inquiry.

This is probably caused by your theme/template, apparently it has some CSS that tells WordPress that the fields must be that size…

Hope this helps. :)

Ok I’m still stuck. I’m thinking that my themes default.css is not overriding the s2member.css or s2member-pro.css. I could really use some help because the form is useless as is. Here is the form section of my default.css:

}
form.standard-form#send-reply textarea {
width: 97.5%;
}
body.group-forum form.standard-form input[type=text],
body.group-forum form.standard-form textarea,
body.group-create form.standard-form input[type=text],
body.group-create form.standard-form textarea {
width: 97.5%;
}
form.standard-form p.description {
font-size: 12px;
color: #999;
margin: 5px 0;
}
form.standard-form .submit {
padding: 15px 0;
clear: both;
}
form.standard-form .editfield .submit {
padding: 15px 12px;
}
form.standard-form div.submit input {
margin-right: 15px;
}
form.standard-form div.submit input#signup_submit {
font-size: 19px;
margin: 0;
padding: 8px 12px;
background-color: #7AB3D7;
color: #fff;
border: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
form.standard-form div.submit input#signup_submit:hover {
background-color: #6799b9;
}
form.standard-form div.radio ul {
margin: 10px 0 15px 38px;
list-style: disc;
}
form.standard-form div.radio ul li {
margin-bottom: 5px;
}
form.standard-form a.clear-value {
display: block;
margin-top: 5px;
outline: none;
}
form#signup_form h2 {
font-size: 30px;
line-height: 1.3em;
margin-bottom: 20px;
}
form.standard-form #basic-details-section,
form.standard-form #profile-details-section,
form.standard-form #blog-details-section {
float: left;
clear: left;
width: 100%;
margin-top: 20px;
}
form.standard-form #basic-details-section h4,
form.standard-form #profile-details-section h4,
form.standard-form #blog-details-section h4 {
font-size: 20px;
}
form.standard-form input:focus, form.standard-form textarea:focus, form.standard-form select:focus {
background-color: #fafafa;
color: #555;
}
form#send-invite-form {
margin-top: 20px;
}
div#invite-list {
height: 400px;
overflow: scroll;
padding: 5px;
background-color: #f5f5f5;
width: 160px;
border: 1px solid #e4e4e4;
margin: 10px 0;
}
form#settings-form h3 {
margin-top: 10px;
}
form#settings-form label {
margin-top: 15px;
}
form.standard-form span.asterisk {
color: #b73f41;
}
div.page input[type=text] {
font-size: 12px;
height: 16px;
padding: 4px;
width: 300px;
}

Hello,
well, I believe this is the part of the code that affects how the text fields look:

div.page input[type=text] {
font-size: 12px;
height: 16px;
padding: 4px;
width: 300px;
}

Basically the code that’s at the bottom.

Hope this helps. :)

Having the same issue with my PayPal Pro Forms. Seems that editing my themes custom.css doesnt do anything for this form. I think S2 protects this one.

Frank, using a tool like Firebug you can easily see the IDs for the parts of the form, to use as selectors in your CSS. http://getfirebug.com

The form, if it looks weird, is probably being styled by the theme because one of the selectors it used matches something in the form. Use Firebug to inspect that and solve it.

I hope that helps. :)

@Cristián Maybe you can take a look at this page with firebug and give me some direction? I can’t seem to find the issue.

http://bit.ly/IckuxN

I did try Firebug, found defualt.css. Alterd the apropriate height and it worked in Firebug. Then repeated the same alteration in the file for real, and nothing…..

Not sure if this is something S2 is overiding?

Well i found out why it wasnt working. When i altered and saved the default.css, i then navigated to the page refreshed and nothing…. But when i deleted the cashe and refreshed it worked. It seems that you needto make sure you delete any save versions of your page and then refresh again.

Also,
With BuddyBoss dont alter the default.css, it will just be overwritten when they update it. Instead insert the changes in the custom.css file. You just need the snippet to get it done.

Thanks guys!

Thanks for the tips Frank! :)

And I’m glad you solver your problem. ;)

Well that did fix the font size issue. Is there anyway to shorten the length of the input boxes. My client does not like that they strech across the entire page.

Im looking to do the same thing, they look ugly in general that size. They should be smaller in general. I will take a look but not sure if i have the experience to get that done.

This may help: Pre Sale FAQs » Can I change the width of s2Member® Pro Forms easily? :)

This seems to have worked. Thank you.

Yes, just take your s2Member® Pro Form Shortcode, and wrap it inside a tag. Pro Forms will automatically expand to 100% width of their parent element. So wrapping them inside a tag is the easiest way.

[s2Member-Pro-PayPal-Form ... /]

or with Pro Forms for Authorize.Net®

[s2Member-Pro-AuthNet-Form … /]

Good. :)