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

  • @nnwebdigital
    @nnwebdigital4 жыл бұрын

    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

  • @WillyMutenza
    @WillyMutenza2 жыл бұрын

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

  • @nnwebdigital

    @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! 👍

  • @rohitpandey4165
    @rohitpandey41652 жыл бұрын

    Very helpful. Got exactly what I wanted. Thanks!

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

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

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

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

  • @euniceharkness9351
    @euniceharkness93513 жыл бұрын

    Thank you - this helped me so much!

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome! :)

  • @lawies001
    @lawies0013 жыл бұрын

    Very nice tutorial! Thank you

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You are welcome! I'm glad to help.

  • @matheusrj22
    @matheusrj223 жыл бұрын

    Great content! Thank you!

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

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

  • @FuturityWeb
    @FuturityWeb2 жыл бұрын

    Thank you for this Tutorial; really helpful :-)

  • @nnwebdigital

    @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.

  • @olgaprokopenko2080
    @olgaprokopenko2080 Жыл бұрын

    Thank you, Nikola!

  • @nnwebdigital

    @nnwebdigital

    Жыл бұрын

    You're welcome Olga! :)

  • @Webmindstudio
    @Webmindstudio2 жыл бұрын

    Thanks for this video, it was helpful

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    You are welcome! :)

  • @argenisaguilar9045
    @argenisaguilar90453 жыл бұрын

    Very helpful...thanks so much..

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome! :)

  • @ojithbrahmana3683
    @ojithbrahmana36832 жыл бұрын

    You're a life saver bro!

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    Thanks bro!

  • @bigd1ego
    @bigd1ego2 жыл бұрын

    Man your save me, thank a lot

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    You welcome! :)

  • @mohsinshakeel6482
    @mohsinshakeel64823 жыл бұрын

    helpful tutorial Thanks

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome! :)

  • @jakubrynio12
    @jakubrynio12 Жыл бұрын

    THANK YOU !

  • @nnwebdigital

    @nnwebdigital

    Жыл бұрын

    You're welcome!

  • @Keepcalmandweewee
    @Keepcalmandweewee2 жыл бұрын

    Thank you!!!

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    You're welcome.

  • @AliKhan-cv4qz
    @AliKhan-cv4qz Жыл бұрын

    Dude you are fantastic

  • @nnwebdigital

    @nnwebdigital

    Жыл бұрын

    Thank you Ali!

  • @Divadivyaa
    @Divadivyaa3 жыл бұрын

    Thanks dude :)

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome! :)

  • @md.shaikulislamnabin2699
    @md.shaikulislamnabin26993 жыл бұрын

    Thanks a lot.

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome!

  • @KhaHa
    @KhaHa3 жыл бұрын

    tks you very much

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

    You welcome!

  • @lwazoor212
    @lwazoor2122 жыл бұрын

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

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    You welcome! I will try. :)

  • @superedesca
    @superedesca2 жыл бұрын

    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

    @nnwebdigital

    2 жыл бұрын

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

  • @superedesca

    @superedesca

    2 жыл бұрын

    @@nnwebdigital Yes!

  • @nnwebdigital

    @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

  • @YT-XD
    @YT-XD2 жыл бұрын

    THANKS 👍

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    You welcome! :)

  • @AccentGraphix
    @AccentGraphix3 жыл бұрын

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

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

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

  • @zohaibsh22
    @zohaibsh223 жыл бұрын

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

  • @nnwebdigital

    @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

  • @yoginibisen5434
    @yoginibisen54343 жыл бұрын

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

  • @nnwebdigital

    @nnwebdigital

    3 жыл бұрын

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

  • @charlottevis6623
    @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

    @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

    @charlottevis6623

    Жыл бұрын

    Sure, how do I share this privately?

  • @nnwebdigital

    @nnwebdigital

    Жыл бұрын

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

  • @aawwab2110
    @aawwab211010 ай бұрын

    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

    @nnwebdigital

    8 ай бұрын

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

  • @aawwab2110

    @aawwab2110

    8 ай бұрын

    @@nnwebdigital ok thank you brother

  • @luciamoretti6235
    @luciamoretti62354 жыл бұрын

    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

    @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

    @luciamoretti6235

    4 жыл бұрын

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

  • @hassanghorbani8289
    @hassanghorbani82892 жыл бұрын

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

  • @nnwebdigital

    @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

  • @ayudainterior
    @ayudainterior Жыл бұрын

    Pls share the css code. Thanks!

  • @ayudainterior

    @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

    @nnwebdigital

    Жыл бұрын

    Thanks Alan!

  • @DanielBro42

    @DanielBro42

    Жыл бұрын

    thank you!

  • @md.abulhasnatbhuiyan4518
    @md.abulhasnatbhuiyan45182 жыл бұрын

    But video is not clear and sound is so.

  • @nnwebdigital

    @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.

  • @deshrajmukeriya1290
    @deshrajmukeriya12902 жыл бұрын

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

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

    Do you mean on the Child theme?

  • @deshrajmukeriya1290

    @deshrajmukeriya1290

    2 жыл бұрын

    @@nnwebdigital yes

  • @nnwebdigital

    @nnwebdigital

    2 жыл бұрын

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

  • @ajkhan1987
    @ajkhan19873 жыл бұрын

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

  • @nnwebdigital

    @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. :)

Келесі