{"id":564,"date":"2017-02-13T23:59:32","date_gmt":"2017-02-13T23:59:32","guid":{"rendered":"https:\/\/lindeni.co.za\/?p=564"},"modified":"2018-04-02T12:09:12","modified_gmt":"2018-04-02T10:09:12","slug":"create-wordpress-forms","status":"publish","type":"post","link":"https:\/\/lindeni.co.za\/create-wordpress-forms\/","title":{"rendered":"How to create forms on wordpress"},"content":{"rendered":"<p>Hello,<\/p>\n<p>Today I want to show you how to create WordPress forms and display on any wordpress page or post without writing code. At the end of this tutorial, you will be able to create unlimited form with unlimited fields and insert them on any page in your WordPress site or blog.<\/p>\n<p><strong>Let\u2019s get started.<\/strong><\/p>\n<p>You can watch the following playlist or follow along in the ttutorial in this page.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe title=\"How to create forms on wordpress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PL4IH0JvilQDpOyR-UZQZGigu1vgxHfTNP\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p><strong>Settings<\/strong><\/p>\n<p>In order to create WordPress forms, First you will have to go to your WordPress dashboard and install <a href=\"https:\/\/wordpress.org\/plugins\/multi-purpose-mail-form\/\" target=\"_blank\" rel=\"noopener\">this plugin<\/a> onto your site so you can start using it.<\/p>\n<p>Once the plugin is installed, you will have to go to the plugin\u2019s settings page by going to \u201cMPMF &gt; Settings\u201d so that you can setup the minimum requirements of the plugin to get it working. Head on to that page and enter your email address and phone number and then click on \u201cUpdate Contact Details\u201d. Your email address will be used to receive the form data sent by your visitors on your website, so enter an email address you have access to. The email address and form number can be optionally displayed on the default page for the visitors to get your contact details.<\/p>\n<p>You can also customize the messages or notifications that will be used when someone submits a form, this includes error and success messages that will be used when a form is submitted with a success or error. This can be done in the settings page under the \u201cEmail Settings\u201d tab.<\/p>\n<p>If you prefer to use the Google CAPTCHA feature built in the plugin, then you can follow the links on the \u201creCAPTCHA\u201d tab on the settings page. Once you are satisfied with the settings then you can move on to create your forms.<\/p>\n<p><strong>Creating a blank form<\/strong><\/p>\n<p>Creating a form is very easy, just go to the main page by clicking \u201cMPMF\u201d on the left side of the WordPress dashboard. You will see a page with two sections on the main page \u2013 \u201cForm List \/ Item List\u201d and \u201cNew Form\u201d. Under \u201cNew Form\u201d enter the name of the new form you want to create in the textbox labeled \u201cForm Name\u201d and click on the \u201cCreate\u201d button.<\/p>\n<p><a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form.png\"><img decoding=\"async\" class=\"alignleft wp-image-570\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form-300x76.png\" alt=\"Create WordPress Forms\" width=\"407\" height=\"103\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form-300x76.png 300w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form-600x151.png 600w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form-768x194.png 768w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-new-form.png 979w\" sizes=\"(max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>This will create a new blank form and it will be displayed under the \u201cForm List \/ Item List\u201d section. It will be displayed with a shortcode that you can use to include the form in any page or post.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Insert the shortcode in a page<\/strong><\/p>\n<p>Now\u00a0 under the \u201cForm List \/ Item List\u201d section, copy the shortcode corresponding to the form you created and go to \u201cPages\u00a0 &gt;Add Page\u201d to create a new page and call it anything.<\/p>\n<p><a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list.png\"><img decoding=\"async\" class=\"alignleft wp-image-568\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list-300x47.png\" alt=\"Copy shortcode - create wordpress form\" width=\"402\" height=\"63\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list-300x47.png 300w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list-600x94.png 600w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list-768x120.png 768w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-list.png 979w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<p>Paste the shortcode on this page and publish or save. You can preview your page and it will tell you that the form does not have any fields. Don\u2019t worry, we will add fields next.<\/p>\n<p><strong>Adding fields to your form<\/strong><\/p>\n<p>To add fields, click on the \u201cEdit Fields\u201d button corresponding to the form you want to add fields to in the form list. You will be presented with a page with an empty page with a left column that has a lot of buttons on the right.<\/p>\n<p><a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview.png\"><img decoding=\"async\" class=\"alignleft wp-image-569 size-medium\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview-300x60.png\" alt=\"Create WordPress Form Preview\" width=\"300\" height=\"60\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview-300x60.png 300w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview-600x120.png 600w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview-768x154.png 768w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-form-preview.png 979w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The buttons to the right are used to add fields as you wish, each button is used for a specific type of form field. The labels explain what the field the button can be used to insert.<\/p>\n<p>As you can see, you can click on \u201cText\u201d to insert a normal textbox, \u201cNumber\u201d to insert a number field, \u201cTextarea\u201d to insert a textarea and so on and so forth.<\/p>\n<p><a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-add-form-fields.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-565\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-add-form-fields-145x300.png\" alt=\"Add fields to Create WordPress Forms\" width=\"171\" height=\"354\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-add-form-fields-145x300.png 145w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-add-form-fields.png 399w\" sizes=\"(max-width: 171px) 100vw, 171px\" \/><\/a>There are some user\/person specific fields you can get under the \u201cUser Fields\u201d section. This will include general personal and contact details such as name, surname, email address, street address and others. All fields under this section can be inserted with a single click of a button and they are preconfigured because they are commonly used.<\/p>\n<p>We can also add an anti-spam CAPTCHA with a single click under the \u201cSecurity \/ Anti Spam\u201d section. This can be used to protect our form from being submitted by robots.<\/p>\n<p><strong>Now let\u2019s add a few fields on our form and see what we can do.<\/strong><\/p>\n<p>Let do a simple text box slowly and explain what each of the options stand for. Click on the \u201dText\u201d button on the right and you will see a popup appear with a form you can use to enter the details of the form.<\/p>\n<p><strong>Field Label<\/strong> \u2013 The label label for the field like \u201cFirst Name\u201d for the first name field<\/p>\n<p><strong>Field Default<\/strong> \u2013 This is the value that will be displayed inside the field if it is not yet filled. This will be used as a place holder for the field value<\/p>\n<p><strong>Field Name<\/strong> \u2013 is the name of the field. It is used to identify the field so that its value can be grabbed when processing the form. Give it a name or leave the default name assigned to it.<\/p>\n<p><strong>Field ID<\/strong> \u2013 The id is used if for styling if you will be writing your custom CSS code to style the field<\/p>\n<p><strong>Is the field editable?<\/strong> \u2013 \u201cRead Only\u201d means the visitors will not be able to type or change the value. The predefined value will be used. \u201cEditable\u201d means visitors will be able to type or change the value of the field. Editable is the default as you will create forms to capture data, so in most cases you will have to use \u201cEditable\u201d for most fields.<a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-566\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-300x174.png\" alt=\"Create WordPress Forms\" width=\"367\" height=\"213\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-300x174.png 300w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-600x347.png 600w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-768x445.png 768w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields.png 979w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><\/a><\/p>\n<p><strong>Sort Order<\/strong> \u2013 is used to sort the fields before they are displayed in the form. The fields with the lowest sort order will be displayed first and the largest value will be displayed last. If no sort order is specified, \u201c0\u201d will be assigned and the fields will be displayed in the order in which they were created starting with those whose sort order is zero, followed by those with a defined order.<\/p>\n<p><strong>Predefined Value<\/strong> \u2013 is the value that the field assumes if a value was not entered by the user. This is helpful for read only field whose values are determined by others in the form. Such as answers to a calculation.<\/p>\n<p>Fill in all the necessary details in the dialog and click the \u201cAdd Form Field\u201d button to add the field to the form. You will see the field in the form as below.<\/p>\n<p><strong>Repeat the above step for all other required fields in your form.<\/strong><\/p>\n<p>There are some special fields we need to look at. Sometimes there is a situation where you want to add multiple options for a certain field. This will be useful when you want a user to choose one from many options. In this case you can use the select field. So, go ahead and click the \u201cSelect\/Drop Down\u201d button to add a dropdown list.<\/p>\n<p><strong>The form for customizing the dropdown list is as follows:<\/strong><\/p>\n<p><a href=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-566 size-medium\" src=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-300x174.png\" alt=\"Creating WordPress Forms\" width=\"300\" height=\"174\" srcset=\"https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-300x174.png 300w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-600x347.png 600w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields-768x445.png 768w, https:\/\/lindeni.co.za\/wp-content\/uploads\/2017\/02\/wordpress-customize-form-fields.png 979w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>Note that it has an additional section labeled \u201cField Options\u201d, you can use this sections to add the options for this field. You can click on the \u201c+Add Option\u201d to add another option to the list or click the red \u201c-\u201c button to remove an option. Add as many options as you want and click the \u201cAdd Form Field\u201d button to save the field and its options. For each field, you may specify the \u201coption Label\u201d, \u201cOption Value\u201d and \u201cSort Order\u201d, those are self explanatory.<\/p>\n<p>This last screenshot will look and work similarly for the other input types that support multiple options like the \u201cRadio\u201d and \u201cCheckbox\u201d group fields.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello, Today I want to show you how to create WordPress forms and display on any wordpress page or post without writing code. At the end of this tutorial, you will be able to create unlimited form with unlimited fields and insert them on any page in your WordPress site or blog. Let\u2019s get started. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":576,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[13,15,6,14],"tags":[20,17,19,18,16],"class_list":["post-564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wordpress-forms","category-wordpress-plugins","category-wordpress-tutorials","tag-create-forms","tag-create-wordpress-forms","tag-forms","tag-wordpress-forms","tag-wordpress-tutorials"],"_links":{"self":[{"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/posts\/564"}],"collection":[{"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":0,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/posts\/564\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/media\/576"}],"wp:attachment":[{"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/media?parent=564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/categories?post=564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lindeni.co.za\/wp-json\/wp\/v2\/tags?post=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}