Contact Form and icons (PRO)

Support
#1

Hello!

I have a problem trying to put icons inside text fields on Contact Form 7, I need to replicate this:

Right now I have this:

  1. The icons of font awesome, or the X icons short codes aren’t working to display the left icons on the form I’m trying to achieve

  2. I can’t put 3 rows on the left column

Would you point me on the right direction to solve this please?

Thank you!!!

#2

Hi there,

Thanks for writing around!

  1. Please check out https://wordpress.org/plugins/cf7-icons-and-labels/ to add icons in the fields.

  2. How are you adding rows in the column? You can add the third row the way you’ve added the two rows it should work fine.

Hope this helps!

#3

Hi @Nabeel

Thanks for the reply, unfortunately none of your answers worked.

  1. I’ve installed the recommended plugin and the icons were placed outside the text field and I can’t figure it out how to move them inside the field, also, I can’t change the size or the color of them.

  2. The rows (code version) are placed exactly the same, and It keeps putting them divided in two columns, but I can’t make what I’ve need to accomplish

Is there another way to achieve this?

Thanks!

#4

Hi there,

Unfortunately, I could not find the page that you add the CF7 form in. Having the icons to the form items is not part of our theme out of the box, we will try to give you proper CSS code to move the icons in but we will not be able to maintain the code.

Now regarding the layout, I suggest that you use Block Grid shortcode of the theme to layout the form elements in the CF7. For more information about the Block Grid shortcode kindly read this article:

Thank you.

#5

Hello @christopher.amirian

I’ve erased the form and started again from scratch (that’s why you couldn’t found the code) I’ve done it again and I just can’t make it work. The form is in the home page and this is what I need to do:

This is really making me losing my mind! I can’t make it work, please help.
Thank you!!!

#6

Hi There,

Please try to follow :

http://drewcodespot.com/style-add-icon-contact-form-7/

Hope it helps!

#7

Hi @Joao

The code on the URL worked! I have the icons in place, for this to work it must have installed the Cf7 Icons and Labels plugin.

  1. I’m still facing the columns issue, I need 3 rows on the left and 1 on the right, I’ve already tried several ways with the div and nothing worked to achieve that, any ideas?

  2. Is there a way to put the recaptcha and the submit button aligned?

Thanks!

#8

Hi again,

I checked your code and it doesn’t look right, please make use of the following code and re-do the html:

<div class="form-row">
	<div class="column-half">
    	Field 1
    </div>
    <div class="column-half">
    	Field 2
    </div>
</div>

<div class="form-row">
	<div class="column-half">
    	Field 3
    </div>
    <div class="column-half">
    	Field 4
    </div>
</div>

<div class="form-row">
	<div class="column-half">
    	Field 5
    </div>
    <div class="column-half">
    	Field 6
    </div>
</div>

Hope this helps!

#9

Hello @Nabeel

I’ve put the given code and the issue of the alignment between the recaptcha and the send button is fixed, but I still can’t control the rows in the contact form, I need 3 rows on the left (name, phone, email) and 1 on the right (message)

Any ideas?

Thank you all for the help given!

#10

Hi There,

Please provide us with your admin and password so we can take a closer look.

Thanks.

#11

Hello @thai

I’ve created a login for you

Thank you!

#12

Hi there,

Login is incorrect, but please try this format

<div class="form-row">
	<div class="column-half">
    	Field 1
        Field 2
        Field 3
    </div>
    <div class="column-half">
    	Field 4
    </div>
</div>

<div class="form-row">
	<div class="column-half">
    	Captcha
    </div>
    <div class="column-half">
    	Button
    </div>
</div>

Thanks!

#13

Hello @Rad
The code worked! Thank you and all involved in this post1

#14

On behalf of my colleagues, you’re welcome. Cheers! :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.