How to create responsive inline Booking form with Contact Form 7
HTML-код
- Опубликовано: 12 окт 2024
- It is not an ordinary Contact Form tutorial, this is the Booking Form with Contact form 7, modern, nice, and 100% mobile-ready. CSS grid helps a lot. Also, this is the first sponsored tutorial on this channel. Welcome!
Do you want to know how to build this kind of contact/booking form, code a website with HTML and CSS, and much more about WordPress? This is the right channel for you! Subscribe and follow it along!
/ @nnwebdigital
How to create Inline form with a drop-down | Contact Form 7 tutorial
• How to create Inline f...
If you want to request a tutorial just like this one or you need mentoring about the WordPress, HTML, CSS reach me out through the contact form on my portfolio website
nnweb.net/#con...
For this specific tutorial we are gonna need:
- Contact Form 7
- Date Time Picker for Contact Form 7
- Elementor Page Builder (or any other just like Gutenberg)
- OceanWP theme or any other
Here are Time stamps:
01:55 - Adding Contact From 7 code
10:32 - Adding code for Automatic Response to you and your customer
15:00 - Adding CSS code
21:19 - Changing Button color
23:55 - Adding Media Queris
Before typing CSS don't forget to install a child theme for OceanWP theme or any other (depend on the theme).
• Episode 15 - How to In...
Older Brother Form - How to Create Side by Side Fields in the Contact Form 7
• How to Create Side by ...
Playlist with more Contact Form plugin for WordPress:
• Contact Form plugin fo...
How to Create Custom Contact form With Elementor and Contact Form 7 Plugin - Unique Custom Design
• How to Create Custom C...
Complete web site with HTML and CSS from Scratch - 1st Part | Header section
• Complete web site with...
#nnweb
Very good tutorial! keep it up
Thank you very much! I will.
Best tutorial it is
Thanks!
Hi,
It's very nice.
Wonder if it's possible if the form can take title of a post ? For example, I create a form for different hotels, each hotel is a post. So how can the form take the hotel names so that I know clients book that hotel?
Hi, thank you very much.
I think that is very complicated to do with CF7. It is a much better solution to find another plugin in about that functionality.
Great work.. Only one thing I need to know how can we use our own custom icons with the form fields in svg..? Can you tell me
Thank you. I don't know anything about adding custom SVG in cf7. Maybe I will do a research, and make tutorial after that.
thanku u sir
I followed your video every step it's really nice and I can make it usefully
but I can't fix one thing problem about width of select (dropdown), its not 100% width
I have tried add more in under ".wpcf7-form select" already but not working, it's width form text not box space :(
Can't sleep but I will learning CSS more
Thanks for your content
Thank you for watching it. Try to use Inspect tool to target a specific class, maybe your form has a different one.
Sir couple of issues which I'd like to resolve.
1. After submission. I want to add a field that allows users to check availability for the selected check-in period and the number of apartments.
2. I want to redirect users to an external payment method depending on whether there is availability. The mail option is useful since it will allow me to track customers checking in. But a more viable option would be to automatically generate responses depending on if the rooms are available for the selected duration, rooms, etc.
3. I have two different room types, which go for different prices. How do I link those different room options to the same booking form? But they should show varied prices on the payment checkout page.
Kindly give me your suggestion that would help me tackle these issues. As for the form itself is a very simple and organized reservation form, one which I'm really happy to use. Please help me as much as possible.
I'm afraid you will need a custom approach for that kind of features. You can not achieve all of these with plugins. For the external payment try to find a plugin for the CF7.
Hi there! If you have any questions now it is your time.
What if we want some inputs in 2 column grid and some in 1 and some in 3 column ? Then how can we do that?
Hey man. Can i borrow your code?
Hi, sure you can do it.
However, I will be very happy if you support my work through an one time donation. If you want to do that contact me via contact form on my website: www.nnweb.net/#contact
Cheers,
Nikola, NNWeb
Also how can user select more than one date on the calendar?
This is not possible with these plugins. You must find another plugin with that feature. Search booking plugins on Google.
How do you show the calendar without having the text box?
Hi Brian!
What do you mean by calendar without the text box? The calendar comes automatically with CF7 and other plugins in the tutorial.
After pasting the HTML code for the contact form on my page it still doesn't display the contact form. Kindly help me figure this out.
The HTML code you need to paste inside needed form. For displaying a form on a page you need a shortcode.
@@nnwebdigital I used a text editor widget to paste the short code. It works fine now. But what if I needed to add another field and still be able to get a similar layout form with the same size and everything?
@@nnwebdigital could you write down the css form me to be able to achieve that?
@@jackofficialTM Well, watch my video and try to figure out how to extend functionality that suits your needs. This is the best way how to learn something.
@@jackofficialTM You will need some custom CSS.
I don’t know why grid-template-columns isn’t working. Keeps coming up as error
I don't know either. I filmed this video a long time ago. Is the parent container with specific classes? Have you tried to Google that problem?
the button color of send isn't worker on mobile responsive
Watch tutorial one more time, probably you have missed something.
Hi,
Can you please sent me your CSS codes details, After that, I will study the same.
Hi,
Could you become an one time sponsor to my channel? If your answer is yes, I will send you the code.
Cheers,
Nikola
@@nnwebdigital
Ok, no problem. You will send it.
@@StockResults Contact me via contact form on my portfolio website. Here is the link: nnweb.net/#contact