Adding a Contact Form
If you're looking to embed a contact form in your 4ormat site, you can do so using an external form generator and embed the HTML in a Simple Page.
For the purposes of this tutorial, we're going to use the form creation tools provided by WuFoo.com - they offer free and paid plans for their forms, offering both flexibility and ease of administration.
You'll want to sign up for your WuFoo.com account. After this is complete, visit the Forms area, where you'll be able to create a new form.
You can add fields, customize the text, and determine the kind of input you want your form to have. In this example, our form is fairly simple, providing fields for first and last name, date, phone number and email. All of these fields are predefined at WuFoo.
After saving your form, you'll be presented with the option to return to your Form Manager, which is what we want to do now.
From your Form Manager, select the "code" option on your newly created form.
You'll now want to select "Embed Form Code" and then copy the entire contents of the Javascript version to your clipboard.
Go to your Pages interface on 4ormat. At the bottom of the page, you'll want to select "Add Page" and choose the Simple Page type. Give your page a name like "Contact".
Click your new Simple Page to edit it. From the Simple Page editor, add a new element, and then select the HTML element type.
In the text box, paste the Javascript embed code you copied to your clipboard earlier, and choose save.
You're done! You'll now have a fully functional contact form on your Simple Page.
We hope this tutorial has been useful for you, and thanks for using 4ormat!
Additional Notes:
If for some reason you cannot see the color of the fonts on your Wufoo form you will need to set the form background to white. In your Website Design Customizer you will need to click "Advanced" and inside your "User CSS" add this line. If you click "Update" this will be applied to your preview. Once your satisfied with the result click "Apply to my website" Your website form should now have a white background. (Alternatively you can reply #ffffff with another HEX color value for a different colored background)
.embed form { background: #ffffff; }