Exact matches only
Search in title
Search in content
Search in posts
Search in pages

How to change images on hover from your online form?

With some custom CSS codding you can change images on hover. This means that when a form visitor places the mouse over the image, that respective image can have a certain behavior, such as adding borders or having the image replaced with another one.

Whenever you want to add CSS to your online form, go to the SettingsThemes section of your form and hit the link Use custom CSS. You can either type or paste the code in the Code tab of the custom CSS lightbox or add the URL of your stylesheets in the URL tab.

123FormBuilder change images ></p>
<p>We will use the <b>Code</b> tab and manually type in the CSS code that will change the behavior of all images that are added to the form. You can add an image to the form with the help of the <b>Image</b> field. </p>
<p>To add borders of a particular color on all the images on mouse hover, for example, use the following code in the custom CSS lightbox:</p>
<pre>img:hover {border: 1px solid #FF1919;}  </pre>
<p>Here is a nice tweak for you! Changing images on hover with other images, each being changed with a different image. For example: placing an image with a coffee brand that changes to an image of a cup of coffee whenever someone hovers over the image. Or an image of a desk on sale which shows its discount on hover. </p>
<p>Here is a live example:</p>
<p style=

To do this, you’ll need to use the row ID. Each field contains this ID when dropped in the form. They are numbered depending on the order they have been added. If you have four fields on the form, they you will have row1,row2,row3 and row4. If the third field is an image field, then ID row3 is the one that you can use to apply a hover effect to that respective image on the form. But if that image field is placed behind the previous field, then it will respond to the ID row2.

Here is an example in CSS:

#row1:hover {content: url('//www.domain.com/image_1');}
#row2:hover {content: url('//www.domain.com/image_2');}
#row3:hover {content: url('//www.domain.com/image_3');}
#row4:hover {content: url('//www.domain.com/image_4');}

The example above is based on the idea that the image that shows on hover has the same size as the image you are hovering on. Also, if you put several images on the same line, their proportions are changed and you have to specify these changes in the CSS code. Use inspect element on the form to determine the size of each image on the form. Next, complete the code as follows:

#row1:hover {content: url('//www.domain.com/image_1'); width: 200px;}
#row2:hover {content: url('//www.domain.com/image_2'); width: 200px;}
#row3:hover {content: url('//www.domain.com/image_3'); width: 200px;}
#row4:hover {content: url('//www.domain.com/image_4'); width: 200px;}

Change the value of the width attribute with the one corresponding to the image on the form. If done correctly, your form should look as the live example above.

Notice that we have included also a shadow effect on the submit button. This can be achieved easily with the following CSS code:

#id123-button-send:hover {box-shadow: 5px 5px 2.5px #888888;}}

Did you know that you can convert radio buttons or checkboxes into clickable images on the form? Imagine if you apply hover effects on them, too. Read more in our documentation on how to insert clickable images in your form.

If you need assistance or have CSS tricks you want to share with us, contact us at support@123formbuilder.com or via our contact form.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?