How to Create Side by Side Fields in the Contact Form 7
Ғылым және технология
CF7 - Contact Form 7 Tutorial - How to put Name, E-mail, and Phone (or any other field) with submit button inline (side by side).
Timestamps:
Short Story behind Tutorial - 00:12
Beginning of the Tutorial - 01:11
Adding HTML around Form Elements- 01:40
Adding Empty HTML Element in Elementor - 04:48
Adding CSS - 06:10
Adding CSS Media Query for Mobile Screen - 08:40
Learn More About CSS - 11:08
Contact Form 7 is a plugin for Contact Form for WordPress. It is simple but flexible. On WordPress plugin repository this plugin has more than 5 Milion Active Installations, regularly updated and compatible with the new version of WordPress.
How to create Inline form with a drop-down | Contact Form 7 tutorial
• How to create Inline f...
If you need help, or you search for a specific tutorial, feel free to contact me via the contact form on my portfolio website:
nnweb.net/#contact
This inline setup is achieved with a little bit of HTML and CSS styling. Just add division tags around Contact Form 7 components and style it with CSS. It is a straightforward procedure, quick and simple also.
See the younger brother: How to create responsive inline Booking form with Contact Form 7:
• How to create responsi...
Feel free to support our work, leave a like, subscribe to our channel, and don't forget to click on bell notification for more upcoming videos. If you have any questions write it down in comments.
/ @nnwebdigital
Don't forget to install the Child Theme for your Parent theme. Here is a tutorial on how to do with the OceanWP theme:
• Episode 15 - How to In...
On our channel we have other WordPress related tutorial. This time we are pinpoint a video from Local by Flywheel. If you want to install a clean WordPress installation on your local machine (PC, Mac, or Linux) this is the right video for you. With this tutorial, you can develop your personal or professional projects in the local environment. Here is the link:
• Install WordPress on L...
Support our work and subscribe for more upcoming WordPress related tutorials.
/ @nnwebdigital
Пікірлер: 76
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. kzread.info/head/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 - kzread.info/dash/bejne/gp2ntbOup9XZp5c.html Tips and Tricks for WordPress - kzread.info/head/PL2wAho6Hharz9QrwSs0iBNjnjY9Rln3CZ
Thank you for the tutorial, you saved me money buying an addon.
@nnwebdigital
2 жыл бұрын
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! 👍
Very helpful. Got exactly what I wanted. Thanks!
@nnwebdigital
2 жыл бұрын
You welcome, I'm glad to help. :)
@nnwebdigital
2 жыл бұрын
Have you checked my newest tutorial about an inline form with multiple fields and a drop-down?
Thank you - this helped me so much!
@nnwebdigital
3 жыл бұрын
You welcome! :)
Very nice tutorial! Thank you
@nnwebdigital
3 жыл бұрын
You are welcome! I'm glad to help.
Great content! Thank you!
@nnwebdigital
3 жыл бұрын
Thanks Matheus. If you have idea for next video write it here. Thanks for your comment.
Thank you for this Tutorial; really helpful :-)
@nnwebdigital
2 жыл бұрын
You welcome! Thanks for watching, and commenting. Also, check out a tutorial about inline fields with a drop-down. That is awesome as well.
Thank you, Nikola!
@nnwebdigital
Жыл бұрын
You're welcome Olga! :)
Thanks for this video, it was helpful
@nnwebdigital
2 жыл бұрын
You are welcome! :)
Very helpful...thanks so much..
@nnwebdigital
3 жыл бұрын
You welcome! :)
You're a life saver bro!
@nnwebdigital
2 жыл бұрын
Thanks bro!
Man your save me, thank a lot
@nnwebdigital
2 жыл бұрын
You welcome! :)
helpful tutorial Thanks
@nnwebdigital
3 жыл бұрын
You welcome! :)
THANK YOU !
@nnwebdigital
Жыл бұрын
You're welcome!
Thank you!!!
@nnwebdigital
2 жыл бұрын
You're welcome.
Dude you are fantastic
@nnwebdigital
Жыл бұрын
Thank you Ali!
Thanks dude :)
@nnwebdigital
3 жыл бұрын
You welcome! :)
Thanks a lot.
@nnwebdigital
3 жыл бұрын
You welcome!
tks you very much
@nnwebdigital
3 жыл бұрын
You welcome!
thanx lots god bless you hope u can make more like media querry for mobile to other elements thenk you
@nnwebdigital
2 жыл бұрын
You welcome! I will try. :)
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
2 жыл бұрын
Hi Eduardo. You welcome! Do you mean a drop-down with several options?
@superedesca
2 жыл бұрын
@@nnwebdigital Yes!
@nnwebdigital
2 жыл бұрын
@@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
THANKS 👍
@nnwebdigital
2 жыл бұрын
You welcome! :)
Thank you for this tutorial, Thanks! I'm wondering how it would work for a form that has many fields!
@nnwebdigital
3 жыл бұрын
You are welcome! It is possible to create another row with 3 fields, and one more if you need.
Don't stop making videos sooner you will have uncountable subscribers. Helpful video.
@nnwebdigital
3 жыл бұрын
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
how i can make it responsive in mobile view..some text cut there....
@nnwebdigital
3 жыл бұрын
I have added some media queries, check 09:50.
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.
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
8 ай бұрын
So far I don't have that kind of tutorial.
@aawwab2110
8 ай бұрын
@@nnwebdigital ok thank you brother
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
4 жыл бұрын
Lucia, thank you for reaching me out. I can't add code into description because KZread won't allow angle brackets in the description. This is all code you'll need: /* CODE FOR FORM */
@luciamoretti6235
4 жыл бұрын
@@nnwebdigital Amazing! Thank you so much for this!
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
Pls share the css code. Thanks!
@ayudainterior
Жыл бұрын
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!
But video is not clear and sound is so.
@nnwebdigital
2 жыл бұрын
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.
what you told at 6:13, you should tell 1st 😏
@nnwebdigital
2 жыл бұрын
Do you mean on the Child theme?
@deshrajmukeriya1290
2 жыл бұрын
@@nnwebdigital yes
@nnwebdigital
2 жыл бұрын
It will be completely fine to install a child theme. Before that make a copy of the CSS inside the Customer.
If you want to become good wordpress developer, you need to have at-least basic knowledge of html css js...
@nnwebdigital
3 жыл бұрын
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. :)