Contact Form With Documentation Widget

Contact form widget
Contact Form With Documentation Widget

Embed our contact form widget into your website

What you can change

  1. Widget position
  2. Widget trigger text, icon and shape
  3. Widget color accent
  4. Widget headers text
  5. Form fields and labels
  6. Submit button text
  7. Info page text
  8. Widget height and width
  9. Widget fonts
  10. Documentation list (1 level hierarchy)

Supported form fields

  1. Text fields
  2. Radio button fields
  3. Dropdown fields (Select element)
  4. Text area fields

Add-ons required: Ajax submissions add-ons

How to use

Put this following code before the </body> closing tag
<div id="fcbs-widget__documentation">
<script>
window.fcbs__docs_widget = {
form_endpoint: '{your-form-endpoint}',
style: {
widgetOnRight: true, // boolean, true = widget on right, false = widget on left
buttonIcon: 'help', // possible value: book, help, bubble
widgetHeight: '400px', // you can it too 100% for auto height
widgetWidth: '290px',
borderRadiusWidgetTrigger: '50px',
fontPrimary: "Arial, Helvetica, sans-serif",
fontSecondary: "Arial, Helvetica, sans-serif",
colorPrimary: "#48bb78",
colorPrimaryDark: "#38a169",
colorPrimaryDarker: "#2f855a",
},
text: {
widgetTrigerText: 'Help',
documentationPageTitle: 'Quick Help',
documentationContactButtonText: 'Leave us a message',
contactPageTitle: 'Leave us a message',
contactPageSubmitText: 'Send',
successfullSubmitTitleText: 'Success',
infoPageTitle: 'Infox',
infoPageContent: 'xHello there, I aim to respond within 48 hours, I will get back to you as quickly as possible :) </br></br> By the way, this widget is powered by Formcubes. You can create powerful form utilizing <a href="https://docs.formcubes.com/advanced-usage/ajax-form" target="_blank">Ajax Submissions</a>.'
},
docs: {
'Some docs header': [
{
'tittle': "Some documnetation 1",
'url': '#'
},
{
'tittle': "Some documenation 2",
'url': '#'
},
],
'Some other docs header': [
{
'tittle': "Some documentation 3",
'url': '#'
},
{
'tittle': "Some documentation 4",
'url': '#'
}
]
// etc ...
},
fields: [
{
fieldType: 'text-field',
label: 'Name',
required: false,
type: 'text',
name: 'name'
},
{
fieldType: 'text-field',
label: 'Email',
required: true,
type: 'email',
name: 'email'
},
{
fieldType: 'textarea-field',
label: 'Message',
rows: '4',
required: true,
name: 'message'
}
]
}
</script>

<script src="https://dih3bte8nabvd.cloudfront.net/documentation-widget-v1.js"></script>

</div>

Live example

You can edit the code below. Click here to open the code editor in fullscreen.

How to customize

Customize widget's style
To customize widget's style (color, height, width, font, position, border radius) you need to change window.fcbs__docs_widget.style property's value.

Customize widget's text
To customize widget's text you need to change window.fcbs__docs_widget.text property's value.

Customize contact form's fields
This widget support text fields, radio button fields, dropdown fields and textarea fields. To customize widget's fields you need to change window.fcbs__docs_widget.fields array's elements. The array should contains objects with the following structure:

  1. Input text field
    /*
    INPUT TEXT FIELD, HTML version :
    <label for="email">Email :</label>
    <input type="email" name="email" required>
    */


    window.fcbs__docs_widget = {
    fields: [
    {
    fieldType: 'text-field',
    label: 'Email', // string, label element
    required: true, // boolean, input element's required attribute
    type: 'email', // string, input element's type attribute, for example: name, email, number, etc
    name: 'email' // string, input element's name attribute
    }
    ]
    }
  2. Text area field
    /*
    TEXT AREA FIELD, HTML version :
    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="5" required></textarea>
    */


    window.fcbs__docs_widget = {
    fields: [
    {
    fieldType: 'textarea-field',
    label: 'Message', // string, label element
    rows: '5', // string, textarea's rows attribute
    required: true, // boolean, textarea's required attribute
    name: 'message' // string, textarea's name attribute
    }
    ]
    }
  3. Radio button field
    /*
    RADIO BUTTON FIELD, HTML version :
    <fieldset>
    <label>Gender :</label>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female" required>
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other" required>
    <label for="other">Other</label>
    </fieldset>
    */


    window.fcbs__docs_widget = {
    fields: [
    {
    fieldType: 'radio-field',
    label: 'Gender', // string, label element
    required: true, // boleean, input element's required attribute
    name: 'gender', // string, input element's name attribute
    options: [ // object, radio button options
    {
    label: 'Male', // string, input element's label attribute
    value: 'male' // string, input element's value attribute
    },
    {
    label: 'Female',
    value: 'female'
    },
    {
    label: 'Other',
    value: 'other'
    }
    ]
    }
    ]
    }
  4. Dropdown field (Select element)
    /*
    DROWDOWN FIELD (SELECT ELEMENT), HTML version :
    <label>I'd like talk to : </label>
    <select name="subject" required>
    <option value="">Select options...</option>
    <option value="sales">Speak with sales representative</option>
    <option value="technical issue">Request technical issue</option>
    <option value="billing">Resolve a billing issue</option>
    </select>
    */


    window.fcbs__docs_widget = {
    fields: [
    {
    fieldType: 'select-field',
    label: "I'd like to", // string, label element
    required: true, // boleean, select element's required attribute
    name: 'subject', // string, select element's name attribute
    options: [ // object, option elements
    {
    label: 'Select options...', // string, option element's label attribute
    value: '' // string, option element's value attribute
    },
    {
    label: 'Speak with sales representative',
    value: 'sales'
    },
    {
    label: 'Request technical issue',
    value: 'technical issue'
    },
    {
    label: 'Resolve a billing issue',
    value: 'billing'
    }
    ]
    }
    ]
    }

Customized widget example

You can edit the code below. Click here to open the code editor in fullscreen.

Try free for 7 days

Start collecting submissions with a free 7-day trial.
No credit card required.