{"id":1784,"date":"2017-09-15T08:05:11","date_gmt":"2017-09-15T08:05:11","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1784"},"modified":"2017-12-21T09:22:16","modified_gmt":"2017-12-21T09:22:16","slug":"contact-forms","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/miscellaneous\/contact-forms\/","title":{"rendered":"Contact Forms"},"content":{"rendered":"<p>OMBRA encourages you to use <a href=\"https:\/\/wpforms.com\/\" target=\"_blank\" rel=\"noopener\">WPForms Plugin<\/a> for managing multiple <a href=\"https:\/\/ombra.pikarthouse.com\/main\/contact-form\/\" target=\"_blank\" rel=\"noopener\"><em>contact forms<\/em><\/a> \u2013 it is easy to customize with the drag &amp; drop interface and you can add a form just with simple markup.<\/p>\n<p>After activating the plugin, you should do one more thing in order to make your forms look the same way as OMBRA design. Go to <em>WPForms\u00a0\u2192 Settings<\/em>, find <em>General\u00a0\u2192 Include Form Styling <\/em>and choose\u00a0<strong><em>Base styling only<\/em><\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3202\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms1.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms1.jpg 1000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms1-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms1-768x576.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>After doing those mentioned above, navigate to <em>WPForms \u2192\u00a0Add New<\/em> and you are ready to create your first contact form. Customize the form as you need it also by carefully following the <strong><em><a href=\"https:\/\/wpforms.com\/docs\/\" target=\"_blank\" rel=\"noopener\">WPForms Documentation<\/a>\u00a0<\/em><\/strong>and save it when finished. Then, copy the form generated code to the place you need inside your content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3208\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms2.jpg\" alt=\"\" width=\"750\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms2.jpg 1000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms2-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/ContactForms2-768x576.jpg 768w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>One more thing, <strong><em>you could align the text fields<\/em><\/strong> of your contact form and even\u00a0<strong><em>Submit button<\/em><\/strong> by adding a CSS class in\u00a0<em>Form CSS Class<\/em> field. In order to do so, enter your form and navigate to <em>Settings\u00a0\u2192 General\u00a0\u2192\u00a0Form CSS Class <\/em>and enter there one of the following classes:\u00a0<em>align-text-left, align-text-center<\/em>\u00a0or<em>\u00a0align-text-right,\u00a0<\/em>depending on your preferences of alignment.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3593\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/ContactForms31.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/ContactForms31.jpg 1500w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/ContactForms31-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/ContactForms31-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/ContactForms31-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>OMBRA encourages you to use WPForms Plugin for managing multiple contact forms \u2013 it is easy to customize with the drag &amp; drop interface and you can add a form just with simple markup. After activating the plugin, you should do one more thing in order to make your forms look the same way as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1663,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1784","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=1784"}],"version-history":[{"count":28,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1784\/revisions"}],"predecessor-version":[{"id":3594,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1784\/revisions\/3594"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1663"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}