Contact Admin and we will setup a webhook from your form to your Zapier. You can Zap to Gmail or ActiveCampaign!

Our Direct Zapier Connection should be completed by December 15th, 2019, but until then you can webhook to Zapier.  

You can setup a Zap inside of your $25 Zapier Account to connect a Webhook by Zapier from your DocupletionForms Contact Form to your Gmail or your ActiveCampaign.  Just send us the Webhook URL in a message on our contact form along with the name of the form you want it connected to as well as your account email address and Admin will connect your Webhook.  This is a great way to make certain that your confirmation email sent out to your client/person leaving you a message through your contact form will receive the message in their inbox and not in their spam folder.

You can Zap to any of the other programs that connect to Zapier in any number of connection patterns.  Check Zapier out!  Don’t forget to read our FREE eBook on Zapier!

 

Disable a Hidden Field that is Required When Shown!

1. If you have a checkbox that you want checked so that people filling out your form, you have to uncheck to deselect it rather than check it to select it, type the following:   

                                                         |check   

Right after the selection in the checkbox just like the illustration below.

2. Then in the field that you want shown if somebody leaves the checkbox checked, click required so that we can then go to the conditional logic to show you how to properly conditionally disable and enable the required field.

3. Check to disable the field in the add action when the checkbox is not checked.  then make sure to make a second rule (at the very bottom) that hides the field is the checkbox is not checked.  This way you do not set the field to be required and when it is hidden have a form that cannot be submitted because there is a hidden yet still required field.  fun, fun, fun.  

Link to the form so you can see the disabled element be required and enabled when selected and shown.

https://docupletionforms.com/formbuilder/forms/example-conditional-logic-form

Confirmation, Notification and Embed/Link Settings

1. Click the settings tab in the actions drop down menu in the form tab.
2. Click the circled elements and make sure to enter the appropriate information so that the person submitting their form receives a confirmation email.  I circled the redirect to another page setting, but you can select the two options that give the person submitting the form a message rather than redirecting them anywhere.

3. Click the circled elements and make sure to enter the appropriate information so that you yourself receive a preset notification email.

4. Click the publish & share tab in the actions drop down menu in the form tab.

5. Click either the embed full form tab (gives you an html code to embed into your page where you want to embed the form.  Our name will not appear at the top of your form), the embed pop up form tab (gives you an html code and it is really nice looking the way it makes the form pop over the page where you embed it.  It can cause problems with the spacing on your desktop viewed website pages and it can also interfere with smartphones.  You just have to fiddle with it.  It is super nice looking.  Our name will not appear at the top of your form), or the share link tab (leave the without box checkbox unchecked at the bottom friendly link section and our name will show at the top of your form, check it and it will not show, but it will be a full page).

How to set conditional logic rules in a form.

1. Made a simple contact form with 3 fields we do not need to show unless the answer to the previous question indicates that the person filling out the form has one or more of the following: phone number, website or Facebook.

2. So then we save the form and click the 3rd option at the bottom so that you can use the Form Manager to set the conditional logic rules.  

3. In the Form Manager click actions and conditional rules.

4.  Then click add rule, condition and action 3 times or however many times you need to set as many rules as you want.  These are simple rules for showing a text field question if the person has indicated in the check box that they have any of the following: phone, website, Facebook. Simple. 

The link to this form is: https://docupletionforms.com/formbuilder/forms/example-conditional-logic-form

Hope this helps.  – James

How to signup to use the FREE Form Editor inside of DocupletionForms.com

This is a quick tutorial with pictures of how to setup a conditional logic form.  At the end there is a link to an article on our our professional association site NAOLDP on how to use the Data-Merge.  Thanks for reading.  – James

1. Go to www.DocupletionForms.com, click to signup for the FREE Form Editor.

2. Enter an email and a password.

3. Login.

4. Click create form.

5. Drag, drop & customize as many contact form elements as you want to inside of the form editor screen.  make sure to add a submit button, and click save.

6. You have 3 options, but we are going to click the 3rd finished option that says take me to the form manager so that we can set conditional logic rules.  conditional logic rules are what tell your form to ask different next questions of the people filling out your form based on their answers to the previous questions in the form.  

7. To the right of the form you are working on, click the action button and select the conditional rules tab from the drop down menu.

8. Click add rule.

9. Set a condition and set an action.  make sure to click the green save button.

10. Go back to the forms screen and select the submissions tab from the drop down menu.

11. Click the eye button to the right to see the submission.

12. i wrote a neo-irish blessing for fun.

13. Below is the form reader that can be accessed by paying $5 for the Paid Data-Merge on the front page of DocupletionForms.com.  

 

 14. Click Here for a link to an instructional on how to use the Data-Merge.  


Thanks for checking out the free form editor.  

 

Regards,

James F. Polk, Founder of DocupletionForms

 

RetainerCrypto.Online is going to be for Retainer Payments Online!

RetainerCrypto.Online is going to be used to pay for law services and similar services.

