How to show two columns on Contact Form 7

How to show two columns on Contact Form 7

I’ve wrote about creating a two column form in Contact form 7. Now in this tutorial we will see on how to produce a responsive two column form. The form will be in two columns in bigger screens and will come one column in mobile devices. Our final form will look like the following.

How to show two columns on Contact Form 7

you just follow below simple steps:

Step 1: create contact form and copy and paste below code.

and modified field according to your need.

<div id=”responsive-form” class=”clearfix”>

<div class=”form-row”>
<div class=”column-half”>First Name [text* first-name]</div>
<div class=”column-half”>Last Name [text* last-name]</div>

<div class=”form-row”>
<div class=”column-half”>Email [email* your-email]</div>
<div class=”column-half”>Phone [text* your-phone]</div>

<div class=”form-row”>
<div class=”column-full”>Subject [text* your-subject]</div>

<div class=”form-row”>
<div class=”column-full”>Your message [textarea your-message]</div>

<div class=”form-row”>
<div class=”column-full”>[submit “Send”]</div>


Step 2: copy below css and paste in your customiser

/* contact form7 style */
wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
      box-sizing: border-box
.wpcf7 input[type=”text”]:focus{
background: #fff;
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
background: #ff0000;
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
div.wpcf7-validation-errors { 
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
max-width:600px /*– change this to get your desired form width –*/;
margin:0 auto;
width: 100%;
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
-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) { 
width: 50%;
/* end contact form7 style */

How to Center submit button of wpForm

You must navigate to Settings » General first. Add wpf-center to the Form CSS Class box.

Now, Navigate to Appearance >>> customize >>> Advance CSS

And finally, we now just need to add the CSS to our site that will center a form.

add below mentioned code as it is.

.wpf-center .wpforms-submit-container { display: inline-block; text-align: center; width: 100% !important; }


How to add Marquee on any website wordpress,PHP,HTML,eBlogger ?

How to add Marquee on any website wordpress,PHP,HTML,eBlogger ?

if you want to add marquee on any website (wordpress,PHP,HTML,Blogger). you just need to follow below step

Steps:1 Copy below code

<section  style="margin-bottom: -13px;"><marquee onmouseover="this.stop();"
	    <span style="color:white;">
 <a  style="color:white;" href="/netrikas-coffee-table-book-edition-ll/"><strong>New:</strong> Netrika's Coffee Table Book Edition – ll</a>
 <a  style="color:white;" href="/cyber-security-preparedness-survey-edition-ll/"><strong>New:</strong> Cyber Security Preparedness Survey: Edition ll</a>
 <a  style="color:white;" href="/covid-compendium-edition-x/"><strong>New:</strong> Compendium Edition X</a>
 |  <a  style="color:white;" href="/covid-compendium-edition-ix/">Compendium Edition IX</a>
  |  <a  style="color:white;" href="/combating-the-battle-against-counterfeit-medicines-a-newsletter/"> Combating The Battle Against Counterfeit Medicines VII - A Newsletter</a> | <a  style="color:white;" href="/anti-bribery-and-corruption-a-newsletter/">Anti- Bribery And Corruption - A Newsletter</a></span>



Step 2: modify code according to your need.

Step 3: That’s it.

Note: in this code marquee text will automatically stop, when mouse hover on It.

How to Autoplay and Loop YouTube Videos in WordPress

How to Autoplay and Loop YouTube Videos in WordPress

First Method:

Use below code to play youtube video in loop and most important is please change youtube embed link

<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Method 2:

This method also make responsive of your video (in mobile and desktop too)

<style type="text/css">
.full-width-youtube-video {position: relative; padding-bottom: 56.25%; height: 0;}
.full-width-youtube-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media only screen and (max-width: 600px) {
  .full-width-youtube-video {padding-bottom: 100%;}

<div class="full-width-youtube-video">
	<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Click, download a file, and redirect to another page

Follow the below instruction and modify your code with my code

<!DOCTYPE html>
	<title>Click, download file and redirect to another page</title>

<a href="23.jpg" download  onclick="redirect()"><img src="fl.jpeg" class="img1" alt="Click, download file and redirect to another page" style="width:25%;"></a>
      function redirect() { 
   }, 3000);
   return true;

onclick=”return confirm(‘Are you sure ?’)”

How to convert an HTML website to WordPress

How to convert an HTML website to WordPress

How to convert an HTML website to WordPress

Step 1:
Preparing for HTML to WordPress Conversion The first and foremost thing is to choose the right hosting plan that best fits your requirements. Once you’ve purchased a plan, you will need to install WordPress and log into WordPress’s admin panel.

Step 2:
Before you start the site conversion, you must create a backup of your existing website data. It will empower you to eliminate all the migration risks. You can use a hard disk, flash drive or any other medium or object for data backup.

Step 3:
When you have a backup of your website, it’s time to create a WordPress theme. There are two options available:

Manually create a WordPress theme according to your static HTML website.
If your motive is to not only move the content from your HTML website into WordPress but also want the existing design, you will need to create a custom theme. Thankfully, this is not as difficult as it sounds at first. It involves the simple process of setting up some folders and files, copying & pasting, and then uploading the content. Here, you will need a code editor i.e. Notepad++ or Sublime. Moreover, you will require an HTML site’s directory and new WordPress install’s directory.

Create a New Theme Folder and Necessary Files On a desktop, simply create a new folder to store your theme files. Now, create the below-mentioned files in a code editor. You will not need to do, just leave them open for further coding.
Copy current CSS into New Stylesheet If you are looking forward to imitating a design, you will need to play with the CSS. So the first file you should edit is your Style.css file.

You should add the following code to the top of your file:

Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
After this section, just paste your current CSS below and save the file.

Separate your existing HTML
Before we go further, let’s see how WordPress works. WordPress uses PHP to call and recover the data from its underlying database. Each file that is mentioned in this tutorial is created to tell WordPress which part of your web content needs to be shown and where. So, here what you need to do is just copy and paste your existing code into the individual files, you’ve just created and let WordPress know where to display them. Follow all the below mentioned steps to perform this:

First, open the index.html of your existing website. Highlight the section from the top to the div class=”main” tag. Now, copy & paste this section into your header.php file and save.
Again, open your index.html file and highlight the class=”sidebar” element and everything inside it. Now, copy and paste the copied part into your sidebar.php file and save.
Now, select everything that comes after the sidebar and copy & paste this part into your footer.php file and save.
In the end, copy everything that’s left in your index.html file and paste it into your index.php file and save.
• Finalize Your Index.php File

In order to settle your new index.php file, you need to make sure that it calls up all the other sections that is kept in other files you’ve created.

Place the following line of php. at the top of your index.php file:

Place following code to the very bottom of your index.php file

And last but not the least, you will need to add the primary bit of php that WordPress uses to showcase your content to the visitors.

Now, the final step is to add the below-mentioned code in the index.php.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
        <?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>