Knowledge Base

Embedding calendars from your Google Calendar account on web forms can raise the aspect of your business, making your forms look both professional and interactive. To add a Google Calendar to any of your web forms using our form builder, you’ll need to get its iframe code from your Google Calendar account and add it to an HTML Block of your form. Follow these three easy steps to have your Google Calendar embedded on a web form in 123FormBuilder:

1. In your Google Calendar account, go to My calendars → your calendar →  Settings and sharing.

Calendar settings

2. In Calendar Settings, copy the iframe code from the Embed code section.

Calendar embed code

3. In 123FormBuilder, add an HTML Block to your web form, edit it and in Source code paste the iframe code.

HTML Block source code

Don’t forget to hit Ok and afterward Save to finish. If the calendar isn’t embedded accordingly on your form (e.g. it’s stretched outside the form frame), return to Source code and change the values of the parameters width and height. The calendar will resize on your form as soon as you have saved your changes.

Important Note

Your calendar has to be made public in order to see it on your web form. To add an iframe to your forms please contact us. An additional option needs to be enabled from our end.

Combine this trick with our Google Calendar integration app for your web form. The calendar embedded on your form will show all events in real-time. Therefore, it will be much easier for your form visitors to choose which event they want to attend.

If you want to add Javascript code to the Thank You page of your form, you can do that in the AdvancedForm section within the form builder. Tick the box Add a JS script to the Thank You page of your form. Paste the script URL and click Save.

Javascript code to Thank you Page

