Knowledge Base

Use the 123FormBuilder – FreshBooks integration to create invoices or estimates in your FreshBooks account upon form submissions.

Setting up your FreshBooks integration

1. Click New Form from your account dashboard and start creating your payment form.

You can use choice fields (single/multiple choice and dropdown lists) to display the products on sale or, even better, Product field. 

It’s required that you associate form fields with the First Name, Last Name, and Email address Freshbooks fields. Therefore, add the fields Name and Email to your order form. Make sure to set them as required.

2. In your Form Editor, in the left side panel, you will notice the Payments section. By using the search bar, you can quickly find FreshBooks.

3. After adding FreshBooks on your form, you will notice a couple of changes: the Freshbooks payment processor has a tag near its name & the settings panel opens up to the right side of the page.

4. In order to set up the FreshBooks integration, you have to provide the necessary credentials of your FreshBooks account, as follows:

– Add the URL of your FreshBooks account, followed by the expression api/2.1/xml-in (e.g. https://www.youraccount.freshbook.com/api/2.1/xml-in).

– Provide the Token key of your account. To access your Token, log into your FreshBooks account, and go to the My Account → FreshBooks API section. Copy the code from Authentication Token and paste it in the FreshBooks merchant box back on 123FormBuilder.

Another way to connect the application to your FreshBooks account, especially if you are already logged on to FreshBooks in the same browser, is by checking the Use OAuth authorization option.

Under Client Information, match the required fields and any other fields you need.

Check the Update client if email exists option if you want to update invoices/estimates that contain the same email address.

You can also customize and set different options in the Invoice/Estimate section.

• Create – Invoice or Estimate.
• Status –  Send by email or Send as a draft.
• Below Notes and Terms, you have the possibility to add field variables from the form.

Where it says Email on failure, type your email address so you can be informed of any errors that might occur upon submission. You can change the email address at any time in this section.

To test your 123FormBuilder – Freshbooks integration, you’ll need to tick the Use sandbox checkbox.

Important: Whatever currency you’ve set up in the Payment Summary panel, it must be equivalent to your settings in your FreshBooks account, as the integration doesn’t change currencies.

5. Enable the payment integration by clicking on Enable button. By enabling FreshBooks, you will notice a couple of changes on your form.
The FreshBooks payment processor on the left side panel has an Enabled tag on it so you could easily scan which payment processor is enabled.

Another change is that on your form it will be displayed an Order summary. Here will appear all the products your respondents select on the form, together with the price per option, quantity and the total price. If you want to customize the order summary, all you have to do is click on it and the available settings appear on the right side panel.

Another change is related to the Submit button. Once your payment integration is enabled, the Submit button is changed to Continue to payment. Below it, we are displaying a disclaimer together with the Freshbooks logo so that respondents are aware they are proceeding to a payment.

You can customize the action bar (everything that is related to the submit button, additional buttons, disclaimer, etc) by simply clicking on this area.

Another setting that you can enable/disable is related to showing the accepted cards and the icon & logo of the payment processor. By default, both of them are enabled, but you can disable them and even edit the text shown under the Continue to payment button.

You can use the Star rating field to get feedback on your products/services from your respondents. In the Submissions section of the form builder, you will be able to see the number of stars each respondent has selected.

All you have to do is to add a Star rating field to your form and define the label so that your respondents know what they have to rate. You can also change the number of starts from 1 to 10, add a default value that will appear preselected on the form when your respondents access it or change the star icons to adult or children icons.

Related articles

• How to send notifications in HTML format or as plain text

To track the form’s activity with Google Analytics, go to the Publish section of your form. Under Tracking, you can find connect your Google Analytics.

Setup instructions

Beforehand, you need to log in to your Google Analytics account. If you don’t have an account, you need to set it up, and also a property and a data stream need to be set up. The form itself needs to have its own data stream, even if the form is embedded on your website.

In order to do this, you need to select Web as the type of stream and enter your form URL. Do not forget to name your stream in order to be easily identifiable. Once this is done, click on Create stream.

After the stream is created, a new pop-up will be shown, like below. From here, you need to take the Measurement ID and copy it.

Coming back to Publish section, under Tracking, paste the Measurement ID and click on Save button.

Once saved, it would look like below:

Note: if you want to deactivate the Google Analytics integration, all you have to do is click on Edit and delete the Measurement ID and click on Save.

The setup is ready! Data should be available in your Realtime reports after maximum a half an hour and full analytics for your form will be available after 24 hours.

Events

By default, Google Analytics automatically collects a series of events through enhanced measurement, such as:

a. page_views – each time the page loads

b. scroll – the first time a user reaches the bottom of each page (i.e., when a 90% vertical depth becomes visible)

c. outbound clicks – each time a user clicks a link that leads away from the current domain

d. view_search_results – each time a user performs a site search, indicated by the presence of a URL query parameter.

e. form interaction – capture a form interaction event each time a visitor interacts with a form on your website. (form_start -> the first time a user interacts with a form in a session; form_submit -> when the user submits a form

f. video engagement – capture video play, progress and complete events as visitors view embedded videos on your form (video_complete -> when the video ends; video_progress -> when the video progresses past 10%, 25%, 50%, and 75% duration time; video_start -> when the video starts playing)

g. file downloads – when a user clicks a link leading to a file of the following types (document, text, executable, presentation, compressed file, video, audio)

Custom events

In addition to these standard events, 123FormBuilder automatically sends through custom events for certain actions.

Custom events are events that you define in Google Analytics.

a. SubmittedForm – this is triggered when the form is successfully submitted (on Thank you page)

b. StartedSubmission – this is triggered when the user begins filling out the form

c. ConfirmPayment – this is triggered when the payment checkout is confirmed (also, containing the total amount from the order summary).

According to Google Analytics documentation, custom events should only be created when no other events work for your use case. Custom events do not show up in most standard reports.

Reports – Realtime

All events appear under Reports – Realtime, around 30 minutes after the setup is ready. The entire data will be available after 24 hours.

Let’s see how it would look like after making some test submissions. Once you navigate to Realtime, the first thing you will see is a quick overview that has the number of users in the last 30 minutes, how they are split per minute and in which device category they fall off.

Going further, you can see the users by multiple channels: First user source, First user medium, First user source/medium, First user source platform and First user campaign.

You can split by Audience Users and New users by clicking on the dropdown arrow near Users in the second container.

You have access to the views by page titles and screen name – in our case, the form itself.

And last, but not least, you have an event count by event name – as you can see in the below screenshot, the number 1 event was page_view, followed by scroll and user_engagement.

Also, if you have set up conversions (more information below), then they will appear in the Realtime overview.

Conversions

You can set up certain events to be marked as conversions. This depends on the action that is valuable for your form/business. For example, let’s say that SubmittedForm event is a conversion for you – this means that when your respondents submit the form, this event is marked as a conversion and can be tracked accordingly.

Existing events can be marked as conversions under Admin – Events by simply finding the event and toggle it on for Mark as conversion.

Note: in Universal Analytics, instead of conversions you have been using goals. Here is how you can migrate your goals to conversion events.

Setups made for Universal Analytics need to be redone, following the new format for Google Analytics.

The 123FormBuilder – Stripe payment integration provides an extremely easy way to collect payments with your online order form. The best thing about Stripe is that it doesn’t require a merchant account. Funds go directly into your bank account and Stripe’s fee at successful payments is 2.9% + 30¢, with no other setup or monthly fees.

Stripe is primarily aimed at developers, but 123FormBuilder is here to help non-developers out. Like any other of our payment integrations, the integration with Stripe requires just authentication data that allows the applications to communicate. Your order form with Stripe can be set up in minutes!

Setting up your Stripe integration

1. Click New Form from your account dashboard and start creating your payment form.

You can use choice fields (single/multiple choice and dropdown lists) to display the products on sale or, even better, Product field. 

2. In your Form Editor, in the left side panel, you will notice the Payments section. By using the search bar, you can quickly find Stripe.

3. After adding Stripe on your form, you will notice a couple of changes: the Stripe payment processor has a tag near its name & the settings panel opens up to the right side of the page.

4. In order to set up the Stripe integration, you have to click on Connect and follow the instructions to enable the integration.

4. Back to the Form Editor, you have to provide the connected account. If you want to use recurring billing, tick the option Use recurrent payment and add the necessary data.

5. Enable the payment integration by clicking on Enable button. By enabling Stripe, you will notice a couple of changes on your form.
The Stripe payment processor on the left side panel has an Enabled tag on it so you could easily scan which payment processor is enabled.

Another change is that on your form it will be displayed an Order summary. Here will appear all the products your respondents select on the form, together with the price per option, quantity and the total price. If you want to customize the order summary, all you have to do is click on it and the available settings appear on the right side panel.

Another change is related to the Submit button. Once your payment integration is enabled, the Submit button is changed to Continue to payment. Below it, we are displaying a disclaimer together with the Stripe logo so that respondents are aware they are proceeding to a payment.

Also, the accepted cards by the Stripe integration are visually displayed so that respondents know from the start what is the accepted payment method.

You can customize the action bar (everything that is related to the submit button, additional buttons, disclaimer, etc) by simply clicking on this area.

You can also make changes to the default settings related to showing the accepted cards and the icon & logo of the payment processor. By default, both of these settings are enabled, but you can disable them by clicking on the payment processor.

If the Reference ID is enabled on your online form, you’ll also find it in your Stripe account, in the Transactions → Payments section, under Description. You may use this workaround to track your transactions.

Note that the minimum recurrence period for Stripe is one month.

Testing payments with Stripe

To test out the integration without having to do real transactions, follow these steps:

1. Enable the Use sandbox option.

2. Click Connect.

3. On the new tab at the top of the page click on Skip this form.

4. Make a test submission and check your Test data information in Stripe.

Now sit back and let the payments begin!

Stripe supports processing payments in over 135 currencies. For a list of all currencies, check out their article.

There are various theme options in our online form designer. Basically, you can change just about anything on your web form, from text font and color to the style of the submit button. The settings categories that you can tweak in the theme customization panel are Quick setup, Layout, Background, Fields and Buttons.

Now let’s get right into it and see how you can customize your theme in each category.

Quick setup

This section is used to make easy and quick changes to your form, being the most used theme settings options.

Here you can specify the font of your form & the text color that applies to your entire form (question text, answering options, instructions). The button color is used to change the color of the Submit button on the form, while Button text color sets its color. Background color is used to change the color of the form. The shadow switcher allows you to have a shadow to your form.

Layout

Layout section is divided into two: Form and Page. Let’s take them one by one.

In the Form subsection, you can modify how the form width is calculated (pixels or percentage) and set the form width accordingly. Also, if you are interested in changing the direction of writing on your form, you have the option to do so by changing the form direction from left to right to right to left. There are some additional settings related to the form, such as changing the padding for header, footer, left and right.

In the Page subsection, you can modify the top and bottom padding.

Background

Background section is divided into two subsections: Form and Page. From this section, you have the option of customizing both the background of your form and of the entire page, such as uploading a photo for background, changing the position of the background image and even adding a border to your form with multiple customizations.

Fields

Fields section is divided into multiple subsections: Label, Instructions, Input, Field, Field Hover, Field Focus, Error, Choices

Label – from here you can change the question’s text placement (top, right, left), the alignment & the font. Additional design settings for labels are related to the font style and size, the color and the margin between question text and answer/choices. Also, if you are interested in changing the color of the asterisk when dealing with required fields, you can do that by using the color picker from Required star color.

Instructions – all the design settings available for label/question text are also available for Instructions separately. You can design instructions and label totally different so that your respondents could easily read through the form and understand that they need to follow your instructions when filling up the form.

Input – these design settings are related to the input your respondents are providing when filling in your form. You can change the background color of the answering text boxed, the border and its style and also the font of your respondents’ input.

Field – In this section, you can increase or decrease the spacing between your form elements by changing the Vertical padding value. To have your form centered, increase the Horizontal padding value.

Field Hover & Field Focus – You are able to add different colors while focusing and hovering over a field.

Error – If a field needs to meet certain criteria, an error message will be displayed. You change the design of the error text to match your whole form’s theme, by setting the font, font style, color and more.

Choices – you can create your own custom radio buttons for Single choice fields and check-boxes for Multiple choice fields. Adjust their layout to be a perfect fit for your theme.

Buttons

Buttons section is divided into multiple subsections: Button, Primary button, Secondary button.

There are several buttons that can appear on your form: Submit, Calculate, Reset, Next, Preview, Previous, and Update. For any of them, you can set colors and change their format.

The Button settings will adjust the visual properties of all the buttons enabled on your form (border parameters, font options, and padding).

The Primary button options are referring to the Submit button.

The Secondary button section will change the design of all the remaining buttons.

Asana is a great tool to organize your team and track their work. 123FormBuilder submissions can integrate with this great task management tool. You can achieve this connection by creating a zap.

To enable the integration with Asana and send tasks straight to your Asana workspace, go to the Integrations → Use Zapier section in your 123FormBuilder form.

Click on Use this Zap next to the Asana application.

In the pop-up window choose your 123FormBuilder account.

Next, select your form.

At the second part of the zap, choose the action to create tasks in Asana.

Afterward, sign in to Asana.

Authorize Zapier to access your Asana account details.

Choose from the dropdown menu your Asana account.

Complete the setup by choosing your organization, project, section and add additional information about the task.

Finally, click to make a test task. In your Asana account, the task will be created within seconds.

The only account limit that is reset monthly is the submissions limit. Unfortunately, other limits such as the file storage do not get reset after a period of time.

If you have reached the maximum number of forms allowed per your form builder account, you can either delete some of your existing forms or upgrade your plan. Consult our Features Matrix to see what are your account limits and what plan suits your needs best.

The submissions limit is reset on the first day of each month. Each time a form user fills out your form, you receive a form submission.

Once you have upgraded your account, you will be able to build more forms, receive more submissions, store more files, and many more.

You can use your own CSS for styling forms. To start, go to the Design section of your web form and scroll to the bottom, where Add custom CSS button is available.

Click on Add custom CSS and use the Code tab to type the CSS code or the URL tab to provide the URL to the CSS file located on your server.

If you choose to Load CSS from URL, make sure that the URL leads to the content of your stylesheets. Here’s an example: https://www.mydomain.com/styles/stylesheets.css. If the URL does not contain the .css extension at the end, your CSS styles will not apply to the form.

For even more examples, visit the CSS Tricks section of our Knowledge Base.