Тёмный

How to Create a STUNNING Contact Us Page in Elementor Pro/WordPress | Contact Form Design Tutorial 

Make Dream Website
Подписаться 33 тыс.
Просмотров 34 тыс.
50% 1

Today, I'll show you how to Create a STUNNING Contact Us Page in Elementor Pro/WordPress. This is a Contact Form Design Tutorial.
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get code snippet and Image for Stunning Contact Page:
makedreamwebsite.com/how-to-c...
✅Get this READY-MADE template on TEMPLATISH:
templatish.com/template/eleme...
In this tutorial, I’ll show you how to make a stunning contact form for your Elementor Pro or WordPress website. So, you can design this beautiful contact page with the headline, the buttons with your email address, phone number and all the social links. And on the right, you can also see an animating text circle. When you click on that, it scroll down to the contact form section.
This looks much better than a traditional boring form. So, here when you try to submit the form it will show you some customized error messages. So, if anything goes wrong (like you don’t fill a required field or you give a wrong email pattern), it will show these kind of errors. And after a successful submission, you can also see a confirmation message as well as receive an email with all the details from that form.
If you want, you can get this page as a ready made template from my template shop. And here also as a bonus, you'll get both the container and non-container version of that. But, if you don't want to get this template, you can also start it from scratch.
First, we need to create a container and add some headings, buttons inside it. Here also the phone and email buttons are perfectly working. To create that animating circle, we also use a text path widget and also an custom icon.
Under that, we have also make and design a form widget and configure all the settings for sending email. We also add some custom validation message with that form and make the custom structure.
Lastly, make it responsive for the tablet and desktop devices. Here, with the CSS I've also give you some great customization options.
So, that's how you can create a Elementor Form. if you enjoy this tutorial, don't forget to like and subscribe.

Опубликовано:

 