Upload the JS file on a trusted web server or your own and use the URL where the file is located (e.g. https://mydomain.com/my-javascript.js). There are web services that host JavaScript files for you, but they represent certain risks, such as data corruption or service retirement. That’s the reason why it is best to host them on a web service where you have administrative access.


Related articles

When using quiz form on your 123FormBuilder account, you can opt to add the quiz score of each submission to any custom email templates. To include the quiz score in an email template, firstly you will have to select the template you are interested in.

Emails section

The quiz score variable can be added the same way as the submission input. Click on the plus sign where all your form fields are located and you’ll find the Quiz score variable. Select Quiz score, save your template, and you are done.

Add variable

If you want to make things even easier, you have the option of choosing from different email body templates. By clicking on the Body dropdown, you will find different email body templates available, Quiz template being one of them.

Quiz templte

You can easily add online forms to your Canvas course. From your form builder account, create your desired form or select one of the existing forms in your account. Afterward, go to the PublishEmbed form section and copy the IFrame code. Now it’s time to log in to your Canvas Instructure teacher account.

IFrame 123FormBuilder

After that, go to Courses → Pages and edit one of your pages or create a new one.

Canvas course

Click on the HTML Editor icon from the bottom right side of the content area.

Paste the IFrame code where you want your form to be displayed. To preview the changes, click again on the HTML Editor icon. Then, select Save and you’re all set! You can now start collecting data through your Canvas course.

It’s worth mentioning that the IFrame embed method has a default height of 300px, allowing users to navigate through the form by scrolling it. You can remove the scrollbar specific to this publishing method by increasing the min-height value from the IFrame code.

You can add web forms on any part of your BigCommerce store where their system allows it. For example, you can create a contact web page and include a 123FormBuilder web form which will collect the form data directly from your BigCommerce online store.

To add web forms to your web page you will need to install our 123FormBuilder app. In order to do that, from your home page, access Apps and then Marketplace.

Go to Apps & Integrations and start searching for 123FormBuilder.

BigCommerce web page

Once accessed the app, you will have to click on Get this app and then Install & Launch.

Get this app

Install 123FormBuilder

Start creating your first form and publish it on your webpage. Copy the publishing code from Publish – Embed Methods and paste it into the HTML source code of your webpage.

The form will appear on the live version of your webpage.

Respondents will be able to submit the form and all form submissions will be sent to your 123FormBuilder account, in the Submissions section of your web form.

Create powerful online forms with 123FormBuilder and add them to your WebStarts webpage in quick easy steps. We recommend you use the JavaScript code of your online form located in the PublishEmbed form section of our form builder platform. Whenever you edit the form, the changes will automatically apply to your WebStarts webpage without having to publish it again.

Let’s start by copying the JavaScript code located in Publish -> Embed form section of your online form.

Javascript code 123FormBuilder

In WebStarts, access your webpage in the editor mode and go to Edit → Edit HTML.

Webstarts webpage

To edit the existing code located in the Body section of your page, select the View Source Code tab in the left panel and then edit the code provided as required and then click the OK button. To edit the Head section of your site, be it the Head of the entire website or that of just that page alone, select the appropriately labeled tabs located in the left panel and edit the code as required and then click the OK button.

The online form will be automatically displayed in the page editor. You can adjust the width and height of the widget, as well as its position, to make it look at its best on your webpage. Save your changes and there you have it! Form visitors can now submit your online form directly from your WebStarts webpage.

To adjust the form width, go to Design and expand the Layout section. Here you can adjust the form’s and the page’s width, their padding & the form direction.

You can change the default width to what fits you best. If working with pixels doesn’t come naturally, then you have the option of choosing the width to be calculated in percentages.

Form width

Our form builder offers many build-in theme options that you can choose from. Basically, you can change just about anything on your web form, from text font and color to the style of the submit button.

Additionally, you can go the extra mile and emphasize the look of your web forms with custom CSS codes using our CSS form generator. In this article, we will show you a few alterations that you can bring to your form fields.

First, go to the Design section. Next, click on the Add custom CSS button. Here you can create and paste all your CSS codes to stylize the form.

Add custom CSS

Now that you know where the location of the codes will be, let’s check some general CSS codes:

  • Input – these attributes will change all input fields.
#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

{ 
background-color:#add8e6!important; 
}

With this code, we changed the background color of the input boxes to a light blue color. You can further add as many CSS properties and style your form as you need. Here is the result:

  • Placeholder text – change the color of the information found in an input field. (e.g. Street Address, City, First, Last).
#form div[data-role=control] input::placeholder

{ 
color: #5bd9cc!important; 
}



  • Choices – change the appearance of the choices (Single choice and Multiple choice fields).
#form div[data-role="control"] label[data-role="choice"] span[data-role="option-text"]

{ 
color:#00b300!important; 
font-size:15px; 
font-weight:bold; 
}

Choices CSS
  • Dropdown placeholder text
div[data-ui-role=ui-element][data-type=dropdown]>div[data-role=dropdown-skin]

{ 
color:#7e7e7e!important; 
font-size:11px; 
font-weight:bold; 
font-style:italic; 
}


Dropdown placeholder CSS
  • Buttons – adjust the shape and style of your form buttons with this CSS code.
#form button[data-role]

{ 
font-family: 'Open Sans', sans-serif; 
font-size: 14px; 
font-weight: normal; 
font-style: normal; 
line-height: 2em; 
padding: 0px 15px; 
margin: 0 8px 0 calc(16px / 2); 
border-width: 1px; 
border-style: solid; 
border-radius:50%; 
min-height: calc( 0px + 2em + 35px );
margin-top: 8px; 
}

This code will create rounded buttons. To see the effect click on Preview on the top right corner.

Buttons CSS

  • Label text
#form div[data-role=control] label[data-role=label], #form div[data-role=container][data-type=likert-wrapper] label[data-role=label], #form div[data-role=container][data-type=repeatable] label[data-role=label]

{ 
font-size:18px!important; 
color:#8f98ff!important; 
font-style:italic; 
}


Label text CSS
  • Form Header text
#form>div[data-role=page]>div[data-role=page-header] h1, #form>div[data-role=page]>div[data-role=page-header] h2, #form>div[data-role=page]>div[data-role=page-header] h3, #form>div[data-role=page]>div[data-role=page-header] h4, #form>div[data-role=page]>div[data-role=page-header] h5, #form>div[data-role=page]>div[data-role=page-header] h6

{ 
color:#ac3d2c!important; 
}

Form header CSS
  • HTML Block fields
#form div[data-role=control][data-type=html-block] *

{ 
color:#ac3d2c!important; 
}

HTML block CSS
  • Text content fields
#form div[data-role=control] h1, #form div[data-role=control] h2, #form div[data-role=control] h3, #form div[data-role=control] h4, #form div[data-role=control] h5, #form div[data-role=control] h6

{ 
color:#ac3d2c!important; 
}

Heading CSS
  • Instruction text
#form div[data-role="control"] dt[data-role="instructions"]
{ 
color:#ac3d2c!important; 
}

To change the font for the Thank You page, use this code in the CSS editor of the form builder:

@import url(//fonts.googleapis.com/css?family=Lobster);

body 
{ 
     font-family: 'Lobster', cursive!important; 
}

#id123-thankyou 
{ 
     font-family: 'Lobster'!important; 
}

Replace Lobster with the Google font you want to use and cursive with the type of font used (e.g sans-serif, serif, monospace). You’ll find all the information regarding your font listed under the CSS rules section.

Google fonts

Afterwards, go to the Design section of your online form and click on Add custom CSS. Next, paste the code.

Add custom CSS

Here’s the result:

Thank you page

You can customize every aspect of the web forms that you create with our form builder.

To change the font family for your form inputs, from the Form Editor go to Design. Under Quick setup section, you will find Font option. From here you can change the font family for your entire form.

Font

Learn more about the form customization features we have to offer on our Online Form Decsigner page.

The autofill option is a handy tool to save some time from manually refilling the same information for different forms. It works with any form you build with our form builder.

If you’re a form visitor or you have created a form of your own, the autofill option is always useful. You can save predefined values on your browser for form fields such as name, email, address, country, phone, and so on. However, different browsers have different settings. Follow these easy steps on how to autofill form fields from your browser:


Google Chrome

1. Go to Settings → AutofillAddresses and more.

2. Turn on the Save and fill addresses option.

Chrome autofill form fields

3. Hit Add and fill in the fields with the information you want to predefine.

Google Chrome Add address

Mozilla Firefox

1.  Go to the menu icon and select Settings.

2. Open the Privacy & Security section.

3. Under the History category, select the option to Use custom settings for history from the dropdown.

4. Next, tick the option Remember search and form history.

Mozilla Privacy & Security

5. If Clear history when Firefox closes is selected then click on the Settings button displayed next to the option.

6. Deselect Form & search history.

Mozilla form and search history

If the autofill does not work, check out your browser’s extensions. Antivirus and privacy programs can also clear your form history.


Safari

1. Go to the Settings → Preferences section of your Safari browser.

2. Click on the Autofill tab and select which information should be used.

Safari autofill form fields

Opera

1. Click the settings icon from the top right corner and select Go to full browser settings.

Opera browser settings

2. Collapse the Advanced options menu.

3. In the main view, scroll down to the Autofill section and select Addresses and more.

Opera autofill form fields

4. Turn on the Save and fill addresses option.

Opera Save and fill addresses

5. Hit Add and fill in the fields with the information you want to predefine.


Internet Explorer

1. From the top right corner select the gear icon and go to the Internet Options → Content tab.

2. In the AutoComplete section, click on Settings.

IE Content Autocomplete

3. Enable the autocomplete option for Forms and Searches, then press OK.

IE Autocomplete settings

Microsoft Edge

1. Click the menu icon on the top right corner and go to Settings.

2. In the Profiles section, select Personal info.

Edge Profiles

3. Turn on the Save and fill personal info option.

4. Press the Add personal info button to fill in the fields with the details you wish to autofill.

Edge autofill form fields

Important Note

The autofill feature will be activated on your form fields once you have typed the first letter of the data you have saved on your browser (e.g. the first letter of your first name).

In order to align the Submit button on your form, all you have to do is to select the button in the first place.

In the left-side panel you will find different settings related to the Submit button. Under Alignment dropdown, you have several options: center, left, right and auto.

Alignment submit button

Related articles:

How to add a Reset button to the 123FormBuilder form

How to add a Print button to the 123FormBuilder form

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?