Forms

ok. It looks as if this support website is replacing straight quotes automatically.

@tobifjellner
I just added the define (‘WPCF7_LOAD_CSS’, false); and I still see no changes to the form.

When you raised this question, I decided to experiment a bit with it. And I got it working by addressing the things I mentioned in the beginning of our conversation:
Stripping out all manual new lines in the form content editor and changing some css.

It still looked ugly, though.

I know that each field has to be below the one above it which makes the web page longer. I think I was just trying to make the fields longer so the form itself isn’t shoved over to the left side of the page, its more spread out. Is that possible?

It’s possible that your theme also contains formatting for form fields. Use “inspect element” or similar tool in your browser to investigate.

When i tried (cf7 and theme twenty seventeen) each input field was formatted to use 100% of available width inside the parent container. I had to change that before things would start moving…

I wouldn’t even know what to look for. ??

The form is on this page – https://www.bluewaveconcepts.com

Change the form content like this:

<p><span class="form-label">Your Name (required)</span>[text* your-name] </p>
<p><span class="form-label">Your Email (required)</span>[email* your-email] </p>
<p><span class="form-label">Company (required)</span>[text company] </p>
<p><span class="form-label">Phone (required)</span>[text phone] </p>
<p><span class="form-label">Subject (required)</span>[text* your-subject] </p>
<p><span class="form-label">Your Message (required)</span>[textarea* your-message] </p>
<p><span class="form-label">Enter the following:</span>[captchac captcha-522]<br />
<span class="form-label">&nbsp;</span>[captchar captcha-522]</p>
<p>[submit “Send”]</p>

Then in the customizer add the following under Additional CSS:

.form-label{
width:300 px;
vertical-align: top;
}

Hope that will help. Aint no expert…

thanks I’ll give it a try.

I’m trying it here on my dev version first
https://dev.bluewaveconcepts.com

There must be a form width control somewhere because I changed your 300px to 800px and there was not change in the width of the form.

I believe you can’t set width for a span element.

change all span to div in the form content, and adjust the additional CSS to:

.div.form-label{
display:inline;
width:300 px;
vertical-align: top;
}

from this
<p><span class=”form-label”>Your Email (required)</span>   [email* your-email] </p>
to this?
<p><div class=”form-label”>Your Email (required)</span>   [email* your-email] </p>

Almost. You also need to change </span> to </div>

just did.

https://dev.bluewaveconcepts.com