40+ premium widgets & 120+ professionally designed templates - 100% Free 🎉
View Categories

Contact Form

1 min read

This article discusses how to seamlessly integrate Contact Form 7 with Elementor using the premium GW Contact Form 7 Widget.

Adding Contact Form 7 to Your Page: #

Locate and Add GW Contact Form 7 Widget:

  1. Open your Elementor editor and navigate to the GW Elementor Addons elements.
  2. Add the GW Contact Form 7 widget to your page effortlessly.

Crafting Your Form:

  1. In the Content tab, choose from the forms you’ve created with Contact Form 7.
  2. Select the desired form to integrate seamlessly into your Elementor-designed page.
Edit Contact Form 7 widget - GW Elementor Addons
Edit Contact Form 7 widget – GW Elementor Addons

Styling Your Form: #

Customizing Style Settings:

  1. Move to the Style tab to access a rich set of customization options.
  2. Style form components such as labels, inputs, submit buttons, and spacings to integrate your form with your overall design seamlessly.
Style the Contact Form 7 widget - GW Elementor Addons
Style the Contact Form 7 widget – GW Elementor Addons

Going Beyond with Advanced Options: #

Exploring Advanced Settings:

  1. Dive into the Advanced tab to unlock classic Elementor options for additional styling and fine-tuning.
  2. Utilize advanced features to perfect the positioning, responsiveness, and additional styling details for your Contact Form Element.

Unlock Custom Layouts: #

Contact Form 7’s default layout is one field per row. However, adding some HTML markup allows multiple fields with different styles in the same row. Check the examples below and keep in mind that you can combine anything you need:

Contact Form with 2-columns

<div class="gwel-form">
<div class="gwel-fields-wrapper">
<div class="gwel-one-half">[text* your-name placeholder autocomplete:off "Company Name *"]</div>
<div class="gwel-one-half">[email* your-email autocomplete:off placeholder "Email *"]</div>
<div class="gwel-one-half">[text your-subject placeholder autocomplete:off "Subject"]</div>
<div class="gwel-one-half">[text your-subject placeholder "Phone"]</div>
<div>[textarea your-message placeholder "Message"]</div>
<div>[submit "Send your message"]</div>
</div>
</div>

Contact Form with 3-columns

<div class="gwel-form">
<div class="gwel-fields-wrapper">
<div class="gwel-one-third">[text* your-name placeholder autocomplete:off "Company Name *"]</div>
<div class="gwel-one-third">[email* your-email autocomplete:off placeholder "Email *"]</div>
<div class="gwel-one-third">[text your-subject placeholder autocomplete:off "Subject"]</div>
<div>[textarea your-message placeholder "Message"]</div>
<div>[submit "Send your message"]</div>
</div>
</div>

Newsletter Sample Form

<div class="gwel-newsletter gwel-horizontal">
[email* your-email placeholder autocomplete:off "Your Email (required)"]
[submit "Send your message"]</div>

Congratulations! You’ve successfully integrated and customized your Contact Form 7 with Elementor using the GW Contact Form 7 Widget. Enjoy it! 🙂

Close