{"id":154,"date":"2025-01-08T04:35:46","date_gmt":"2025-01-08T04:35:46","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit\/?p=154"},"modified":"2025-02-03T06:22:20","modified_gmt":"2025-02-03T06:22:20","slug":"how-to-use-contact-form","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit\/2025\/01\/08\/how-to-use-contact-form\/","title":{"rendered":"How to Create a Contact Form 7?"},"content":{"rendered":"<div class=\"nolwrap\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Streamit - How to Use Contact Form?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/7DEjl7EJQno?start=3&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This guide will walk you through creating a custom contact form using the <strong>Contact Form 7<\/strong> plugin in <strong>Streamit<\/strong>, including adding custom fields and embedding the form into a page or post within your Streamit site.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Install Contact Form 7 Plugin<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From your <strong>WordPress Admin Dashboard<\/strong>, go to <strong>Plugins<\/strong> \u2192 <strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Search for <strong>Contact Form 7<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Install Now<\/strong>, then <strong>Activate<\/strong> the plugin.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Create a New Form<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the WordPress dashboard, go to <strong>Contact<\/strong> \u2192 <strong>Contact Forms<\/strong>.<\/li>\n\n\n\n<li>Click on the <strong>Add New<\/strong> button to create a new form.<\/li>\n\n\n\n<li>You will be taken to the form editor, where you can add fields to your contact form.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Add Fields to the Form<\/strong><\/h2>\n\n\n\n<p>Here\u2019s how to add the common fields needed for your form:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Name Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <strong>Text Field<\/strong> option.<\/li>\n\n\n\n<li>Name it <strong>Your Name<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Insert Tag<\/strong> to add it to the form.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Middle Name Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>Text Field<\/strong> for the <strong>Middle Name<\/strong>.<\/li>\n\n\n\n<li>Insert the tag for the middle name field.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Last Name Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>Text Field<\/strong> for the <strong>Last Name<\/strong>.<\/li>\n\n\n\n<li>Insert the tag for the last name field.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Gender Radio Button<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <strong>Radio Button<\/strong> option.<\/li>\n\n\n\n<li>Name the field <strong>Gender<\/strong> and add two options: <strong>Man<\/strong> and <strong>Woman<\/strong>.<\/li>\n\n\n\n<li>Insert the tag for the radio button field.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Email Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <strong>Email<\/strong> field and name it <strong>Your Email<\/strong>.<\/li>\n\n\n\n<li>This will allow users to input their email address.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Subject Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>Text Field<\/strong> for the subject of the inquiry.<\/li>\n\n\n\n<li>Name it <strong>Subject<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Message Text Area<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a <strong>Text Area<\/strong> for the message content.<\/li>\n\n\n\n<li>Name it <strong>Message<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8. Submit Button<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The form will automatically generate a <strong>Submit Button<\/strong> when you add the necessary fields.<\/li>\n<\/ul>\n\n\n\n<p>After adding all fields, the form will have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your Name<\/li>\n\n\n\n<li>Middle Name<\/li>\n\n\n\n<li>Last Name<\/li>\n\n\n\n<li>Gender (Radio Button: Man\/Woman)<\/li>\n\n\n\n<li>Your Email<\/li>\n\n\n\n<li>Subject<\/li>\n\n\n\n<li>Message<\/li>\n\n\n\n<li>Submit Button<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: Save the Form<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Name your form, e.g., <strong>Enter Your Details<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong> to save the form.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5: Embed the Form into a Streamit Page\/Post<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Pages<\/strong> or <strong>Posts<\/strong> in the WordPress dashboard, and either select an existing page\/post or create a new one.<\/li>\n\n\n\n<li>In the page editor, click <strong>Add Block<\/strong> and search for <strong>Contact Form 7<\/strong>.<\/li>\n\n\n\n<li>Choose the form you created (e.g., <strong>Enter Your Details<\/strong>).<\/li>\n\n\n\n<li>Click <strong>Insert<\/strong> to add the form shortcode to the page.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: Preview the Form<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After embedding the form, click <strong>Preview<\/strong> to see how it looks on the page.<\/li>\n\n\n\n<li>Your form will now be visible with fields for <strong>Your Name<\/strong>, <strong>Middle Name<\/strong>, <strong>Last Name<\/strong>, <strong>Gender<\/strong>, <strong>Your Email<\/strong>, <strong>Subject<\/strong>, <strong>Message<\/strong>, and the <strong>Submit Button<\/strong>.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p>\ud83c\udf89 <strong>Your Contact Form is now live on Streamit!<\/strong> This form allows users to submit their personal details, including their name, email, subject, and message, directly from your site.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This guide will walk you through creating a custom contact form using the Contact Form 7 plugin in Streamit, including adding custom fields and embedding the form into a page or post within your Streamit site. Step 1: Install Contact Form 7 Plugin Step 2: Create a New Form Step 3: Add Fields to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":134,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-streamit"],"featured_image_src":null,"author_info":{"display_name":"Iqonic Design","author_link":"https:\/\/documentation.iqonic.design\/streamit\/author\/dwd3f32kd2r2rf23wf4df\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":5,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/154\/revisions\/1474"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/134"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}