HTML Block
The simplest way: add a Custom HTML block in the WordPress editor:<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
<input type="text" name="_gotcha" style="display:none">
<p>
<label for="name">Name</label><br>
<input type="text" id="name" name="name" required style="width:100%">
</p>
<p>
<label for="email">Email</label><br>
<input type="email" id="email" name="email" required style="width:100%">
</p>
<p>
<label for="message">Message</label><br>
<textarea id="message" name="message" rows="4" required style="width:100%"></textarea>
</p>
<p>
<button type="submit">Send Message</button>
</p>
</form>
Shortcode
Create a reusable shortcode by adding this to your theme’s functions.php:functions.php
function formbnb_contact_form($atts) {
$atts = shortcode_atts(array(
'org' => '',
'slug' => '',
'redirect' => '',
), $atts);
if (empty($atts['org']) || empty($atts['slug'])) {
return '<p>Error: FormBnB organization code and form slug are required</p>';
}
$redirect = $atts['redirect'] ?
'<input type="hidden" name="_next" value="' . esc_url($atts['redirect']) . '">' : '';
return '
<form action="https://api.formbnb.com/f/' . esc_attr($atts['org']) . '/' . esc_attr($atts['slug']) . '" method="POST" class="formbnb-form">
<input type="text" name="_gotcha" style="display:none">
' . $redirect . '
<p><label>Name</label><input type="text" name="name" required></p>
<p><label>Email</label><input type="email" name="email" required></p>
<p><label>Message</label><textarea name="message" rows="4" required></textarea></p>
<p><button type="submit">Send</button></p>
</form>
';
}
add_shortcode('formbnb_form', 'formbnb_contact_form');
[formbnb_form org="YOUR_ORG" slug="YOUR_FORM"]
Styling
Add custom CSS in Appearance → Customize → Additional CSS:.formbnb-form input,
.formbnb-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
}
.formbnb-form button {
background: #0073aa;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
.formbnb-form button:hover {
background: #005a87;
}