{"id":5391,"date":"2024-04-14T21:48:33","date_gmt":"2024-04-14T13:48:33","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5391"},"modified":"2024-04-17T21:54:40","modified_gmt":"2024-04-17T13:54:40","slug":"homepage-contact-form","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/homepage-contact-form\/","title":{"rendered":"Homepage: contact form"},"content":{"rendered":"\n
\n

An aesthetically pleasing site displaying all your remarkable work isn’t very valuable if you fail to also facilitate clients in contacting you. The solution? An influential call to action with a prominently placed contact form on your homepage that motivates clients to engage your services. Moreover, transform the contact form into a Symbol for reusability purposes.<\/p>\n

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

In this tutorial, you will discover how to incorporate a contact form into your project by completing the following steps:<\/p>\n

    \n
  1. Integrate the Form<\/li>\n
  2. Set up the Form<\/li>\n
  3. Design the Form<\/li>\n
  4. Convert it into a Symbol<\/li>\n<\/ol>\n

    Follow the steps and access the resources<\/a> for this tutorial.<\/p>\n

    Integrate the Form<\/h2>\n

    Begin by adding an additional Section<\/strong> to the homepage:<\/p>\n

      \n
    1. Launch the Navigator<\/strong><\/li>\n
    2. Access the Add panel<\/strong><\/li>\n
    3. Drag a Section<\/strong> into the Navigator<\/strong> and position it below the existing 2 Sections<\/strong><\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      Reapply the \u201cSection\u201d class to our new Section<\/strong> to maintain the 60 pixels of top and bottom padding we had previously set:<\/p>\n

        \n
      1. Access the Style panel<\/strong><\/li>\n
      2. Click on the Selector field<\/strong><\/li>\n
      3. Choose \u201cSection\u201d from the Existing classes<\/strong><\/li>\n<\/ol>\n

        Add a Container <\/strong>to the new Section<\/strong> to ensure our elements are well-contained:<\/p>\n

          \n
        1. Access the Add panel<\/strong><\/li>\n
        2. Drag a Container<\/strong> into the new Section<\/strong><\/li>\n
        3. Select the Container<\/strong> and click on the Selector field<\/strong><\/li>\n
        4. Choose \u201cContainer\u201d from the Existing classes<\/strong><\/li>\n<\/ol>\n

          Proceed to include a Form block<\/strong> within the Container<\/strong>:<\/p>\n

            \n
          1. Access the Add panel<\/strong><\/li>\n
          2. Drag a Form block<\/strong> into the Container<\/strong><\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            Set up the Form<\/h2>\n

            Initially, the Form block<\/strong> comes with 2 components – \u201cName\u201d and \u201cEmail address\u201d fields. Let\u2019s append a third field along with its corresponding label:<\/p>\n

              \n
            1. Access the Add panel<\/strong><\/li>\n
            2. Drag a Text area<\/strong> into the Form<\/strong> (to allow visitors to insert a message)<\/li>\n
            3. Access the Add panel<\/strong><\/li>\n
            4. Drag a Label<\/strong> into the Form<\/strong> positioned above the Text area<\/strong> field<\/li>\n
            5. Double-click on the default Label<\/strong> text and modify it (e.g., \u201cMessage\u201d)<\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              Customize our Field label<\/strong>:<\/p>\n

                \n
              1. Select the \u201cName\u201d Field label<\/strong><\/li>\n
              2. Access the Style panel<\/strong> > Typography<\/strong><\/li>\n
              3. Access More type options<\/strong> and select Capitalize<\/strong><\/li>\n
              4. Set the letter spacing<\/strong> to 2 pixels<\/li>\n
              5. Reduce the font<\/strong> size<\/strong> to 12 pixels<\/li>\n<\/ol>\n

                A \u201cField label\u201d class has been automatically generated when implementing the above style alterations. Let\u2019s apply those changes to the remaining Field labels<\/strong> in our Form<\/strong>:<\/p>\n

                  \n
                1. Choose the \u201cEmail Address\u201d Field label<\/strong><\/li>\n
                2. Access the Style panel<\/strong><\/li>\n
                3. Click on the Selector field<\/strong><\/li>\n
                4. Choose \u201cField label\u201d from the Existing classes<\/strong><\/li>\n<\/ol>\n

                  Repeat the preceding steps for the other Field label<\/strong> (e.g., \u201cMessage\u201d).<\/p>\n

                  Note:<\/strong> You can swiftly access the Selector field<\/strong> within the Style panel<\/strong> by selecting your element and pressing Command + Enter<\/strong> (Mac) or Control + Enter<\/strong> (Windows).<\/p><\/blockquote>\n

                  Now that the \u201cField label\u201d class has been applied to all the Field labels<\/strong> within our Form<\/strong>, let\u2019s adjust the font size<\/strong> (impacting all elements with the same applied class):<\/p>\n

                    \n
                  1. Choose a \u201cField label\u201d from your Form<\/strong><\/li>\n
                  2. Access the Style panel<\/strong> > Typography<\/strong><\/li>\n
                  3. Reduce the font<\/strong> size<\/strong> to 11 pixels<\/li>\n<\/ol>\n
                    \n
                    <\/div>\n<\/figure>\n

                    Design the Form<\/h2>\n

                    Select the Form block<\/strong> for styling:<\/p>\n

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

                    Diversify the font color<\/strong> of the Form block:<\/p>\n

                      \n
                    1. Access the Style panel<\/strong> > Typography<\/strong><\/li>\n
                    2. Click on the color picker<\/strong> and adjust the font color<\/strong> to black<\/li>\n<\/ol>\n

                      Adjust the font size<\/strong> along with the line height<\/strong> to enhance the legibility of the form. Additionally, modify the various form elements to ensure a consistent and visually appealing user experience.<\/p>\n

                      Modify the background color<\/strong> to ensure our text is easily readable against it:<\/p>\n

                        \n
                      1. Access the Style panel<\/strong> and navigate to Backgrounds<\/strong><\/li>\n
                      2. Choose the color picker<\/strong> and adjust it to a light gray shade (e.g., \u201c#e9e9e9\u201d) <\/li>\n<\/ol>\n

                        Now, let’s include some padding<\/strong>: <\/p>\n

                          \n
                        1. Go to the Style panel<\/strong> and click on Spacing<\/strong><\/li>\n
                        2. Add 30 pixels of padding<\/strong> on all sides<\/li>\n<\/ol>\n

                          Important<\/strong>: To efficiently add margin or padding across all sides of an element, hold down Shift<\/strong> while dragging one of the margin<\/strong> or padding<\/strong> controls.<\/p><\/blockquote>\n

                          We will also introduce a Heading<\/strong> within our Form block<\/strong> to encourage our site visitors to reach out to us: <\/p>\n

                            \n
                          1. Access the Navigator<\/strong><\/li>\n
                          2. Open the Add panel<\/strong><\/li>\n
                          3. Drag a Heading<\/strong> into the Navigator<\/strong> and place it at the top of the Form block<\/strong><\/li>\n
                          4. Double-click on the Heading<\/strong> to modify the default text (e.g., \u201cLet\u2019s collaborate!\u201d)<\/li>\n<\/ol>\n
                            \n
                            <\/div>\n<\/figure>\n

                            Since we have already established a \u201cSecondary heading\u201d class, let\u2019s assign the same class to the Heading<\/strong> within our Form<\/strong>: <\/p>\n

                              \n
                            1. Select the Heading<\/strong> in the Form<\/strong><\/li>\n
                            2. Access the Selector field<\/strong><\/li>\n
                            3. Opt for \u201cSecondary heading\u201d from the list of Existing classes<\/strong><\/li>\n<\/ol>\n

                              Additional information<\/strong>: The original \u201cSecondary heading\u201d on your homepage derives its color (white) from its parent element \u2014 the Body (all pages tag)<\/strong>. The \u201cSecondary heading\u201d located in the Form<\/strong> inherits its color (black) from its parent \u2014 the Form block<\/strong>. <\/p><\/blockquote>\n

                              Let\u2019s insert a Paragraph<\/strong> into the Form block<\/strong>: <\/p>\n

                                \n
                              1. Access the Navigator<\/strong><\/li>\n
                              2. Open the Add panel<\/strong><\/li>\n
                              3. Drag a Paragraph<\/strong> into the Navigator<\/strong> and position it within the Form block<\/strong>, following the \u201cSecondary heading\u201d<\/li>\n<\/ol>\n
                                \n
                                <\/div>\n<\/figure>\n

                                Given that we don\u2019t have any predefined paragraph styles suitable for our contact form, let\u2019s design this paragraph and establish a new class for it: <\/p>\n

                                  \n
                                1. Select the Paragraph<\/strong> within your Form block<\/strong><\/li>\n
                                2. Access the Style panel<\/strong> and navigate to Typography<\/strong><\/li>\n
                                3. Choose the color picker<\/strong> and adjust the opacity<\/strong> to 68<\/li>\n
                                4. Click on the Selector field<\/strong> and rename the default class (e.g., \u201cDark paragraph\u201d)<\/li>\n
                                5. Access the Style panel<\/strong> and proceed to Spacing<\/strong>, then increase the bottom margin<\/strong> to 30 pixels<\/li>\n<\/ol>\n
                                  \n
                                  <\/div>\n<\/figure>\n

                                  Let\u2019s introduce a Grid<\/strong> into our Form<\/strong> to arrange our fields side-by-side:<\/p>\n

                                    \n
                                  1. Grab a Grid<\/strong> from the Add panel<\/strong> and position it at the top of the Form<\/strong><\/li>\n
                                  2. Right-click on the second row of the Grid<\/strong> and choose “Delete row” from the settings menu<\/li>\n<\/ol>\n
                                    \n
                                    <\/div>\n<\/figure>\n
                                    \n
                                    <\/div>\n<\/figure>\n

                                    Let\u2019s incorporate a Div block<\/strong> within the Grid<\/strong> to host some of our Form<\/strong> elements: <\/p>\n

                                      \n
                                    1. Access the Navigator<\/strong><\/li>\n
                                    2. Open the Add panel<\/strong><\/li>\n
                                    3. Drag a Div block<\/strong> into the Navigator<\/strong> and position it inside the Grid<\/strong><\/li>\n<\/ol>\n
                                      \n
                                      <\/div>\n<\/figure>\n

                                      Select and move the \u201cName\u201d Field label<\/strong> alongside its corresponding Text field<\/strong> into the Div block<\/strong>.<\/p>\n

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

                                      Let\u2019s include a new Div block<\/strong> in the second cell of the second Grid<\/strong> so we can place our remaining Form<\/strong> elements inside it:<\/p>\n

                                        \n
                                      1. Access the Navigator<\/strong><\/li>\n
                                      2. Open the Add panel<\/strong><\/li>\n
                                      3. Drag a Div block<\/strong> into the Navigator<\/strong> and position it within the Grid<\/strong>below the initial section<\/strong><\/li>\n<\/ol>\n

                                        Choose and move the \u201cEmail address\u201d Label<\/strong> and its corresponding Text box<\/strong> into the following section<\/strong>.\u00a0<\/p>\n

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

                                        Let\u2019s shift the Send button <\/strong>to the right side of the Submission form<\/strong>. To achieve this, we will begin by configuring the Form<\/strong> into a Flex format<\/strong>:<\/p>\n

                                          \n
                                        1. Click on the Submission form<\/strong>\u00a0<\/li>\n
                                        2. Access the Styling panel<\/strong> > Layout settings<\/strong>\u00a0<\/li>\n
                                        3. Adjust the Display<\/strong> option to Flex<\/strong> and Direction<\/strong> to Vertical<\/strong><\/li>\n<\/ol>\n

                                          We’ll customize the behavior of the Send button <\/strong>and modify its Background tone<\/strong>:<\/p>\n

                                            \n
                                          1. Choose the Send button<\/strong>\u00a0<\/li>\n
                                          2. Access the Style panel<\/strong> > Flex control<\/strong> > Alignment and arrangement<\/strong>\u00a0<\/li>\n
                                          3. Select right<\/strong>alignment<\/strong><\/li>\n
                                          4. Navigate to Background<\/strong> settings and utilize the color palette<\/strong> tool<\/li>\n
                                          5. Adjust the default color scheme<\/strong> (e.g., \u201c#6057c3\u201d)<\/li>\n<\/ol>\n

                                            You may also create a variable to reuse this color for other elements.<\/p>\n

                                            Now, let\u2019s add some curvature to the Send button<\/strong>:<\/p>\n

                                              \n
                                            1. Access the Style panel <\/strong>> Border settings<\/strong><\/li>\n
                                            2. Set the Curve size<\/strong> to 5 pixels<\/li>\n<\/ol>\n

                                              To provide space around the button, move it slightly away from the form components above it:\u00a0<\/p>\n

                                                \n
                                              1. Go to the Style panel <\/strong>> Spacing<\/strong><\/li>\n
                                              2. Adjust the top spacing<\/strong> to 15 pixels<\/li>\n<\/ol>\n

                                                Transform it into a Symbol<\/h2>\n

                                                Finally, convert the Form segment <\/strong>into a Symbol<\/strong> for repeated usage within the project:\u00a0<\/p>\n

                                                  \n
                                                1. Select the Form segment<\/strong><\/li>\n
                                                2. Right-click on the Form segment\u2019s <\/strong>tag<\/li>\n
                                                3. Opt for \u201cGenerate Symbol\u201d from the dropdown and assign a name (e.g., \u201cContact form\u201d)\u00a0<\/li>\n<\/ol>\n
                                                  \n
                                                  <\/div>\n<\/figure>\n
                                                  \n
                                                  <\/div>\n<\/figure>\n

                                                  You’re all set \u2014 a contact form awaits new submissions!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Collect client leads with an accessible contact form on your homepage.","protected":false},"author":2,"featured_media":5392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[306],"tags":[],"class_list":{"0":"post-5391","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-kb","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5391"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5392"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}