The contact page is an integral part of every website. The contact page is where you collect customer data, as well as where customers can contact your business. In this article, I will guide you, with Contact Form 7 and a little CSS tweaking to the form.
Some of the steps for creating pages with UX Builder have already been covered in previous tutorials, so I won’t repeat them again.
Create a beautiful contact page
You go to create a new page named Contact. The page properties on the right of you right in the interface you choose to help you are Page – Full Width – Parallax Title . Then edit it with UX Builder .
Here you add yourself a Section and add a background image to it. Then in Row you edit 2 columns, 1 column is 5/12 the other is 7/12.
In the first column you add banner, for background color, add text with arbitrary content.
Second column you add Banner , then Text box . In the text box add a Gap 40px high, and add an element named Form (CF7) . You choose an existing contact form for this component.
We will get a contact page template as shown, very easily. But wait, looks like the form isn’t very pretty. Now I use CSS to make it beautiful.
You go to the Contact Form menu , edit the form you have selected. You delete most of the form content and paste the following code and save it:
<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half" style="color: #fff;">Tên khách hàng(*) </div> <div class="column-half" style="color: #fff;">Địa chỉ </div> </div> <div class="form-row"> <div class="column-half" style="color: #fff;">Email (*) [email* email]</div> <div class="column-half" style="color: #fff;">Điện thoại (*) </div> </div> <div class="form-row"> <div class="column-full" style="color: #fff;">Nội dung [textarea your-message]</div> </div> <div class="form-row"> <div class="column-full">[submit class:btn-normal class:shape-round "Gửi đi"]</div> </div> </div><!--end responsive-form--> <div> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span> </div>
Now go back to editing the Flatsome theme, under Additional CSS . This is where I use to add custom css to the interface without touching the css files in the web source.
Paste the following CSS in the Additional CSS section .
#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7 input, .wpcf7 textarea {
width: 100%;
padding: 8px;
background: transparent;
border: 1px solid #ccc;
color: #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
background: transparent;
color: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span><span>47</span><span>48</span><span>49</span><span>50</span><span>51</span><span>52</span><span>53</span><span>54</span><span>55</span><span>56</span>
</div>
Now, you go to the homepage to review the Contact page, the contact form looks neater and more beautiful, isn’t it. It also has a bold effect when you click on the information box.
summary
So, I have helped you create a pretty and professional contact page. Through this article you can also see the power of Contact Form 7, right? With just CSS, we have a beautiful contact form. Good luck!
