{"id":25817,"date":"2020-07-14T13:30:00","date_gmt":"2020-07-14T13:30:00","guid":{"rendered":"https:\/\/novibuilder.com\/blog\/?p=25817"},"modified":"2020-07-23T11:41:04","modified_gmt":"2020-07-23T11:41:04","slug":"adding-the-contact-form","status":"publish","type":"post","link":"https:\/\/novibuilder.com\/blog\/adding-the-contact-form\/","title":{"rendered":"Adding the Contact Form in Novi Builder"},"content":{"rendered":"\n

Why Adding the Contact Form is Crucial<\/h2>\n\n\n\n

Some HTML templates don\u2019t include presets with contact form. For example, Corporate Startup Landing Page<\/a> Template.
Instead, there is a Campaign Monitor form<\/a> (Newsletter) that allows you to configure the form to work with the Campaign Monitor service.<\/p>\n\n\n\n

Nevertheless, the contact form functionality is included in <\/strong>all HTML templates<\/strong><\/a> that are available in the subscription,  and today are going to describe the process of adding a contact form HTML code on a page and creating a custom preset with a contact form section.

We are going to talk about the following:<\/p>\n\n\n\n

  1. Replacing the newsletter form with rd-contact form;<\/li>
  2. Adding a preset with the contact form;<\/li>
  3. Form activation;<\/li>
  4. Adding some extra fields:
    1. Select;<\/li>
    2. Radio;<\/li>
    3. Checkboxes;<\/li><\/ol><\/li>
    4. reCAPTCHA and GDPR compliance.<\/li><\/ol>\n\n\n\n

      1. Replacing the Newsletter Form with rd-contact form<\/h2>\n\n\n\n

      Providing you did not find a contact form under presets:<\/p>\n\n\n\n

      \"No<\/figure>\n\n\n\n

      We are going to replace the newsletter form or any other section with an RD contact form.
      Scroll down and find the newsletter form, usually, it is in the site footer. Switch to design mode (code mode) and select the section that needs to be replaced with a contact form:  <\/p>\n\n\n\n

      \"Adding<\/figure>\n\n\n\n

      Remove the code from:<\/p>\n\n\n\n

      <form class=”….”  to
                  <\/form><\/p>\n\n\n\n

      Replace it with the form code: <\/p>\n\n\n\n

      <form className=\"rd-mailform text-left\" data-form-output=\"form-output-global\" data-form-type=\"forms\"\n\t  method=\"post\" action=\"bat\/rd-mailform.php\">\n\t<div className=\"row spacing-30\">\n\t\t<div className=\"col-sm-6\">\n\t\t\t<div className=\"form-group form-wrap-validation\">\n\t\t\t\t<label className=\"form-label\" htmlFor=\"forms-name\">First name<\/label> \n\t\t\t\t<input className=\"form-control\" id=\"forms-name\" type=\"text\" name=\"name\" data-constraints=\"@Required\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div className=\"col-sm-6\">\n\t\t\t<div className=\"form-group form-wrap-validation\">\n\t\t\t\t<label className=\"form-label\" htmlFor=\"forms-last-name\">Last name<\/label> \n\t\t\t\t<input className=\"form-control\" id=\"forms-last-name\" type=\"text\" name=\"last-name\" data-constraints=\"@Required\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div className=\"col-sm-6\">\n\t\t\t<div className=\"form-group form-wrap-validation\">\n\t\t\t\t<label className=\"form-label\" htmlFor=\"forms-email\">E-mail<\/label>\n\t\t\t\t<input className=\"form-control\" id=\"forms-email\" type=\"email\" name=\"email\" data-constraints=\"@Email @Required\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div className=\"col-sm-6\">\n\t\t\t<div className=\"form-group form-wrap-validation\">\n\t\t\t\t<label className=\"form-label\" htmlFor=\"forms-phone\">Phone<\/label>\n\t\t\t\t<input className=\"form-control\" id=\"forms-phone\" type=\"text\" name=\"phone\" data-constraints=\"@Numeric @Required\">\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div className=\"col-sm-12\">\n\t\t\t<div className=\"form-group form-wrap-validation\">\n\t\t\t\t<label className=\"form-label\" htmlFor=\"forms-message\">Message<\/label>\n\t\t\t\t<textarea className=\"form-control\" id=\"forms-message\" name=\"message\" data-constraints=\"@Required\"><\/textarea>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div className=\"col-sm-6 form-button\">\n\t\t\t<button className=\"btn btn-primary btn-block btn-effect-ujarak\" type=\"submit\">Send Message<\/button>\n\t\t<\/div>\n\t<\/div>\n<\/form><\/code><\/pre>\n\n\n\n
      Feel free to remove fields that you do not need.<\/p>\n\n\n\n
      Wait a few seconds and check a result:<\/p>\n\n\n\n
      \"Adding<\/figure>\n\n\n\n
      2. Creating Your Own Preset with Contact Form<\/h2>\n\n\n\n
      You can learn more about using presets here<\/a>.  Also, the detailed guide is included in the Novi Builder’s documentation<\/a>. As an option, our experienced team can add more presets to your site with your desired design. <\/p>\n\n\n\n
      To save the section as a preset, please, select the section -> right click  – create the preset:<\/p>\n\n\n\n
      \"Saving<\/figure>\n\n\n\n
      Then switch to Edit Mode. The form should look like an example:<\/p>\n\n\n\n
      \"Footer<\/figure>\n\n\n\n
      Let\u2019s activate it.
      Check the complete plugin documentation at the Novi Builder documentation –       rd-mailform-plugin<\/a>.<\/p>\n\n\n\n
      3. Contact Form Activation<\/h2>\n\n\n\n
      Hover over the form until you see the following icon: <\/p>\n\n\n\n
      \"Adding<\/figure>\n\n\n\n
      Open settings and add your own email address at the email field, select SMTP if you are using SMTP email on the server:<\/p>\n\n\n\n
      \"Replacing<\/figure>\n\n\n\n
      Save changes (checkbox at form settings) and then, save the project.  <\/p>\n\n\n\n
      If you look at the rd-mailform.config.json file (the path is \\Builder\\projects\\template\\bat),  you will find that the code became minified and the default email was replaced with your own. We do not recommend performing any changes in this file:<\/p>\n\n\n\n
      \"New<\/figure>\n\n\n\n
      4. Adding Some Extra Fields<\/h2>\n\n\n\n
      In this part, we are going to describe the process of adding some fields, such as select, radio buttons, and checkboxes.
      The code provided previously shows how to insert the <textarea>  input, input with type “text\u201d, and input type “email”.<\/p>\n\n\n\n
      Let\u2019s add a select tag to our form:<\/p>\n\n\n\n
       <div class=\"col-sm-6\">\n                  <div class=\"form-group form-wrap-validation\">\n                     <select id=\"garden-select\" data-placeholder=\"Select a type\" class=\"form-control select-filter\" name=\"garden\" data-constraints=\"@Required\">\n                      <option value=\"Landscape\">Landscape<\/option>\n                      <option value=\"Garden\">Garden <\/option>\n                      <option value=\"Lawn\">Lawn <\/option>\n                      <option value=\"Outdoor\">Outdoor <\/option>\n                      <option value=\"Ice\">Ice <\/option>\n                    <\/select>\n             <\/div>\n           <\/div><\/code><\/pre>\n\n\n\n
      The result will be the following: <\/p>\n\n\n\n
      \"Creating<\/figure>\n\n\n\n
      In some cases, you will need to change colors or width to match with the entire style of your site.  Feel free to add your own CSS rules in the design mode, CSS tab css\/style.css file.<\/p>\n\n\n\n
      As an option, you may get the Extended support<\/a> plan that includes expert help on changing the form styles. <\/p>\n\n\n\n
      Publish the project and check the result on your site:<\/p>\n\n\n\n
      \"Functional<\/figure>\n\n\n\n
      Create a test message and check the inbox.  All fields should be sent:<\/p>\n\n\n\n
      \"A<\/figure>\n\n\n\n
      If there any fields are missing, please ensure that all your fields have an \u201cid\u201d property, for example, id=”forms-phone”. Please note, that every \u201cid\u201d value should be unique on your site. Also, ensure that all fields have a “name” data attribute.<\/p>\n\n\n\n
      If the problem persists, please open \\Builder\\projects\\template\\bat folder, find  rd-mailform.php and open in any code editor. <\/p>\n\n\n\n
      Find the line: <\/p>\n\n\n\n
      preg_match(\"\/(<!-- #{BeginInfo} -->)(.|\\n)+(<!-- #{EndInfo} -->)\/\", $template, $tmp, PREG_OFFSET_CAPTURE);<\/code><\/pre>\n\n\n\n
      And replace it with:<\/p>\n\n\n\n
      preg_match(\"\/(<!-- #\\{BeginInfo\\} -->)(.|\\s)*?(<!-- #\\{EndInfo\\} -->)\/\", $template, $tmp, PREG_OFFSET_CAPTURE);<\/code><\/pre>\n\n\n\n
      The result should look like:<\/p>\n\n\n\n
      \"Fixing<\/figure>\n\n\n\n
      Adding Radio Buttons<\/h3>\n\n\n\n
      Radio and checkbox field types can be useful if you want to get some specific info from your customers or visitors.<\/p>\n\n\n\n
      Let\u2019s create a new form for this example:<\/p>\n\n\n\n
      \"A<\/figure>\n\n\n\n
      Let\u2019s add radio and checkbox fields:<\/p>\n\n\n\n
      A radio selection allows users to choose only 1 option. For example:
      I prefer communication in<\/em><\/p>\n\n\n\n