Knowledge Base

The Embed PDF field allows you to incorporate PDF files into the form so that your respondents can scroll through it while completing your form. This is a great way to share with your users a copy of your Terms and Conditions that they can also download to their devices to revisit at a later time.

You can find the field under the Media & Structure section.

Once the field has been added to your form, you can find different inputs on the right side panel. You will have to provide the URL for the PDF file. Please keep in mind that the link has to be secure (https format), and it needs to end in the format of the file (.pdf).

Also, you can change the field name to easily recognize it if you want to show/hide the PDF Embed field using conditional logic.

Respondents can perform the following actions on the embedded PDF file:

a) Zoom out

b) Zoom in

c) Fit to width/page

d) Rotate counterclockwise

e) Download the file on their device

f) Print PDF

e) View the Document properties

Related articles

• How to add my Google calendar to a web form?
• Can I publish my form report on a web page?

Clearing your browser’s cache and cookies is an important step for almost any internet browsing issue. The reason why we recommend this step is because the browser’s cache saves files to speed up the website’s loading time. However, when a website is updated, the cache files (since it has previous data) will interfere with the new version of the website.
Follow these easy steps on how clear the cache and cookies from your browser.

Google Chrome

1. Navigate to your Settings from the three-dot menu located on the top right.

2. From the left side panel, select Privacy and security.

3. Afterward, select the option to Clear browsing data.

4. Make sure to check the following options: Cookies and other site data and Cached images and files.

5. Finally, hit the Clear data button.

Opera

1. Navigate to your Settings.

2. Scroll down to the Privacy and security section then select Clear browsing data.

3. Set the Time range to All time.

4. Make sure to check the following: Cookies and other site data and Cached images and files.

5. Hit the Clear data button.

Mozilla Firefox

1. Navigate to your browser’s Settings in the top right corner.

2. Open the Privacy & Security section and under Cookies and Site Data click the Clear Data button.

3. In the pop-up window, tick the check boxes named Cookies and Site Data and Cached Web Content. Finally, press the Clear button.

Internet Explorer

1. In the top right corner click on the gear icon and choose Internet options.

2. In the General tab click on the Delete button.

3. Check the options Temporary Internet Files and website files and Cookies and website data then press Delete.

Microsoft Edge

1. Go to the menu icon and select Settings.

2. Choose the Privacy, search, and services category and scroll down to Clear browsing data.

3. Next, click on the Choose what to clear button.

4. Set the Time range to All time.

5. Tick the options Cookies and other site data and Cached images and files. Finally, hit the Clear now button.

Safari

1. Click on Safari and choose Preferences.

2. Switch to the Privacy tab and select Manage Website Data.

3. Finally, hit the Remove All button.

Related articles

• How to enable third-party cookies in your web browser?

Wix Code allows you to create your own database, a MySQL database. It’s a great tool to store information from your website and it looks like an Excel spreadsheet.

123FormBuilder web forms can populate a new database with each submission entry. This way you have easy access to your form submissions. The database will be read-only and all fields will create a new column.

Before creating the database you need to install 123FormBuilder on your Wix website and Turn on Dev Mode from your website editor.

Setting up the integration

1. From the left panel of your Wix Editor, select Code Files and go to Backend. Click the plus sign and select New .js File.

2. Next, name your file http-functions.js.

3. In the new JS file (http-functions.js) paste the 123FormBuilder Wix Code Javascript Snippet.

4. Now, click on your form to open our form builder App for Wix. Go to Settings → Redirect to a web page (choose in the parent frame) and specify the URL where you want to redirect your users after submitting the form.

After that, at the end of the URL add the following text #WixCode.

5. While still on our Wix App, go to the Forms tab, select your form, and click the Customize Form button.

6. From your Form Editor click the Publish icon and choose Share form. Identify your Form ID in the form URL, which is numerical, and copy it.

7. Go back to the Wix Editor and select Databases from the left panel. From Content Collections, click on the plus sign and choose New Collection.

8. In the lightbox that appears choose the option Start Creating. Name your database like this: 123FormBuilder_6014537 (instead of 6014537 you will paste your own Form ID, step explained at point nr. 6).

Choose Form Submission at the What’s this collection for? question.

9. All set! Now go to your webpage and fill out the form. You’ll find the spreadsheet containing your entries in the Content Manager section of your Wix website.

If you’re new to our form builder, learn more about our Shopify form integration.

Every time a new customer places an order on your Shopify store, their name and other details are added to your customer list. 123FormBuilder developed an integration to create customer profiles in Shopify based on your form submissions.

How to enable the Shopify integration

1. Open our app, select your form, and navigate to Integrations. You can search for Shopify using the search bar.

2. Your store domain will be automatically populated.

How to customize the integration

Hit the Customize button and match form fields with Shopify fields in the lightbox that appears on the screen.

