Al Mamun Hossen Blog

Graphic Designer | Web Developer | Opentype font Developer I am at any time very happy because my country's name is Bangladesh. I am an Emotional, Optimist, Challenging, Simple man, I always try my best to keep the good character, I love my Parents, My Motherland Bangladesh. I'm Working at Reem Group as Computer IT Solution & Ekushey as an Artwork Graphics Designer Opentype font Developer

Recent

Post Top Ad

Your Ad Spot

Saturday, May 21, 2022

How to Display Contact Form 7 Fields on 2 Columns

This is how you split the content of a page on two columns. Now that you got those shortcodes, let`s go back to the Contact Form 7 editor(Wp Dashboard>Contact->Contact Forms: Your contact form) and use them with the fields. The markup of my contact form becomes:

-----------------------------------
    

<div class="column-full">
   <div class="flex-item-right"> 
<div class="column-half"><label>Enter Your Name*[text* name placeholder "Enter Your Name"]</label></div> 
<div class="column-half"><label> Your email*[email* your-email placeholder "Enter Your Email"] </label></div> 
   </div> 

   <div class= "flex-item-left"> 
<div class="column-half"><label> Gender*[select* gender "Mail" "Femail"]<label></div> 
<div class="column-half"><label> Mobile* [tel Mobile placeholder"Enter Your Mobile"] </label>
   </div>
 </div>
<div class="form-row"><label>Enter Your Address*</label>[text* text placeholder "Enter Your Address"]</div>

<div class="form-row"><label> Your Message[textarea your-message]</label></div>
</div>

<label> Upload Your CV [file* cv limit:5242880 filetypes:pdf|doc|docx|ppt|pptx|odt|jpg]</label>

[submit "Submit"]

 


 ------------------------------------ 

 Add Custonm CSS WordPress Additional CSS

  
.form-row{ 
	width: 100%;
  padding:0.65rem;
} 
.column-full{ 
  display: flex;
  flex-wrap: wrap;
	position: relative;
	width:100%;
	-webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box 
} 
.flex-item-left, .flex-item-right {
  width: 100%;
  padding:0.65rem;
}
 
/**---------------- Media query ----------------**/ 
@media only screen and (min-width: 48em) {  
	.flex-item-left, .flex-item-right {
   width: 50%;
}
} 

No comments:

Post a Comment

Post Top Ad

Your Ad Spot