[Resolved] Form not responding correctly once activating bootstrap

[Author]

Posts

[Charles]

Support,

I activated bootstrap to allow grids within my post forms. I'm having trouble with a few things:
1. (yellow box) - The top row (year/make/model) is displaying correctly with the bootstrap featured CSS. The row beneath is not and it has the same code structure. Notice how the boxed aren't rounded and they have no effected when clicked. How do I get both rows to show the same effects?

2. (orange box) - I used to be able to lineup the radio circles with the text through my theme style sheet, but it has been overridden once I activated bootstrap. What's the best way to align them now?

3. (blue box) - The submit button is overlapping the recaptcha.

Here's the code from the form:
[credform class='cred-form cred-keep-original']

[cred_field field='form_messages' value='' class='alert alert-warning']

<div class="form-group">
<label><b>Motorcycle Description</b></label>
[cred_field field='post_content' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>

<div class="form-group">
<div class="col-sm-4">
<label><b>Year</b></label>
[cred_field field='year' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="col-sm-4">
<label><b>Make</b></label>
[cred_field field='make' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="col-sm-4">
<label><b>Model</b></label>
[cred_field field='model' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']
</div>
</div>

<div class="form-group">
<div class="col-sm-4">
<label><b>City</b></label>
[cred_field field='city' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>
<div class="col-sm-4">
<label><b>State</b></label>
[cred_field field='state' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>
<div class="col-sm-4">
<label><b>Zip Code</b></label>
[cred_field field='zip-code' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>
</div>

<div class="form-group">
<div class="col-sm-6">
<label><b>Price</b></label>
[cred_field field='price' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']
<label><b>Mileage</b></label>
[cred_field field='mileage' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="col-sm-6">
<label><b>Title Status</b></label>
[cred_field field='title-status' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>
</div>

<div class="form-group">
<div class="col-sm-6">
<label><b>Featured Image</b></label>
[cred_field field='_featured_image' value='' urlparam='' output='bootstrap']
</div>
<div class="col-sm-6">
<b>Additional Images</b> (optional)
[cred_field field='additional-images' post='motorcycles' value='' urlparam='' output='bootstrap']
</div>
</div>

<div class="form-group">[cred_field field='recaptcha' value='' urlparam='' class='form-control' output='bootstrap']</div>
[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg' output='bootstrap']

[/credform]

Credentials can be provided if needed.

Thank you,
Chuck

[Luo Yang]

Dear Chuck,

We need to know if there is any other compatibility problem in your website, please check these:
1) You are using the latest version of Toolset plugins
2) deactivate other plugins and switch to Toolset starter theme, and test again

If the problem still persists, please provide a database dump file of your website in below private detail box, also point out the problem CRED form URL and page URL, I need to test and debug it in my localhost, thanks

[Luo Yang]

Thanks for the details, I can download the file, could you point out the problem page URL and CRED form URL?

[Charles]

The recaptcha overlap is happening on two page:
1. hidden link
2. hidden link

I'm having trouble with the other two issues (field boxed not displaying correctly and radio buttons not alighing with text) on these two pages:

1. hidden link
2. When editing a post

So it would be those three forms:
Register - user form
Post a Motorcycle - post form
Edit - toolset generated

Thanks,
Chuck

[Luo Yang]

Q1) recaptcha overlap,
It is a CSS problem, you can try below CSS codes:

div.g-recaptcha>div{
  width: inherit !important;
  height: inherit !important;
}

See screenshot: recaptcha.JPG

Q2) (yellow box) - The top row...
I assume we are talking about the CRED form "Post A Motorcycle", ID 146, I tested it in front-page, but can not find any difference between the top row and the beneath row, see screenshot:
yellow-box.JPG

Please describe more details for what you are going to display, and there is a document about "Styling CRED forms":
https://toolset.com/documentation/user-guides/styling-cred-forms/

Q3) (orange box) ... lineup the radio circles ...
Same as Q2) I did not see the "lineup" effect, I suggest you setup your custom CSS codes by following above document.

[Charles]

Recaptcha is fixed. Thank you.

I am still having a problem with the styling and can't figure out why one field is showing differently from another. See attached screenshots. One showing model field when active and the other showing zipcode when active. Model has a blue shadow and also border radius, the zip code (and city and state fields) are not showing the same styling.

Thanks,
Chuck

[Luo Yang]

I can not see same problem with the database dump file you provided, it seems you are using other custom CSS/JS codes to make the effect, I suggest you locate the CSS/JS codes, apply them to the zipcode field.
https://toolset.com/documentation/user-guides/styling-cred-forms/

And I checked the URL you mentioned above:
hidden link
I can see only a login window, but can not see the CRED form, if you need assistance for it, please provide the login details of your website. thanks

[Luo Yang]

I tried the credentials you provided, but get these errors:
ERROR: The password you entered for the username ArtillioDesigns is incorrect
You have reached the login attempts limit. Please try again in 998 minutes.

Please check it, thanks

[Charles]

Try again. I reset. Double check you are going to correct URL. Everything I submitted was correct. Other support was able to login.

[Luo Yang]

I have modified the shortcode in CRED form "Post A Motorcycle", from:

<label><b>Zip Code</b></label>
[cred_field field='zip-code' post='motorcycles' value='' urlparam='' output='bootstrap']

To:

<label><b>Zip Code</b></label>
[cred_field field='zip-code' post='motorcycles' value='' urlparam='' class='form-control' output='bootstrap']

Added attribute class='form-control' inside the shortcode, please test again, check if it is fixed or not, thanks

[Charles]

Go figure. It was missing the form control class the entire time. Wish I caught that. Thanks.

How about the radio buttons not lining up properly?

Thanks,
Chuck

[Luo Yang]

I just added below CSS codes in your CRED form:

input.wpt-form-radio{
  top:6px  !important;
}

Please test again, check if it is fixed or not, thanks

[Charles]

Yes, that worked. Thanks.

Still having trouble with featured image field alignment.

Thanks,
Chuck

[Luo Yang]

I assume your original three questions have been resolved, please create new thread for the new question, that will help other users to find the answers. thanks

[Charles]

Thanks