image as form description

Hi Alexis,

HTML is stripped out of the description field, because it’s passed through the WordPress content filter. So you can’t add html tags to form descriptions.

Sorry about that! You could just add content before a form on a post of page and not use the description.

Thank you!
-Tracy

Hi Tracy, thanks for the response. Is there a way to do this in the plugin files?

Just wanted to follow up on my last question.

No, it’s never a good idea to edit plugin files. They will be wiped out on the next update.

You could achieve this with CSS using pseudo elements.

Thank you,
-Tracy

Thanks again, Tracy. Could you give a quick guide for the best way to achieve that?

May I please have a link to your form?

Here is a tutorial from CSS Tricks: https://css-tricks.com/almanac/properties/c/content/

Thanks for your continued support!
The site is under maintenance mode – we’re getting it ready to launch. How can I get you the details to see it?

I’m looking at the following in the tutorial you sent –

div::before {
  content: url(image.jpg);
}

What would the HTML for this look like, and would I put it in the description box?

There would be no HTML, you would do this all via CSS.

You could do something like

.yikes-mailchimp-form-description p:before {
  content: url(image.jpg);
}

You have a few options to add CSS code:

• If you created this theme yourself, you can just add it to your style.css file
• If you’re using a theme you downloaded or bought you can make a child theme and add the code to your child theme’s style.css file
• Your theme may have a “Custom CSS” option. If it does, then you can just pop it in there.
• You can use a plugin like Simple Custom CSS or Jetpack and enter the code in their Custom CSS area

YES! Ok, so we’re in business now. Thank you!

I have a few questions –

1. This only seems to work if I have the widget set to display description AND have some kind of text in the description. Currently I simply have “…” but I’m wondering if there is a way to get rid of this all together?

2. The image doesn’t seem to be resizing like the other images I’ve used in various widgets. I saw on StackExchange you can possibly use background-size: but it doesn’t seem to be working. Any thoughts on how I can have the image resize to fit within the sidebar?
(see screenshot)

Since you just want an image with the form and not actually with a description, why don’t you just add an image above the form? Then you wont run into responsive issues associated with images as pseudo elements.

That was my original idea, but I need the image to be within the same widget as the form, due to theme styling.

I’m sorry, but I’m at a dead end here. ??

I imagine there has to be some way to use 2 widgets and some CSS to accomplish this, but without access to the site I can’t troubleshoot.

The site is just under maintenance mode, is there a way I can get you login details?

We are not permitted to ask for login credentials in the forums.