Below, you’ll find a detailed guide on how to add the Quillforms Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Quillforms Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Quillforms Plugin and the shortcodes it provides:
"Quill Forms is a versatile WordPress plugin, offering a superior alternative to Typeform. It offers functionality for creating conversational multi-step forms, surveys, quizzes, cost estimations, and donation forms."
- [quillforms]
- [quillforms-popup]
Quillforms [quillforms] Shortcode
The Quillforms shortcode is a powerful tool that allows you to embed a form into your WordPress site. The shortcode takes parameters for the form’s ID, width, and height. If these parameters are not specified, the plugin defaults to a width of 100% and a minimum height of 500px. The form’s maximum height is automatically adjusted based on the content. The shortcode also checks if the given ID is valid and belongs to a Quill form. If the ID is invalid, it returns an error message. Finally, the shortcode generates an iframe to display the form, ensuring a seamless integration with your site’s design.
Shortcode: [quillforms]
Parameters
Here is a list of all possible quillforms shortcode parameters and attributes:
id– The unique identifier of the form.width– Determines the width of the form, default is 100%.height– Sets the height of the form, no default value.minHeight– The minimum height of the form, defaults to “500px” if not set.maxHeight– The maximum height of the form, defaults to ‘auto’ if not set.
Examples and Usage
Basic example – Utilizing the shortcode to display a form using the form’s ID:
[quillforms id=1 /]Advanced examples
Using the shortcode to display a form by specifying the form’s ID and setting a custom width:
[quillforms id=1 width='70%' /]Using the shortcode to display a form by specifying the form’s ID and setting custom minimum and maximum heights:
[quillforms id=1 minHeight='300px' maxHeight='800px' /]Using the shortcode to display a form by specifying the form’s ID, setting a custom width and custom minimum and maximum heights:
[quillforms id=1 width='70%' minHeight='300px' maxHeight='800px' /]PHP Function Code
In case you have difficulties debugging what causing issues with [quillforms] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('quillforms', array( $this, 'handler' ));Shortcode PHP function:
function handler( $atts )
{
$atts = shortcode_atts(
array(
'id' => null,
'width' => '100%',
),
$atts,
'quillforms'
);
$id = (int) $atts['id'];
$width = isset($atts['width']) ? $atts['width'] : '100%';
$height = isset($atts['height']) ? $atts['height'] : null;
$min_height = isset($atts['minHeight']) ? $atts['minHeight'] : null;
$max_height = isset($atts['maxHeight']) ? $atts['maxHeight'] : null;
if(!$min_height && $height) {
$min_height = $height;
}
if (!$min_height) {
$min_height = "500px";
}
if(!$max_height && $height) {
$max_height = $height;
}
if(!$max_height) {
$max_height = 'auto';
}
if ('quill_forms' !== get_post_type($id) ) {
return 'Invalid form id';
}
$src = get_permalink($id);
$src = add_query_arg(
array(
'quillforms-shortcode' => true,
'quillforms-redirection' => 'top', // @deprecated 1.11.1
),
$src
);
// wp_enqueue_script('quillforms-iframe-resizer');
wp_enqueue_script('quillforms-iframe-resizer-implementer');
return "<iframe data-max-height='$max_height' class='quillforms-iframe' scrolling='no' src='$src' width='$width' style='border:0;min-height:$min_height; max-height: $max_height'></iframe>";
}
Code file location:
quillforms/quillforms/includes/class-shortcode.phpQuillforms [quillforms-popup] Shortcode
The Quillforms Popup shortcode allows you to create a customizable button to trigger a popup form. It lets you define button aesthetics and form ID.
Shortcode: [quillforms-popup]
Parameters
Here is a list of all possible quillforms-popup shortcode parameters and attributes:
id– Unique identifier of the form to displaybuttontitle– Text displayed on the popup buttonbuttonbackgroundcolor– Background color of the popup buttonbuttontextcolor– Color of the text on the popup buttonbuttonborderradius– Roundness of the popup button’s cornersbuttonborderwidth– Thickness of the popup button’s borderbuttonbordercolor– Color of the popup button’s borderbuttonfontsize– Size of the text on the popup buttonbuttonpadding– Space between the text and edges of the popup button
Examples and Usage
Basic example – Displaying a popup form with default parameters.
[quillforms-popup id=1 /]Advanced examples – Customizing the popup form button and form style.
Displaying a popup form with a customized button title, background color, text color, border radius, and border width.
[quillforms-popup id=1 buttontitle="Click Me" buttonbackgroundcolor="#ff0000" buttontextcolor="#ffffff" buttonborderradius="50" buttonborderwidth="2" /]Displaying a popup form with a customized button border color, font size, and padding.
[quillforms-popup id=1 buttonbordercolor="#0000ff" buttonfontsize="20" buttonpadding="15px 30px" /]Displaying a popup form with all customizable parameters.
[quillforms-popup id=1 buttontitle="Submit" buttonbackgroundcolor="#00ff00" buttontextcolor="#000000" buttonborderradius="30" buttonborderwidth="1" buttonbordercolor="#ff00ff" buttonfontsize="18" buttonpadding="10px 25px" /]PHP Function Code
In case you have difficulties debugging what causing issues with [quillforms-popup] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('quillforms-popup', array( $this, 'popup_handler' ));Shortcode PHP function:
function popup_handler( $atts ) {
$atts = shortcode_atts(
array(
'id' => null,
'buttontitle' => 'Open Form',
'buttonbackgroundcolor' => '#000000',
'buttontextColor' => '#ffffff',
'buttonborderradius' => '24',
'buttonborderwidth' => '0',
'buttonbordercolor' => '#000000',
'buttonfontsize' => '16',
'buttonpadding' => '10px 20px',
),
$atts,
'quillforms-popup'
);
$id = (int) $atts['id'];
$buttonTitle = isset($atts['buttontitle']) ? $atts['buttontitle'] : 'Open Form';
$buttonBackgroundColor = isset($atts['buttonbackgroundcolor']) ? $atts['buttonbackgroundcolor'] : '#000000';
$buttonTextColor = isset($atts['buttontextcolor']) ? $atts['buttontextcolor'] : '#ffffff';
$buttonBorderRadius = isset($atts['buttonborderradius']) ? $atts['buttonborderradius'] : '24';
$buttonBorderWidth = isset($atts['buttonborderwidth']) ? $atts['buttonborderwidth'] : '0';
$buttonBorderColor = isset($atts['buttonbordercolor']) ? $atts['buttonbordercolor'] : '#000000';
$buttonFontSize = isset($atts['buttonfontsize']) ? $atts['buttonfontsize'] : '16';
$buttonPadding = isset($atts['buttonpadding']) ? $atts['buttonpadding'] : '10px 20px';
$permalink = get_permalink($id);
if ('quill_forms' !== get_post_type($id) ) {
return 'Invalid form id';
}
$src = add_query_arg(
array(
'quillforms-shortcode' => true,
'quillforms-redirection' => 'top', // @deprecated 1.11.1
),
$permalink
);
wp_enqueue_script('quillforms-popup');
wp_enqueue_style('quillforms-popup-style');
return '<div class="quillforms-popup-button-wrapper">
<a class="quillforms-popup-button" style="
background-color: ' . $buttonBackgroundColor . ';
color: ' . $buttonTextColor . ';
border-radius: ' . $buttonBorderRadius . 'px;
border-width: ' . $buttonBorderWidth . 'px;
border-color: ' . $buttonBorderColor . ';
font-size: ' . $buttonFontSize . 'px;
padding: ' . $buttonPadding . ';
text-decoration: none;
cursor:pointer;
"
data-url="' . $src . '"
data-formId="' . $id . '"
>
' . $buttonTitle . '
</a>
<div class="quillforms-popup-overlay" data-formId="' . $id . '">
<div class="quillforms-popup-container">
<div class="quillforms-popup-close">
<svg fill="currentColor" height="32" width="32" viewBox="0 0 24 24" style="display: inline-block; vertical-align: middle;"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
</div>
<div class="quillforms-popup-iframe-wrapper">
<iframe data-no-lazy="true" src="' . $src . '" width="100%" height="100%" style="border:0;max-height: auto !important; max-width: auto !important;"></iframe>
<div class="quillforms-popup-loader"><div class="quillforms-loading-circle"></div></div>
</div>
</div>
</div>
</div>';
}
Code file location:
quillforms/quillforms/includes/class-shortcode.phpConclusion
Now that you’ve learned how to embed the Quillforms Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply