Knowledge Base

You can use social login to sign up and sign in to your 123FormBuilder account with your Google, Facebook, or Microsoft open ID.

The way to associate an open ID to your 123FormBuilder account is described in our documentation here, but there are some things you should know if you choose to sign up to our service through your Google, Facebook, or Microsoft open ID, as follows:

• If you sign up through an open ID (Google, Facebook, or Microsoft), you will be automatically redirected to your newly created 123FormBuilder account, but only if you are logged in to the respective social network account (in the same browser). If not, you will be first requested to add the credentials of your social network account. Only then will the 123FormBuilder account be created with your email address as the username.
• If you sign up with an open ID whose email address is already associated with a 123FormBuilder account, you’ll be signed in to that account instead of signing up to a new account.
• Google. If you sign up with your Google open ID, the username of your 123FormBuilder account will be your Gmail address and the password will be sent to you by email.
• Facebook. If you sign up with your Facebook ID, your username will be the email address associated with your Facebook account (e.g. john@email.com). The password will be sent to you by email.

123FormBuilder provides a dedicated app for Wix users, making it easier for them to manage their online forms directly through their Wix website. We also have a special subscription, the Wix Starter plan, which comes with certain restrictions.

If you have a 123FormBuilder free account on your Wix website and you choose to upgrade the website to a premium plan, the 123FormBuilder account will be upgraded to the Wix Starter plan.

You can also purchase the Wix Starter plan directly from our app.

The main restriction of the Wix Starter plan is that it can be used only on Wix, and on a single Wix website. If you log into your 123FormBuilder account on our platform or another Wix website, your account will be downgraded to the Basic free plan. However, your Wix Starter subscription will remain active. The subscription can be canceled/downgraded as explained in this article.

Therefore, always make sure which 123FormBuilder account you are using on the Wix website that you are working on. If your account is downgraded, you can reinstate your subscription by returning to the Wix website for which you have purchased it.

To use the same 123FormBuilder account on multiple Wix websites you will need one of our native paid plans. Check out our features list for more details.

Yes, you can add the option to charge your form users only when their submissions have been approved. What is it good for? Well, let’s imagine a training program that has a preselection phase. Candidates will fill out a registration form that will be sent for approval. If the submission is approved, the submitter will receive an email with a link that leads to the payment of the event.

To achieve this setup, follow the steps below within the form builder:

1. In the Form Editor, make sure the Email field is required, so the submitter will not leave it blank.

2. Afterward, go to the Approvals section, click on New Approver and type in the email address of the person who will review each submission.

3. There are two options available in this step: to email the approver when all submissions are sent or to establish some branching rules. For more details, check out our Approvals article.

4. After adding your approver, don’t forget to Enable approvals for this form. This will automatically create 3 new email templates.

5. Next, go to the Emails section to customize the approval emails. You can edit each approval email to your liking, but in this case, we will focus on the Submission was approved template.

6. After selecting the template from the left-side panel, click on the plus sign next to the Body dropdown and select the Payment Link variable from the list.

7. Save your email template and that’s it! Test your registration form in sandbox to see how it works.

Each approved submission will trigger an email with the link that redirects the submitter to the payment page.

These steps may be followed whenever you encounter other NationBuilder errors (such as 400, 402 or 403).

If your 123FormBuilder – NationBuilder integration returned a 401 error code with the message: You are not authorized to access this content. Your access token may be missing. The resource owner also may not have a permission level sufficient to grant access, here’s how you can fix it:

1. In your NationBuilder account, go to Settings → Apps. Afterward, look for the 123FormBuilder application and click Uninstall.

2. Next, return to your 123FormBuilder account and disconnect the NationBuilder application from your online form (My Forms → Your Form → Edit form →  Integrations).

3. Once the app has been disconnected from your form, connect it again to restart the integration. This will solve the problem so that you will no longer receive the 401 error code and the integration will work properly.

3. Paste it in a text editor like Notepad.

4. As you can see the base code of the script has HTML Tags.

5. In order to incorporate those HTML elements on our side, please go to Settings – Thank you Page – Show HTML Block. Add the highlighted text, as in the above image, in the source code of the HTML block option (the <> button on the top right side of the editor):

