How to Create Side by Side Fields in the Contact Form 7

[@nnwebdigital]

I've created a Contact Forms playlist with few tutorials. Learn how to create a Contact Form, how to add specific text, how to style it, and much more. kzbin.info/aero/PL2wAho6HharyOkrkXDh-rzDfEFOrGd-zR If you have a specific request or any other problem, write it down in the comments and I'll see what I can do for you. Until then, check out those two playlists: WordPress for Beginners - kzbin.info/www/bejne/hprWhISrrNemrZY Tips and Tricks for WordPress - kzbin.info/aero/PL2wAho6Hharz9QrwSs0iBNjnjY9Rln3CZ

[@superedesca]

Thank you very much for the tutorial! I learned a lot! a question: can you add a field that has several options for the user to choose one?

[@nnwebdigital]

Hi Eduardo. You welcome! Do you mean a drop-down with several options?

[@superedesca]

@@nnwebdigital Yes!

[@nnwebdigital]

@@superedesca I'm going to make a tutorial about it. Would you text me via my contact form on my portfolio? I want to ask you something that form. Here is the link: nnweb.net/#contact

[@yoginibisen5434]

how i can make it responsive in mobile view..some text cut there....

[@nnwebdigital]

I have added some media queries, check 09:50.

[@charlottevis6623]

I got my form to add all the fields next to each other, but adding any styling won't show even though I'm copying exactly what you are doing. Is there any other way to add spacing between the fields?

[@nnwebdigital]

Hi Charlotte, thanks for reaching me out. That is strange because I've used specific classes for CF7 markup, and target them with a CSS. Could you share your code via Codepen? I want to take a look.

[@charlottevis6623]

Sure, how do I share this privately?

[@nnwebdigital]

nnweb.net/#questionnaire Share your URL via contact form.

[@WillyMutenza]

Thank you for the tutorial, you saved me money buying an addon.

[@nnwebdigital]

You welcome! CF7 has a great features and different paths for customization. Keep in mind next time before buying a thing. First explore free options, you can buy it any time. Cheers! 👍

[@abernoulli]

Pls share the css code. Thanks!

[@abernoulli]

Ok. The code is: /* css contacto */ .whole-form { display: flex; } .field-space { padding-right: 10px; } .submit-button { padding: 6px 10px; } You are welcome!

[@nnwebdigital]

Thanks Alan!

[@DanielBro42]

thank you!

[@aawwab2110]

Hi bro, thank you very much for the tutorial. Do you have a tutorial for making a form that is connected systemically between one column and another? For example: the country of origin column then the destination country column and so on, the appropriate prices will appear. Thank you in advance. I wish your channel more and more success.

[@nnwebdigital]

So far I don't have that kind of tutorial.

[@aawwab2110]

@@nnwebdigital ok thank you brother

[@AccentGraphix]

Thank you for this tutorial, Thanks! I'm wondering how it would work for a form that has many fields!

[@nnwebdigital]

You are welcome! It is possible to create another row with 3 fields, and one more if you need.

[@luciamoretti6235]

Hi! Thanks for the tutorial! It would help so much if you display the codes in the description so we wouldn't have to write word by word ):

[@nnwebdigital]

Lucia, thank you for reaching me out. I can't add code into description because KZbin won't allow angle brackets in the description. This is all code you'll need: /* CODE FOR FORM */

[@luciamoretti6235]

@@nnwebdigital Amazing! Thank you so much for this!

[@olgaprokopenko2080]

Thank you, Nikola!

[@nnwebdigital]

You're welcome Olga! :)

[@hassanghorbani8289]

Great tutorial, but I wish you had put the html and css code somewhere for us to copy and paste.

[@nnwebdigital]

I'm aware that way would be easier, nevertheless I want to transfer some of my knowledge regarding CF7. If you have time please watch complete tutorial, that would be a great support for my future tutorials. Cheers

[@lwazoor212]

thanx lots god bless you hope u can make more like media querry for mobile to other elements thenk you

[@nnwebdigital]

You welcome! I will try. :)

[@lawies001]

Very nice tutorial! Thank you

[@nnwebdigital]

You are welcome! I'm glad to help.

[@matheusrj22]

Great content! Thank you!

[@nnwebdigital]

Thanks Matheus. If you have idea for next video write it here. Thanks for your comment.

[@AliKhan-cv4qz]

Dude you are fantastic

[@nnwebdigital]

Thank you Ali!

[@ojithbrahmana3683]

You're a life saver bro!

[@nnwebdigital]

Thanks bro!

[@rohitpandey4165]

Very helpful. Got exactly what I wanted. Thanks!

[@nnwebdigital]

You welcome, I'm glad to help. :)

[@nnwebdigital]

Have you checked my newest tutorial about an inline form with multiple fields and a drop-down?

[@Webmindstudio]

Thanks for this video, it was helpful

[@nnwebdigital]

You are welcome! :)

[@euniceharkness9351]

Thank you - this helped me so much!

[@nnwebdigital]

You welcome! :)

[@argenisaguilar9045]

Very helpful...thanks so much..

[@nnwebdigital]

You welcome! :)

[@bigd1ego]

Man your save me, thank a lot

[@nnwebdigital]

You welcome! :)

[@FuturityWeb]

Thank you for this Tutorial; really helpful :-)

[@nnwebdigital]

You welcome! Thanks for watching, and commenting. Also, check out a tutorial about inline fields with a drop-down. That is awesome as well.

[@mohsinshakeel6482]

helpful tutorial Thanks

[@nnwebdigital]

You welcome! :)

[@jakubrynio12]

THANK YOU !

[@nnwebdigital]

You're welcome!

[@md.shaikulislamnabin2699]

Thanks a lot.

[@nnwebdigital]

You welcome!

[@zohaibsh22]

Don't stop making videos sooner you will have uncountable subscribers. Helpful video.

[@nnwebdigital]

Thank you, Zohaib! :) In few days I will be back with more videos. My pace is one video every third day, but these days I need a small brake, because I'm developing some projects at the moment. Cheers, Nikola

[@deshrajmukeriya]

what you told at 6:13, you should tell 1st 😏

[@nnwebdigital]

Do you mean on the Child theme?

[@deshrajmukeriya]

@@nnwebdigital yes

[@nnwebdigital]

It will be completely fine to install a child theme. Before that make a copy of the CSS inside the Customer.

[@Keepcalmandweewee]

Thank you!!!

[@nnwebdigital]

You're welcome.

[@Ssvtate]

Thanks dude :)

[@nnwebdigital]

You welcome! :)

[@md.abulhasnatbhuiyan4518]

But video is not clear and sound is so.

[@nnwebdigital]

Hi Abdul. What is wrong with it? :) My English grammar isn't so good in few sentences however, you can understand me. I'm I right? I speak slowly and clearly. I don't have any noise in the sound.

[@KhaHa]

tks you very much

[@nnwebdigital]

You welcome!

[@YT-XD]

THANKS 👍

[@nnwebdigital]

You welcome! :)

[@ajkhan1987]

If you want to become good wordpress developer, you need to have at-least basic knowledge of html css js...

[@nnwebdigital]

I was thinking about it, but maybe JS is too much for me, for now. I want to learn first PHP because I want to build a custom themes. Also, I can use the Bootstrap here. I'm thinking that I'm good with HTML and CSS. Have I done something wrong in this tutorial? I appreciate every advice. Thanks for commenting out. :)