How to Apply Font Awesome Icon inside Contact Form 7 Submit Button

Adding an icon inside the contact form 7 submit button makes it more attractive. But there is no easy way to add an icon inside submit button. You will get a proper guideline about submit form icon in the following steps. 

Font Awesome Icon Inside CF7 Submit Button

By default, you can’t see any system to insert font awesome icon inside contact for 7 submit button. As this is a problem so there is a way. I am going to share little tips which will save time.

Enable Font Awesome Support

If you are using Elementor Page builder then make sure you have enabled the Font awesome icon library. Just navigate to Elementor>Settings>Advanced tab. Select “Yes” for “Load Font Awesome 4 Support” and save it.

Load Font Awesome 4 Support

Note: If you don’t have Elementor Plugin installed in your WordPress Website. Then just download Font Awesome Plugin and active it in your Website. Elementor plugin comes with default font awesome icons library. That’s why you don’t need to install any extra plugin to load font awesome icons.

Getting Unicode Hex code For Icon

Now follow the steps and configure your contact form:

Visit Font Awesome Icon cheatsheet and search for your icon. You will get “Unicode hex” beside each icon. Check the following screenshot. Blue marked are “Unicode Hex“.

font awesome icon cheatsheet

Go to your Website Dashboard and create a new form or Edit Existing Contact Form. If you are using our Master Addons Plugin then you will get 100% customizable form system with huge style preset. You can customize your contact form with our “Contact Form 7 elements” options panel.

If you want to customize the style of your contact form without tying a single line markup or CSS code then check out Editing Contact Form 7 Style document.

Add the Hex Code in Contact Form 7 Editor

Now you need to place the “Unicode Hex” inside the submit button. But you can’t just copy and paste the Hex code. There is a way which you have to follow.

I am placing the backend contact form 7 code from our demo. You can see ” f1d8;” code beside Submit text. Here “f1d8” is the Unicode Hex. Replace this with your desired icon “Unicode Hex” code.

				
					[text* your-name "Name"]

[email* your-email "Email"]

[text your-subject "Subject"]

[textarea your-message "Message"]

[submit "Submit "]
				
			

You can copy the contact form code for your website too.

It’s time to select the font for submit icon. You have to define font family otherwise it will not work. Copy the following CSS code and paste it into your custom CSS option. Navigate to appreance>customize>Additional CSS.

				
					.wpcf7-submit {
font-family: FontAwesome !important;
}
				
			

That’s all to insert icon inside contact form 7 submit button. You can apply any other icon by applying the same method.

Insert Icon Inside Contact Form 7 Submit button

This is how it looks with icon + submit button.

Adding Font awesome icon in Contact form 7 Name, Email, Subject, Text etc as placeholder

What if you want to add some cool icons inside the contact form 7 fields placeholder? Here is a solution for you. You need to place hex code perfectly inside your placeholder text. For better understanding, take a look at the following code. Or just copy and paste the contact form 7 code inside your website.

				
					[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[textarea* textarea-content placeholder " Your Subject"]


[submit "Submit "]
				
			

Now, it’s time to define the font for placeholder text using Custom CSS. Copy the following line and paste it inside your Custom CSS option.

				
					.wpcf7-form-control-wrap {
font-family: FontAwesome !important;
}
				
			

The final output will looks like the following screenshot. 

Font awesome icon in contact form 7 fields as placeholder

I hope you got both ways properly. Feel free to chat with us if you face any problems. We will try our best to help you configuring the icon in your contact form 7. 

Kick Start your Website

Get Master Addons Now

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms