Knowledge Base

123FormBuilder forms work great on all mobile devices and tablets and offer a user-friendly experience on any device.

Our forms are by default mobile responsive, however, you can tweak your existing web forms design with our CSS form generator. In this article, we will show you a step-by-step guide on how to accomplish that.


Form Images

When you insert an image in the Form Header or HTML blocks you will need to specify the best settings to ensure that it will be mobile responsive. In the editing mode of your HTML field click the plus sign and select Image.

Form header image

After you upload the image, in the Dimensions section, type 100% in the first box (width) and auto in the second one (height). Disable the Constrain proportions option to maintain the original width and height dimensions.

Edit image

Video

When you add an iframe to display a video you can use a custom CSS code to make it work perfectly for mobile devices. The CSS will be placed in the DesignAdd Custom CSS section. This method applies to all iframes. Simply copy-paste the code from below:

iframe{
height: auto;
width: 100%;
}

Custom CSS

Font Size

Font size may seem like a small thing, but it is an important element, especially for mobile readers. You can use the following CSS and adjust the number of pixels (12).

@media only screen and (max-width: 550px) {
#form *{
    font-size: 12px!important;
    }
}

Submit Button

Enlarge the submit button to have better visibility. The CSS code from below will make the submit button wider.

@media only screen and (max-width: 550px){
#form button[data-role] {
padding: 0px 33%;
  }
}

Decrease the percentage number if you want the submit button to be more narrow or increase the number (33%) to make it wider.

Form button mobile design

To make the font size of the submit button smaller simply adjust the number of pixels.

@media only screen and (max-width: 550px){
#form button[data-role] {
font-size:12px;
  }
}

That’s it! Now your forms are fully mobile responsive and form visitors will have the best user experience with these design tips.

By using a lookup field, you can search specific information within a Salesforce object and return the content of a field, a record ID, or an account ID in another object. Let’s say these two objects are Account and Lead.

Part 1 – Creating the Lookup

1. First, go to the Lookup section on the left menu and click Create lookup.

Create lookup

2. Afterward, select the Salesforce object where the search should be made to find a record. In this case, the object will be Lead.

Select object

3. Give a name to your lookup. You might create more than one.

4. The lookup is based on an entry made on the form. So at this point, you have to add a filter and select the form field that will contain the word the search will be made by in Lead.

5. Select an operator.

Select operator

6. Find the form field entry in a specific Salesforce field.

7. You can add multiple filters by clicking on Add new filter. By default, between the two filters, the AND logic operator is chosen, but you can change it to OR.

Note: currently the AND/OR logic operators are exclusive -> if AND operator is chosen, all the logic operators between the filters are set to AND. If you change one logic operator to OR, all of them will be changed to OR automatically. We are currently working on bringing improvements to this area by allowing you to set up multiple filters with AND and OR logic operators combined.

Multiple filters

7. Select the field that you want to return in the other object (in this example, Account). You can return multiple fields at once.

8. Lastly, save the settings by selecting the Apply Changes button.

Part 2 – Object Mapping

1. Go to the Object Mapping section and select the object where the field from Leads will be returned, in this case, Account.

2. Select the Salesforce field where the data should be returned and match it with the lookup object you created.

Object mapping lookup result

With the 123FormBuilder – Mailchimp integration, you can import emails and leads from your submitters to your Mailchimp lists or unsubscribe them. Provide your Mailchimp API Key and select Customize to set up your integration.


Mailchimp API key

To retrieve the API key of your Mailchimp account, follow the steps below:

1. Log in to your Mailchimp account and go to your account settings (your username → Account).

2. Afterward, go to Extras and select API keys from the dropdown list.

API keys

3. Press Create A Key and a code will be generated on a line below Your API keys. That is your API key.

Mailchimp API keys

4. Copy-paste the API key in the Mailchimp application box from your form builder account.

Mailchimp integration

Customizing the integration

In the Customize lightbox, use the Action dropdown to select any of the two available options:

  • Add subscriber
  • Unsubscribe email

You cannot select more than one action per integration. The first action will create a new subscriber in the mailing list you have selected in the Use List dropdown. The second action will unsubscribe the email address that has been specified on the form.

In Options, you can choose to update existing subscribers or add a double opt-in to request confirmation before adding new subscribers to your list. It’s important to mention that the two options do not work together.

Use the Groups subsection if you have groups in the selected list.

In Fields, match Mailchimp fields with your form fields. If you have required fields in Mailchimp, it is necessary to match them with the corresponding field on your form. For the integration to work properly, we strongly recommend making the form field required as well.

Lastly, use the Error Handling subsection to set the email address that will be informed of any errors that might occur upon submission.

Customize Mailchimp application

Due to security reasons on behalf of Mailchimp, you cannot embed online forms in email marketing campaigns. Therefore, we recommend you add the link to your form in the email template, if you want to send it to your subscribers. Embedding forms in any email represents risks and there are very few services that support it, not to mention that there is a high chance end users will not be able to complete the form within the content of the email, as a reply.

Pro Tip: You can enable multiple Mailchimp integrations on the same form.

By default, you log in to your 123FormBuilder account in a one-step verification process: your username and password. If you want to increase the security of your account, you can opt to activate the multi-factor authentication option in My Account which adds an extra step to your login. A multi-factor authentication process implies the presence of two or more verification steps, independent of one another. There’s the information that only the user knows (such as the password of the account), but also the information that only the user owns.

With the option Multi-Factor Authentication Device, you can use an MFA application on your smartphone to scan and generate a code that you can use for each login. The code changes after a period of time, therefore the same code cannot be used twice, as a security precaution.

If you do not own a smartphone, you can use an authentication device for your operating system, such as WinAuth for Windows or Authy. The steps to activate the feature are the same in both cases.

How to use Multi-Factor Authentication Login

To enable the Multi-Factor Authentication Device option, follow the steps below:

1. In your form builder account, go to the My AccountChange Password section, then to Multi-Factor Authentication Device, and click on the Add now button.

Multi-Factor Authentication Device

2. Download an MFA app for your mobile device (we recommend Google Authenticator) and scan the QR code that appears on the screen with your mobile device. You’ll need to scan the QR code only when you use this option for the first time.

Download Google Authenticator for Android | iPhone
Download Authenticator for Windows Phone

3. The email address associated with your 123FormBuilder account will appear partly hidden in the MFA application interface of your mobile device (e.g. jo*****@). Under the email address, you’ll see a 6 digit code and a countdown timer clock on the right.

4. Back in Multi-Factor Authentication Device, enter the code that appears in your mobile device’s MFA interface inside the text box above Activate Code and press the button. Done!

You can disable this option at any time. Return to My AccountAccount DetailsMulti-Factor Authentication Device and click on Disable.

Now when you log in to your 123FormBuilder account, you’ll have to pass two verification steps. One is the one where you need to submit the username and password associated with your account. The next steps will require the 6 digit code that appears in the MFA app of your mobile device. Once you have submitted this code, you’re good to go.

If your 123FormBuilder – Google Drive integration fails to work, check that all your form fields are labeled. If at least one form field hasn’t got a label name, the integration will fail.

Before integrating with Google Drive there are a few things that you should be aware of:

  • Do not delete any form columns.
  • Make test submissions after applying changes, to update on both sides.
  • Selecting a group of cells and sorting/filtering data will break the integration.

Once you have finished applying the changes to your form, disconnect and reconnect to your Google Drive account in the Applications section. Your 123FormBuilder – Google Drive integration should now work accordingly.

You can incorporate more than one field in the same row using our form builder. This feature helps you structure forms precisely as you wish. 

Click and hold the mouse button over a field, drag it to the end of the row, and release the mouse button when you see a blue line.

While navigating with your mouse over the field, you will notice that you have two blue lines for each field: one at the beginning of the field, one at the end of the field. These will help you adjust the field’s size. If you have the label’s placement set to the Left you can also adjust the space between the label and the input box.

You can group two or more fields into a container to resize them quicker. Add two fields to the first row. Now drag the third field below the first field and drop it when the blue line highlights only the first field. To remove fields from the same container, drag a field below another until the blue line crosses the entire width of the form. Now you can resize only that field alone, without influencing the fields next to it.

If you added multiple fields on the same row and they seem too crowded, you can always go to the forms Design, Layout section and increase the Form width.

Form width


Related articles

There are two main reasons why email templates might look weird in your inbox:

1. Form fields have been changed. When building a custom email template in the form builder, you have the possibility to add variables correspoding to form fields. These fields insert user input into the message. For example, if you use the Name variable, this will be replaced, in the actual message, with the form user’s name. Now, if you change form fields, the variables change accordingly, but the email template stays the same (with the old variables), which makes it impossible for it to work properly.

Whenever changing form fields, be sure to make any necessary changes to the custom email template.

2. The email template belongs to another form. Custom email templates are stored in the same place, irrespective of the form they have been built for. In other words, when you create a new email template for a particular form, you’ll be able to view it in the Email Templates list of any form in your account.

Be sure not to apply the email template created for a form to another form. You can give templates suggestive names, so as to remember quickly what forms they belong to.

Some situations might occur when your form is set to accept submissions (only) from your country. Sometimes, you might not be able to view the form yourself. You could be using a public network from the organization or company you are working at, which uses a proxy server to bypass websites that might block your private IP from viewing their content.

Note that only some proxy servers are able to do this but not the ones hosted by your Internet Provider. This is the case for companies that work online to promote and expand their work on a global scale and require special proxy services to bypass certain country filters.

Another factor could be that you’re using an IP blocker installed on your Internet browser that hides your geographical location. Your online form cannot recognize it, therefore it’s blocking any access. If you have restricted your form to accept submissions only from your country, but you cannot access it at all, it’s because your IP address is not visible.

How to fix this?

A first step would be to check if you’re using an IP blocker and disable it. There could also be other factors. You could be using a reserved IP (the Loopback) – the one with 255.xxx.xxx.xxx. This is not actually considered a usable IP to identify your location. IP addresses are unique identities of the device you are using to browse the Internet.

If you’re trying to access the form at work, speak to the network administrator to solve your issue.

Some Internet browsers could be hiding your IP address, browsers such as TOR. If you’re browsing from a home network, look for any installed add-ons which might have blocked or hidden your IP from being detected by other admins from the web.

In conclusion, your IP address contains the code of your country. If you hide it or block it, the form won’t be able to detect from which country you are accessing it. In such cases, it will display the following message:

Access form

Form reports display inaccurate data whenever you change the choice fields of your form, but haven’t updated the reports themselves. If you change the options of your choice fields in the form builder (Single choice, Multiple choice, Dropdowns), click on the Update Report link on the bottom page of your report.

reports display inaccurate data

You’ll need to update each report you use. Start by updating the default report and continue one by one with your customized reports (if you have any). This will avoid your reports from displaying misleading data after you have deleted and changed some choices in your Form Editor.

NationBuilder is a community organizing system, offering solutions for NGOs, activists, and political parties, such as signing new members and volunteers, establishing agendas, and more. You can use the 123FormBuilder – NationBuilder integration to add new people to your nation and even assign certain tags for them.

NationBuilder 123FormBuilder integration

All you need to do is create an online form with the contact details you need, add the NationBuilder application, then match 123FormBuilder fields with NationBuilder tags and/or fields. It’s plain easy and it doesn’t take more than a few minutes to set it up.

Add NationBuilder from the Integrations section of your form and follow the steps below:


Connecting 123FormBuilder to NationBuilder

1. Provide the subdomain of your nation in the application box and click on Customize.

2. If you are already connected to NationBuilder, you will be redirected to the customization phase of the integration. If not, you will be first redirected to NationBuilder to provide your username and password.


Customizing your settings

Here’s how you set up your integration:

1. Select a list from your nation where you want to add new people.

2. Select the Email field which represents the NationBuilder Unique Identifier. We recommend you set the field as required, in order for the integration to work properly.

NationBuilder customize

3. Tick the Update information option to update contacts from your nation if a new entry has been made with an email address that already exists in your nation. Once this option is selected, you can opt to overwrite all existing tags of the current person by ticking the option below. This will delete all assigned tags until that time.

Nation Builder 123FormBuilder integration

Note: Form fields are located on the left. When you add new fields to your form, you will find them here. You can associate tags with your form fields and you can match 123FormBuilder fields with a large number of NationBuilder fields. It is not mandatory for a form field to be associated with a NationBuilder field in order for tags to be picked up at submission.

Nation Builder 123FormBuilder integration

4. Associate tags to your form fields. They will appear in the profile details of each new person added to your nation.

Note: You can associate form fields with the Tags field from NationBuilder. This means user input will be transferred as tags in your nation.

5. Associate 123FormBuilder fields with NationBuilder fields to complete the profile of each person.

Important Note! The following form fields will not appear in the Customize lightbox, even though you’ve added them: Heading, HTML Block, Social, Google Map, and Image. Therefore, you can not associate them with NationBuilder fields.

6. In the Error Handling subsection you can set the email address that will be informed of any errors that might occur upon submission.

Nation Builder Error

7. Lastly, press Save and your integration is complete. From now on, form submissions will add new people to your nation. You can access your contacts in the People section of your NationBuilder account.

Contact

If you want to change some settings of the integration at a later time, simply return to the Integrations section of your form and hit Customize in the NationBuilder application box.


Related articles

By default, the Reports section takes into account all the submissions ever received. When you delete entries from the Submissions section in your form builder account, they are not deleted from your reports. But you can update your Reports to mirror the content in your Submissions section.

Simply go to the Reports section of your form, select the report you want updated and press the Update Report link, on the bottom-right.

Update Form Report

The report will then be updated and will no longer contain more messages than the Submissions table.

In the form builder, in SecurityForm Password Protection you can set a password for your form. Share it with your target audience and forbid access for other submitters. Check the option to Enable password protection for this form, type a password in both fields and you’re ready to go. To make your form available to everyone, deselect the option.

Password protection for form

Important Note

The password cannot exceed more than 15 characters.

Related articles

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?