You need to install Contact Form 7 plugin to proceed the following steps.
Please note that, we have used the plugin for build Appointment Form and Contact Form layout.
Step 01: Go to Contact >> Add New from the left panel.
Step 02: Add the title Contact form 1 of the Contact Form. Then, add follwoing lines Setup the From portion of the contact from(Ex: See the following screenshot).
Get Contact Form Shortcode:
Navigate to Contact >> Contact Forms page. You will get the lists like the following screenshot.
Contact Form (Default Layout) Code:
We strongly recommend to use the following codes to generate contact form layout.
[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[text* your-subject placeholder "Subject"]
[textarea* your-message 40x5 placeholder "Your message here"]
[submit class:btn-theme class:btn-square class:btn"Send Message"]
Please Note: The value of id tag in shortcode may be different for your site.
Additionally, You can include additional class appeal-contact-form to get the alternative contact form layout.
[contact-form-7 id="5" title="Contact Form"]
[contact-form-7 id="5" title="Contact Form" html_class="appeal-contact-form"]
Contact Form (Default Layout) Output:
Step 03: Setup the Mail portion of the contact from (Ex: See the following screenshot)
Step 04: Setup the Messages portion of the contact from (Ex: See the following screenshot)
Step 05: Click Save to save the Form and you'll get a form short code which we'll paste in a page to achieve the form output.
Step 06: Go to "Pages > Add New" from the left panel.
Step 07: Input the title "Contact 1" of the page.
From the right side Page Attribute, select Home Page from the Template selection dropdown.
From The right side Page Layout Settings select "WPBakery Page Builder Page" to "Yes".
Step 08: Click on Backend Editor to achieve WPBakery Page Builder drag n drop process.
Step 09: Click on Add New Element to achieve a Row of WPBakery Page Builder.
Step 10: Inside the Row you can add different elements by drag n drop WPBakery Page Builder.
Step 11: We add WPBakery Page Builder Google Map, Info Box and Text Block Elements for this page.
Step 12: You should see the WPBakery Page BuilderDocumentation Folder.
Step 13: Setup the Google Map Elements Latitude and longitude to achieve the map.
Step 14: Paste the short code into the Text Block (Ex: like following you'll have a short code).
[contact-form-7 id="2209" title="Contact Form" html_class="appeal-contact-form"]
Step 15: Here are the screen shot of Different Block Elements we used in the Contact 1 page.