{"id":7980,"date":"2023-06-19T11:15:19","date_gmt":"2023-06-19T11:15:19","guid":{"rendered":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/?post_type=ht_kb&#038;p=7980"},"modified":"2023-06-19T13:42:52","modified_gmt":"2023-06-19T13:42:52","slug":"contact-form","status":"publish","type":"ht_kb","link":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/knowledge-base\/contact-form\/","title":{"rendered":"14. Contact form  [Elementor]"},"content":{"rendered":"<p>Our theme is compatible with the popular Contact Form 7 plugin.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/102_contact-form.jpg\" alt=\"\" width=\"1682\" height=\"1262\" \/><\/p>\n<p>This plugin normally comes bundled with the theme installer, and 2 contact form templates are included in our demo contents.<\/p>\n<p>When adding a new contact form with the Elementor widget, a contact form should be previously created in WordPress.<\/p>\n<h2 id=\"contact-forms\" >Contact forms<\/h2>\n<p>Please, check fist if you have an existing Contact Form in your website: in WP Admin click Contacts on the left.<br \/>\nWhen importing the demo contents, you should as well import 2 contact forms as follows:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/103_contact-form-7-forms.jpg\" alt=\"\" width=\"1200\" height=\"658\" \/><\/p>\n<p>If contact forms are missing please create a contact form before proceeding.<\/p>\n<p>The full documentation is\u00a0<a href=\"https:\/\/contactform7.com\/docs\/\">here<\/a><\/p>\n<h2 id=\"very-important-information\" >Very important information<\/h2>\n<p>Our demo contact forms come with debug option enabled, so they cannot send emails for real.<br \/>\nYou can work on your forms and once ready to go live, disable the Debug more.<\/p>\n<p>To disable the test mode, edit a form,\u00a0<strong>click &#8220;Additional Settings&#8221;\u00a0<\/strong>and<strong>\u00a0remove &#8220;demo_mode:on&#8221;.\u00a0<\/strong><\/p>\n<p><strong><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/104_cf7-demo-mode.jpg\" alt=\"\" width=\"764\" height=\"558\" \/><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"adding-a-contact-form-to-a-page\" ><strong>Adding a contact form to a page<\/strong><\/h2>\n<p>Edit the page with Elementor, and choose the widget Contact Form 7.<\/p>\n<p>Once added, right click and select a contact form in the Dropdown control.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/105_cf7-select.jpg\" alt=\"\" width=\"374\" height=\"276\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"form-appearance-and-formatting\" >Form appearance and formatting<\/h2>\n<p>When importing the demo contents, please check thr HTML structure of the provided forms: it&#8217;s crafted specifically for this theme and allows to display the fields in the fancy theme styling.<\/p>\n<h3 id=\"specific-formatting-3-requirements\" >Specific formatting: 3 requirements<\/h3>\n<ul>\n<li>The input fields have to be wrapped in a div containing the class &#8220;pdws-fieldset&#8221;<\/li>\n<li>Fields MUST have a placeholder<\/li>\n<li>The label must follow the input field for the animation effect to work correctly<\/li>\n<\/ul>\n<p>Example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/106_field.jpg\" alt=\"\" width=\"670\" height=\"140\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Live code (copy and paste)<\/p>\n<pre>&lt;div class=\"pdws-fieldset\"&gt;\r\n[email* m-name placeholder \"Your name here\" ]\r\n&lt;label for=\"m-name\"&gt;Name &lt;\/label&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3 id=\"button-formatting-add-the-theme-classes\" >Button formatting: add the theme classes<\/h3>\n<p>To display a button that matches with your customizer options, use the code below<\/p>\n<pre>[submit class:pdws-btn--l class:pdws-btn--full \"Subscribe\"]\r\n\r\n\r\n<\/pre>\n<p>Full form example:<\/p>\n<p>&nbsp;<\/p>\n<pre>&lt;div class=\"pdws-fieldset\"&gt;\r\n[email* m-name placeholder \"Your name here\" ]\r\n&lt;label for=\"m-name\"&gt;Name &lt;\/label&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"pdws-fieldset\"&gt;\r\n[email* m-add placeholder \"Your name here\" ]\r\n&lt;label for=\"m-add\"&gt;Email &lt;\/label&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"pdws-fieldset\"&gt;\r\n&lt;textarea id=\"your-message\" placeholder=\"Message\" name=\"your-message\" required=\"required\"&gt;&lt;\/textarea&gt;\r\n&lt;label for=\"your-message\"&gt;Message&lt;\/label&gt;\r\n&lt;\/div&gt;\r\n\r\n[submit class:pdws-btn--l class:pdws-btn--full \"Subscribe\"]<\/pre>\n<p>&nbsp;<\/p>\n<p>Mail part example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-content\/uploads\/2023\/06\/107_cf7-mail-podcast-website-template-demo.jpg\" alt=\"\" width=\"1164\" height=\"1114\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"troubles-sending-emails\" >Troubles sending emails<\/h2>\n<p>On some hosting providers, it&#8217;s not allowed to send anonymous emails from PHP.<\/p>\n<p>You can ask your hosting for clarifications if you experience issues while sending an email.<\/p>\n<p>To solve the problem, please install WP Mail SMTP.<\/p>\n<p>Create a mail address in your domain, and set up the plugin using new email SMTP settings.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht_kb_category":[703,704],"ht_kb_tag":[849,845,851,850],"class_list":["post-7980","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-6-pages-and-home-creation","ht_kb_category-elementor-widgets","ht_kb_tag-contct-form","ht_kb_tag-elementor","ht_kb_tag-email","ht_kb_tag-form"],"_links":{"self":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7980"}],"collection":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/comments?post=7980"}],"version-history":[{"count":5,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7980\/revisions"}],"predecessor-version":[{"id":8176,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7980\/revisions\/8176"}],"wp:attachment":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/media?parent=7980"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb_category?post=7980"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb_tag?post=7980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}