![]() Enter Name Attributesįields that include options such as Drop Down and Checkbox elements, Values will need to be established in Site Designer to match every selection.įor example, the Drop Down for Origin offers a selection of countries to choose from. The selected element name value is entered in Site Designer under the Element pane > Selected Element Properties > Name. So watch out for capitalizations and dashes. They must be entered into Site Designer exactly as you have formatted them in Web Form Builder. The name value attributes that were applied within the Web Form Builder name field will be added to the Site Designer form to sync them together. This makes the form in Site Designer to recognize the "required" field validation. Action: You will need to use the published url from Web Form Builder.Select the Form Container using the Element Tree and apply these settings: Form Element Structure STEP 3: Combine Site Designer with Web Form Builder’s scriptįrom the Element pane > Element Tree setup the form endpoint options. ![]() You can see this structure of elements on the Element pane > Element Tree. When crafting a form in Site Designer, the form elements need to be wrapped within a Form Container element. Use background, apply effects, use mouseover controls - go wild! The app unlocks countless style controls so that you can build highly customizable forms that match your site. With Site Designer you can use the Styles pane to format the appearance of the form elements. In the Roasters template you’ll find the stylish form on the enterprise.html page with the same exact form elements that Web Form Builder has. STEP 2: Craft a beautiful form in Site Designer To upload to S-Drive go to Settings > Form Publishing > then log into your CoffeeCup account. Lastly, you’ll need to publish your form to S-Drive (or to a third party server). If desired, configure the Confirm Email and Notification to have the form send emails for each submission. Otherwise the user will be redirected to the Web Form Builder form page with no way back to the actual site. Under the Confirm Page section select the URL Redirection this way you can redirect your audience to a custom designed ‘Thank You page’ within your Site Designer project. ![]() Here you will configure what actions the form will take once someone submits the form. A Checkboxes with the attribute name: promotions-email.A Checkboxes element with the attribute name: privacy-policy.A Upload File element with the attribute name: upload-file.A Text Area element with the attribute name: textarea.A Drop-Down field with the attribute name: select-quantity.A Drop-Down field with the attribute name: select-origin.A Text Field with the attribute name: vat-number.A Text Field with the attribute name: company-name.A Email Address element with the attribute name: email.A Text Field with the attribute name: last-name.A Text Field with the attribute name: name.The Name Valueįor example, the form gets 11 elements added to it: For example, the Text Field for name input box we use the value ‘name’. When adding entries in Web Form Builder, under Properties > Name you will enter a name value for the selected field. Advanced controls such as the Show Element property will now work for this. While you create the form, please keep in mind these steps will only work with simple data collection forms. Simply add the same fields that are listed in your Site Designer project. All you need is a mirrored version for the processing script. The design part will be done in the Site Designer. Don’t worry about adding styles or tweaking spacing. Your form doesn’t have to look fancy in Web Form Builder. Drag and drop in all the elements you need to collect the information from your audience. The first step is to build the basic layout for your form in Web Form Builder. Roasters-Form.fb Site Designer Project: Roasters-Example.rsd Build a basic, unstyled form in Web Form Builder. Now we’ve already done all the steps for you in these project files, however, below we’ll outline what actions were taken so that you can implement them with any other Site Designer forms you build. The project files for Site Designer and Web Form Builder are available below. The process is pretty quick and easy too! We’ll demonstrate how to do this using the stunning Roasters template. You can generate a processing script using Web Form Builder that will work with your custom form design. Not code proficient? We’ve got you covered. This means you will need to sync up a processing script for the form to function. With Site Designer it is possible to construct stunning web forms that look good on any size screen or device.įorms crafted in Site Designer are front-end designs.
0 Comments
Leave a Reply. |