RetainerCrypto.Online or RCO is going to be used in conjunction with law and/or legal and/or related types of services to commit an amount of funds to a transaction, but to only fully transfer part of the funds to the agent receiving the funds and providing service. If there is a dispute of a disbursement, the agent can be replaced and the client can begin to pay them with the undisputed funds. The client’s case profile will also anonymously go onto a case board with the basic description of the case and attorneys and other agents will compete to become the client’s new agent.

We are first going to start with just a simple ERC20 Token and ICO with a name very similar to RCO and have a link to the ICO Website from this page. We are going to make it possible to pay retainers through DocupletionForms.com using this ERC20 Token, and then we are going to build the final smart contract that will allow for the above described type of transactions where it will be possible to replace the person receiving the funds.

The project is designed to provide an alternative to Trust Accounting and/or the Escrow Process. The final stage is going to be our own BlockChain Crypto Network with Smart Contracts that function the same way as our previous RCO Ethereum Network Crypto Coin did.  The network we propose making will be a Stable Coin Network based on the USD.  Thank you for reading about RCO and RCO ERC20.

 

 

 

 

 

 

Our New Logo!

DocupletionForms.com is a FREE Contact Form Program with a $5 Data-Merge element that can be added.

The FREE Contact Form Program has Conditional-Logic Capabilities.  This means you have the capacity to set rules after you make and save a form, so that the form will ask different next questions of the people filling out your form based on their last answers.

The $5 Data-Merge element allows you to upload and complete .PDF documents with just a few clicks.

Thanks for reading the blog.

Regards, James F. Polk, Founder of DocupletionForms.

Report Builder

Introduction

Report Builder allows you to see the data collected by a form.

Note: You can only create a report per form.

Create my first report

To create your first report go to Form Manager. Then, click on the Actions button and select the Submission Report option.

A report is made of multiple charts. You can create as many charts as you have fields in your Form. When finished editing, you should click on the Save report button.

Add a chart

To create a chart:

  1. Click the Add chart button
  2. Fill the Title field
  3. Select the Type of chart
  4. Select the Field from which to get data
  5. Click Save

Your chart has been added. Now you just need to Save the report.

Edit a chart

To edit a chart:

  1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).
  2. Click the pencil icon of the chart to edit.
  3. In the form that appears, change the data you need.

  1. Click Save
  2. When the chart is reloaded, press the Stop button.

Your chart has been edited. Now you just need to Save the report.

Delete a chart

  1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. In addition, all charts must show a pencil icon (for editing) and X (to delete).
  2. Click on the X icon and the chart will disappear.
  3. When the chart disappears, press the Stop button

Your chart has been deleted. Now you just need to Save the report.

Resize a chart

  1. Click the Edit button. Note that the report has now a yellow background and the Edit button now says Stop. And when you hover the mouse over a chart an icon will appear in lower right part to resize the it.
  2. Click on the icon to resize the chart and drag to make it bigger or smaller.

  1. When the chart has the size you need, press the Stop button.

Your chart has been resized. Now you just need to Save the report.

Save the report

To save the report:

  1. Be sure you are not in Edit view. Click the Stop button if this still appears.
  2. Press the Save report button.
  3. A message will appear confirming that the report has been saved.

Interacting with the report

Charts can interact with one another. When you click one of them you will see how the others change to show the chart element information you clicked.

Reset a report

If you want to create a new report, you can press the Reset button. You will notice that all charts have disappeared. Now you just need to Save the report.

Form Widget (The embed code)

Introduction

Embed code are a few lines of html and javascript that you can use to embed an Docupletionforms’ form into your own website. This is the easiest way to display a form on your site and the method least susceptible to errors. But also, one of the most important things about the form widget is that every time you make a change to your form in the form builder, the embedded form will automatically update.

The Form Widget is designed to work on any web page. The Embed code basically creates an iFrame on the fly and the form is loaded in it. And, since it creates the iFrame, it can also resize it and that means there’s no need to update the code every time you make some change. But also, when you keep a form inside an iFrame, you also prevents it from conflicting with existing JavaScript or CSS elements on your page.

Which Form Embed Code Should I Use?

Right now Docupletionforms offers two options for publishing a form in your web site:

  1. Embed with Design: Lets you publish the form with the theme that has been applied to the form.
  2. Embed without design: Lets you publish the form without any theme, even if you have applied one to your form.

Usually, the first option is the one you should use.

Form Widget Setting

The Embed code has two parts:

  1. An HTML code that displays the default content if the user accesses the form when JavaScript is disabled in his browser. By default, a link to your form within a DIV element is displayed.
  2. A Javascript code that is responsible for displaying the form and initialize the Form Tracker (if Analytics is enabled).

