P tags removed when enveloping DIV tags

Resolved Jason Wong
(@eljkmw)

7 years, 8 months ago
With wpcf7_autop defaulted true, I noticed that the P tags are automatically removed when they envelop DIV tags. For example, the following code
```
<p>
<div class="title">Name: <span>*</span></div>
<div class="field">[text* your-name 30/]</div>
</p>
```
turns to:
```
<div class="title">Name: <span>*</span></div>
<div class="field">[text* your-name 30/]</div>
```
I wish to have the P tags remain with the DIV tags.

Please help! Thank you.

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

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

Plugin Author

Takayuki Miyoshi

(@takayukister)

7 years, 8 months ago

You can’t wrap div elements with a p element because div isn’t a phrasing content. See the W3C spec.

Thread Starter

Jason Wong

(@eljkmw)

7 years, 8 months ago

Argh! … What was I thinking then?

Thanks for correcting me. In the end, I managed to get what I sorted out to achieve.
I wrapped P elements within a P element. The form that I managed to create is as shown.

<p>Fields marked with an asterisk (<span class="required">*</span>) must be filled in.</p>

<p><span class="label">Name: <span class="required">*</span></span>
<span class="field">[text* your-name 30/]</span></p>

<p><span class="label">Phone: <span class="required">*</span></span>
<span class="field">[tel* your-tel 30/]</span></p>

<p><span class="label">Email: <span class="required">*</span></span>
<span class="field">[email* your-email 30/]</span></p>

<p><span class="label">Subject: <span class="required">*</span></span>
<span class="field">[text* your-subject 30/]</span></p>

<p><span class="label">Message: <span class="required">*</span></span>
<span class="field">[textarea* your-message]</span></p>

<p><span class="label">Attach File(s):<br /><small>Up to 3 files only</small></span>
<span class="field">
[file your-file1 20/ filetypes:jpg|jpeg|png|gif|pdf limit:2mb]
[file your-file2 20/ filetypes:jpg|jpeg|png|gif|pdf limit:2mb]
[file your-file3 20/ filetypes:jpg|jpeg|png|gif|pdf limit:2mb]
<small>Acceptable file types: jpg, jpeg, png, gif, and pdf only.<br />
Maximum size: 2 MB per file.</small></span></p>

<span class="recaptcha">[recaptcha theme:light size:normal]</span>

<p><span class="label"></span><span class="field">[submit "Send"]</span></p>

But, how do I insert CSS into the Contact Form for the email styling? I’ve followed your Styling Contact Form instructions, but how do I include other CSS tags?

Please advise. Thank you.

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

The topic ‘P tags removed when enveloping DIV tags’ is closed to new replies.

Tags