The Note and Tags sections allow you to add your own text and select other form fields. The field variable from the dropdown list will be replaced with the user input.

In your Shopify dashboard go to Customers to check the new customer profile created with the submission entry.

PayPal Express Checkout is using the shipping and billing information from your client’s PayPal account. This will make the payment process an easy experience. A big advantage is that Paypal Express Checkout allows you to accept payments directly on your online order form, without redirecting away from the page.

Setting up your PayPal Express Checkout 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 PayPal Express Checkout.

3. After adding PayPal Express Checkout on your form, you will notice a couple of changes: the PayPal Express Checkout 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 your PayPal Express Checkout integration, you have to provide your PayPal Checkout Client ID.

To test your PayPal integration with 123FormBuilder, you’ll need a sandbox account on PayPal.
If you do not have one, go to https://www.sandbox.paypal.com to create one. Type in the credentials of your sandbox account in the payment integration panel and tick the Use sandbox option.

5. Enable the payment integration by clicking on Enable button. By enabling PayPal Express Checkout, you will notice a couple of changes on your form.
The PayPal Express Checkout 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 PayPal logo so that respondents are aware they are proceeding to a payment.

Also, the accepted cards by the PayPal Express Checkout 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.

Under the Continue to payment button, we are displaying a disclaimer text together with the logo of the payment processor and the accepted cards. If you want to make changes to this, all you have to do is click on the payment processor and on the right side you can disable these settings from Display payment info.

Where to find your PayPal Client ID?

• First, log in here.
• Access your applications page on PayPal.
• In the My Apps & Credentials section click on your app. If you do not have one, click on Create App.
• Click on your app and you will see the API credentials listed. Copy the Client ID ( it is 80 characters long). At Settings from the bottom, you should have ticked the Accept payments option.

In this post, we’ll take a look at all the email template variables that our form builder has to offer. Using custom templates as your foundation, you can design a unique email and make it look more professional.

The default email template contains an HTML table that renders user input. However, you can add additional information and recipients can receive all the necessary details about submission entries.

In order to add variables in your template click the plus sign near the Body section. This will open a dropdown list with all the available options.

You can add information about the user’s session: IP, Country, Browser, Device type, Referrer, Form Host.

If you have an order web form you can add variables related to their transaction details such as Payment Link, Payment Amount, Payment Currency, Payment Status (complete or incomplete), Payment Processor Name, Coupon codes. Along with the Form Summary you can choose to incorporate the Payment Summary.

Custom links such as the edit submission or approval link can also be placed in the email body. Add the Quiz summary or the Quiz score if you have built a quiz form.

We made the following template for an order form as an example:

All variables will be replaced. A variable will be empty when a user does not fill out a field. Mark fields as required so that you can collect the most important information from your users.

Hide empty fields: If you enable this option, the fields that haven’t been filled will no longer be included in the notification email.

The hide empty fields option works with both custom and default email templates.

Here is how the email template arrives in the inbox:

Email templates save you time when you want to send the same email on multiple occasions. You can create different templates for your forms, or just use one on all.

Depending on your needs, there are seven default templates that can be customized in our form builder:

• Default notification template
• Default HIPAA notification template
• Payment template
• Approval request template
• Autoresponder template
• Copy of submission template
• Quiz template

Click where it says Load template and choose the template you want to use.

Customize the template and once you are done and satisfied with the result, click again on Load template. From the list, select Make this draft a template.

A pop-up window will appear where you can name your new template. Hit save and the custom template will appear in your template list.

In order to delete or rename a template, head back to the Body dropdown list and select Manage Templates.

The templates are saved within your account and can be enabled on any form.

PDF templates can also be saved as drafts and used on other forms.

In this article, you will learn how to create minimalistic input fields using our form builder. Start improving your form’s design by incorporating CSS codes into your forms to enhance the user experience.

CSS allows you to match the design of your forms with your webpage theme. If you aim for a minimalist design, this simple and easy CSS trick will achieve that using our CSS form generator.

With this CSS code, the input fields will have only the bottom line.

To get started, from the Form Editor go to the Design section. Next, click on the Add custom CSS button.

Here you will be placing the following CSS code:

#form div[data-role="control"] input[data-role="i123-input"]:not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=hidden]):not([data-no-theme]), #form div[data-role="control"] select[data-role="i123-input"], #form div[data-role="control"] textarea[data-role="i123-input"], #form div[data-role="control"] div[data-role="i123-input"]:not([data-type="file"]), #form div[data-role="control"] div[data-role="i123-input"][data-type="file"] > div[data-role="upload-overlay"], #form div[data-role="control"] div[data-role="i123-input"][data-type="file"] > div[data-role="abort-all-uploads"], #form div[data-role="control"][data-type="check-box"] input[data-role="other"], #form div[data-role="control"][data-type="radio"] input[data-role="other"], #form div[data-role="control"] div[data-role="price-container"], #form div[data-role="control"] div[data-role="price-container"] > input, #form div[data-role="control"] div[data-role="input-container"], #form div[data-role="control"] div[data-role="input-container"] > input 
{ 
     border-width: 0px 0px 1px 0px!important; 
}

