Home » Tutorials » 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.
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.
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.
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.
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“.
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.
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.
This is how it looks with icon + submit button.
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.
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.