How to show two columns on Contact Form 7

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.23″ _module_preset=”default”][et_pb_row _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.23″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.23″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_image src=”https://demo.basantmallick.com/wp-content/uploads/2023/10/How-to-show-two-columns-on-Contact-Form-7.png” _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” alt=”How to show two columns on Contact Form 7″ title_text=”How to show two columns on Contact Form 7″ hover_enabled=”0″ sticky_enabled=”0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.23″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″ text_font=”|600|||||||” text_text_color=”#000000″]

you just follow below simple steps:

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

and modified field according to your need.

[/et_pb_text][et_pb_text _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″ text_font=”|600|||||||” text_text_color=”#FFFFFF” background_color=”#000000″ custom_padding=”|||20px|false|false”]

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

[/et_pb_text][et_pb_code _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″ background_color=”#EDF000″ text_orientation=”left” custom_padding=”|||20px|false|false”][/et_pb_code][et_pb_text _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” text_text_color=”#000000″ text_font=”|600|||||||” hover_enabled=”0″ sticky_enabled=”0″]

Step 2: copy below css and paste in your customiser

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.23″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.23″ _module_preset=”default” theme_builder_area=”post_content” background_color=”#000000″ text_font=”|700|||||||” text_text_color=”#FFFFFF” custom_padding=”|||20px|false|false” hover_enabled=”0″ sticky_enabled=”0″ custom_margin=”-30px|||||”] [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]