This will change the input box’s layout to all your fields.

That’s it! Here is the final result:

In this article, you will learn how to make choices as clickable buttons using our CSS form generator. We developed a CSS code that will change the design of your Single and Multiple choice fields.

Use the below CSS code to give your form a modern layout. Copy-paste the code in Design -> Add custom CSS.

If you want to change the choice alignment (horizontal or vertical), make sure to go to each field and under Quick setup, you will find Choice alignment option.

body #form div[data-role="choice"] > label > input[type="radio"], body #form div[data-role="choice"]
{
   padding: 0.5em;
   margin: 0;
}

body #form div[data-role="choice"]  > label > input[type="radio"]{
   position: absolute !important;
   opacity: 0 !important;
   left: -100% !important;
}
body #form div[data-role="choice"]:first-child {
 
}
body #form div[data-role="choice"],body #form div[data-role=control]:not([data-force-mobile-rendering]) [data-role=input-row] {
    overflow: unset !important;
}
body #form div[data-role="choice"]  > label > label {
   display: none !important;
}
body #form div[data-role="choice"]  > label  {
   overflow: unset !important;
   padding: 0 !important;
}
body #form div[data-role="choice"]  > label  > span {
   width: 150px;
   height: 40px;
display: flex !important;
   justify-content: center;
   align-items: center;
   border: 1px solid #cccccc;
}
body #form div[data-role="choice"]  > label > input:checked + label +  span  {
   background-color: #2F86CA;
color:#ffffff;

}
body #form div[data-role="choice"] > label > input:checked + label + span:after {
   display: block;
   width: calc(100% + 4px);
   height: calc(100% + 4px);
   left: -7px;
   top: -7px;
   background-color: transparent;
   position: absolute;
}

We made bold the parts where you can add your own preferences.

• width: 150px – increase the number of pixels to make the buttons wider.
• height: 40px – change the row height to any size.
• background-color: #2F86CA – add the hex code of your desired color (currently it is a shade of blue when someone clicks on a choice).
• color: #ffffff – this will change the font’s color when the choice is selected (currently white).

When modifying the code make sure not to delete any semicolons or curly brackets. If something is not working properly you can always copy the code again.

This is a general code that works for all forms and applies to all choice fields. We made this code to have a better understanding of our platform’s flexibility.

That being said, here is how the CSS will change the design of your form:

Related articles

Button-like choices

Images as options in a multiple choice field

With 123FormBuilder, you can create coupon codes and assign them to your order forms. Whether you’re planning a seasonal sale or simply want to thank your loyal customers with a special discount, you can certainly achieve this with our web form builder.

To add discounts, you’ll need the Discount code field. Go to the Form Editor and scroll down to the Calculations section to add the field to your form or simply search by Discount.

Under the Coupon codes section, click on Discounts & other options to create a new discount code.

You can create as many coupons as you want and you can use multiple codes for the same discount. Let’s see how to do this.

Click the plus sign to add a new coupon. Afterward, type in the code that you’ll share with buyers, specify the discount associated with it and mention what this discount represents.

The discount can be percentual or can consist of a fixed amount. In the latter case, the currency will be the one set in the Products section.

You can remove discounts from the Coupon codes list when you don’t need them on your form anymore.

Related articles

• Payment Integration
• How to add fees to your order forms
• How to create a complex order form?

Once you connect a payment processor and assign your prices, you can specify how should the total price be calculated by setting up the Products section.

To do so, in your Form Editor, scroll to the bottom of the form and click on the Order Summary.

Afterward, click on the View Inventory button.

The pop-up window has 5 columns: Product, Price, Multiply with, Discount, and Tax.

Product

Under this column, you will find the labels of all the fields that you have values assigned. 

You can also rename your fields if you want to present your products in the Order Summary differently than in the form itself. Just click on your item and start typing the new description.

Price

The Price column will auto-detect its type based on the field’s functionality. There are three types of values:

• Multiple is for choice fields (Single/Multiple choice and Dropdowns) because there is more than one option to choose from, and each choice can have a different price.
• Variable is for Formula fields. The final value depends on the user’s choices.
• The fixed price is displayed for input fields.

Click the price type. This will allow you to change the prices or assign values to your choices.

Note that formulas can not be modified from here. You will need to return to your formula field to bring changes.

Multiply with

By default, each product is multiplied by 1. However, you can choose to multiply your product with any number.

Discount and Tax

In each field, you can apply a discount and a tax. You can choose a percentage or a fixed value. If you want to apply a discount or a tax on the total value, add it to the bottom of the Products page in the On Total section.