Now you have added the HTML. Next, let’s see how to add the actual script.

6. Copy the script part in another Notepad, without the comment line and the HTML tags.

So the code should start with:

!function(f,b,e,v,n,t,s)

And end with:

fbq('track', 'PageView');

7. Save the Notepad document with the extension ‘.js‘.

8. Upload the file (document) on a trusted web server (yours recommended).

9. In your 123FormBuilder account, go to My Forms, select your form and go to the Settings – Advanced section.

10. Enable the option Add a JS script to the Thank You page of your form and paste the URL where your .js file is located.

Track Form Activity

The steps are the same as explained above. Two steps are different. The HTML and the script’s placement will change. Since we are tracking the form’s activity, both will be added directly to the form.

Therefore, at point number 5,  incorporate the HTML elements from Facebook pixel into a HTML block field or the Form Header.

At point number 10, enable the option Add a JS script to your form and paste the URL where your .js file is located.

If the steps have been followed correctly, your online form should be already tracked on Facebook.

When using our HTML form generator, you can add electronic signature fields to your forms. The signature field is delimited by a box-shaped canvas.

To customize the digital signature box on your form, you’ll need to use Inspect Element in your browser to locate its ID. By applying custom CSS codes to the field you can customize its appearance using our CSS form generator. Add your own CSS code in the forms Design → Add custom CSS section to override the default styles of our theme.

How to locate the ID

You’ll need to open the form in view mode and right-click the digital signature box. Next, hit Inspect element. This will open the browser’s console.

The below ID is the one that will change the design of all signature fields.

#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas

How to add attributes

Paste the ID and continue by opening curly braces { }. Inside the curly braces place the CSS attributes, followed by a semicolon.

Here are a few examples that you can use to customize your Signature field.

1. Change the background color of the signature field.

#form div[data-role=control][data-type=signature] div[data-role=signature-container]>canvas
{
background-color:#0080ff;
}

2. Add your own image as the background.

#form div[data-role=control][data-type=signature] div[data-role=signature-container]

{
content: url('https://www.something123.com/button123.png');
}

3. Change the design of the Clear button.

You can also style the clear option that appears on the bottom right side of the signature box whenever the form visitors provide a signature.

The ID for the clear link is a bit different than the one for the Signature field. You can find it below:

#form div[data-role=control][data-type=signature] div[data-role=signature-container] > a[data-role=clear-signature]

Copy the link above and provide the styles that you want. In the below example, we changed the font size, font family, and color, and we inclined the text just a bit.

#form div[data-role=control][data-type=signature] div[data-role=signature-container] > a[data-role=clear-signature] 
{
color: #e22727;
font-size: 17px;
font-family: 'Roboto', sans-serif;
transform: rotate3d(-1, 3, 1, -34deg);
}

To style file upload buttons on your online form, access the Form Editor and go to the Design section. Afterward, click on Add custom CSS and paste this ID to style the file upload default text:

#form div[data-ui-role=ui-element][data-type=file] > div[data-role=upload-overlay] > div[data-role=placeholder]

Below are some examples:

1. To change the color of the Choose files or drag here text:

#form div[data-ui-role=ui-element][data-type=file] > div[data-role=upload-overlay] > div[data-role=placeholder] 
{ 
     color:#4169E1; 
}

Replace #4169E1 with the hex code corresponding to the color you want.

2. To change the file upload text with another image from an URL:

#form div[data-ui-role=ui-element][data-type=file] > div[data-role=upload-overlay] > div[data-role=placeholder] 
{
      content: url('//mydomain.com/upload.png');
}

Replace //mydomain.com/upload.png with the URL where your image is located.

123FormBuilder provides conditional logic functionality, allowing its users to change the behavior of their web forms based on the input provided by their respondents.

With conditional logic, you can make your online forms more dynamic. In the form creator, you can create complex and advanced rules to control how your online forms behave. There are three types of rules you can create:

• Field Rules
• Form Rules
• Email Rules

The first two types of rules (Field rules/Form rules) are located in the Rules section of your form, under separated tabs.

Email Rules are located in the Emails section. You can learn more on how to set up email rules here.

Field Rules

