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