This article will guide you on how to enable “Message Vendor” contact form that allows contacting vendors directly via email.

P.S. Because we care about user experiecne when user is logged-in form automatically populates data from his profile (name, email and phone). 😉

 

Create new contact form in Contact Form 7 plugin


Don’t bother about syntax or configuration errors that might appear

In WordPress dashboard go to Contact → Add New and in “Form” tab paste following code:

<div class="col-lg-12">
<div>[text* your-name default:user_display_name placeholder "First and Last Name"]</div>
<div>[email* your-email default:user_email  placeholder "Email"]</div>
<div>[tel tel-300 placeholder "Phone"]</div>
<div>[textarea* textarea-637 40x3 placeholder "Message"]</div>

<!-- Preferred Contact Method Radio Buttons -->
<div class="preferred-contact-method">
     <h5>Preferred contact method</h5>
     <div class="preferred-contact-radios">
          [radio radio-950 use_label_element default:1 "Email" "Phone"]
     </div>
</div>
<!-- Recaptcha Holder -->
<div class="captcha-holder">[recaptcha]</div>
<!-- Submit Button -->
<div class="message-vendor-submit-button">[submit "Request Pricing"]</div>
</div>
<div class="clearfix"></div>[dynamichidden custom-post-author-email-shortcode "CUSTOM_POST_AUTHOR_EMAIL"]

Then go to “Mail” tab and in “To” field add this code (it’s responsible for sending message directly to the listing owner):

[custom-post-author-email-shortcode]

and then in Message Body paste this code:

From: [your-name] <[your-email]>

Message Body:
[textarea-637]
Phone - [tel-300]
Preferred contact [radio-950]
-- 
This e-mail was sent from a contact form on from your listing page on Listeo.

Click “Save” and go to the next step below.

 

Adding Widget


Go to Appearance →Widgets then add “Listeo Contact Form” to “Single Listing Sidebar” and select contact form created in previous steps.

 

Enabling reCaptcha


If you want to use recaptcha v3 all you need to do is adding API keys for reCaptche v3 in Contact → Integrations. However if you would like to use reCaptcha v2 (this one where user has to click on the recaptcha checkbox) you need to install plugin from the link below and add reCaptcha v2 (it’s important to not confuse v2 with v3) API keys in Contact Integrations.

Contact Form 7 – reCaptcha v2

P.S. reCaptcha v2 will be shown once user will click on contact form. We made that for saving vertical space. 😉

 

Displaying Widget


Each listing owner can enable “Message Vendor” widget on his own in listing submission form.