Email field disrupting surrounding text

I see you are using Contact Form 7 Skins to style your Contact Form 7 Forms.

At this stage I can’t understand the problems you are having. Can you please describe your problem in more detail.

Thanks for looking at this Davmerit! I was just going to post it to Contact Form 7 Skins.

Let me try again.

There are now four places on the form that do this. I added checkboxes in two places and they both do this.

Here’s code for one” ` <p>Primary Insured: [checkbox cf7s-checkbox-02 “self” “spouse” “other”]</p>’

Here’s link to site

Here’s code snippet of one offending area:

<fieldset>
<legend style=”font-weight: bold;”>Referral info</legend>

1. Referred by: [text text-886 id:ref_name size:20 placeholder "referrer Full name"]
2. Phone: [tel tel-843 id:ref_phone placeholder size:14 “(555) 555-1212”]
3. Agency Name: [text text-349 id:agency size:15 placeholder "agency name"]
4. Fax: [tel tel-843 id:ref_fax placeholder size:14 “(555) 555-1212”]

<li style=”font-style: italic;”>Please email me your newsletter – Email: [email email-239 id:nl-email placeholder “email”]

<p>We are interested in a presentation. Email us at [email protected]</p>
</fieldset>

Screenshot: !https://awesomescreenshot.com/0f759u11a0

Here’s a snippet of a slightly different case:

<li style=”font-weight: bold;”>[checkbox cf7s-checkbox-01 “Office” “Home” “Facility””Video”] Email:<b style=”color:red;”>*</b> [email* label_first email-893 id:place_email 20 placeholder “email”]

So some are in <p> tags, not an email field issue, all in fieldset tages.

Any other questions or ways I can help you point me in the direction of a solution?
Scott

Screenshot may expire soon…let me know and I’ll do another.

Thank you, I have seen your screenshot. I think I understand your problem now.

Please supply me with all your form inputs so that I can look into this problem carefully.

By this I understand the form HTML:

[response]

<fieldset>
<legend style=”font-weight: bold;”>Client Information</legend>

1. Date: [date date-382 id:date size:10 placeholder “mm/dd/YYYY”]
2. DOB: [date date-382 id:dob size:10 placeholder “mm/dd/yyyy”]
3. Client’s Name: [text cf7s-name size:20 placeholder "client's Full name"]
4. Street Address: [text text-674 id:st_address size:20 placeholder "123 Any Street"]
5. City: [text text-674 maxlength:15 id:city size:10 city placeholder "New York"]
6. State: [text text-674 id:state size:3 placeholder "CA"]
7. Zip: [text text-674 id:zip size:6 placeholder "10011"]
8. Home Phone: [tel tel-643 id:home_tel size:14 placeholder “(555) 555-1212”]
9. Cell Phone: [tel tel-643 id:cel_tel size:14 placeholder “(555) 555-1212”]
10. SS#: [number number-735 id:ss size:16 placeholder “555-55-5555”]

<fieldset>
<legend style=”font-weight: bold;”>Referral info</legend>

1. Referred by: [text text-886 id:ref_name size:20 placeholder "referrer Full name"]
2. Phone: [tel tel-843 id:ref_phone placeholder size:14 “(555) 555-1212”]
3. Agency Name: [text text-349 id:agency size:15 placeholder "agency name"]
4. Fax: [tel tel-843 id:ref_fax placeholder size:14 “(555) 555-1212”]

<li style=”font-style: italic;”>Please email me your newsletter – Email: [email email-239 id:nl-email placeholder “email”]

<p>We are interested in a presentation. Email us at?[email protected]</p>
</fieldset>

<fieldset>
<legend style=”font-weight: bold;”>Required for Psychological Testing:</legend>

1. Referring MD name:[text text-571 id:refMD size:20 placeholder "referring MD"]
2. Phone:[tel tel-488 id:refTel placeholder “(555) 555-1212”]

<p style=”font-style: italic;”>Chart ? Notes ? Are? Required ?? Fax? To?? 858-244-0990.</p>
</fieldset>
<fieldset>
<legend style=”font-weight: bold;”>Insurance Information Required Below:</legend>

1. Medicare number: [number number-698 id:mc-num size:15 placeholder “Medicare #”]
2. Primary Insurance Name: [text text-783 id:p-ins-name size:20 placeholder "primary ins"]
3. ID#: [number number-698 id:p-id-num size:15 placeholder “ID #”]
4. Group#: [number number-698 id:p-gp-num size:20 placeholder “group #”]
5. Secondary Insurance Name: [text text-783 id:s-ins-name size:20 placeholder "second ins name"]
6. ID#: [number number-698 id:s-id-num size:15 placeholder “ID #”]
7. Group#: [number number-698 id:s-gp-num size:20 placeholder “group #”]

<p>Primary Insured: [checkbox cf7s-checkbox-02 “self” “spouse” “other”]</p>
</fieldset>
<fieldset>
<legend style=”font-weight: bold;”>MD Information</legend>

1. Primary Physician Name: [text text-840 id:p-doc-name size:20 placeholder "primary MD name"]
2. Phone: [tel tel-906 size:14 id:p-doc-tel placeholder “(555) 555-1212”]
3. Psychiatrist Name: [text text-840 id:psyc-doc-name size:20 placeholder "psych MD name"]
4. Phone: [tel tel-906 size:14 id:psyc-doc-tel placeholder “(555) 555-1212”]
5. Psychiatric Medication: [text text-840 id:psyc-med size:25 placeholder "psychiatric medication"]

</fieldset>
<fieldset>
<legend style=”font-weight: bold;”>Support System: </legend>
<p>[text text-196 id:support size:30 maxlength:30 placeholder "support"]<p/>
</fieldset>

<p style= “clear:both;”></p>

<fieldset>
<legend style=”font-weight: bold;”>Reason for Referral</legend>

1. [textarea cf7s-message 40×10 placeholder “reason for referral”]

</fieldset>
<fieldset>
<legend style=”font-weight: bold;”>Requested Place of Service</legend>

<li style=”font-weight: bold;”>[checkbox cf7s-checkbox-01 “Office” “Home” “Facility””Video”] Email:<b style=”color:red;”>*</b> [email* label_first email-893 id:place_email 20 placeholder “email”]

<p style=”font-style: italic;”> Special Needs: [checkbox cf7s-checkbox-03 “Elevator” “Sightedness” “Hearing Issues” “Suicidal Ideation “]</p>
</fieldset>
<p>
</p>

<p>
[submit “Submit”]
</p>
[response]

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>

After using Firebug to examine your form, here is what I strongly suspect to be the cause of the problem.

CSS CODE:

.wpcf7-form.cf7skins *, .wpcf7-form.cf7skins *::before, .wpcf7-form, .cf7skins *::after {
box-sizing: border-box;
float: left;
}

Did you add the code above to your theme? It can be found in two sections within https://helptherapist.com/dir/wp-content/uploads/themify-customizer.css

When the float is disabled, it brings <p>We are interested in a presentation. Email us at [email protected]</p> to its right state.

Using float: left; like this is likely to cause problems with following items – particularly if you aren’t 100% sure what you are doing.

Hope that helps you find a solution to your requirements.

For more detailed support you could sign on to CF7 Skins Premium Email Support.

Also you could consider a CF7 Skins add-on CF7 Skins Ready, which has a very simple way of adding form fields in a single line or columns. It does so in a way that doesn’t affect following items.

Yes, this would explain it.

I’ll explore using float:left more narrowly as well as looking at the Skins Pro version and Skins Ready Plugin.

Thank you.

This issue is resolved.