Basic Form Designer Contact Form with WFB Processor including a Captcha

SUMMARY:  The form example below is a very basic contact form created with Coffeecup Form Designer.  It has minimal style changes. You can see this form in action below the instructions.

Instructions

These instructions assume that you already have a basic working knowledge of both Form Designer and Web Form Builder.  If you need help learning how to use either of these apps, we offer one-on-one teaching sessions for a small fee.  Please click here to fill out our support form and ask about our teaching sessions.

• Create Your Form in Coffeecup Form Designer (FD)
  Be sure to use the Element Panel to give each of your form fields a name, title and other settings. Put an HTML Container element between the last field and the Submit button.

• Create a Duplicate Web Form Builder (WFB) Form

  • Each field that you created in your FD form should be duplicated in your WFB form.  For each field, the name in the WFB Properties Panel should match the name from the Element panel in FD. IMPORTANT: All the fields must match or your form will not work properly.
  • You should have already created a captcha key at https://www.google.com/recaptcha/.  Be sure to click the captcha element (on the Elements tab), set the Captcha to manual and enter the site and secret keys.
  • Add all your settings in WFB just like normal.
  • Export your WFB Form.

• Add the Captcha Script from the Exported WFB Form to Your FD Project.
  Using Coffeecup HTML Editor (or your favorite HTML or text editor), find the .html file in the WFB export.  Look toward the end for the captcha script.  It will look something like this.
  

  <script src="https://www.google.com/recaptcha/api.js"></script>
  <div class="g-recaptcha" data-sitekey="[YOUR SITE KEY]" data-theme="light"></div>
  <noscript>
    <div>
      <div style="width: 302px; height: 422px; position: relative;">
        <div style="width: 302px; height: 422px; position: absolute;">
          <iframe src="https://www.google.com/recaptcha/api/fallback?k=your_site_key" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
        </div>
      </div>
    <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
      <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;" ></textarea>
      </div>
    </div>
  </noscript>

  Copy > Paste the captcha script into the HTML Element in your FD Project.

• Add the Action Value from the Exported WFB Form to Your FD Project.

  • In the .html file from the WFB export, look for the <form> tag. (A quick way to find it is to do a search for <form .)
  • Look at the action attribute. You are looking for its value. It will look something like this: action="../projectname.php". Copy just the filename of the value. (Leave off the ../)
  • In the FD Element Pane, select the form container.  (The very top element.) In the properties, paste the filename that you just copied. It should look something like wfbprojectname.php.

• Finish the FD Project Form Properties and Export
  This is a basic contact form, so the only thing you need to do is make sure it has the correct Action (see above) and that the Method is set to Post. Your form should be ready. Export your FD project. After export, make sure you copy the web site code. It will look something like this.

  <iframe src="exported-folder/form.html" id="id-57850878" style="border:none;background:transparent;min-width:100%;"></iframe>
  <script>
  (function(w,d,i,p){f=function(){iFrameResize({},'#'+i);};if(!w.iFrameResize){a=document.createElement('script');a.src=p+'/js/iframeResizer.min.js';a.addEventListener('load',f);d.head.appendChild(a);}else{f();}})(window, document,'id-57850878','contact-form-base');
  </script>

• One Optional Manual Adjustment to Your Form
  The form designer script shows the form on your page in an iFrame.  Therefore, by default, when a visitors clicks submit, the thank you page will appear within that iframe window.  There are a couple of options to open outside the window. For both the options below, you will need to edit the exported file form.html in a text or HTML editor.

  1. Open as the Full Browser Window
     Find the <form> tag and add this attribute:  target="_top"
  2. Open in a New Browser Window or Tab
     Find the <form> tag and add this attribute: target="_blank"

• Add the Web Site Code to Your Web Site Page
  Go to your contact page in your SD3 project file. Add an HTML Element where the form should appear and Paste the web site code you copied from the FD export.

• Upload Your Files to Your Server and Test
  

  • Upload your contact page.
  • Upload all your exported FD files including the folders (css, fonts, etc.).
  • Upload your exported WFB files. You will find them in the projectname_exported folder. It should consist of a .php and a folder.  Upload them to the same older as your FD files.
  • Test your form and make sure it works.

Example