Form don't work after styling

(@karpitsky)

Hello! I’ve styled a form with CSS Hero. After that when I’m trying to submit it doesn’t work.
Just try here: http://buh2you.ru/

Here’s is the backend form code:

<style>

.fa-lock {
margin-right:3px
}

</style>
<div align="center" class="cf7-name-bootstrap-modal">
<p>[text name-450 class:cf7-name-entry-bootstrap-modal-class placeholder "Ваше имя"]</p>
</div>
<div align="center" class="cf7-phone-bootstrap-modal">
<p>[tel tel-88 class:cf7-phone-entry-bootstrap-modal-class placeholder "Номер телефона"]</span></p>
</div>
<div align="center" class="cf7-submit-btn-bootstrap-modal">
<p>[submit class:cf7-submit-btn-bootstrap-modal-class "получить консультацию"]</p>
</div>
<div align="center" class="cf7-footer-bootstrap-modal">
<p ><i class="fa fa-lock"></i> Ваши данные в безопасности</p>
</div>

Please, help. I don’t know what’s wrong with it.

https://wordpress.org/plugins/contact-form-7/

Viewing 9 replies - 1 through 9 (of 9 total)

Neil Murray
(@buzztone)

8 years, 11 months ago
Your inline <style> element is being converted to HTML as follows:
```
<style>
<p>.fa-lock {
margin-right:3px
}</p>
</style>
```
You can use Firebug or Chrome Dev Tools to see this.

However I don’t think that is you main problem.

Visual Composer appears to controlling styling of elements within you form & causing problems.
Thread Starter karpitsky
(@karpitsky)

8 years, 11 months ago

@buzztone, thank you for your answer. what should I do to fix that?

Neil Murray
(@buzztone)

8 years, 10 months ago

I’d suggest you start by replicating the CF7 form on a separate (hidden) page that you create without using Visual Composer. That will let you confirm if the problems are caused by Visual Composer.

Thread Starter karpitsky
(@karpitsky)

8 years, 10 months ago

Strange: I’ve created a form without the Visual Composer. I don’t work. I also deactivated all plug-ins. The result is the same.
Does it mean that the problem is in the theme?
Thank you!

Neil Murray
(@buzztone)

8 years, 10 months ago

Please include a link to the Contact Form 7 form you’ve created without Visual Composer.

Thread Starter karpitsky
(@karpitsky)

8 years, 10 months ago

Here’s it: http://buh2you.ru/form-test-2/
Thank you!

Neil Murray
(@buzztone)

8 years, 10 months ago

I am getting an email sending error at http://buh2you.ru/form-test-2/. Other than that the form appears to be styling and working as expected when using Contact Form 7.

Thread Starter karpitsky
(@karpitsky)

8 years, 10 months ago

The 2nd field is a phone number. Anyway, do you have any ideas how to fix that?
Thank you!

Neil Murray
(@buzztone)

8 years, 10 months ago

I believe you may have number of different problems – possibly caused by your theme.

1. Telephone field is not validating.
To solve this I suggest you use a simple text field rather than a telephone field.

2. Adding form within Visual Composer causes styling problems.
To solve this I suggest you make sure you add the Contact Form 7 form outside of Visual Composer. (NOTE: the form added without Visual Composer does not have the styling problems.)

3. Email sending error.
This is probably an entirely separate issue that you will have to deal with for your particular WordPress install. See Contact Form 7 Email Issues. There is a link at the bottom of the page to a comprehensive and detailed article which covers many issues. Most people that work through this information appear to be able to resolve their email sending & receiving issues.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Form don't work after styling’ is closed to new replies.

Tags