Contact Form 7

Rubenz Theme is compatible with popular plugin Contact Form 7 for sending messages through your website. Let’s set it up.

Step 1. Go to Admin Panel → Contact → Contact Forms.

If you have correctly imported demo data then you should see a shortcode in here. Copy this shortcode. Now edit a page with Elementor where you want to place your contact form.

Step 2. Use theme Google Map widget from Elementor panel.

In case you don’t see the imported shortcode, you can create a new one by yourself. Here is the full HTML code to be inserted in “Form” section in Contact Forms:

<div class="row form__header">
  <div class="col form__col">
    <h2>Write Us Some Words</h2>
  </div>
</div>
<div class="row form__row">
  <div class="col form__col">
    <label class="input-float js-input-float">
      [text* your-name class:input-float__input]
      <span class="input-float__label">Your Name</span>
    </label>
  </div>
</div>
<div class="row form__row">
  <div class="col form__col">
    <label class="input-float js-input-float">
      [email* your-email class:input-float__input]
      <span class="input-float__label">Your Email</span>
    </label>
  </div>
</div>
<div class="row form__row">
  <div class="col form__col">
    <label class="input-float js-input-float">
      [textarea your-message class:input-float__input class:input-float__input_textarea rows:3]
      <span class="input-float__label">Your Message</span>
    </label>
  </div>
</div>
<div class="row form__row">
  <div class="col form__col form__col_submit">
    <button class="button button_fullwidth button_black button_solid wpcf7-form-control wpcf7-submit" type="submit"><span>Send Message</span></button>
  </div>
</div>

For more information on how setup your e-mail settings and templates, please check official Contact Form 7 Documentation.