Field Rules affect the behavior of your online form while it is being used. Here you can show or hide certain fields based on the input given by your submitters. These types of rules are applied in real-time, while your respondents are filling in the online form.

Form Rules

Form Rules redirect end-users to a certain web page that you have provided when some specific conditions are met. For example, you can use this option to redirect users to a different version of your website depending on the language they have selected on the form. Form rules are triggered after the form is submitted.

Email Rules

Email Rules can be added to each email notification. They will trigger the email to be sent to the specified recipients when one or more conditions are met. These types of rules apply after the end-user submits the form.

Besides form fields, you can also include the language field (if using translations) and the quiz score (for quiz forms) in any type of rule.

For more details on how to set up email notification rules, check out our step by step tutorial:

How to use Field Rules

To create a field rule, you can first enable field rules and then click on the Add rule button. You can also first set up the field rules and then enable them if you want to. Just keep in mind that you have to tick Enable field rules if you want them to have an effect on your form.

To create a rule, click on the Add Rule button. Use the first dropdown to select the field from the form and the last field to conclude the condition.

The second dropdown is used to select the operator. For choice fields such as Single choice or Multiple choice, you have a dropdown with the predefined values is checked and is not checked. For input fields, you need to type a value.

The plus button on the right creates a new condition linked to the previous one through connectors.

Conditions from the same rule are linked with the connector AND or OR. The plus button will appear next to the last condition of each rule or subrule.

Next, hit Continue and select one of the two existing actions: Show or Hide. In the end, select the field or fields you want to show or hide after the condition has been met on the form.

If you wish to Show or Hide the Multiply field group field, please select the Multiply field group element and all the fields included in it. Otherwise, your rule will not work as expected.

When you need to edit a condition from your rule, hover over it and press the button Edit or Delete if you want to delete it completely.

Next to these buttons, you’ll find the Subrule button that creates a subrule within the respective condition.

You can also delete an entire rule by hovering over it and ticking the checkbox on the top right corner. Press Delete on the bottom of the page to delete it or Duplicate to make a copy of the rule. You can select several rules and delete or duplicate them at the same time. Use the Clear selection option to uncheck all rules.

Use the search bar to find the rule you are after. Finally, click the Preview form button to see how conditional logic applies to your online form.

To see more details on how to add rules to your form, you can also check out our short video tutorial:

Form rules

Form rules are used if you want to redirect your respondents to a different web page based on their input.

Similar to field rules, you will have to enable form rules, select the field you are interested in and then you have to provide the web page to which your respondents will be redirected after submit.

Related articles

• How to use conditional logic to show/hide form fields?
• How to use the operators ‘greater than’ and ‘less than’ in form rules?
• Form rules

No, you cannot. Especially if you intend to receive submissions this way. Even though we encourage the use of JavaScript to embed forms on different web pages, embedding them into emails is not the case. That’s because it implies a security risk for the majority of webmail clients. Yes, you can embed HTML content into an email if it supports HTML elements, but online forms are not exclusively HTML built. Even though you succeed in embedding your online form into an email, chances are the end-user will not be able to submit it at all.

The best solution in this matter is to provide the link to your online form within the email. This way, your end-users will click on the link and have the form opened on a separate page where it’s fully functional. Go to Publish → Link to retrieve the link to your online form.

If you want to read more, follow Campaign Monitor’s article on using forms in email.

In conclusion, it’s not that you can or cannot embed forms into emails. It’s about the fact that online forms don’t work properly or at all on different email platforms (e.g. Yahoo, Gmail, Outlook).

Related articles

• Publishing Your Web Forms

A favicon is a tiny icon displayed in the browser tab where the webpage is opened. It usually has the extension .ico and is used for branding the content of the webpage. You can change the favicon of your 123FormBuilder account with one of your own.

To change the favicon of your 123FormBuilder account, you need the Professional plan. Here’s how you can change the favicon:

1. Log in to our form builder and go to My Account → Change Account Details.

2. Afterwards, scroll down to the last line, paste the URL of your favicon in the Favicon URL box and hit Save.

Reload the page so your favicon will replace the default one. Find the Refresh button of your Internet browser, click it and you’ll see your favicon immediately.