1 00:00:00,000 --> 00:00:01,860 Illumina show you how to rebuild 2 00:00:01,859 --> 00:00:05,279 the contact page using Elementor Pro. 3 00:00:05,280 --> 00:00:06,840 And specifically we're gonna be working with 4 00:00:06,840 --> 00:00:10,070 the elemental pro form element. 5 00:00:10,065 --> 00:00:11,595 I'm gonna go to the backend. 6 00:00:11,595 --> 00:00:12,915 And first of all, 7 00:00:12,915 --> 00:00:14,825 I'm going to disable 8 00:00:14,820 --> 00:00:18,450 the WP forms plug-in we no longer needed. 9 00:00:18,450 --> 00:00:20,460 So I'm going to deactivate. 10 00:00:20,460 --> 00:00:24,180 And let's go back to the contact page. 11 00:00:24,180 --> 00:00:25,710 And obviously when they're gonna 12 00:00:25,710 --> 00:00:27,710 say any contact form anymore. 13 00:00:27,705 --> 00:00:31,205 But I'm gonna go to Edit with Elementor right now. 14 00:00:31,200 --> 00:00:34,170 Since of course we're using elements are pro, 15 00:00:34,169 --> 00:00:37,399 we do have the form element, 16 00:00:37,395 --> 00:00:40,495 which is absolutely fantastic. 17 00:00:40,495 --> 00:00:42,215 You will find it on the pro, 18 00:00:42,215 --> 00:00:44,215 you see right here form. 19 00:00:44,210 --> 00:00:48,410 I'm going to let me click inside here and 20 00:00:48,410 --> 00:00:50,390 actually remove this block 21 00:00:50,390 --> 00:00:52,720 because we didn't have the lipid forms anymore. 22 00:00:52,715 --> 00:00:55,465 But don't take any form and then just drop 23 00:00:55,460 --> 00:00:58,970 it on the Contact Us title. 24 00:00:58,969 --> 00:01:02,989 Just like with the WP forms plugin by default, 25 00:01:02,990 --> 00:01:04,250 you will have a very, 26 00:01:04,250 --> 00:01:07,070 very simple contact form 27 00:01:07,070 --> 00:01:09,400 that it will have three fields of name, 28 00:01:09,395 --> 00:01:11,935 e-mail, message, right here. 29 00:01:11,930 --> 00:01:14,320 These are the fields you can add. 30 00:01:14,315 --> 00:01:15,985 Another field like you click on 31 00:01:15,980 --> 00:01:19,040 Add Item right here where you have type, 32 00:01:19,040 --> 00:01:20,750 you will have different kinds of fuels. 33 00:01:20,750 --> 00:01:22,610 You can add day time. 34 00:01:22,610 --> 00:01:24,410 It can even add file uploads. 35 00:01:24,410 --> 00:01:27,410 So if you want your potential subscribers 36 00:01:27,409 --> 00:01:30,019 or customers to attach files to send to you, 37 00:01:30,020 --> 00:01:32,050 you do have that field. 38 00:01:32,045 --> 00:01:36,775 You can also integrate elemental with Google capture. 39 00:01:36,770 --> 00:01:38,870 And then you can use the recapture version 40 00:01:38,870 --> 00:01:41,330 one and version three in here for security. 41 00:01:41,330 --> 00:01:44,890 And then you also have like the honeypot and so on, 42 00:01:44,885 --> 00:01:46,825 not adding any additional fields. 43 00:01:46,820 --> 00:01:48,790 So I'll just leave these three. 44 00:01:48,785 --> 00:01:52,045 However, this is of course very subjective, 45 00:01:52,040 --> 00:01:53,840 but I prefer not to have the labels. 46 00:01:53,840 --> 00:01:56,000 I prefer just happened to place holders instead of 47 00:01:56,000 --> 00:01:59,090 each field indicating what kind of field that is. 48 00:01:59,090 --> 00:02:02,540 So I'm gonna go ahead and hide the label. 49 00:02:02,540 --> 00:02:04,610 So just have name email message. 50 00:02:04,610 --> 00:02:07,340 Now to edit the actual fuels themselves, 51 00:02:07,340 --> 00:02:09,770 you click inside each one specific sample name. 52 00:02:09,770 --> 00:02:11,420 I'm going to click on Name and 53 00:02:11,415 --> 00:02:14,015 invite here I can change the label itself, 54 00:02:14,014 --> 00:02:15,544 can change the placeholder. 55 00:02:15,545 --> 00:02:18,185 And of course we're gonna make it required. 56 00:02:18,185 --> 00:02:19,985 And then under advanced, 57 00:02:19,985 --> 00:02:22,645 you will have things like the ID as well as 58 00:02:22,640 --> 00:02:25,930 the short code which we will make use of very, very soon. 59 00:02:25,925 --> 00:02:28,405 Same goes with e-mail in here. 60 00:02:28,400 --> 00:02:30,830 It's required and then message of course 61 00:02:30,830 --> 00:02:33,260 all make the message if required as well. 62 00:02:33,260 --> 00:02:35,970 You can make this field is smaller or larger 63 00:02:35,974 --> 00:02:39,384 depending on your tastes, and that's it. 64 00:02:39,380 --> 00:02:42,230 Okay? In here you've got the input size 65 00:02:42,229 --> 00:02:45,169 for the actual impute for each field. 66 00:02:45,170 --> 00:02:46,820 You can make it small, medium, large. 67 00:02:46,820 --> 00:02:48,230 It's entirely up to you. 68 00:02:48,230 --> 00:02:49,280 You've got buttons. 69 00:02:49,280 --> 00:02:51,940 Do you want to make the buttons medium-sized, 70 00:02:51,940 --> 00:02:56,090 large size, but that's just the send button itself. 71 00:02:56,090 --> 00:02:59,000 You can change the text right here for 72 00:02:59,000 --> 00:03:02,050 the submit button itself, and so on. 73 00:03:02,045 --> 00:03:05,975 Now, this is where things get very, very spicy. 74 00:03:05,975 --> 00:03:08,695 Actions after submit, what happens 75 00:03:08,690 --> 00:03:12,220 once the user has clicked on Send? 76 00:03:12,215 --> 00:03:13,715 Right here? 77 00:03:13,715 --> 00:03:17,365 By default to actions have already been enabled. 78 00:03:17,360 --> 00:03:18,650 Collect submissions, 79 00:03:18,650 --> 00:03:20,470 which I'll show you in just a second. 80 00:03:20,465 --> 00:03:24,625 And then email, because these two are active by default, 81 00:03:24,620 --> 00:03:25,640 you have clicked submissions 82 00:03:25,640 --> 00:03:27,260 right here and then you have e-mail. 83 00:03:27,260 --> 00:03:28,750 Now collects submissions you would 84 00:03:28,745 --> 00:03:30,415 actually see in the backend. 85 00:03:30,410 --> 00:03:31,880 Let me just quickly show you. 86 00:03:31,880 --> 00:03:34,030 You will see in the backend, 87 00:03:34,025 --> 00:03:35,845 once people begin to submit 88 00:03:35,840 --> 00:03:37,850 the contact form right here where you 89 00:03:37,850 --> 00:03:40,010 have elemental at UCI submissions 90 00:03:40,009 --> 00:03:42,049 in here you could have submissions. 91 00:03:42,050 --> 00:03:43,880 And this is where you begin to 92 00:03:43,880 --> 00:03:46,310 see the person's name and so on, 93 00:03:46,310 --> 00:03:47,470 in fact, will perform 94 00:03:47,465 --> 00:03:49,585 an experiment very, very, very soon. 95 00:03:49,580 --> 00:03:52,240 But that's it for the submissions. 96 00:03:52,235 --> 00:03:56,165 Now, email right here. 97 00:03:56,165 --> 00:03:58,915 You want to receive an e-mail that somebody 98 00:03:58,910 --> 00:04:01,820 has submitted a contact form on your website. 99 00:04:01,820 --> 00:04:04,000 Right here, you can choose 100 00:04:03,995 --> 00:04:06,535 the email address to receive identification. 101 00:04:06,530 --> 00:04:09,400 Of course, I'm gonna put my own admin email light there. 102 00:04:09,395 --> 00:04:11,545 And then of course by default you have to subject 103 00:04:11,540 --> 00:04:13,580 new message from and then your website's name. 104 00:04:13,580 --> 00:04:15,290 You can customize this of course. 105 00:04:15,290 --> 00:04:17,890 Then the message will contain all fields. 106 00:04:17,885 --> 00:04:21,655 However, here you have the from email, 107 00:04:21,650 --> 00:04:24,950 from name you want to use or choose 108 00:04:24,950 --> 00:04:28,910 the data provided by the user. 109 00:04:28,910 --> 00:04:31,830 Basically the from email should be the e-mail, 110 00:04:31,834 --> 00:04:33,324 all of the user. 111 00:04:33,320 --> 00:04:35,080 What you want to do here is this, okay? 112 00:04:35,075 --> 00:04:38,045 You would go to the form fields, 113 00:04:38,045 --> 00:04:40,615 go to e-mail, go to Advanced, 114 00:04:40,610 --> 00:04:41,630 and then invite here, 115 00:04:41,630 --> 00:04:43,300 grab the short code. 116 00:04:43,295 --> 00:04:44,785 So copy the short code, 117 00:04:44,780 --> 00:04:46,800 come back down here to email. 118 00:04:46,804 --> 00:04:48,924 And anybody here from email. 119 00:04:48,920 --> 00:04:50,420 It was not simply paste 120 00:04:50,420 --> 00:04:53,750 the e-mail ID so 121 00:04:53,750 --> 00:04:55,670 that you can actually see the person's email 122 00:04:55,670 --> 00:04:57,170 and then from name as well, 123 00:04:57,170 --> 00:05:00,500 do the exact same thing, go to the Name field Advanced, 124 00:05:00,500 --> 00:05:03,610 and then simply grab the shortcut for the name field. 125 00:05:03,605 --> 00:05:07,825 Go back to e-mail and then provide here from name. 126 00:05:07,820 --> 00:05:09,640 Simply paste that. 127 00:05:09,635 --> 00:05:13,255 And then they reply to be set to the e-mail, 128 00:05:13,250 --> 00:05:15,020 of course, because you'd like to respond to 129 00:05:15,020 --> 00:05:17,080 the person's e-mail address. 130 00:05:17,075 --> 00:05:18,035 And that's it. 131 00:05:18,035 --> 00:05:20,375 You can add your CC, you're blind, 132 00:05:20,375 --> 00:05:22,855 you're blind, copy, and so on. 133 00:05:22,850 --> 00:05:25,190 You can add the metadata in here as well, 134 00:05:25,190 --> 00:05:27,650 such as like the page you're a real person visited, 135 00:05:27,650 --> 00:05:29,800 the date, time, and so on. 136 00:05:29,795 --> 00:05:31,445 Sin as HTML or plane. 137 00:05:31,445 --> 00:05:32,885 This is very, very, very subjective. 138 00:05:32,885 --> 00:05:36,905 It'll depend on your email service provider. 139 00:05:36,905 --> 00:05:38,785 If also got steps sentence 140 00:05:38,780 --> 00:05:40,430 lambda squiggly, show you what this is. 141 00:05:40,430 --> 00:05:41,960 If you go back to your form fields, 142 00:05:41,960 --> 00:05:43,100 maybe you want to create 143 00:05:43,100 --> 00:05:46,190 like maybe you'll form is actually very, 144 00:05:46,190 --> 00:05:48,770 very long for some reason and you want to break it down. 145 00:05:48,770 --> 00:05:51,370 When you're adding your item on the type, 146 00:05:51,365 --> 00:05:53,045 you will have step. 147 00:05:53,045 --> 00:05:55,565 Once you have step now you have next. 148 00:05:55,564 --> 00:05:57,534 So after the step you can then begin 149 00:05:57,530 --> 00:05:59,450 to add more fields again. 150 00:05:59,450 --> 00:06:01,240 So what happens is once they fill out 151 00:06:01,235 --> 00:06:04,925 the false fuels in the first section and click on Next. 152 00:06:04,925 --> 00:06:07,715 It will take them to the next section for the form, 153 00:06:07,715 --> 00:06:09,805 that's basically what the steps, 154 00:06:09,800 --> 00:06:12,010 as you can see, this is step one right here. 155 00:06:12,005 --> 00:06:14,635 And then you can see step two there on the right. 156 00:06:14,630 --> 00:06:16,340 That's what that is used for. 157 00:06:16,340 --> 00:06:18,580 That's your steps are Settings. 158 00:06:18,575 --> 00:06:22,255 And then you've also got the additional options like Hey, 159 00:06:22,250 --> 00:06:25,370 do you want to customize messages like, okay, 160 00:06:25,370 --> 00:06:26,570 the thermo sense successfully, 161 00:06:26,570 --> 00:06:28,670 you will get back to you in 24 hours, things like that. 162 00:06:28,670 --> 00:06:30,520 You have that option in here. 163 00:06:30,515 --> 00:06:33,475 But they'll let me forget going back to 164 00:06:33,470 --> 00:06:37,490 the actions after submit, you have many, 165 00:06:37,490 --> 00:06:40,050 Apart from clicked submissions, e-mail, 166 00:06:40,054 --> 00:06:42,414 you can have e-mail to you 167 00:06:42,410 --> 00:06:43,820 can you can redirect them to 168 00:06:43,820 --> 00:06:45,620 a separate page. You have a webhook. 169 00:06:45,620 --> 00:06:47,140 And of course, if you're using 170 00:06:47,135 --> 00:06:50,095 email management software like our Mailchimp, 171 00:06:50,090 --> 00:06:54,370 active campaign, you can connect them in here as well. 172 00:06:54,365 --> 00:06:57,095 You can connect them to Slack Discord, 173 00:06:57,095 --> 00:06:59,455 open provide a pop-up message as well. 174 00:06:59,450 --> 00:07:03,980 So you've got plenty of options to configure. 175 00:07:03,980 --> 00:07:05,990 Alternate turn. What happens once the user 176 00:07:05,990 --> 00:07:09,590 has submitted the form? 177 00:07:09,590 --> 00:07:13,040 That is basically it. 178 00:07:13,040 --> 00:07:15,350 Let us go ahead and close that one. 179 00:07:15,350 --> 00:07:18,730 And that's, I'm gonna go ahead now and simply updates. 180 00:07:18,725 --> 00:07:20,665 And of course, let's take a look at 181 00:07:20,660 --> 00:07:22,760 the new page right here. 182 00:07:22,760 --> 00:07:25,930 Oops, my internet is misbehaving. 183 00:07:25,925 --> 00:07:27,235 Yet again. 184 00:07:27,230 --> 00:07:28,600 My apologies. Okay. 185 00:07:28,595 --> 00:07:29,995 That's right Now you can see 186 00:07:29,990 --> 00:07:32,000 the new Contact Form 187 00:07:32,000 --> 00:07:34,280 built with elements of Pro Arte lemon. 188 00:07:34,280 --> 00:07:36,830 I'll show you an example of the submissions. 189 00:07:36,830 --> 00:07:38,720 I'm gonna pause the video and simply 190 00:07:38,720 --> 00:07:40,430 submit a message and then 191 00:07:40,430 --> 00:07:42,320 you will see the results in here. 192 00:07:42,320 --> 00:07:43,190 Welcome back. 193 00:07:43,190 --> 00:07:44,350 And as you can see right now, 194 00:07:44,345 --> 00:07:47,635 I've actually sent to contact forms, 195 00:07:47,630 --> 00:07:49,910 filled out to contact from one to seven browsers. 196 00:07:49,910 --> 00:07:51,860 One from John James and then one 197 00:07:51,860 --> 00:07:54,050 from Bob Billy at yahoo.com. 198 00:07:54,050 --> 00:07:57,380 Now, I should have pointed this out previously. 199 00:07:57,380 --> 00:07:59,090 For the contact form, 200 00:07:59,090 --> 00:08:00,170 you can change the name 201 00:08:00,170 --> 00:08:02,080 right here where you have the form name. 202 00:08:02,075 --> 00:08:03,445 So you can see I've just gonna have to 203 00:08:03,440 --> 00:08:05,320 change mine to contact form. 204 00:08:05,315 --> 00:08:07,495 And I noticed this when I send 205 00:08:07,490 --> 00:08:10,310 the first form from John gyms. 206 00:08:10,310 --> 00:08:12,800 You can see righted the form, Nemo's new form. 207 00:08:12,800 --> 00:08:17,170 That's why new form because we didn't change the name. 208 00:08:17,165 --> 00:08:20,005 So the second time I changed the name to contact form, 209 00:08:20,000 --> 00:08:22,550 submitted a new form from mobility and 210 00:08:22,550 --> 00:08:23,720 that's where it can now say that the fall now 211 00:08:23,720 --> 00:08:25,100 says our contact form. 212 00:08:25,100 --> 00:08:26,450 So that's basically it. 213 00:08:26,450 --> 00:08:28,220 You've got the IDs, you've got 214 00:08:28,220 --> 00:08:30,970 the page that the formal submitted in. 215 00:08:30,965 --> 00:08:35,605 And of course you can view the actual message itself. 216 00:08:35,600 --> 00:08:37,330 So you click on view right here. 217 00:08:37,325 --> 00:08:40,015 You can see the full name, the email, 218 00:08:40,010 --> 00:08:44,900 and then the actual message from the user and invited. 219 00:08:44,900 --> 00:08:47,510 You've got the additional metadata information 220 00:08:47,510 --> 00:08:49,490 when the message was sent, 221 00:08:49,490 --> 00:08:53,140 what browser was used, and so on. 222 00:08:53,135 --> 00:08:56,575 That's basically how the contact form 223 00:08:56,570 --> 00:08:59,200 with Elementor Pro Walks. Thank you for watching. 224 00:08:59,195 --> 00:09:01,595 I will see you in the next class.