Frequently Asked Questions

Forms are entirely styled by you since they actually get loaded into your webpage. You can style each field however you like, as you would a form that was part of your site.

This approach makes it really easy to make your forms properly responsive - much more than sites that embed forms using IFrames.

You can optionally invite other user(s) to create an account that will enable them to view / download form submissions.

The invite email contains a unique link, enabling creation of an account linked to yours (these accounts are free and do not expire). You can then specify which forms that user has access to. They only have access to form submissions, not form configuration, and only on the forms you grant access.

Forms are secured with anti-bot technology. This ensures that your forms can't be submitted by a 'robot' and it also ensures that your form is only submitted from domain hosts that you specify.

You have the option to send completed forms to multiple email addresses.

Emails are sent via Amazon SES and you can elect to send to any email address. Each form can be sent to multiple different addresses - this could be yourself or a client. The email contains all of the values that the user submitted in the form.

You can also set up conditional emails; this enables you to send to different email addresses depending on the user's submitted data. For example, a multiple choice field, "Which department would you like to contact?", might have options of "Customer Service", "Sales", "Technical Support", with each answer causing the submission email to be sent to the corresponding email address.

You can optionally integrate each form with a Campaign Monitor or MailChimp list.

To do this, you will need to provide the API Key and List Id from the account that owns the list. If the list is managed by a third party (i.e.) your client, they are usually happy to provide these details to you.

We don't include form styling in our embed code for a couple of reasons:

• You're likely a developer already working to a design, so prefer to style elements yourself
• It keeps the overall bundle size down (and therefore has less impact on page load)

If you'd like a head-start, here's some basic scss that you can add to your own stylesheet as a starting point.

            
            $yellow: #f8f129;
            $text: #374a5e;
            $red: #D63034;

            .nformr {
                max-width: 500px;
                margin: 50px auto;

                &-form {

                    &-field {
                        &:not(:last-of-type) {
                            margin-bottom: 2em;
                        }

                        &.error {
                            label {
                                color: $red;
                            }

                            input {
                                border-color: $red;
                            }
                        }

                        &-label {
                            font-weight: 600;
                            margin-bottom: .5em;
                        }

                        &-input, &-textarea, &-select {
                            input, textarea, select {
                                background-color: #FAFAFA;
                                padding: 10px 20px;
                                border: 1px solid #ccc;
                                border-radius: 0;
                                width: 100%;
                                font-family: Roboto, sans-serif
                            }
                        }

                        &-checks, &-radios {

                            label {
                                position: relative;
                                padding-left: 30px;
                            }

                            input[type="checkbox"], input[type="radio"] {
                                width: 0;
                                height: 0;
                                opacity: 0;
                                position: absolute;
                                z-index: -1;

                                &:focus + label {
                                    font-weight: 700;
                                }

                                &:checked + label:before {
                                    background-color: $yellow;
                                }

                                + label:before {
                                    content: "";
                                    display: block;
                                    position: absolute;
                                    top: 0;
                                    width: 1.3em;
                                    height: 1.3em;
                                    margin-right: 10px;
                                    border: 2px solid $yellow;
                                    background-color: transparent;
                                    transition: background-color ease 0.3s;
                                }
                            }

                            input[type="checkbox"] {
                                &:checked + label:before {
                                    background-color: $yellow;
                                }

                                + label:before {
                                    border-radius: 0px;
                                }
                            }

                            input[type="radio"] {
                                &:checked + label:before {
                                    background-color: $yellow;
                                }

                                &:checked + label:after {
                                    content: '';
                                    position: absolute;
                                    top: .4em;
                                    left: .4em;
                                    width: .5em;
                                    height: .5em;
                                    border-radius: 50%;
                                    background-color: white;
                                }

                                + label:before {
                                    border-radius: 50%;
                                }
                            }
                        }


                        &-upload {
                            label {
                                display: block;
                                width: 100%;
                                padding: 10px;
                                border: 1px solid #ddd;
                                cursor: pointer;
                            }

                            &-button {
                                span {
                                    display: block;
                                }
                            }

                            &-clear {
                                cursor: pointer;
                            }
                        }

                        &-error {
                            font-size: .8rem;
                            color: $red;
                        }
                    }

                    &-actions {
                        margin: 2em 0;

                        button {
                            -webkit-appearance: none;
                            border: 1px solid transparent;
                            border-radius: 4px;
                            box-shadow: none;
                            padding: 1em 2em;
                            background-color: $yellow;
                            color: $text;
                            font-weight: 600;
                            cursor: pointer;

                            &[disabled] {
                                background-color: #dddddd;
                                cursor: not-allowed;
                            }
                        }
                    }
                }
            }
            
            

You can decide whether a page or individual field should be shown, based on the value of another field.

For example, you may create a select-list or radio-button list for "How did you hear about us", with options such as:

• Internet search
• Magazine advert
• Other

Your account can expire in one of two ways:

• Your trial period ends and you elect not to pay for membership.
• You are a paid member and a payment fails.

If your account expires, you can still log-in and manage your forms, chatbots & view any saved submissions or chats, however, your embeds will no longer be served, so no further submissions will occur.

Embeds that belong to expired accounts will simply show a message, advising that the owner's account has expired.

You can elect to subscribe for a paid account, or you can decide to delete your account, which will also delete all of your embeds and all of their related data.