Digi Educorp

Menu
Solutions

Custom contact form 7 with horizontal Fields

Create a contact form

To create a custom horizontal form layout with Contact Form 7 in WordPress, you’ll need to modify the HTML structure and apply some CSS styling. Here’s a step-by-step guide to help you achieve this

  • First, create your form using Contact Form 7 by going to WordPress admin panel > Contact > Add New. Define your form fields using Contact Form 7's markup.

Customize the HTML Structure

  • In the form editor, you'll need to customize the HTML structure to achieve the horizontal layout.
  • The form editor support HTML format, Just copy and paste the below code snippet and replace the required form fields.
  • The custom code is responsive for tabs annd mobile layouts.

<div class=”row-flex”><p>
<div class=”flex-child”>[text* firstname placeholder “First Name”]</div></P>
<div class=”flex-child”>[text* lastname placeholder “Last Name”]</div></p>
</div>

<div class=”row-flex”><p>
<div class=”flex-child”>[email* email placeholder “Your E-mail”]</div>
<div class=”flex-child”>[tel* phonenumber placeholder “Your Phone”]</div></p>
</div>

<div class=”row-flex”>
[textarea message placeholder “Message”]
</div>


[submit “Submit Now”]

<style>
.row-flex{
display:flex;
flex-direction:row;
}
.flex-child{
width:48%;
margin-right:2%;
}

@media only screen and (max-width: 600px){
.row-flex{
display:flex;
flex-direction:column;
}
.flex-child{
width:100%;
margin-right:0
margin-bottom:2%;
margin-top:5%
}
}

</style>

Save and publish

After customizing the HTML and adding CSS styling, save your changes in Contact Form 7 and publish your form.

By following these steps, you should be able to create a custom horizontal form layout with Contact Form 7 in WordPress. Adjust the HTML structure and CSS styling according to your specific requirements and design preferences.

  • Subscribe for Updates
  • Share on Social Media