You can create a contact form with Uncode with the popular and free Contact Form 7, which is the solution we use in our demos and that we officially support, or use other plugins at your discretion like Gravity Forms.

Contact Form 7

When you activate the Contact Form 7 plugin (and you import Demo Contents) in the WordPress → Contact menu, you can find all the forms available in our demo, screenshot .
To implement a contact form, you need to install the CF7 Plugin from Uncode → Install Plugins. Once you have installed the plugin, create a form using the CF7 plugins’ options, and insert it in your page with the dedicated Uncode WPBakery Page Builder Contact Form module.

• Contact Form 7

Contact Form 7 module

To define your form and input's style, you have new options that you can select from Page Builder's Contact Form 7 form settings, screenshot . Here you have the following styles available:

• Default Background
• Default Underline
• No Label Default
• No Label Background
• No Underline Label

To be able to use these styles independently, the form must be built according to a certain syntax. Below you have an example for a Classic layout, where all fields are presented in different rows, and an Inline layout, where some fields are placed side by side.

NB. If you plan to use extra plugins that work on your forms, be careful to use the 'No Label' styles because they might hide possible additional fields of these plugins.

Contact Form 7 Classic Layout

<label for="your-name">Your Name*</label>
[text* your-name id:your-name placeholder "First Name"]

<label for="your-email">Your Email*</label>
[email* your-email id:your-email placeholder "Your Email"]

<label for="your-subject">Subject</label>
[text your-subject id:your-subject placeholder "Subject"]

<label for="your-message">Your Message</label>
[textarea your-message id:your-message placeholder "Your Message"]

[acceptance accept-this-1] Check here if you accept our terms (<a href="#">Privacy Policy</a>) [/acceptance]

[submit class:btn class:btn-accent "Contact"]

Contact Form 7 Inline Layout

<div class="wpcf7-inline-wrapper">

<p class="wpcf7-inline-field"><label for="Your-name" class="wpcf7-inline-field">Your Name*</label>
[text* your-name id:your-name placeholder "Your Name"]</p>

<p class="wpcf7-inline-field"><label for="your-email" class="wpcf7-inline-field">Your Email*</label>
[email* your-email id:your-email placeholder "Your Email"]</p>

</div>

<p class="wpcf7-inline-wide"><label for="Subject" class="wpcf7-inline-field">Subject</label>
[text subject id:subject placeholder "Subject"]</p>

<p><label for="your-message">Your Message</label>
[textarea your-message id:your-message placeholder "Your Message"]</p>

[acceptance accept-this-1] Check here if you accept our terms (<a href="#">Privacy Policy</a>) [/acceptance]

[submit class:btn class:btn-accent class:btn-block "Contact"]

Contact Form 7 all elements

In this example, you find all the elements that can be used in a Contact Form 7 form:

<label for="your-name">Your Name (required)</label>
[text* your-name id:your-name placeholder "Your Name"]

<label for="your-email">Your Email (required)</label>
[email* your-email id:your-email placeholder "Your Email"]

<label for="your-subject">Subject</label>
[text* your-subject id:your-subject placeholder "Subject"]

<label for="your-message">Your Message</label>
[textarea your-message id:your-message placeholder "Your Message"]

<label for="your-checkbox">Checkbox</label>
[checkbox checkbox-252 id:your-checkbox "One" "Two" "Three"]

<label for="your-radio">Radio button</label>
[radio radio-916 id:your-radio "One" "Two" "Three"]

<label for="your-dropdown">Dropdown</label>
[select menu-640 your-dropdown id:your-dropdown "One" "Two" "Three"]

<label for="your-url">Url</label>
[url url-151 your-url id:your-url placeholder "Url"]

<label for="your-tel">Telephon number</label>
[tel tel-305 your-tel id:your-tel placeholder "Telephon"]

<label for="your-number">Spinbox</label>
[number number-997 your-number id:your-number placeholder "Spinbox"]

<label for="your-slider">Slider</label>
[range range-682 your-slider id:your-slider]

[acceptance accept-this-1] Check here if you accept our terms (<a href="#">Privacy Policy</a>) [/acceptance]

<label for="your-date">Date</label>
[date date-429 your-date id:your-date]

<label for="your-upload">File upload</label>
[file file-612 your-upload id:your-upload]

<label for="your-captcha">Captcha image</label>
[captchac captcha-224 your-captcha id:your-captcha]

<label for="your-captcha-field">Captcha field</label>
[captchar captcha-224 your-captcha-field id:your-captcha-field]

[submit class:btn class:btn-default]

Contact Form 7 button

If you need to customize the button appearance, you can modify or add a button classes as you can see from this, screenshot . You find all the button classes here.

Contact Form 7 and GDPR

The GDPR say that you must get user consent to process any data, and this is also valid for forms. Uncode uses the super popular Contact Form 7 free plugin. If you need to be compliant with GDPR requirements you need to implement a checkbox in your form as described in the dedicated Contact Forms documentation page and basically insert this code before the submit button shortcode.

[acceptance accept-this-1] Check here if you accept our terms (<a href="#">Privacy Policy</a>) [/acceptance]

Please note that Contact Form 7 doesn’t store submitted messages anywhere (official documentation). Therefore, you may lose important messages forever if your mail server has issues or you make a mistake in mail configuration or you cannot save the user consent. Install a message storage plugin before this happens to you. Flamingo saves all messages through contact forms into the database. Flamingo is a free WordPress plugin created by the same author as Contact Form 7.

Alternatively, you can use Gravity Forms which has a native option to save each message and consent received. Gravity Forms is supported by Uncode but is not a free plugin we can include for free in our product.

• How to make Privacy-Friendly contact forms with Contact Form 7

Gravity Forms

Gravity Forms for WordPress is a full featured contact form plugin that features a drag and drop interface, advanced notification routing, lead capture, conditional logic fields, multi-page forms, pricing calculations and the ability to create posts from external forms.

• Gravity Forms