{"id":1005,"date":"2023-05-21T09:11:31","date_gmt":"2023-05-21T08:11:31","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/contact-forms\/customizing-the-fields-in-a-contact-form\/"},"modified":"2023-05-21T09:16:14","modified_gmt":"2023-05-21T08:16:14","slug":"customizing-the-fields-in-a-contact-form","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/contact-forms\/customizing-the-fields-in-a-contact-form\/","title":{"rendered":"Customizing the fields in a contact form"},"content":{"rendered":"\n

After you’ve added a contact form on your site, make sure you change the layout so your customers submit only the relevant info. Add and remove the fields in the form, make some of them mandatory \u2014 that is up to you.<\/p>\n\n\n\n

Customizing the layout of a contact form<\/h2>\n\n\n\n

1. Hover over the contact form and click on the “gear” to access its settings:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

2. In the\u00a0Layout<\/strong>\u00a0tab press\u00a0Add field<\/strong>\u00a0and select the fields you’d like to show in the form \u2014 email, date, check box, etc:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

3. To access the settings of the field, click on the “gear” next to it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

4. To change the name that will be displayed above the field itself, change the text in the very first line of the settings:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

5. In the fields with placeholders, you can add text that will be displayed in these placeholders and disappear when the user starts to type something:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

6. In order to add a detailed description to the field, enable the\u00a0Add field description<\/strong>\u00a0option in the settings and enter the desired description in the line below:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

7. To make the field required, enable the\u00a0Make this field required<\/strong>\u00a0option. After that, an asterisk should appear near the field’s name:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

8. When the\u00a0Make this field requied<\/strong>\u00a0option is enabled, the\u00a0Exact value<\/strong>\u00a0field appears. In this field you can set a password for your page.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

9. You can set a\u00a0Default value<\/strong>\u00a0in the appropriate field. This text will already be entered in the field when the form opens, but the site visitor can delete or change what was entered in the default field.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

10. The\u00a0Default value<\/strong>\u00a0field can be used simultaneously with the\u00a0Hidden field<\/strong>\u00a0option. In this case, for example, you can name the form or specify other additional and important information for you.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

11. To set value from a URL parameter, add a UTM tag to the appropriate field.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

12. To remove a field from the form, click on the trash can icon next to it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

13. You can also change the order of your fields in the form. For that, pick the field up by the handlers and drop in the necessary position:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>","protected":false},"featured_media":0,"parent":463,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-1005","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=1005"}],"version-history":[{"count":1,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1005\/revisions"}],"predecessor-version":[{"id":1021,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1005\/revisions\/1021"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/463"}],"next":[{"title":"Customizing the style of a contact form","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/contact-forms\/customizing-the-style-of-a-contact-form\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/1022"}],"prev":[{"title":"Setting email for the contact form notifications","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/contact-forms\/setting-email-for-the-contact-form-notifications\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/995"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=1005"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}