Contact Form Widget

Contact form widget
Contact Form Widget

Embed our contact form widget into your website

What you can change

  1. Widget color accent
  2. Widget headers text
  3. Form fields and labels
  4. Submit button text
  5. Info page text
  6. Widget height and width
  7. Widget fonts

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_chat_v1">
<script>

window.fcbs__widget_chat_v1 = {
form_endpoint_url: "you-form-endpoint-here", // change with your form endpoint
style: {
widgetOnRight: true, // boolean, true = widget on right, false = widget on left
widgetHeight: '400px', // you can change to "100%" for autatic height
widgetWidth: '290px',
fontPrimary: "Arial, Helvetica, sans-serif",
fontSecondary: "Arial, Helvetica, sans-serif",
colorPrimary: "#805ad5",
colorPrimaryDark: "#6b46c1",
colorPrimaryDarker: "#553c9a",
},
text: {
contactPageTitle: 'Leave us a message',
contactPageSubmitText: 'Send',
successfullSubmitTitleText: 'Success',
infoPageTitle: 'Info',
infoPageContent: 'Hello 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>.'
},
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/contact-form-widget-v1.js"> </script>
</div>

Live example

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

How to customize

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

Customize widget's text
To customize widget's text you need to change window.fcbs__widget_chat_v1.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__widget_chat_v1.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__widget_chat_v1 = {
    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: text, email, number
    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__widget_chat_v1 = {
    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__widget_chat_v1 = {
    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
    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__widget_chat_v1 = {
    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 inner HTML
    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.