The embed code allows you to set some options of the form on the fly:

  • ID: Form’s ID number in the application. For example: 'id': 132
  • Container: ID of the HTML element where the form’s iframe will be inserted. By default, points to the DIV ID that contains the link to the form. For example: 'container': 'c132'
  • Width: Specifies the width of the form’s iframe. For example: 'width': '100%'
  • Height: Specifies the height of the form’s iframe. Usually, the embed code comes set with a value in pixels. This value is calculated by the Form Builder at the time of its creation. For example: 'height': '846px'
  • Auto Resize: By default, is enabled. Indicates whether the iframe can automatically resize to the real height of the form. For example, when validation messages are shown. If set to false, the form does not resize and its height will be defined in the “height” option. For example: 'autoResize': !0
  • Theme: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable a theme on the fly. For example: 'theme': 1
  • Custom JS: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable the loading of external javascript files on the fly. For example: 'customJS': 1
  • Record: By default, is enabled. Is a integer value (1 or 0) that lets you enable or disable the Form Tracker on the fly. For example: 'record': 1
  • Form: Specifies the path to the form’s embed. It contains no parameters.
  • addToOffsetTop: By default, is 0. Add or subtract a number of pixels to OffsetTop before calculating the form location. This allows correct the form location when html elements on the website (like a header) have the CSS property: “fixed”. For example: 'addToOffsetTop': '-60'
  • Default Values: If you want to pre-fill form fields with default values, you can use this option. Default Values ​​is a JSON object where your key is the id of the form field and its value is the content of the field. For example:
'defaultValues': {
    'text_0': 'This is my default value'
}

Note that fields of type checkbox and radio button are selected by using boolean values. For example:

'defaultValues': {
    'text_0': 'This is my default value',
    'checkbox_0': true
}

Interacting with the Form via JavaScript

The Form Widget contains a large number of features and options that can be configured inside an external JavaScript File.

Note: To load a JavaScript File you must go to Forms -> Actions -> Settings -> UI Settings.

By default, a jQuery object is available. So you can interact with the Form in a very simple way by using the following lines of code:

$( document ).ready(function() {
  // Here we can interact with the Form
});

The Form element

The Form element – formEl – is a jQuery object to which you can access for get information and/or manipulate it directly. For example, we’re going to know the high of our form with the following lines of code:

$( document ).ready(function() {

  console.log('The form height is', formEl.height());

});

Listening for Events

Certain events are triggered when the Form does something.

  • view: This event is triggered when a form is viewed.
  • fill: This event is triggered the first time you interact with the form. For example, by fill a text field or select a radio button.
  • error: This event is triggered when the Server threw a validation error.
  • success: This event is triggered when the Form has been submitted successfully.
  • nextStep: This event is triggered each time you progress to the next step in a multi-step form.
  • previousStep: This event is triggered each time you go back one step in a multi-step form.

A very basic example for detecting when a form fail would be:

$( document ).ready(function() {

    formEl.on('error', function(event){

            // Track a server validation error

            // What happens here would be dependent on your analytics product!

    });

});

The Event Handlers: previousStep and nextStep

In addition to the events, Docupletionforms offers two event handlers that allow you to go backward and forward a page on a Multi-Step form ready to use using JavaScript. For example, now we’re going to see how to forward a page without pressing the button “Next” using the auto-advance feature.

Auto-Advance in Multi-Step Forms

By default, when you create a Multi-Step Form, two navigation buttons are added automatically: “Previous” and “Next” at the bottom of the form. These buttons allow you to navigate through the form until you reach the last page where usually the Submit button is placed.

Note: Docupletionforms lets you add multiple Submit buttons on different pages or parts of the form.

However, in certain use cases you can may want to advance directly to the next page without pressing any buttons. For this we will make use of the “nextStep” event handler.

Note: Some use cases in which this feature is useful are surveys and/or tests where is not allowed to change response and lets to complete the survey as soon as possible.

For example, with the following lines of code, we are going to tell our Form that each time a radio button is selected, the form will forward to the next page:

$( document ).ready(function() {
    $('input[type=radio]').on('change', nextStep);
});

Finally, if you want to hide the navigation buttons you can add the following lines in the CSS Theme assigned to your form:

.previous, .next {
    display: none !important;
}

Upload Multiple JavaScript and CSS files in our Form

By having the jQuery object, we can make use of jQuery.when().done() to load multiple javascript objects and make use of them once they are ready to use. Let’s see the following example.

Display a jQuery UI DatePicker in a Date field

For example, with the following lines of code we will show a jQuery UI DatePicker in the Date fields of the form:

$( document ).ready(function() {
    $.when(
        $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),
        $.getScript( "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ),
        $.Deferred(function( deferred ){
            $( deferred.resolve );
        })
    ).done(function(){
        $('body').css('padding-bottom', '200px'); // Padding for show the datepicker
        $('input[type=date]').each(function () {
            $(this).attr('type', 'text').after(
                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')
                    .datepicker({
                        // Consistent format with the HTML5 picker
                        dateFormat: 'mm/dd/yy',
                        changeMonth: true,
                        changeYear: true,
                        altField: this,
                        altFormat: "yy-mm-dd"
                    })
            )
            .hide();
        });
    });
});

As you can see:

  • We’re loading 2 files within the function when()jquery-ui.css and jquery-ui.min.js.
  • We have inserted a function that will run when the previous two files are loaded on the page within the function done().
  • The function basically runs 3 Instructions:
    1. Find all fields of type “date” and convert each field “date” in “text“.
    2. Clone each Date field in a Text field that displays the DatePicker.
    3. Hides the Date field, because its value will be established automatically by the DatePicker, by the attributes: altField and altFormat.
1 2 3