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.
2. In Calendar Settings, copy the iframe code from the Embed code section.
3. In 123FormBuilder, add an HTML Block to your web form, edit it and in Source code paste the iframe 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 Advanced → Form 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.
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.
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.
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.
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 Publish → Embed form section and copy the IFrame code. Now it’s time to log in to your Canvas Instructure teacher account.
After that, go to Courses → Pages and edit one of your pages or create a new one.
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.
Once accessed the app, you will have to click on Get this app and then Install & Launch.
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 Publish → Embed 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.
In WebStarts, access your webpage in the editor mode and go to Edit → Edit HTML.
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.
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.
Now that you know where the location of the codes will be, let’s check some general CSS codes:
#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:
#form div[data-role=control] input::placeholder { color: #5bd9cc!important; }
#form div[data-role="control"] label[data-role="choice"] span[data-role="option-text"] { color:#00b300!important; font-size:15px; font-weight:bold; }
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; }
#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.
#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; }
#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 div[data-role=control][data-type=html-block] * { color:#ac3d2c!important; }
#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; }
#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.
Afterwards, go to the Design section of your online form and click on Add custom CSS. Next, paste the code.
Here’s the result:
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.
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:
1. Go to Settings → Autofill → Addresses and more.
2. Turn on the Save and fill addresses option.
3. Hit Add and fill in the fields with the information you want to predefine.
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.
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.
If the autofill does not work, check out your browser’s extensions. Antivirus and privacy programs can also clear your form history.
1. Go to the Settings → Preferences section of your Safari browser.
2. Click on the Autofill tab and select which information should be used.
1. Click the settings icon from the top right corner and select Go to full browser settings.
2. Collapse the Advanced options menu.
3. In the main view, scroll down to the Autofill section and select Addresses and more.
4. Turn on the Save and fill addresses option.
5. Hit Add and fill in the fields with the information you want to predefine.
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.
3. Enable the autocomplete option for Forms and Searches, then press OK.
1. Click the menu icon on the top right corner and go to Settings.
2. In the Profiles section, select Personal info.
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.
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.
Related articles:
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.