How to create stylish contact page in wapkiz

Wapkiz , Wapkiz Codes , Website Building Tutorial   

Step by step guide to create a stylish contact page in wapkiz.

Follow the Steps…
1. Create a new “contact” name page.

2. Go to Bloglist and create a new post with bid “contact” as shown below

3. Go to “Meta Header” and paste this below code there.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

4. Add CSS

.cat{background:linear-gradient(#4078a5,#4785b8);border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;padding:6px;font-weight:bold;font-size:1.1em;color:#fff;margin:7px 15px 7px 15px;}
.contact{background:#fff;text-align:center;padding:3px 3px 10px 3px;margin:0px 15px 7px 15px;}
.contact input[type=email]{background:#fff;border:1px solid #308bcf;padding:6px;color:#5c5c5c;font-weight:bold;width:300px;border-radius:3px;}
.contact textarea{border:1px solid #308bcf; width:305px; height: 100px;border-radius:3px;}
.contact input[type=submit]{background:#006699;color:#fff;font-weight:bold;padding:7px;width:305px;text-align:center;transition:0.3s;border:0px;border-radius:2px; }
.contact input[type=submit]:hover{background:#f44336; }
.error{background:#ffecec;color:red;text-transform:capitalize;border:1px #f5aca6 solid; border-radius:7px; padding:6px;margin:5px 10px;}

5. Now go to “contact” page and paste below Contact Form Code

<div class="cat">Contact</div>
<div class="contact">[blogcmt_form]bid=contact,ud=site-contact.html?success,to=1||
(if :page_url:=:site_url:/site-contact.html?success)<div class="alert alert-success alert-dismissible" align="left"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> Thank You! We have receive your message. We Will Contact you soon.</div>(/if) %notify%
<b>Your Email:</b><br/>
<input type="email" name="blogcmt_name" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+.[a-z]{2,}" placeholder="@">
<br/>
<b>Your Message:</b>
<br/>
<textarea name="blogcmt_text" pattern=".{6,}"></textarea>
<br/>
<font color="red">Note. For movie related issue, mention the movie name.</font>
<br/>
<input type="submit" name="blogcmt_submit" value="SEND">
[/blogcmt_form]
</div>

Done! You have successfully installed a beautiful contact form.

Make a contact page link to browse this page by users.

Now users can contact you from this page.

How to see the messages, send by users?

To see the messages, open Comment in your panel.For any further information please comment below.

Share this: