How to show two columns on Contact Form 7

How to show two columns on Contact Form 7

by | Oct 24, 2023 | PHP, WORDPRESS, Wordpress Design

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>

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

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

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

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

</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;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
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;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
#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%;
}
}
/* end contact form7 style */

How to Center submit button of wpForm

by | Sep 11, 2023 | PHP, WORDPRESS

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; }

Booom.

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

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

by | Sep 2, 2023 | PHP, WORDPRESS, Wordpress Design

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();"
           onmouseout="this.start();">
	    <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>

  </marquee>   



</section>

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

by | Apr 1, 2023 | PHP, 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="https://www.youtube.com/embed/AX_bpLLQOWI?autoplay=1&loop=1" 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%;}
}

</style>
<div class="full-width-youtube-video">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/AX_bpLLQOWI?autoplay=1&rel=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

How to Disable WP JSON Rest API in WordPress without plugin ?

by | Mar 14, 2023 | PHP

just add below code in wordpress theme function.php file at the bottom

--------------------------------------------------
Add the following code to functions.php (anyone)
--------------------------------------------------


if( ! is_user_logged_in() ) {
remove_action('rest_api_init', 'create_initial_rest_routes', 99);
}


-----------------------------------
OR
-----------------------------------


remove_action('rest_api_init', 'create_initial_rest_routes', 99);

------------------------------------------
Check if your site's username is exposed
------------------------------------------
website-URL.com/wp-json/wp/v1/users
website-URL.com/wp-json/wp/v2/users
website-URL.com/wp-json/
remove_action('rest_api_init','create_initial_rest_routes',99);

open image in new popup window

by | Nov 14, 2022 | PHP

<a href="javascript:void(0);" onclick="openwin('https://basantmallick.com/admin/popup.php?img=category-images/Medical-Equipment-On-Rent-Purchase.jpg', '530', '580')" class="linkgray fontbold"><strong>View Image</strong>
                  
     </a>

<script>
function openwin(file,Iwidth,Iheight) {
	var newWin1=window.open(file,'nWin2','x=0,y=0,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,copyhistory=no,width='+Iwidth+',height='+Iheight+',screenX=0,screenY=0,left=20,top=20');
}

</script>
Secured By miniOrange