If I had a quarter for every person whose optin forms have been mutilated by the WordPress 3.4 update, I wouldn’t be blogging anymore.

I’d be somewhere using coin laundry like a mad man and sipping Coronas.

Unfortunately, that’s not the case. I’m still here. So, I might as well let everyone know what can be done to right the wrong that is the WordPress Visual/HTML Editor.

If your optin form has some brand new spacing issues after your upgrade to WordPress 3.4, keep reading.

What Really Happened?

I’ll keep this short so you can get back to business as planned.

Basically, WordPress is making a lot of assumptions about what you’re meaning to do when you create content. We all know that starting a new line in the visual editor as well as the HTML editor will treat the new line as a new paragraph.

Sometimes it’s cool. Sometimes it’s lame. Today, my friends, it’s lame.

Your optin forms, to remain neat and organized in your content, are most likely structured like this in your HTML:

<form>
    <input type="hidden">
    <input type="hidden">
    <input type="hidden">
    <input type="text">
    <input type="email">
    <input type="submit" value="Damn you, WP3.4!">
</form>

That was all fine and dandy back in the day. But now, every time your form (or any content) starts a new line, a break tag is created.

<br>

That includes the hidden input fields as well! So, as you would imagine, even though the the hidden input fields output nothing on the front end of your website, the breaks still show. 🙁

Likewise, the carriage return between your text, email, and submit input fields also create a break… which will cause a lot of you who have horizontally aligned forms to now have them stacked… screwing up everything you’ve worked for in life.

I even have to go back to my article about styling Aweber forms and annotate these changes. Such hard work!

How do we fix it?

My buddy Tom over at College Info Geek suggested a great plugin and it’s working wonders for me. The plugin is called Raw HTML.

All it does once you install it is give you the ability to add some HTML around your screwed up content that keeps WordPress from doing things like automatically creating paragraphs, creating image smilies, etc.

Here’s how you use it.

First, install the plugin (duh). There are no settings. Just install it and it’s ready to go.

Then, when adding your optin form HTML to your HTML editor on the your “edit” post/page screen, you’ll want to wrap your code in these special raw tags that you can use only with this plugin.

<!--raw--> 

optin form HTML 

<!--/raw-->

When you use the raw tags, your forms will keep the same structure they had before the WordPress 3.4 update. That way your HTML remains clean and easy to read, all while only adding just a little bit of code to your content that serves a big purpose.

You can also wrap your content in tags but I wouldn’t suggest that.

[raw]...[/raw]

Reason being, using the tags I described in the HTML above are actually structured as HTML comments. So, they won’t be seen in a source viewer.

What if I don’t want to use raw tags?

Then you’re just a pain in the ass. But that’s fine. You don’t have to use them.

Instead, you can remove all carriage returns from your code and everything will be fine.

Turn this…

<form>
    <input type="hidden">
    <input type="hidden">
    <input type="hidden">
    <input type="text">
    <input type="email">
    <input type="submit" value="Damn you, WP3.4!">
</form>

into this…

<form><input type="hidden"><input type="hidden"><input type="hidden"><input type="text"><input type="email"><input type="submit" value="Damn you, WP3.4!"></form>

and you’ll be back to normal. Good luck quickly reading that code, though!

Get It Fixed and Share the Word

Again, here’s the Raw HTML plugin ready to be used right now. Be sure to read over the documentation first, though, as the plugin actually has a few more capabilities.

I guess I should add that one of the great things about WordPress 3.4 is that all I have to do to embed a Tweet is paste the URL of the tweet into the visual editor. That’s pretty damn cool.

Let’s try it out.

If anyone has a better solution, let me know.

Published by Sean Davis

When I'm not developing WordPress themes and plugins, I'm usually helping further the Easy Digital Downloads project, traveling, or playing racquetball. Say hi on Twitter. @SDavisMedia

7 Comments

  1. […] The WordPress 3.4 update changed a few things about how the Visual/HTML editor works! In order for the following code to do what I say it’s supposed to do, you’ll want to understand these changes and their fix. I wrote all about it so open it up in another tab as you continue. […]

  2. I upgraded all of my blogs and everything went very smooth. I didn’t had any issues with optin forms, may be because I’m not using the forms in-between the content area.

    Anyways, Thanks for sharing this quick guide, Sean.

  3. While I haven’t used an opt-in form on my site yet, just wanted to say that I love your embedding of the tweet into the article. Adds a bit of social media traction into the article without it feeling…kitschy. Pretty slick…

    • Thank you, sir! It’s something that I have always liked better never really done because sometimes it worked… and sometimes it didn’t. WordPress 3.4 has made it so much easier to do, though. So I’ll probably do it more often.

  4. […] I use Raw HTML is explained in my article about Aweber form formatting. WP-PageNavi is for my homepage pagination. It’s just convenient. What more can I […]

  5. […] The Raw HTML plugin is used to keep WordPress’ editor from turning water into wine without your consent. I started using this plugin at the arrival of WordPress 3.4. Read about it here. […]

Comments are closed.