Duda Tip: Adding Icons to Form Fields

Blog Layout

Duda Tip: Adding Icons to Form Fields

Jul 31, 2023

Today, we are going to step up our game when it comes to forms. Check out the finished form at Rotary Control Lawn Services . There you will find a custom form that includes added icons in each form field to improve the overall user experience. This small but significant change makes it easier for users to understand and navigate the form fields.

Here’s how the customized form looks on their site after adding the icons:

This Duda Tip demonstrates an easy upgrade for businesses using forms as their call to action. By adding icons to each form field, potential customers can fill out forms more accurately with the aid of the icon to clearly label each form field. Want to do the same on your site? Let’s get started! You can follow the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Step 1: Add Fontawesome.

First, we will add Font Awesome's style sheet to our website in order to use their icons. Millions of designers, developers, and content creators use Font Awesome, the internet's icon library and toolkit. You can learn more about Font Awesome here. To add the style sheet, first copy the code snippet below.

Then head over to Developer mode, Site HTML/CSS, and paste it under head-section.html. Save and close developer mode.

Step 2: Add a form.

Add a contact form widget and style it for your website.

Step 3: Choose your first icon.

Now find the first icon you'd like to use on your form using the search function in Font Awesome.

For our Duda Tip, we chose the User icon. Select the icon.

Next, hover and click on the HTML tab and copy the code.

After copying the code, head back to Duda.

Step 4: Add your first icon.

Right-click on the form and select Edit HTML/CSS.

Paste the copied code just right after the input tag where you want to put the icon, in our case, it's the First Name field, and update.

Your form will look like this. No worries, let's get it fixed.

Step 5: Customize your icon position.

Open Developer Mode, under Site HTML/CSS, and select site.css.

There, paste the following code snippet.

.dmforminput i

{

position:absolute !important;

left:23px !important;

top:34px !important;

color:#ccc !important;

font-size:14px !important;

border:none !important;

}

The result may vary so adjustments on size and position are needed to get the result you need. Feel free to adjust the code as needed.

Since we are using placeholder text in our fields, let's adjust the form input padding.

Go back to Developer Mode, under Site HTML/CSS, select site.css, and paste this code snippet.

div.dmInner input[type="text"],div.dmInner input[type="email"],div.dmInner input[type="number"],div.dmInner input[type="tel"],div.dmInner input[type=password],div.dmInner select, div.dmforminput textarea

{

padding-left:30px !important;

}

Your form should look more like this, as we added padding to the left of the text.

Step 6: Find the rest of the icons.

Go back to Font Awesome and find the rest of the icons you'd like to use. Once you have them selected make sure to copy the HTML code for each one.

For the rest of our form, we are going to use the following:

Step 7: Add the rest of the icons to your form.

Right-click on the form and select Edit HTML/CSS. Paste each copied code just right after the input tag where you want to put each icon, in our case, we are adding one to Last Name, Email, Phone, and Service. Check those out below for your reference. Then hit update.

Button

Button

Button

Button

And there you have it! Your finished product should look something like the form below. A custom form with icons to help your users identify each form field and aid your form labels.

< Older Post Newer Post >

test

Duda Tip: Custom Button - Icon Hover Animation

08 Mar, 2024

Have you enjoyed the last two Duda tips but want a more subtle yet creative hover animation to use on your custom button? If so, you are at the right place. In this Duda tip, we will go through the steps of changing the hover action we had in our first Custom Button Duda Tip to one that is a subtle animation for our third and final way of creating a custom button. Follow along with the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Duda Tip: Custom Buttons - Elevated Hover Animation

08 Jan, 2024

Ready for part two? Now that we have a custom button, let's add a more creative custom hover animation! Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Duda Tip: Custom Buttons - Adding Your Own Icon

04 Dec, 2023

Need your website to stand out with subtle custom touches? Custom buttons might be the answer! In this step-by-step tutorial, we will take you through the process of adding a custom icon to your buttons which is the beginning of your very own custom buttons. Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Duda Tip: Add Visual Emphasis to Text

03 Nov, 2023

Welcome to another Duda Tip! Today we will show you a simple and easy trick to add visual interest to your website's text by adding a custom underline. This technique can help you emphasize important sections of copy and increase the overall visual interest of your site. We used this tip in the recent redesign of Taylor's Educational Enrichment Foundation and by following these step-by-step instructions or the video below, you will be able to as well, adding creative emphasis to headers or text on your website in no time. So, let's dive in and get started!

Duda Tip: Adding a Hover Effect

13 Oct, 2023

In this Duda Tip, we will show you how to create a hover effect! If you want to add interactive flair to your website, a hover effect is a must-do. It can help you highlight crucial information or make your site more visually appealing by aiding user interaction. Check out how with the easy steps below, or check out this video to watch each step in real time.

Duda Tip: Creating a Custom Shape Hero

16 Jun, 2023

Designing a well-structured and visually appealing hero is key to welcoming your website visitors. Located at the top of the visual hierarchy, the hero section of your website is the first visual element your visitors see, which is why we should make it as visually appealing as possible, and that is where this Duda tip comes in. We will walk you through a few simple steps to create a custom hero shape to visually enhances your hero section and perfectly complement your Duda site, just as we did for our client Assurecare Advisors . Their final result looked like this:

Duda Tip: Creating An Overlapping Logo

16 May, 2023

You’ve worked hard to customize your business’s brand, so your logo should stand out on your website! If you’re looking for a way to make your logo pop, allow it to overlap the header behind it. It draws the attention of every website visitor — and with Duda, it’s simple to do! We used this tip to design the Nate’s Hot Chicken website header. Want to do the same for your own site? All you’ll need is a proportional version of your logo (60x60, for example) and a static header. Let’s get started! You can follow the instructions below to implement this Duda tip on your site, or check out the video below to watch each step in real time.

Duda Tip: Adding a Journey Element

17 Apr, 2023

Want to walk your website viewers through a step-by-step process? Adding a journey element to your site with DudaFlex can make your instructions seamless and simple — and the process will look good, too! This design element is a great way to highlight your services at a high level and help new clients know what to expect when they work with you. Our client True North Restoration used this Duda Tip to walk potential customers through their company process. Their final result looked like this:

Duda Tip: Adding Custom Image Shadows to Your Site

16 Mar, 2023

Want to add character to your website design? Add visual interest by making visual elements pop off the page! When Asher House wanted to highlight a few images on their home page, we knew a custom image shadow would do the trick. Custom image shadows draw attention to certain elements by creating an elevated look. Elevation creates visual hierarchy, drawing the eye to specific sections of a page first. How can you use “elevation” to your advantage on a flat screen? Well – elevation is defined as the relative distance between two surfaces on a z-axis. When we layer two images on top of one another, the distance between them appears to be zero. But when we add shadowing, we gain the illusion of dimension – proving once again that good design is like magic.

Duda Tip: Showing Page Scroll Progress

16 Feb, 2023

If you have a website page that’s on the longer side, it can be helpful to show viewers where they are in their scroll! The simplest way to do this: display a progress bar. It adds visual interest to your site, and it gives readers an important reference point as they move below the fold. With Duda, this is an easy addition — the Dear America Foundation created one that highlights their brand colors. Today, we’re here to show you how to show page scroll progress on your site. Follow the instructions below to implement this Duda tip on your site, or check out this video to watch each step in real time!