Hi, In the Previous article we had seen how to create a Single post dynamic and Custom post. Today we will see how to create dynamic contact page and form.
So, Lets Start
Open page.php Page and paste your static Contact page content and we have to include header and footer also.
page.php
<?php get_header()?>
<article>
<header class="section background-primary text-center">
<h1 class="text-white margin-bottom-0 text-size-50 text-thin text-line-height-1">Contact US</h1>
</header>
<div class="section background-white">
<div class="line">
<div class="margin">
<!-- Company Information -->
<div class="s-12 m-12 l-6">
<h2 class="text-uppercase text-strong margin-bottom-30">Company Information</h2>
<div class="float-left">
<i class="icon-placepin background-primary icon-circle-small text-size-20"></i>
</div>
<div class="margin-left-80 margin-bottom">
<h4 class="text-strong margin-bottom-0">Company Address</h4>
<p>Responsive Street 7<br>
London<br>
UK, Europe
</p>
</div>
<div class="float-left">
<i class="icon-paperplane_ico background-primary icon-circle-small text-size-20"></i>
</div>
<div class="margin-left-80 margin-bottom">
<h4 class="text-strong margin-bottom-0">E-mail</h4>
<p>contact@sampledomain.com<br>
office@sampledomain.com
</p>
</div>
<div class="float-left">
<i class="icon-smartphone background-primary icon-circle-small text-size-20"></i>
</div>
<div class="margin-left-80">
<h4 class="text-strong margin-bottom-0">Phone Numbers</h4>
<p>0800 4521 800 50<br>
0450 5896 625 16<br>
0798 6546 465 15
</p>
</div>
</div>
<!-- Contact Form -->
<div class="s-12 m-12 l-6">
<h2 class="text-uppercase text-strong margin-bottom-30">Contact Us</h2>
<form class="customform">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
</div>
<div class="s-12 m-12 l-6">
<input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
</div>
</div>
</div>
<div class="s-12">
<input name="subject" class="subject border-radius" placeholder="Subject" title="Subject" type="text" />
</div>
<div class="s-12">
<textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
</div>
<div class="s-12 m-12 l-4"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
</form>
</div>
</div>
</div>
</div>
</article>
<!-- <div class="background-primary padding text-center">
<a href="/"><i class="icon-facebook_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-twitter_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-google_plus_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-instagram_circle icon2x text-white"></i></a>
</div> -->
<?php get_footer()?>Now Our Contact page looks like below
Now we will see how to dynamic our Contact form. First, we have to install contact form7 Plugin we can use another plugin, but here I am using the Contact form7 plugin.
Once Install and Active the plugin, paste below code into your form section
<?php echo do_shortcode('[contact-form-7 id="74" title="Contact form 1"]')?>Now our Contact form looks like below
Here I am not showing how to design a contact form. I only show how to call the same from the backend.
Now you can see all the inner pages is showing our contact us page content. So we have to separate all the inner pages.
We will separate our about page, So we have to create a template about.php
about.php
<?php
/**
* Template Name: About
*/
get_header()
?>
<article>
<header class="section background-primary text-center">
<h1 class="text-white margin-bottom-0 text-size-50 text-thin text-line-height-1">Sample Page</h1>
</header>
<div class="section background-white">
<div class="line">
<h2 class="text-size-30">Investigationes demonstraverunt lectores</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<blockquote class="margin-top-bottom-20">
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
</blockquote>
<p class="margin-bottom-30">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc
putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc
nobis videntur parum clari, fiant sollemnes in futurum.
</p>
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6 margin-m-bottom-30">
<h2>Mirum est notare quam littera gothica</h2>
<p>
Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
</p>
</div>
<div class="s-12 m-12 l-6">
<h2>Claritas est etiam processus dynamicus</h2>
<p>
Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
</p>
</div>
</div>
</div>
</div>
</div>
</article>
<?php get_footer() ?>
<?php
/**
* Template Name: About
*/
get_header()
?>
html content
<?php get_footer() ?>
Note: We must define a template name and it should be matched with your file name.
Once the code is ready you should open your Dashboard and under the pages, section find the About page and select template like below
Thanks for watching …..
Next Article will be Publish ASAP