20 окт 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 80   
@angelo.mazzeo
@angelo.mazzeo Год назад
I wish I had 1% of your creativity and skill! Congratulations!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thank you so much for that great appreciation...
@jaswantsai3852
@jaswantsai3852 6 месяцев назад
This channel is an absolute goldmine for us, please dont ever stop posting content Thank you
@elijahhan5146
@elijahhan5146 Год назад
Amazing Tutorial. Amazing Job. Now we are waiting for a cool form that will be with next step and so on. Been trying to build one for a long time and cannot figure it out. Keep up the great work, as usual!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Hi Elijah thanks a ton! I have another video about multistep form you can check that out, but, I'm not sure if that works with this form layout as I add some custom code snippet....
@umairyousafzai07
@umairyousafzai07 Год назад
At least someone create in our era! Much much helpful!!! Keep it Up! Love from 🇵🇰
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks a lot!😇
@gabrielkarisa2823
@gabrielkarisa2823 Год назад
Another masterpiece. Brilliant Work 😎
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks a ton!
@bySterling
@bySterling Год назад
Now that’s a gorgeous custom contact form!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
🙏🙏🙏
@WTPleo
@WTPleo Год назад
Brother, I want to thank you from the bottom of my heart. Not only for this video, but for all your creation! You are truly doing a blessed job. I'm sending the best wished to you, your family and your business ventures!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
My pleasure! Thank you for such precious comment💖
@WTPleo
@WTPleo Год назад
@@MakeDreamWebsite I just finished this tutorial and when I paste the custom CSS for the spinning text, it makes the text invisible, do you know how can I fix it? Thanks!
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Maybe something is conflicting... You can email me your page link...
@WTPleo
@WTPleo Год назад
@@MakeDreamWebsite Never mind brother, I just found a CSS code that worked for me. If someone else having this issue, this is the code - selector svg{ animation: rotate 30s linear infinite; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@WTPleo
@WTPleo Год назад
So sorry for the many questions, can you please help me add a direction option to that code? I need it to rotate to the left
@traceycomerford6581
@traceycomerford6581 Год назад
Another amazing design, it looks amazing
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks!
@Aziz-Ahmed-UK
@Aziz-Ahmed-UK 11 месяцев назад
Wow..! stunning very creative design. I will try and see if I can clone this design but I doubt it.
@VAMOS_777
@VAMOS_777 Год назад
always great video and tutorial 👍
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thank you 🙏
@rahatmanzoor9883
@rahatmanzoor9883 Год назад
Great 👍 😃 sir plzzz plzzz more videos upload such as
@BeckyBrower
@BeckyBrower 3 месяца назад
your tutorials are just amazing, thank you so much for sharing! You explain everything so incredibly well! Even the responsive layouts! I have one question for this one, after submitting I would like there to be a confirmation message. I've tried editing the code but I'm not wanting to mess it up. Is there anything I can take out to be able to get the confirmation message? Thank you again for all of your amazing videos, I've purchased several already!
@uguryumrutas2272
@uguryumrutas2272 Год назад
looks great thanks for video
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're very welcome
@vidaltresormba1259
@vidaltresormba1259 Год назад
Great work sir 👌👌
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks a ton🙏🙏🙏
@Lo87528
@Lo87528 6 месяцев назад
Thank you very much❤
@MakeDreamWebsite
@MakeDreamWebsite 6 месяцев назад
You're welcome
@moradian_ar
@moradian_ar Год назад
really nice👌👌
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thank you!
@mahendrajangid2076
@mahendrajangid2076 4 месяца назад
great css code sir thanks
@MakeDreamWebsite
@MakeDreamWebsite 4 месяца назад
You're welcome!
@magicpotions207
@magicpotions207 Год назад
Awesome Tutorial. I also love your RU-vid banner image. Could you please share with us how you created it? Is it canva or a more complex design software?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You're very welcome! Yes, I've made it with Canva only
@magicpotions207
@magicpotions207 Год назад
@@MakeDreamWebsite Thanks for your reply. I can't seem to figure out how to achieve the tilt 3d effect on Canva. It's almost impossible. Am I missing something?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Aahh... you mean the thumbnail of this video? No, you need Photoshop for that. I thought you asked about the channel banner...
@magicpotions207
@magicpotions207 Год назад
@@MakeDreamWebsite Oh yes. That's what I thought. Canva is too basic for that lol. Thanks for your answer.
@ammarsayal
@ammarsayal 11 месяцев назад
Aoa brother, this tutorial is amazing and absolutely fantastic. One thing i wanna ask that as we are not using any plugin like wpforms, contact form7 etc and creating form using elementor widget so it dont create any problem for receiving emails or any other problem Right..?
@MakeDreamWebsite
@MakeDreamWebsite 11 месяцев назад
No, it won't cause any problem. Elementor's default form widget also works fine!
@mexlemax3307
@mexlemax3307 8 месяцев назад
Hi, First of all sory for my bad english. I am currently setting up a homepage with Wordpress and Elemento without the Pro version, but with the Pemium version. So I'm searching RU-vid for tutorials on how to get the best out of it. I came to you and hanbe seen your super good tutorials. Now I want to know if I can use the code for the animation at Contct Us wuch. Or do the codes only go for the Pro version? I really want to create this Contact Vormula too because it fits my theme. Thanks again. And keep up the good tutorials.
@MakeDreamWebsite
@MakeDreamWebsite 8 месяцев назад
Thank you for your awesome feedback. For this contact page you need both Elementor and Elemntor Pro as here we need to use the form widget and also custom css for some widgets.
@mexlemax3307
@mexlemax3307 8 месяцев назад
@@MakeDreamWebsite OK, so I have Elementor plus the Elementor Premium version. So I could do everything except the animation? I don't want to test the code, otherwise my whole work might be destroyed. Since I do all this for the first time. Would not be so tragic. Looks great in any case. Thanks for your quick answer.
@MakeDreamWebsite
@MakeDreamWebsite 8 месяцев назад
Yes, you can do the animation as well. If you don't feel safe you can test it on a brand new page or you can create a staging website to test it
@mexlemax3307
@mexlemax3307 8 месяцев назад
OK Super ! That's a good tip with the test page. I just look at some tutorials from you, I'm still looking for a cool tampelt for the header. I do not understand what you explain there so everything, because I come from Germany. But you show that very well. So it also goes without ton. Thank you very much.@@MakeDreamWebsite
@ChimmiChanga
@ChimmiChanga Год назад
Thx for that great tutorial. I have 2 questions though. 1. my contact circle works for scrolling down but if I click into the middle (arrow) it does not work. Any idea how to fix this? 2. Once I am at the bottom I would like for the arrow to turn into an up-ward arrow and the "contact" to start rotating to the left instead of right and if I click it, it brings me back to the top. Is there any chance you can help me out on this?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
1. You need to give a higher z index value for the text path widget 2. Yes, you can do that by applying some JavaScript and CSS code
@ChimmiChanga
@ChimmiChanga Год назад
@@MakeDreamWebsite 1. Thx for the tip, it worked! 2. I am a complete beginner in terms of Wordpress/Java/CSS, is there any chance you got some code for that?
@globetrotterot
@globetrotterot Год назад
Jitu is a real gem 💎
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Thanks my friend 😊🤗🤗
@globetrotterot
@globetrotterot Год назад
@@MakeDreamWebsite I'm buying this right now 😍☺️
@MakeDreamWebsite
@MakeDreamWebsite Год назад
​@@globetrotterot 👏👏🙏
@xelyo2527
@xelyo2527 4 месяца назад
Hello, i tried to use the path text widget but my text is chopped off. Do you have a solution for that ? Because, even if i put margin or anything else, the prob still there. Awsome tutorial btw !
@djack1295
@djack1295 Месяц назад
Hi ! I had the same problem! Add this code to your CSS and it should work! .elementor-widget-text-path svg { overflow:visible!important; }
@soumyabratashomeofficial2611
@soumyabratashomeofficial2611 5 месяцев назад
Thank you for the wonderful tutorial, but I am facing a problem, when I am submitting the form the form is being submitted and a message is being showed that “the form is not submitted because of server problems “
@MakeDreamWebsite
@MakeDreamWebsite 5 месяцев назад
This problem is related to your server I think. You can contact your hosting provider to resolve it...
@paulpaul8221
@paulpaul8221 Год назад
Is the "Elementor pro essentials" plan good enough to use your templates?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Yes, that's enough... You can use any plan you want
@mothernature7186
@mothernature7186 Год назад
Hai bro I want to buy most of your Gumroad templates at once. Can I get any discount and link to buy them or to contact you Thanks in Advance
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Yes, of course I'll give you a discount for that. You can email me at contact@makedreamwebsite.com
@rubenbad1869
@rubenbad1869 Год назад
Hey, great work REALLY. How is it possible to work with Contact Form 7?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Not sure though... But you can try
@Titanfuentes
@Titanfuentes Год назад
Hello! I bought some of your templates, but they don't work. Could you help me?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
You can email me your page link
@stevenknott4957
@stevenknott4957 7 месяцев назад
I just purchased this template and the "contact form' text on the circle animation is cut off and I'm sure how to fix it. Can you help me?
@MakeDreamWebsite
@MakeDreamWebsite 7 месяцев назад
You can email me...
@stevenknott4957
@stevenknott4957 7 месяцев назад
@@MakeDreamWebsite Hello, I tried sending an email but I got this message "Their inbox is full, or it's getting too much mail right now."
@MakeDreamWebsite
@MakeDreamWebsite 7 месяцев назад
Okay, I'll fix it and let you know@@stevenknott4957
@stevenknott4957
@stevenknott4957 7 месяцев назад
@@MakeDreamWebsite I just wanted to see if you were able to help me fix the animation. I tried emailing again but it still gives me the same message. Thanks
@MakeDreamWebsite
@MakeDreamWebsite 7 месяцев назад
Sorry for the delay, I've just fixed my email issue... Can you please email me again@@stevenknott4957
@subodhingle9911
@subodhingle9911 Год назад
Server error. Form not sent. An error occurred. Email Server error. Form not sent. This Message is not visible for site visitors error occurred what to do please help!
@abdullahmaqsood9017
@abdullahmaqsood9017 Месяц назад
how can i customize checkbox feild and select feild
@MakeDreamWebsite
@MakeDreamWebsite Месяц назад
There are options to add those fields on the form widget.
@VAMOS_777
@VAMOS_777 Год назад
hi sir, why i cant load your code snippet site ?
@MakeDreamWebsite
@MakeDreamWebsite Год назад
Maybe it's down for a technical issue, you can try to reload it after some tiime.
@VAMOS_777
@VAMOS_777 Год назад
@@MakeDreamWebsite okey sir, maybe next day i will open again, because now its same cant open
@MakeDreamWebsite
@MakeDreamWebsite Год назад
@@VAMOS_777 Okay
Далее
Stray Kids <ATE> UNVEIL : TRACK "MOUNTAINS"
00:59
Mastering Dynamic Elementor Pro Forms In Minutes
8:09
Elementor Info Card with Curved Shape on Hover
5:40
Просмотров 62 тыс.
Glass Effect in Elementor | Glassmorphism 🔥
16:16
Просмотров 89 тыс.
Stray Kids <ATE> UNVEIL : TRACK "MOUNTAINS"
00:59